Add participant and workshop page

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

@@ -32,7 +32,12 @@
       </mat-card-title>
       <ng-container *ngFor="let prop of object.properties">
         <app-cell
-          *ngIf="prop.type !== 'NumRange' && prop.type !== 'Link'"
+          *ngIf="
+            prop.type !== 'NumRange' &&
+            prop.type !== 'Link' &&
+            prop.type !== 'DateRange'
+          "
+          [isList]="prop.list"
           [editable]="data.isLockedByMe && prop.acceptedForUpdating"
           [required]="prop.requiredForUpdating && data.isLockedByMe"
           (validityChange)="validityChange(prop.dataPath, $event)"
@@ -48,6 +53,14 @@
           [(max)]="data[prop.dataPath + '.max']"
           [label]="prop.translation || prop.dataPath"
         ></app-number-range-cell>
+        <app-date-range-cell
+          *ngIf="prop.type === 'DateRange'"
+          [editable]="data.isLockedByMe && prop.acceptedForUpdating"
+          [required]="prop.requiredForUpdating && data.isLockedByMe"
+          (validityChange)="validityChange(prop.dataPath, $event)"
+          [(from)]="data[prop.dataPath + '.from']"
+          [(to)]="data[prop.dataPath + '.to']"
+        ></app-date-range-cell>
         <a
           mat-button
           class="link-button"

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

