WIP timeFrames

src/app/components/data-page/data-page.component.html

@@ -60,6 +60,7 @@
         [editable]="data.isLockedByMe"
         [tableDataGQLType]="object.tableDataGQLType"
         (referenceIds)="addReferenceIdsToObject($event, object)"
+        [editableReferences]="object.editableReferences"
       ></app-reference-table>
     </mat-card>
   </ng-container>

src/app/components/data-page/data-page.component.scss

@@ -13,6 +13,7 @@
   }
 }
 #floating-fab-button-box {
+  z-index: 999;
   position: absolute;
   bottom: 2em;
   right: 2em;
@@ -22,9 +23,9 @@
   .floating-fab-button {
     margin-top: 0.5em;
   }
-  }
-  .floating-fab-button-top {
+}
+.floating-fab-button-top {
   position: absolute;
   top: 2em;
   right: 2em;
-  }
+}

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

@@ -1,6 +1,6 @@
 <div class="table-page-wrapper">
   <div class="table-control">
-    <form [formGroup]="addForm">
+    <form [formGroup]="addForm" *ngIf="editableReferences">
       <mat-form-field>
         <input
           type="text"
@@ -14,7 +14,11 @@
           <mat-option
             *ngFor="let element of possibleValueOptions"
             [value]="nameToShowInSelection(element)"
-            (click)="addReference(element); $event.stopPropagation(); trigger.openPanel()"
+            (click)="
+              addReference(element);
+              $event.stopPropagation();
+              trigger.openPanel()
+            "
           >
             {{ nameToShowInSelection(element) }}
           </mat-option>
@@ -62,12 +66,21 @@
         </th>
         <td mat-cell *matCellDef="let element">
           <app-cell
-            *ngIf="column.type === 'Boolean'; else stringValue"
+            *ngIf="column.type === 'Boolean'"
             [editable]="false"
             [(value)]="element[column.dataPath]"
             [inputType]="column.type"
           ></app-cell>
-          <ng-template #stringValue>
+          <ng-container *ngIf="column.type === 'DateRange'">
+            <app-date-range-cell
+              [editable]="false"
+              [(from)]="element[column.dataPath + '.from']"
+              [(to)]="element[column.dataPath + '.to']"
+            ></app-date-range-cell>
+          </ng-container>
+          <ng-container
+            *ngIf="column.type !== 'DateRange' && column.type !== 'NumRange'"
+          >
             <span *ngIf="!column.link">{{ element[column.dataPath] }}</span>
             <a
               mat-button
@@ -76,7 +89,7 @@
               [routerLink]="column.link(element)"
               >{{ element[column.dataPath] }}</a
             >
-          </ng-template>
+          </ng-container>
         </td>
       </ng-container>
 

src/app/components/reference-table/reference-table.component.ts

@@ -47,9 +47,24 @@ export class ReferenceTableComponent {
   }
   _editable: boolean = false;
 
