add dueDate, fix icons, add CSV export, UI fixes

buntspecht-frontend/src/app/pages/turnovers/manage/manage.page.html

@@ -1,5 +1,5 @@
 <div class="flex column fill">
-    <div class="flex wrap filter-container">
+    <div class="flex wrap middle filter-container">
         <a mat-icon-button (click)="filterOpen=!filterOpen" title="{{'turnovers.filter' | i18n}}"
             [color]="filterOpen ? 'primary': 'accent'">
             <mat-icon>filter_alt</mat-icon>
@@ -8,12 +8,12 @@
         @if(filterOpen) {
         <form class="flex wrap filter">
             <mat-form-field class="margin">
-                <mat-label>{{'turnovers.filter.created' | i18n}}</mat-label>
+                <mat-label>{{'turnovers.filter.dueDate' | i18n}}</mat-label>
                 <mat-date-range-input [rangePicker]="picker">
-                    <input matStartDate placeholder="{{'turnovers.filter.created.from' | i18n}}"
+                    <input matStartDate placeholder="{{'turnovers.filter.dueDate.from' | i18n}}"
                         [value]="turnovers && turnovers.filter && turnovers.filter.from"
                         (dateChange)="setFilter('from', $event.value && $event.value.toISOString() || undefined)">
-                    <input matEndDate placeholder="{{'turnovers.filter.created.to' | i18n}}"
+                    <input matEndDate placeholder="{{'turnovers.filter.dueDate.to' | i18n}}"
                         [value]="turnovers && turnovers.filter && turnovers.filter.to"
                         (dateChange)="setFilter('to', $event.value && $event.value.endOf('day').toISOString() || undefined)">
                 </mat-date-range-input>
@@ -47,8 +47,12 @@
             </mat-form-field>
         </form>
         }
+        <span class="spacer"></span>
+        <a class="margin" mat-icon-button (click)="export()" title="{{'turnovers.export' | i18n}}" color="primary" [disabled]="!turnovers.total">
+            <mat-icon>file_download</mat-icon>
+        </a>
     </div>
 
-    <ui-turnovers class="flex column grow" [turnovers]="turnovers" (page)="applyPage($event)" (sort)="applySort($event)"
-        [username]="true"></ui-turnovers>
+    <ui-turnovers #uiTurnovers class="flex column grow" [turnovers]="turnovers" (page)="applyPage($event)"
+        (sort)="applySort($event)" [username]="true"></ui-turnovers>
 </div>

buntspecht-frontend/src/app/pages/turnovers/manage/manage.page.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild } from '@angular/core';
 import { FormControl } from '@angular/forms';
 import { PageEvent } from '@angular/material/paginator';
 import { Sort } from '@angular/material/sort';
@@ -6,6 +6,7 @@ import { ActivatedRoute, Params, Router } from '@angular/router';
 import { debounceTime, Observable, switchMap } from 'rxjs';
 import { TurnoverManagementService } from 'src/app/services/turnover.management.service';
 import { UserManagementService } from 'src/app/services/user.management.service';