@@ -88,7 +88,6 @@ export class DataPageComponent implements OnInit, OnDestroy {
 
   ngOnInit(): void {
     this.addPropertiesFromGQLSchemaToObject(this.propertiesInfo);
-    console.log(this.propertiesInfo);
     this.id = this.route.snapshot.paramMap.get('id');
     this.reloadPageData();
     this.dataService.pageData.subscribe((data) => {
@@ -143,6 +142,7 @@ export class DataPageComponent implements OnInit, OnDestroy {
           prop.dataPath
         );
         prop.type = prop.type || typeInformation.type;
+        prop.list = typeInformation.isList;
         if (!prop.type) {
           console.error(
             "Didn't found type for: " +

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

@@ -21,7 +21,7 @@ export class CellComponent implements AfterViewInit {
   @Input()
   set value(value: any) {
     if (this.inputType === 'Money') {
-      value = value.toString().replace('$', '');
+      value = value.toString().replace('$', '').replace('€', '');
     }
     this._value = value;
     setTimeout(() => {
@@ -184,11 +184,8 @@ export class CellComponent implements AfterViewInit {
       if (!this.value && this.isList) {
         this.value = [];
         this.valueChange.emit([]);
-      } else if (
+      } else if (this.htmlInputType === 'date') {
-        this.editable &&
+        if (this.editable && this.required) {
-        this.required &&
-        this.htmlInputType === 'date'
-      ) {
           const dateIsEmpty = !this.value;
           this.isValid = !dateIsEmpty;
           this.validityChange.emit(this.isValid);
@@ -199,6 +196,10 @@ export class CellComponent implements AfterViewInit {
           } else {
             this.dateGroup.controls['dateControl'].setErrors(null);
           }
+        } else {
+          this.validityChange.emit(this.isValid);
+          this.dateGroup.controls['dateControl'].setErrors(null);
+        }
       } else if (
         this.editable &&
         this.required &&

src/app/pages/dataPages/lending-station/lending-station.component.ts

@@ -45,11 +45,18 @@ export class LendingStationComponent implements OnInit {
     {
       type: 'Group',
       title: 'Organisation',
+      hideCondition: (data) => data.organisation === null,
       properties: [
+        {
+          type: 'Link',
+          linkText: "Zur Organisation",
+          link: (data) => {
+            return '/organisation/' + data['organisation.id'];
+          },
+        },
         {
           dataPath: 'organisation.name',
           translation: 'Name',
-          link: (data) => '/organisation/' + data['organisation.id'],
         },
         { dataPath: 'organisation.address.street', translation: 'Straße' },
         { dataPath: 'organisation.address.number', translation: 'Hausnummer' },

src/app/pages/dataPages/participant/participant.component.html

@@ -1 +1,11 @@
-<p>participant works!</p>
+<app-data-page
+  [dataService]="dataService"
+  [propertiesInfo]="propertiesInfo"
+  [headlineDataPath]="headlineDataPath"
+  [headlineIconName]="headlineIconName"
+  [pageDataGQLType]="pageDataGQLType"
+  [pageDataGQLUpdateInputType]="pageDataGQLUpdateInputType"
+  (lockEvent)="lock($event)"
+  (saveEvent)="save($event)"
+  (cancelEvent)="cancel($event)"
+></app-data-page>

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

@@ -1,15 +1,138 @@
 import { Component, OnInit } from '@angular/core';
+import { ParticipantsService } from 'src/app/services/participants.service';
+import { WorkshopsService } from 'src/app/services/workshop.service';
 
 @Component({
   selector: 'app-participant',
   templateUrl: './participant.component.html',
-  styleUrls: ['./participant.component.scss']
+  styleUrls: ['./participant.component.scss'],
 })
 export class ParticipantComponent implements OnInit {
+  propertiesInfo = [
+    {
+      type: 'Group',
+      title: 'Allgemein',
+      properties: [
+        { dataPath: 'dateRange', translation: 'Zeitraum' },
+        { dataPath: 'usernamefLotte', translation: 'User fLotte' },
+        { dataPath: 'usernameSlack', translation: 'User Slack' },
+        { dataPath: 'memberADFC', translation: 'Mitglied ADFC' },
+        {
+          dataPath: 'locationZIPs',
+          translation: 'Einsatz in PLZ',
+        },
+        {
+          dataPath: 'memberCoreTeam',
+          translation: 'Teil des Kernteams',
+        },
+        {
+          dataPath: 'distributedActiveBikeParte',
+          translation: 'Verteiler aktive Radpat*innen',
+        },
+      ],
+    },
+    {
+      type: 'Group',
+      title: 'Kontaktinformation',
+      properties: [
+        {
+          dataPath: 'contactInformation.person.firstName',
+          translation: 'Vorname',
+        },
+        {
+          dataPath: 'contactInformation.person.name',
+          translation: 'Nachname',
+        },
+        {
+          dataPath: 'contactInformation.phone',
+          translation: 'Telefonnummer',
+        },
+        {
+          dataPath: 'contactInformation.phone2',
+          translation: 'Telefonnummer 2',
+        },
+        { dataPath: 'contactInformation.email', translation: 'Email' },
+        { dataPath: 'contactInformation.email2', translation: 'Email 2' },
+        { dataPath: 'contactInformation.note', translation: 'Anmerkung' },
+      ],
+    },
+    {
+      type: 'ReferenceTable',
+      title: 'Workshops',
+      dataPath: 'workshops',
+      dataService: null,
+      columnInfo: [
+        { dataPath: 'title', translation: 'Workshopname' },
+        { dataPath: 'description', translation: 'Details' },
+      ],
+      nameToShowInSelection: (workshop) => {
+        return workshop.title + ' ' + workshop.description;
+      },
+      linkToTable: (element) => {
+        return '/table/workshops';
+      },
+      propertyNameOfUpdateInput: 'workshopIds',
+    },
 
-  constructor() { }
+    {
+      type: 'ReferenceTable',
+      title: 'Engagements',
+      dataPath: 'engagement',
+      dataService: null,
+      columnInfo: [
+        {
+          dataPath: 'engagementType.name',
+          translation: 'Engagementtyp',
+        },
+        {
+          dataPath: 'engagementType.description',
+          translation: 'Engagementtyp Erklärung',
+        },
+        { dataPath: 'dateRange', translation: 'Zeitraum' },
+        {
+          dataPath: 'cargoBike.name',
+          translation: 'Lastenrad',
+          link: (element) => {
+            return '/bike/' + element['cargoBike.id'];
+          },
+        },
+      ],
+      editableReferences: false,
+      linkToTable: (element) => {
+        return '/table/engagements';
+      },
+    },
+  ];
+
+  headlineDataPath = 'contactInformation.person.name';
+  headlineIconName = 'directions_run';
+  pageDataGQLType: string = 'Participant';
+  pageDataGQLUpdateInputType: string = 'ParticipantUpdateInput';
+
+  dataService: any;
+
+  constructor(private participantsService: ParticipantsService, private workshopsService: WorkshopsService) {
+    this.workshopsService.loadTableData();
+    this.workshopsService.tableData.subscribe((data) => {
+      this.propertiesInfo.find(
+        (prop) => prop.dataPath === 'workshops'
+      ).dataService = this.workshopsService;
+    });
+  }
 
   ngOnInit(): void {
+    this.dataService = this.participantsService;
   }
 
+  lock(row: any) {
+    this.participantsService.lockParticipant({ id: row.id });
+  }
+
+  save(row: any) {
+    this.participantsService.updateParticipant({ participant: row });
+  }
+
+  cancel(row: any) {
+    this.participantsService.unlockParticipant({ id: row.id });
+  }
 }

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

@@ -51,7 +51,7 @@ export class ProviderComponent implements OnInit {
         { dataPath: 'formName', translation: 'Formular Name' },
         {
           type: 'Link',
-          linkText: "Zum Organisation",
+          linkText: "Zur Organisation",
           link: (data) => {
             return '/organisation/' + data['organisation.id'];
           },

src/app/pages/dataPages/workshop/workshop.component.html

@@ -1 +1,11 @@
-<p>workshop works!</p>
+<app-data-page
+  [dataService]="dataService"
+  [propertiesInfo]="propertiesInfo"
+  [headlineDataPath]="headlineDataPath"
+  [headlineIconName]="headlineIconName"
+  [pageDataGQLType]="pageDataGQLType"
+  [pageDataGQLUpdateInputType]="pageDataGQLUpdateInputType"
+  (lockEvent)="lock($event)"
+  (saveEvent)="save($event)"
+  (cancelEvent)="cancel($event)"
+></app-data-page>

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

@@ -1,15 +1,209 @@
 import { Component, OnInit } from '@angular/core';
+import { WorkshopsService } from 'src/app/services/workshop.service';
+import { WorkshopTypesService } from 'src/app/services/workshopTypes.service';
+import { ParticipantsService } from 'src/app/services/participants.service';
 
 @Component({
   selector: 'app-workshop',
   templateUrl: './workshop.component.html',
-  styleUrls: ['./workshop.component.scss']
+  styleUrls: ['./workshop.component.scss'],
 })
 export class WorkshopComponent implements OnInit {
+  propertiesInfo = [
+    {
+      type: 'Group',
+      title: 'Allgemein',
+      properties: [
+        { dataPath: 'title', translation: 'Workshopname' },
+        { dataPath: 'description', translation: 'Details' },
+        {
+          dataPath: 'date',
+          translation: 'Datum',
+        },
+      ],
+    },
+    {
+      type: 'Group',
+      title: 'Workshoptyp',
+      possibleObjects: [],
+      nameToShowInSelection: (workshopType) => {
+        return workshopType.name;
+      },
+      propertyPrefixToOverwrite: 'workshopType',
+      currentlySelectedObjectId: (provider) => {
+        return provider['workshopType.id'];
+      },
+      propertyNameOfReferenceId: 'workshopTypeId',
+      properties: [
+        {
+          dataPath: 'workshopType.name',
+          translation: 'Workshoptyp',
+        },
+      ],
+    },
+    {
+      type: 'Group',
+      title: 'Trainer 1',
+      possibleObjects: [],
+      nameToShowInSelection: (participant) => {
+        return (
+          (participant.contactInformation.person.firstName || '') +
+          ' ' +
+          (participant.contactInformation.person.name || '') +
+          ' ' +
+          (participant.contactInformation.email || '') +
+          ' ' +
+          (participant.contactInformation.phone || '') +
+          ' ' +
+          (participant.contactInformation.note || '')
+        );
+      },
+      propertyPrefixToOverwrite: 'trainer1',
+      currentlySelectedObjectId: (provider) => {
+        return provider['trainer1.id'];
+      },
+      propertyNameOfReferenceId: 'trainer1Id',
+      properties: [
+        {
+          dataPath: 'trainer1.contactInformation.person.firstName',
+          translation: 'Vorname',
+        },
+        {
+          dataPath: 'trainer1.contactInformation.person.name',
+          translation: 'Nachname',
+        },
+        {
+          dataPath: 'trainer1.contactInformation.phone',
+          translation: 'Telefonnummer',
+        },
+        {
+          dataPath: 'trainer1.contactInformation.phone2',
+          translation: 'Telefonnummer 2',
+        },
+        { dataPath: 'trainer1.contactInformation.email', translation: 'Email' },
+        {
+          dataPath: 'trainer1.contactInformation.email2',
+          translation: 'Email 2',
+        },
+        {
+          dataPath: 'trainer1.contactInformation.note',
+          translation: 'Anmerkung',
+        },
+      ],
+    },
+    {
+      type: 'Group',
+      title: 'Trainer 2',
+      possibleObjects: [],
+      nameToShowInSelection: (participant) => {
+        return (
+          (participant.contactInformation.person.firstName || '') +
+          ' ' +
+          (participant.contactInformation.person.name || '') +
+          ' ' +
+          (participant.contactInformation.email || '') +
+          ' ' +
+          (participant.contactInformation.phone || '') +
+          ' ' +
+          (participant.contactInformation.note || '')
+        );
+      },
+      propertyPrefixToOverwrite: 'trainer2',
+      currentlySelectedObjectId: (provider) => {
+        return provider['trainer2.id'];
+      },
+      propertyNameOfReferenceId: 'trainer2Id',
+      properties: [
+        {
+          dataPath: 'trainer2.contactInformation.person.firstName',
+          translation: 'Vorname',
+        },
+        {
+          dataPath: 'trainer2.contactInformation.person.name',
+          translation: 'Nachname',
+        },
+        {
+          dataPath: 'trainer2.contactInformation.phone',
+          translation: 'Telefonnummer',
+        },
+        {
+          dataPath: 'trainer2.contactInformation.phone2',
+          translation: 'Telefonnummer 2',
+        },
+        { dataPath: 'trainer2.contactInformation.email', translation: 'Email' },
+        {
+          dataPath: 'trainer2.contactInformation.email2',
+          translation: 'Email 2',
+        },
+        {
+          dataPath: 'trainer2.contactInformation.note',
+          translation: 'Anmerkung',
+        },
+      ],
+    },
+    {
+      type: 'ReferenceTable',
+      title: 'Teilnehmer (Aktive)',
+      dataPath: 'participants',
+      dataService: null,
+      columnInfo:  [
+        { dataPath: 'contactInformation.person.firstName', translation: 'Vorname' },
+        { dataPath: 'contactInformation.person.name', translation: 'Nachname',
+        link: (row) => '/person/' + row['contactInformation.person.id'], },
+        { dataPath: 'contactInformation.email', translation: 'Email' },
+        { dataPath: 'contactInformation.phone', translation: 'Telefonnummer' },
+      ],
+      editableReferences: false,
+      linkToTable: () => '/table/participants',
+    },
+  ];
 
-  constructor() { }
+  headlineDataPath = 'title';
+  headlineIconName = 'school';
+  pageDataGQLType: string = 'Workshop';
+  pageDataGQLUpdateInputType: string = 'WorkshopUpdateInput';
+
+  dataService: any;
+
+  constructor(
+    private workshopsService: WorkshopsService,
+    private participantsService: ParticipantsService,
+    private workshopTypesService: WorkshopTypesService
+  ) {
+    this.participantsService.loadTableData();
+    this.participantsService.tableData.subscribe((data) => {
+      this.propertiesInfo.find(
+        (prop) => prop.propertyPrefixToOverwrite === 'trainer1'
+      ).possibleObjects = data;
+
+      this.propertiesInfo.find(
+        (prop) => prop.propertyPrefixToOverwrite === 'trainer2'
+      ).possibleObjects = data;
+
+      //add posible tabledata??
+    });
+
+    this.workshopTypesService.loadTableData();
+    this.workshopTypesService.tableData.subscribe((data) => {
+      this.propertiesInfo.find(
+        (prop) => prop.propertyPrefixToOverwrite === 'workshopType'
+      ).possibleObjects = data;
+    });
+  }
 
   ngOnInit(): void {
+    this.dataService = this.workshopsService;
   }
 
+  lock(row: any) {
+    this.workshopsService.lockWorkshop({ id: row.id });
+  }
+
+  save(row: any) {
+    this.workshopsService.updateWorkshop({ workshop: row });
+  }
+
+  cancel(row: any) {
+    this.workshopsService.unlockWorkshop({ id: row.id });
+  }
 }

src/app/pages/tables/lending-stations/lending-stations.component.ts

@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { LendingStationsService } from 'src/app/services/lending-stations.service';
+import { OrganisationsService } from 'src/app/services/organisation.service';
 
 @Component({
   selector: 'app-lending-stations',
@@ -23,7 +24,20 @@ export class LendingStationsComponent implements OnInit {
 
     { dataPath: 'remark', translation: 'Anmerkung' },
 
-    { dataPath: 'organisation.name', translation: 'Organisation' },
+    {
+      dataPath: 'organisation.name',
+      translation: 'Organisation',
+      link: (row: any) => {
+        return '/organisation/' + row['organisation.id'];
+      },
+      possibleObjects: [],
+      nameToShowInSelection: (o) => o.name,
+      propertyPrefixToOverwrite: 'organisation',
+      currentlySelectedObjectId: (station) => {
+        return station['organisation.id'];
+      },
+      propertyNameOfReferenceId: 'organisationId',
+    },
 
     {
       dataPath: 'contactInformationIntern.person.firstName',
@@ -74,7 +88,17 @@ export class LendingStationsComponent implements OnInit {
   headlineIconName = 'location_on';
 
   loadingRowIds: string[] = [];
-  constructor(private lendingStationsService: LendingStationsService) {}
+  constructor(
+    private lendingStationsService: LendingStationsService,
+    private organisationsService: OrganisationsService
+  ) {
+    this.organisationsService.loadTableData();
+    this.organisationsService.tableData.subscribe((data) => {
+      this.columnInfo.find(
+        (column) => column.propertyPrefixToOverwrite === 'organisation'
+      ).possibleObjects = data;
+    });
+  }
 
   ngOnInit() {
     this.dataService = this.lendingStationsService;

src/app/pages/tables/participants/participants.component.ts

@@ -14,7 +14,7 @@ export class ParticipantsComponent implements OnInit {
       translation: 'Vorname',
       sticky: true,
       link: (row: any) => {
-        return '/person/' + row['contactInformation.person.id'];
+        return '/participant/' + row['id'];
       },
     },
     {

src/app/pages/tables/workshops/workshops.component.ts

@@ -13,6 +13,9 @@ export class WorkshopsComponent implements OnInit {
     {
       dataPath: 'title',
       translation: 'Workshopname',
+      link: (row: any) => {
+        return '/workshop/' + row['id'];
+      },
     },
     {
       dataPath: 'description',