+  @Input()
+  set editableReferences(value: boolean) {
+    if (value === false) {
+      this._editableReferences = false;
+    } else {
+      this._editableReferences = true;
+    }
+  }
+  get editableReferences(): boolean {
+    return this._editableReferences;
+  }
+  _editableReferences: boolean = true;
+
   @Input()
   set data(newdata) {
-    if (!newdata) { return; }
+    if (!newdata) {
+      return;
+    }
     this.dataSource.data = [];
     for (const element of newdata) {
       this.dataSource.data.push(flatten(element));
@@ -90,8 +105,9 @@ export class ReferenceTableComponent {
     this.columnInfo.forEach((column) => {
       this.displayedColumns.push(column.dataPath);
     });
+    if (this.editableReferences) {
       this.displayedColumns.push('buttons');
-
+    }
     this.addForm
       .get('addGroup')
       .valueChanges.subscribe(() => this.filterPossibleValueOptions());
@@ -111,8 +127,9 @@ export class ReferenceTableComponent {
       }
       return item[columnName];
     };
-
-    this.dataServiceThatProvidesThePossibleData.tableData.subscribe((data) => {
+    if (this.dataServiceThatProvidesThePossibleData) {
+      this.dataServiceThatProvidesThePossibleData.tableData.subscribe(
+        (data) => {
           this.possibleValues = [];
           if (data) {
             for (const row of data) {
@@ -120,9 +137,11 @@ export class ReferenceTableComponent {
             }
           }
           this.filterPossibleValueOptions();
-    });
+        }
+      );
       this.dataServiceThatProvidesThePossibleData.loadTableData();
     }
+  }
 
   addColumnPropertiesFromGQLSchemaToColumnInfo() {
     for (const column of this.columnInfo) {
@@ -145,7 +164,9 @@ export class ReferenceTableComponent {
     const index = this.dataSource.data.findIndex(
       (element) => element.id === row.id
     );
-    if (index === -1) { return; }
+    if (index === -1) {
+      return;
+    }
     this.dataSource.data.splice(index, 1);
     this.dataSource.data = this.dataSource.data; //needed to trigger update lol
     this.filterPossibleValueOptions();

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

@@ -169,6 +169,20 @@
               [(max)]="element[column.dataPath + '.max']"
             ></app-number-range-cell>
           </ng-container>
+          <ng-container *ngIf="column.type === 'DateRange'">
+            <app-date-range-cell
+              [editable]="
+                (element.newObject && column.acceptedForCreation) ||
+                (column.acceptedForUpdating && element.isLockedByMe)
+              "
+              [required]="
+                (element.newObject && column.required) ||
+                (element.isLockedByMe && column.required)
+              "
+              [(from)]="element[column.dataPath + '.from']"
+              [(to)]="element[column.dataPath + '.to']"
+            ></app-date-range-cell>
+          </ng-container>
         </td>
       </ng-container>
 

src/app/components/table/table.component.ts

@@ -211,6 +211,7 @@ export class TableComponent implements AfterViewInit {
           ? column.acceptedForCreation
           : typeInformation.isPartOfType;
     }
+    console.log(this.columnInfo);
   }
 
   getTranslation(dataPath: string) {

src/app/components/tableComponents/cell/cell.component.html

@@ -30,31 +30,6 @@
   </ng-template>
 </div>
 
-<ng-container *ngIf="htmlInputType === 'dateRange'">
-  <mat-form-field>
-    <mat-label>Zeitraum auswählen</mat-label>
-    <mat-date-range-input [rangePicker]="picker" disabled>
-      <input
-        matStartDate
-        placeholder="Startdatum"
-        [value]="value?.from"
-        (dateChange)="startDateChange($event)"
-      />
-      <input
-        matEndDate
-        placeholder="Enddatum"
-        [value]="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-container>
-
 <div
   #otherInputType
   *ngIf="htmlInputType === 'number' || htmlInputType === 'text'"

src/app/components/tableComponents/cell/cell.component.ts

@@ -121,26 +121,6 @@ export class CellComponent implements AfterViewInit {
     this.checkIfValid();
   }
   
-  startDateChange(event): void {
-    console.log('start');
-    console.log(event.value);
-    console.log(this.transformDate(event.value));
-    this.value.start = this.transformDate(event.value);
-    this.valueChange.emit(this.value);
-  }
-
-  endDateChange(event) {
-    console.log('end');
-    console.log(event.value);
-    console.log(this.transformDate(event.value));
-    this.value.end = this.transformDate(event.value);
-    this.valueChange.emit(this.value);
-  }
-
-  transformDate(date) {
-    return this.datepipe.transform(date, 'yyyy-MM-dd');
-  }
-
   checkIfValid() {
     setTimeout(() => {
       if (this.editable && this.required && this.inputType !== 'Boolean') {

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

@@ -1 +1,25 @@
-<p>date-range-cell works!</p>
+    <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>

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

@@ -0,0 +1,6 @@
+.date-range-input {
+    min-width: 11em;
+}
+.date-string {
+    min-width: 10em;
+}

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

@@ -1,4 +1,13 @@
-import { Component, OnInit } from '@angular/core';
+import { DatePipe } from '@angular/common';
+import {
+  Component,
+  Input,
+  Output,
+  EventEmitter,
+  ChangeDetectorRef,
+  OnInit,
+} from '@angular/core';
+import { FormControl, FormGroup, Validators } from '@angular/forms';
 
 @Component({
   selector: 'app-date-range-cell',
@@ -6,10 +15,49 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./date-range-cell.component.scss']
 })
 export class DateRangeCellComponent implements OnInit {
+  @Input()
+  from: string;
 
-  constructor() { }
+  @Input()
+  to: string;
 
-  ngOnInit(): void {
+  @Output() fromChange = new EventEmitter<string>();
+  @Output() toChange = new EventEmitter<string>();
+
+  @Input()
+  editable = false;
+  
+  @Input()
+  required = false;
+  @Input()
+  label: string = null;
+  @Output() validityChange = new EventEmitter<boolean>();
+  isValid = true;
+
+  constructor(private cdr: ChangeDetectorRef, public datepipe: DatePipe) {}
+
+  ngOnInit() {
+  }
+
+  startDateChange(event): void {
+    this.from = this.transformDate(event.value);
+    this.fromChange.emit(this.from);
+  }
+
+  endDateChange(event) {
+    this.to = this.transformDate(event.value);
+    this.toChange.emit(this.to);
+  }
+
+  transformDate(date) {
+    return this.datepipe.transform(date, 'yyyy-MM-dd');
+  }
+
+  toLocaleDate(date: string): string {
+    if (date == "") {
+      return "";
+    }
+    return new Date(date).toLocaleDateString();
   }
 
 }

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

@@ -219,6 +219,21 @@ export class BikeComponent implements OnInit {
       },
       propertyNameOfUpdateInput: 'equipmentIds',
     },
+    {
+      type: 'ReferenceTable',
+      title: 'Zeitscheiben',
+      dataPath: 'timeFrames',
+      dataService: null,
+      columnInfo: [
+        { dataPath: 'dateRange', translation: 'Zeitraum' },
+        { dataPath: 'lendingStation.name', translation: 'Standort' },
+      ],
+      editableReferences: false,
+      linkToTable: (element) => '/table/timeFrames',
+      linkToTableParams: (bike) => {
+        return { filter: bike.name };
+      },
+    },
   ];
 
   headlineDataPath = 'name';

src/app/pages/tables/time-frames/time-frames.component.ts

@@ -9,7 +9,7 @@ export class TimeFramesComponent implements OnInit {
   headline = 'Zeitscheiben';
 
   columnInfo = [
-    { dataPath: 'dataRange', translation: 'Zeitraum', type: 'DateRange', readonly: false },
+    { dataPath: 'dateRange', translation: 'Zeitraum', type: 'DateRange', readonly: false },
     {
       dataPath: 'cargoBike.name',
       translation: 'Lastenrad',
@@ -19,7 +19,7 @@ export class TimeFramesComponent implements OnInit {
     },
     {
       dataPath: 'lendingStation.name',
-      translation: 'Ausleihstation',
+      translation: 'Standort',
       link: (element) => {
         return '/lendingStation/' + element['lendingStation.id'];
       },