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

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

@@ -29,9 +29,7 @@
                 </mat-card-content>
                 <mat-card-actions>
                     <button type="submit" (click)="loginForm.submit()" mat-raised-button color="primary"
-                        [disabled]="loginForm.invalid">{{'login' |
-                        i18n}}<mat-icon style="font-size: 1em;">open_in_new
-                        </mat-icon></button>
+                        [disabled]="loginForm.invalid"><mat-icon>open_in_new</mat-icon>{{'login' | i18n}}</button>
                 </mat-card-actions>
             </mat-card>
         </form>

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

@@ -24,12 +24,12 @@
         @if (filterOpen) {
         <form class="flex wrap filter">
             <mat-form-field class="margin">
-                <mat-label>{{'management.filter.created' | i18n}}</mat-label>
+                <mat-label>{{'management.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]="entries && entries.filter && entries.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]="entries && entries.filter && entries.filter.to"
                         (dateChange)="setFilter('to', $event.value && $event.value.endOf('day').toISOString() || undefined)">
                 </mat-date-range-input>
@@ -50,6 +50,10 @@
             </mat-form-field>
         </form>
         }
+        <span class="spacer"></span>
+        <a class="margin" mat-icon-button (click)="export()" title="{{'turnovers.export' | i18n}}" color="primary" [disabled]="!entries.total">
+            <mat-icon>file_download</mat-icon>
+        </a>
     </div>
 
     @if (entries && entries.total == 0) {
@@ -123,7 +127,7 @@
             <ng-container matColumnDef="expanded">
                 <td mat-cell *matCellDef="let entry" [attr.colspan]="columns.length">
                     @if (expanded && entries.total && entries.filter && entries.filter.username == entry[0]) {
-                    <ui-turnovers class="flex column fill" [turnovers]="turnovers" (page)="applyTurnoverPage($event)"
+                    <ui-turnovers #uiTurnovers class="flex column fill" [turnovers]="turnovers" (page)="applyTurnoverPage($event)"
                         [enableSort]="false"></ui-turnovers>
                     }
                 </td>

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

@@ -1,11 +1,13 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnInit, ViewChild } from '@angular/core';
 import { FormControl } from '@angular/forms';
 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 { I18nService } from 'src/app/services/i18n.service';
 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: 'ui-management',
@@ -26,11 +28,14 @@ export class PageManagement implements OnInit {
   users: Observable<any>;
   usersFormControl = new FormControl();
 
+  @ViewChild('uiTurnovers') uiTurnovers: UiTurnovers;
+
   turnovers: any;
 
   constructor(
     private turnoverManagementService: TurnoverManagementService,
     private userManagementService: UserManagementService,
+    private i18n: I18nService,
     private router: Router,
     private route: ActivatedRoute
   ) { }
@@ -173,7 +178,7 @@ export class PageManagement implements OnInit {
     if (this.entries.total) {
       this.expanded = true;
       const filter = JSON.parse(JSON.stringify(this.entries.filter || {}));
-      this.turnoverManagementService.fetch(this.turnovers.limit || 100, this.turnovers.offset || 0, 'created', true, filter).subscribe({
+      this.turnoverManagementService.fetch(this.turnovers.limit || 100, this.turnovers.offset || 0, 'dueDate', true, filter).subscribe({
         next: (data: any) => {
           this.turnovers = data;
           this.turnovers.filter = filter;
@@ -190,4 +195,32 @@ export class PageManagement implements OnInit {
     this.applyUser(this.usersFormControl.value);
   }
 
+
+  export() {
+    if (this.entries.total) {
+      let rows = [[this.i18n.get('user.username'), this.i18n.get('turnover.price'), this.i18n.get('turnover.price.suffix')]];
+
+      this.entries.results.forEach(result => {
+        rows[rows.length] = [result[0], result[1], [result[2]]]
+      });
+
+      if (this.uiTurnovers) {
+        rows.push(...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/turnover/turnover.page.html

@@ -13,6 +13,14 @@
             i18n:(turnover.created | datef:'LLL' ):turnover.username}}</span>
           }
         </div>
+        <mat-form-field [floatLabel]="'always'">
+          <mat-label>{{'turnover.dueDate' | i18n}}</mat-label>
+          <input matInput formControlName="dueDate" [matDatepicker]="picker"
+            [placeholder]="(turnover.created || today) | datef:'L'">
+          <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
+          <mat-datepicker #picker></mat-datepicker>
+        </mat-form-field>
+
         <mat-form-field>
           <mat-label>{{'turnover.customer' | i18n}}</mat-label>
           <input matInput formControlName="customer" type="text" [required]="true">
@@ -64,23 +72,27 @@
         </mat-form-field>
 
       </mat-card-content>
-      <mat-card-actions>
-        @if (!working) {
-        <button type="submit" mat-raised-button color="primary" [disabled]="form.invalid">
-          {{(turnover.id ? 'turnover.update' : 'turnover.create') | i18n}}
-        </button>
-        }
+      <mat-card-actions class="flex column">
+        <div class="flex fill">
+          @if (!working) {
+          <button type="submit" mat-raised-button color="primary" [disabled]="form.invalid">
+            {{(turnover.id ? 'turnover.update' : 'turnover.create') | i18n}}
+          </button>
+          }
+          @if (success) {
+          <a mat-button color="primary" disabled="true">{{'turnover.success' | i18n}}</a>
+          }
+          @if (admin && turnover.id) {
+          <span class="spacer"></span>
+          <a mat-raised-button color="warn" (click)="deleteTurnover()">
+            <mat-icon>delete</mat-icon> {{'turnover.delete' | i18n}}
+          </a>
+          }
+        </div>
         @if (turnover.updated && turnover.updated != turnover.created) {
-        <span class="margin">{{'turnover.updated.label' | i18n:(turnover.updated | datef:'LLL' )}}</span>
-        }
-        @if (success) {
-        <a mat-button color="primary" disabled="true">{{'turnover.success' | i18n}}</a>
-        }
-        @if (admin && turnover.id) {
-        <span class="spacer"></span>
-        <a mat-raised-button color="warn" (click)="deleteTurnover()">
-          <mat-icon>delete</mat-icon> {{'turnover.delete' | i18n}}
-        </a>
+        <div class="flex">
+          <span class="margin">{{'turnover.updated.label' | i18n:(turnover.updated | datef:'LLL' )}}</span>
+        </div>
         }
       </mat-card-actions>
     </mat-card>

buntspecht-frontend/src/app/pages/turnover/turnover.page.scss

@@ -18,4 +18,8 @@ form {
   @media screen and (min-width: 992px) {
     max-width: 50%;
   }
+}
+
+mat-card-actions .flex:first-child {
+  margin-bottom: 15px;
 }

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

@@ -1,8 +1,10 @@
 import { Component, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { MatDatepickerInputEvent } from '@angular/material/datepicker';
 import { MatDialog } from '@angular/material/dialog';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { ActivatedRoute, Router } from '@angular/router';
+import moment, { Moment } from 'moment';
 import { AuthService } from 'src/app/services/auth.service';
 import { TurnoverManagementService } from 'src/app/services/turnover.management.service';
 import { TurnoverService } from 'src/app/services/turnover.service';
@@ -23,6 +25,7 @@ export class PageTurnover implements OnInit {
   form: FormGroup;
   username: string = "";
   admin: boolean = false;
+  today: Moment = moment();
 
   constructor(
     private turnoverService: TurnoverService,
@@ -36,6 +39,7 @@ export class PageTurnover implements OnInit {
 
   ngOnInit(): void {
     this.form = this.formBuilder.group({
+      dueDate: ['', Validators.nullValidator],
       customer: ['', Validators.required],
       motif: ['', Validators.required],
       price: ['', Validators.required],
@@ -64,6 +68,9 @@ export class PageTurnover implements OnInit {
           request.subscribe({
             next: (data) => {
               this.turnover = data;
+              if (this.turnover.dueDate != this.turnover.created) {
+                this.form.get("dueDate").setValue(this.turnover.dueDate);
+              }
               this.form.get("customer").setValue(this.turnover.customer);
               this.form.get("motif").setValue(this.turnover.motif);
               this.form.get("price").setValue(this.turnover.price);
@@ -102,6 +109,7 @@ export class PageTurnover implements OnInit {
 
     this.working = true;
 
+    this.turnover.dueDate = this.form.get("dueDate").value;
     this.turnover.customer = this.form.get("customer").value;
     this.turnover.motif = this.form.get("motif").value;
     this.turnover.price = this.form.get("price").value;
@@ -137,6 +145,7 @@ export class PageTurnover implements OnInit {
     }
 
     this.working = true;
+    this.turnover.dueDate = this.form.get("dueDate").value;
     this.turnover.customer = this.form.get("customer").value;
     this.turnover.motif = this.form.get("motif").value;
     this.turnover.price = this.form.get("price").value;

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);
+    }
+  }
 }

buntspecht-frontend/src/app/pages/users/create/users.create.page.html

@@ -40,8 +40,9 @@
             </mat-card-content>
             <mat-card-actions>
                 @if (!working) {
-                <button type="submit" mat-raised-button color="primary" [disabled]="form.invalid">{{'user.create' |
-                    i18n}}<mat-icon style="font-size: 1em;">person_add</mat-icon></button>
+                <button type="submit" mat-raised-button color="primary"
+                    [disabled]="form.invalid"><mat-icon>person_add</mat-icon>{{'user.create' |
+                    i18n}}</button>
                 }
             </mat-card-actions>
         </mat-card>

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

@@ -82,9 +82,11 @@
 
     <span class="spacer"></span>
 
-    <div class="mat-mdc-paginator flex middle">
-        <a class="margin" routerLink="/user" mat-raised-button color="primary">{{'user.create' | i18n}}<mat-icon
-                style="font-size: 1em;">person_add</mat-icon></a>
+    <div class="mat-mdc-paginator flex wrap middle">
+        <a class="margin" routerLink="/user" mat-raised-button color="primary">
+            <mat-icon>person_add</mat-icon>
+            <span class="hide-small">{{'user.create' | i18n}}</span>
+        </a>
         <span class="spacer"></span>
         <mat-paginator [pageSizeOptions]="pageSizeOptions" [pageIndex]="users.offset / users.limit"
             [length]="users.total" [pageSize]="users.limit" (page)="applyPage($event)" showFirstLastButtons>

buntspecht-frontend/src/app/pages/users/users.page.scss

@@ -1,3 +1,21 @@
+.filter-container {
+    padding-left: 15px;
+    justify-content: flex-start;
+    align-items: center;
+
+    .filter {
+
+        justify-content: flex-start;
+        align-items: center;
+
+        &>* {
+            margin-top: 5px;
+            margin-bottom: 5px;
+            margin-left: 15px;
+        }
+    }
+}
+
 tr.user {
     &:hover {
         cursor: pointer;
@@ -7,4 +25,8 @@ tr.user {
     &.disabled {
         pointer-events: none;
     }
+}
+
+.mat-mdc-paginator a.margin {
+    margin: 15px;
 }