+import { UiTurnovers } from 'src/app/ui/turnovers/turnovers.ui';
 
 @Component({
   selector: 'page-turnovers-manage',
@@ -15,13 +16,15 @@ import { UserManagementService } from 'src/app/services/user.management.service'
 export class PageTurnoversManage implements OnInit {
 
   turnovers: any;
-  sort: string = "created";
+  sort: string = "dueDate";
   descending: boolean = true;
   filterOpen: boolean = false;
 
   users: Observable<any>;
   usersFormControl = new FormControl();
 
+  @ViewChild('uiTurnovers') uiTurnovers: UiTurnovers;
+
   constructor(
     private turnoverManagementService: TurnoverManagementService,
     private userManagementService: UserManagementService,
@@ -104,7 +107,7 @@ export class PageTurnoversManage implements OnInit {
       params['o'] = this.turnovers.offset;
     }
 
-    if (this.sort != 'created') {
+    if (this.sort != 'dueDate') {
       params['s'] = this.sort;
     }
 
@@ -134,7 +137,7 @@ export class PageTurnoversManage implements OnInit {
   }
 
   applySort(event: Sort) {
-    this.sort = event.direction ? event.active : 'created';
+    this.sort = event.direction ? event.active : 'dueDate';
     this.descending = event.direction !== 'asc';
     this.update();
   }
@@ -150,4 +153,21 @@ export class PageTurnoversManage implements OnInit {
       this.update();
     }
   }
+
+  export() {
+    let rows = this.uiTurnovers.getCsvRows();
+    if (rows.length) {
+      let csvContent = "data:text/csv;charset=utf-8,"
+        + rows.map(e => e.join(";")).join("\n");
+
+      var encodedUri = encodeURI(csvContent);
+      var link = document.createElement("a");
+      link.setAttribute("href", encodedUri);
+      link.setAttribute("download", "export.csv");
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+    }
+  }
+
 }

buntspecht-frontend/src/app/pages/turnovers/turnovers.page.html

@@ -8,12 +8,12 @@
         @if (filterOpen) {
         <form class="flex wrap filter">
             <mat-form-field class="margin">
-                <mat-label>{{'turnovers.filter.created' | i18n}}</mat-label>
+                <mat-label>{{'turnovers.filter.dueDate' | i18n}}</mat-label>
                 <mat-date-range-input [rangePicker]="picker">
-                    <input matStartDate placeholder="{{'turnovers.filter.created.from' | i18n}}"
+                    <input matStartDate placeholder="{{'turnovers.filter.dueDate.from' | i18n}}"
                         [value]="turnovers && turnovers.filter && turnovers.filter.from"
                         (dateChange)="setFilter('from', $event.value && $event.value.toISOString() || undefined)">
-                    <input matEndDate placeholder="{{'turnovers.filter.created.to' | i18n}}"
+                    <input matEndDate placeholder="{{'turnovers.filter.dueDate.to' | i18n}}"
                         [value]="turnovers && turnovers.filter && turnovers.filter.to"
                         (dateChange)="setFilter('to', $event.value && $event.value.endOf('day').toISOString() || undefined)">
                 </mat-date-range-input>
@@ -34,8 +34,12 @@
             </mat-form-field>
         </form>
         }
+        <span class="spacer"></span>
+        <a class="margin" mat-icon-button (click)="export()" title="{{'turnovers.export' | i18n}}" color="primary" [disabled]="!turnovers.total">
+            <mat-icon>file_download</mat-icon>
+        </a>
     </div>
 
-    <ui-turnovers class="flex column grow" [turnovers]="turnovers" [overview]="overview" (page)="applyPage($event)"
+    <ui-turnovers #uiTurnovers class="flex column grow" [turnovers]="turnovers" [overview]="overview" (page)="applyPage($event)"
         (sort)="applySort($event)"></ui-turnovers>
 </div>

buntspecht-frontend/src/app/pages/turnovers/turnovers.page.ts

@@ -1,11 +1,9 @@
-import { Component, OnInit } from '@angular/core';
-import { FormControl } from '@angular/forms';
+import { Component, OnInit, ViewChild } from '@angular/core';
 import { PageEvent } from '@angular/material/paginator';
 import { Sort } from '@angular/material/sort';
 import { ActivatedRoute, Params, Router } from '@angular/router';
-import { debounceTime, Observable, switchMap } from 'rxjs';
 import { TurnoverService } from 'src/app/services/turnover.service';
-import { UserManagementService } from 'src/app/services/user.management.service';
+import { UiTurnovers } from 'src/app/ui/turnovers/turnovers.ui';
 
 @Component({
   selector: 'page-turnovers',
@@ -16,11 +14,13 @@ export class PageTurnovers implements OnInit {
 
   turnovers: any;
   overview: any[];
-  sort: string = "created";
+  sort: string = "dueDate";
   descending: boolean = true;
   filterOpen: boolean = false;
   init: boolean = true;
 
+  @ViewChild('uiTurnovers') uiTurnovers: UiTurnovers;
+
   constructor(
     private turnoverService: TurnoverService,
     private router: Router,
@@ -102,7 +102,7 @@ export class PageTurnovers implements OnInit {
       params['o'] = this.turnovers.offset;
     }
 
-    if (this.sort != 'created') {
+    if (this.sort != 'dueDate') {
       params['s'] = this.sort;
     }
 
@@ -132,7 +132,7 @@ export class PageTurnovers implements OnInit {
   }
 
   applySort(event: Sort) {
-    this.sort = event.direction ? event.active : 'created';
+    this.sort = event.direction ? event.active : 'dueDate';
     this.descending = event.direction !== 'asc';
     this.update();
   }
@@ -148,4 +148,20 @@ export class PageTurnovers implements OnInit {
       this.update();
     }
   }
+
+  export() {
+    let rows = this.uiTurnovers.getCsvRows();
+    if (rows.length) {
+      let csvContent = "data:text/csv;charset=utf-8,"
+        + rows.map(e => e.join(";")).join("\n");
+
+      var encodedUri = encodeURI(csvContent);
+      var link = document.createElement("a");
+      link.setAttribute("href", encodedUri);
+      link.setAttribute("download", "export.csv");
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+    }
+  }
 }