Merge remote-tracking branch 'origin/master'

src/app/components/table/table.component.html

@@ -184,6 +184,9 @@
                 (element.newObject && column.required) ||
                 (element.isLockedByMe && column.required)
               "
+              (validityChange)="
+                validityChange(element, column.dataPath, $event)
+              "
               [(from)]="element[column.dataPath + '.from']"
               [(to)]="element[column.dataPath + '.to']"
             ></app-date-range-cell>

src/app/components/tableComponents/date-range-cell/date-range-cell.component.html

@@ -1,25 +1,38 @@
-    <mat-form-field *ngIf="editable || label; else stringValue">
-      <mat-label *ngIf="label">{{label}}</mat-label>
-      <mat-date-range-input [rangePicker]="picker" disabled class="date-range-input">
-        <input
-          matStartDate
-          placeholder="Startdatum"
-          [value]="from"
-          (dateChange)="startDateChange($event)"
-        />
-        <input
-          matEndDate
-          placeholder="Enddatum"
-          [value]="to"
-          (dateChange)="endDateChange($event)"
-        />
-      </mat-date-range-input>
-      <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
-      <mat-date-range-picker
-        #picker
-        [disabled]="!editable"
-      ></mat-date-range-picker>
-    </mat-form-field>
-    <ng-template #stringValue>
-        <div class="date-string">{{toLocaleDate(from)}} <i>bis</i> {{toLocaleDate(to)}}</div>
-    </ng-template>
+<div class="dateRange-wrapper" *ngIf="editable || label; else stringValue" [formGroup]="dateRangeGroup">
+  <mat-label *ngIf="label">{{ label }}</mat-label>
+  <mat-form-field class="date-range-input">
+    <input
+      matInput
+      placeholder="Startdatum"
+      [matDatepicker]="fromPicker"
+      [value]="from"
+      disabled
+      formControlName="from"
+      (dateChange)="startDateChange($event)"
+    />
+    <mat-datepicker-toggle matSuffix [for]="fromPicker"></mat-datepicker-toggle>
+    <mat-datepicker #fromPicker [disabled]="!editable"></mat-datepicker>
+  </mat-form-field>
+  <i class="spacer-string">bis</i>
+  <mat-form-field class="date-range-input">
+    <input
+      matInput
+      placeholder="Enddatum"
+      [matDatepicker]="toPicker"
+      [value]="to"
+      disabled
+      formControlName="to"
+      (dateChange)="endDateChange($event)"
+    />
+    <button mat-button *ngIf="editable && to" matSuffix mat-icon-button aria-label="Clear" (click)="endDateChange({value: null})">
+      <mat-icon>close</mat-icon>
+    </button>
+    <mat-datepicker-toggle matSuffix [for]="toPicker"></mat-datepicker-toggle>
+    <mat-datepicker #toPicker [disabled]="!editable"></mat-datepicker>
+  </mat-form-field>
+</div>
+<ng-template #stringValue>
+  <div class="date-string">
+    {{ toLocaleDate(from) }} <i>bis</i> {{ toLocaleDate(to) }}
+  </div>
+</ng-template>

src/app/components/tableComponents/date-range-cell/date-range-cell.component.scss

@@ -1,5 +1,9 @@
-.date-range-input {
-    min-width: 11em;
+.dateRange-wrapper {
+    display: flex;
+    align-items: center;
+    .spacer-string {
+        margin: 0 0.5em;
+    }
 }
 .date-string {
     min-width: 10em;

src/app/components/tableComponents/date-range-cell/date-range-cell.component.ts

@@ -12,7 +12,7 @@ import { FormControl, FormGroup, Validators } from '@angular/forms';
 @Component({
   selector: 'app-date-range-cell',
   templateUrl: './date-range-cell.component.html',
-  styleUrls: ['./date-range-cell.component.scss']
+  styleUrls: ['./date-range-cell.component.scss'],
 })
 export class DateRangeCellComponent implements OnInit {
   @Input()
@@ -34,19 +34,58 @@ export class DateRangeCellComponent implements OnInit {
   @Output() validityChange = new EventEmitter<boolean>();
   isValid = true;
 
+  dateRangeGroup: FormGroup;
+
   constructor(private cdr: ChangeDetectorRef, public datepipe: DatePipe) {}
 
   ngOnInit() {
+    this.dateRangeGroup = new FormGroup({
+      from: new FormControl(),
+      to: new FormControl(),
+    });
+    this.dateRangeGroup.controls['from'].markAsTouched();
+    this.dateRangeGroup.controls['to'].markAsTouched();
+
+    if (this.editable) {
+    setTimeout(()=>this.checkIfDateRangeIsValid());
+    }
   }
 
   startDateChange(event): void {
     this.from = this.transformDate(event.value);
     this.fromChange.emit(this.from);
+    this.checkIfDateRangeIsValid();
   }
 
   endDateChange(event) {
     this.to = this.transformDate(event.value);
     this.toChange.emit(this.to);
+    this.checkIfDateRangeIsValid();
+  }
+
+  checkIfDateRangeIsValid() {
+    if (this.required && this.from == null) {
+      this.setRangeError(true);
+      return;
+    }
+    if (this.to == null || this.from == null) {
+      this.setRangeError(false);
+      return;
+    }
+    const isValid = new Date(this.to) >= new Date(this.from);
+    this.setRangeError(!isValid);
+  }
+
+  setRangeError(error: boolean): void {
+    console.log("error", error)
+    this.validityChange.emit(!error);
+    if (error) {
+      this.dateRangeGroup.controls['from'].setErrors({ rangeError: true });
+      this.dateRangeGroup.controls['to'].setErrors({ rangeError: true });
+    } else {
+      this.dateRangeGroup.controls['from'].setErrors(null);
+      this.dateRangeGroup.controls['to'].setErrors(null);
+    }
   }
 
   transformDate(date) {
@@ -54,10 +93,9 @@ export class DateRangeCellComponent implements OnInit {
   }
 
   toLocaleDate(date: string): string {
-    if (date == "") {
-      return "";
+    if (date == '') {
+      return '';
     }
     return new Date(date).toLocaleDateString();
   }
-
 }

src/app/graphqlOperations/fragments/equipment.graphql

@@ -3,6 +3,9 @@ fragment EquipmentFieldsForBikePage on Equipment {
     serialNo
     title
     description
+    cargoBike {
+        name
+    }
 }
 
 fragment EquipmentFieldsForTable on Equipment {

src/app/pages/dataPages/bike/bike.component.ts

@@ -211,7 +211,7 @@ export class BikeComponent implements OnInit {
         { dataPath: 'description', translation: 'Beschreibung' },
       ],
       nameToShowInSelection: (element) => {
-        return element.title + ' (' + element.serialNo + ')';
+        return element.title + ' (' + element.serialNo + ')' + (element.cargoBike ? " [aktuell Teil von "+element.cargoBike.name+']' : '');
       },
       linkToTable: (element) => '/table/equipment',
       linkToTableParams: (bike) => {

src/generated/graphql.ts

@@ -2071,7 +2071,7 @@ export type EngagementFieldsForBikePageFragment = { __typename?: 'Engagement', i
 
 export type EngagementTypeFieldsFragment = { __typename?: 'EngagementType', id: string, name: string, description: string, isLocked: boolean, isLockedByMe: boolean, lockedBy?: Maybe<string>, lockedUntil?: Maybe<any> };
 
-export type EquipmentFieldsForBikePageFragment = { __typename?: 'Equipment', id: string, serialNo: string, title: string, description?: Maybe<string> };
+export type EquipmentFieldsForBikePageFragment = { __typename?: 'Equipment', id: string, serialNo: string, title: string, description?: Maybe<string>, cargoBike?: Maybe<{ __typename?: 'CargoBike', name: string }> };
 
 export type EquipmentFieldsForTableFragment = { __typename?: 'Equipment', id: string, serialNo: string, title: string, description?: Maybe<string>, isLocked: boolean, isLockedByMe: boolean, lockedBy?: Maybe<string>, lockedUntil?: Maybe<any>, cargoBike?: Maybe<{ __typename?: 'CargoBike', id: string, name: string }> };
 
@@ -2491,6 +2491,9 @@ export const EquipmentFieldsForBikePageFragmentDoc = gql`
   serialNo
   title
   description
+  cargoBike {
+    name
+  }
 }
     `;
 export const EquipmentTypeFieldsFragmentDoc = gql`