Add edit contact information functionallity on lendingStations

src/app/app.module.ts

@@ -62,7 +62,7 @@ import { EquipmentComponent } from './pages/tables/equipment/equipment.component
 import { TimeFramesComponent } from './pages/tables/time-frames/time-frames.component';
 import { NumberRangeCellComponent } from './components/tableComponents/number-range-cell/number-range-cell.component';
 import { DateRangeCellComponent } from './components/tableComponents/date-range-cell/date-range-cell.component';
-import { SelectObjectDialogComponent } from './components/tableComponents/select-object-dialog/select-object-dialog.component';
+import { SelectObjectDialogComponent } from './components/select-object-dialog/select-object-dialog.component';
 import { AutocompleteSelectComponent } from './components/autocomplete-select/autocomplete-select.component';
 import { LendingStationComponent } from './pages/dataPages/lending-station/lending-station.component';
 

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

@@ -10,11 +10,20 @@
 <div class="data-page-wrapper" *ngIf="data">
   <h1 class="headline">
     {{ data[headlineDataPath] }}
-    <mat-icon>{{headlineIconName}}</mat-icon>
+    <mat-icon>{{ headlineIconName }}</mat-icon>
   </h1>
   <ng-container *ngFor="let object of propertiesInfo">
     <mat-card class="inline-card" *ngIf="object.type === 'Group'">
-      <mat-card-title>{{ object.title }}</mat-card-title>
+      <mat-card-title
+        >{{ object.title }}
+        <button
+          mat-button
+          *ngIf="data.isLockedByMe && object.possibleObjects"
+          (click)="openSelectObjectDialog(object)"
+        >
+          <mat-icon>expand_more</mat-icon>
+        </button>
+      </mat-card-title>
       <ng-container *ngFor="let prop of object.properties">
         <app-cell
           *ngIf="prop.type !== 'NumRange'"

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

@@ -6,10 +6,12 @@ import {
   OnInit,
   Output,
 } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute } from '@angular/router';
 import { deepen } from 'src/app/helperFunctions/deepenObject';
 import { flatten } from 'src/app/helperFunctions/flattenObject';
 import { SchemaService } from 'src/app/services/schema.service';
+import { SelectObjectDialogComponent } from '../select-object-dialog/select-object-dialog.component';
 
 interface PropertyTypeInfo {
   dataPath: string;
@@ -76,7 +78,8 @@ export class DataPageComponent implements OnInit, OnDestroy {
 
   constructor(
     private route: ActivatedRoute,
-    private schemaService: SchemaService
+    private schemaService: SchemaService,
+    public dialog: MatDialog,
   ) {}
 
   ngOnInit(): void {
@@ -170,6 +173,27 @@ export class DataPageComponent implements OnInit, OnDestroy {
     this.cancelEvent.emit(deepen(this.data));
   }
 
+  openSelectObjectDialog(object: any) {
+    const dialogRef = this.dialog.open(SelectObjectDialogComponent, {
+      width: 'auto',
+      autoFocus: false,
+      data: {
+        nameToShowInSelection: object.nameToShowInSelection,
+        currentlySelectedObjectId: object.currentlySelectedObjectId(this.data),
+        possibleObjects: object.possibleObjects,
+      },
+    });
+    dialogRef.afterClosed().subscribe((selectedObject) => {
+      if (selectedObject) {
+        this.data[object.propertyNameOfReferenceId] = selectedObject.id
+        const newObjectFlattened = flatten(selectedObject);
+        for(const newProperty in newObjectFlattened) {
+          this.data[object.propertyPrefixToOverwrite + '.' + newProperty ] = newObjectFlattened[newProperty];
+        }
+      }
+    });
+  }
+
   addReferenceIdsToObject(ids: string[], object) {
     this.data[object.propertyNameOfUpdateInput] = ids;
   }

src/app/components/select-object-dialog/select-object-dialog.component.ts

@@ -1,6 +1,5 @@
 import { Component, Inject, OnInit } from '@angular/core';
 import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
-import { DeleteConfirmationDialog } from '../../table/table.component';
 
 @Component({
   selector: 'app-select-object-dialog',
@@ -9,11 +8,9 @@ import { DeleteConfirmationDialog } from '../../table/table.component';
 })
 export class SelectObjectDialogComponent implements OnInit {
   constructor(
-    public dialogRef: MatDialogRef<DeleteConfirmationDialog>,
+    public dialogRef: MatDialogRef<any>,
     @Inject(MAT_DIALOG_DATA) public data: any
-  ) {
+  ) {}
-    console.log(this.data);
-  }
 
   ngOnInit(): void {}
 
@@ -24,13 +21,13 @@ export class SelectObjectDialogComponent implements OnInit {
   getSelectedObject() {
     return this.data.possibleObjects.find(
       (object) => object.id === this.data.currentlySelectedObjectId
-    )
+    );
   }
 
   getSelectedObjectName() {
     const selectedObject = this.getSelectedObject();
     if (!selectedObject) {
-      return "";
+      return '';
     }
     return this.data.nameToShowInSelection(selectedObject);
   }

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

@@ -20,8 +20,7 @@ import { MatDialog, MatDialogRef } from '@angular/material/dialog';
 import { ActivatedRoute } from '@angular/router';
 import { Subject } from 'rxjs';
 import { debounceTime } from 'rxjs/internal/operators/debounceTime';
-import { type } from 'os';
+import { SelectObjectDialogComponent } from '../select-object-dialog/select-object-dialog.component';
-import { SelectObjectDialogComponent } from '../tableComponents/select-object-dialog/select-object-dialog.component';
 
 @Component({
   selector: 'app-table',

src/app/graphqlOperations/contactInformation.graphql

@@ -0,0 +1,33 @@
+query GetContactInformation {
+  contactInformation {
+    ...ContactInformationFields
+  }
+}
+
+mutation CreateContactInformation($contactInformation: ContactInformationCreateInput!) {
+  createContactInformation(contactInformation: $contactInformation) {
+    ...ContactInformationFields
+  }
+}
+
+mutation UpdateContactInformation($contactInformation: ContactInformationUpdateInput!) {
+  updateContactInformation(contactInformation: $contactInformation) {
+    ...ContactInformationFields
+  }
+}
+
+mutation LockContactInformation($id: ID!) {
+  lockContactInformation(id: $id) {
+    ...ContactInformationFields
+  }
+}
+
+mutation UnlockContactInformation($id: ID!) {
+  unlockContactInformation(id: $id) #{
+    #add this:  ...ContactInformationFields
+ # }
+}
+
+mutation DeleteContactInformation($id: ID!) {
+  deleteContactInformation(id: $id)
+}

src/app/graphqlOperations/fragments/contactInformation.graphql

@@ -8,4 +8,12 @@ fragment ContactInformationFieldsGeneral on ContactInformation {
     email
     email2
     note
-}
+}
+
+fragment ContactInformationFields on ContactInformation {
+    ...ContactInformationFieldsGeneral
+    isLocked
+    isLockedByMe
+    isLockedByMe
+    lockedUntil
+}

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

@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { LendingStationsService } from 'src/app/services/lending-stations.service';
+import { ContactInformationService } from 'src/app/services/contactInformation.service';
 
 @Component({
   selector: 'app-lending-station',
@@ -33,6 +34,23 @@ export class LendingStationComponent implements OnInit {
     {
       type: 'Group',
       title: 'Kontaktinformationen intern',
+      possibleObjects: [],
+      nameToShowInSelection: (contact) => {
+        return (
+          contact.person.firstName +
+          ' ' +
+          contact.person.name +
+          ' ' +
+          contact.email +
+          ' ' +
+          contact.phone
+        );
+      },
+      propertyPrefixToOverwrite: 'contactInformationIntern',
+      currentlySelectedObjectId: (station) => {
+        return station['contactInformationIntern.id'];
+      },
+      propertyNameOfReferenceId: 'contactInformationInternId',
       properties: [
         {
           dataPath: 'contactInformationIntern.person.firstName',
@@ -58,6 +76,23 @@ export class LendingStationComponent implements OnInit {
     {
       type: 'Group',
       title: 'Kontaktinformationen extern',
+      possibleObjects: [],
+      nameToShowInSelection: (contact) => {
+        return (
+          contact.person.firstName +
+          ' ' +
+          contact.person.name +
+          ' ' +
+          contact.email +
+          ' ' +
+          contact.phone
+        );
+      },
+      propertyPrefixToOverwrite: 'contactInformationExtern',
+      currentlySelectedObjectId: (station) => {
+        return station['contactInformationExtern.id'];
+      },
+      propertyNameOfReferenceId: 'contactInformationExternId',
       properties: [
         {
           dataPath: 'contactInformationExtern.person.firstName',
@@ -124,10 +159,23 @@ export class LendingStationComponent implements OnInit {
 
   dataService: any;
 
-  constructor(private lendingStationsService: LendingStationsService) {
+  constructor(
+    private lendingStationsService: LendingStationsService,
+    private contactInformationService: ContactInformationService
+  ) {
     /*this.propertiesInfo.find(
       (prop) => prop.dataPath === 'equipmentType'
     ).dataService = this.equipmentTypeService;*/
+    this.contactInformationService.loadTableData();
+    this.contactInformationService.tableData.subscribe((data) => {
+      this.propertiesInfo.find(
+        (prop) => prop.propertyPrefixToOverwrite === 'contactInformationIntern'
+      ).possibleObjects = data;
+
+      this.propertiesInfo.find(
+        (prop) => prop.propertyPrefixToOverwrite === 'contactInformationExtern'
+      ).possibleObjects = data;
+    });
   }
 
   ngOnInit(): void {

src/app/services/contactInformation.service.ts

@@ -0,0 +1,128 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject, Subject } from 'rxjs';
+import {
+  GetContactInformationGQL,
+  UpdateContactInformationGQL,
+  UpdateContactInformationMutationVariables,
+  LockContactInformationGQL,
+  LockContactInformationMutationVariables,
+  UnlockContactInformationGQL,
+  UnlockContactInformationMutationVariables,
+  CreateContactInformationGQL,
+  CreateContactInformationMutationVariables,
+  DeleteContactInformationGQL,
+  DeleteContactInformationMutationVariables,
+} from '../../generated/graphql';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ContactInformationService {
+  /** ContactInformation Array */
+  tableData: BehaviorSubject<any[]> = new BehaviorSubject(null);
+  loadingRowIds: BehaviorSubject<string[]> = new BehaviorSubject([]);
+  successfullyCreatedRowWithId: Subject<string> = new Subject();
+  pageData: BehaviorSubject<any> = new BehaviorSubject(null);
+  isLoadingPageData: BehaviorSubject<boolean> = new BehaviorSubject(false);
+
+  constructor(
+    private getContactInformationGQL: GetContactInformationGQL,
+    private updateContactInformationGQL: UpdateContactInformationGQL,
+    private lockContactInformationGQL: LockContactInformationGQL,
+    private unlockContactInformationGQL: UnlockContactInformationGQL,
+    private createContactInformationGQL: CreateContactInformationGQL,
+    private deleteContactInformationGQL: DeleteContactInformationGQL
+  ) {}
+
+  addLoadingRowId(id: string) {
+    this.loadingRowIds.next([...this.loadingRowIds.value, id]);
+  }
+
+  removeLoadingRowId(id: string) {
+    this.loadingRowIds.value.forEach((item, index) => {
+      if (item === id) {
+        this.loadingRowIds.value.splice(index, 1);
+      }
+    });
+    this.loadingRowIds.next(this.loadingRowIds.value);
+  }
+
+  loadTableData() {
+    this.tableData.next(null);
+    this.getContactInformationGQL.fetch().subscribe((result) => {
+      this.tableData.next(result.data?.contactInformation);
+    });
+  }
+
+  createContactInformation(currentId: string, variables: CreateContactInformationMutationVariables) {
+    this.createContactInformationGQL.mutate(variables).subscribe((result) => {
+      const newContactInformation = result.data.createContactInformation;
+      this.tableData.next([newContactInformation, ...this.tableData.value]);
+      this.successfullyCreatedRowWithId.next(currentId);
+    });
+  }
+
+  updateContactInformation(variables: UpdateContactInformationMutationVariables) {
+    this.addLoadingRowId(variables.contactInformation.id);
+    this.updateContactInformationGQL
+      .mutate(variables)
+      .subscribe((result) => {
+        this.updateDataRowFromResponse(result.data.updateContactInformation);
+      })
+      .add(() => {
+        this.removeLoadingRowId(variables.contactInformation.id);
+      });
+  }
+
+  lockContactInformation(variables: LockContactInformationMutationVariables) {
+    this.addLoadingRowId(variables.id);
+    this.lockContactInformationGQL
+      .mutate(variables)
+      .subscribe((result) => {
+        this.updateDataRowFromResponse(result.data.lockContactInformation);
+      })
+      .add(() => {
+        this.removeLoadingRowId(variables.id);
+      });
+  }
+
+  unlockContactInformation(variables: UnlockContactInformationMutationVariables) {
+    this.addLoadingRowId(variables.id);
+    this.unlockContactInformationGQL
+      .mutate(variables)
+      .subscribe((result) => {
+        this.updateDataRowFromResponse(result.data.unlockContactInformation);
+      })
+      .add(() => {
+        this.removeLoadingRowId(variables.id);
+      });
+  }
+
+  deleteContactInformation(variables: DeleteContactInformationMutationVariables) {
+    this.addLoadingRowId(variables.id);
+    this.deleteContactInformationGQL
+      .mutate(variables)
+      .subscribe((result) => {
+        if (result.data) {
+          this.tableData.next(
+            [...this.tableData.value].filter((contactInformation) => contactInformation.id !== variables.id)
+          );
+        }
+      })
+      .add(() => {
+        this.removeLoadingRowId(variables.id);
+      });
+  }
+
+  private updateDataRowFromResponse(rowFromResponse: any) {
+    if (this.tableData.value) {
+      const newTableData = this.tableData.value.map((row) =>
+        rowFromResponse.id === row.id ? rowFromResponse : row
+      );
+      this.tableData.next(newTableData);
+    }
+    if (rowFromResponse.id === this.pageData?.value?.id) {
+      this.pageData.next(rowFromResponse);
+    }
+  }
+}

src/generated/graphql.ts

@@ -1844,6 +1844,58 @@ export type DeleteCargoBikeMutationVariables = Exact<{
 
 export type DeleteCargoBikeMutation = { __typename?: 'Mutation', deleteCargoBike: boolean };
 
+export type GetContactInformationQueryVariables = Exact<{ [key: string]: never; }>;
+
+
+export type GetContactInformationQuery = { __typename?: 'Query', contactInformation: Array<(
+    { __typename?: 'ContactInformation' }
+    & ContactInformationFieldsFragment
+  )> };
+
+export type CreateContactInformationMutationVariables = Exact<{
+  contactInformation: ContactInformationCreateInput;
+}>;
+
+
+export type CreateContactInformationMutation = { __typename?: 'Mutation', createContactInformation: (
+    { __typename?: 'ContactInformation' }
+    & ContactInformationFieldsFragment
+  ) };
+
+export type UpdateContactInformationMutationVariables = Exact<{
+  contactInformation: ContactInformationUpdateInput;
+}>;
+
+
+export type UpdateContactInformationMutation = { __typename?: 'Mutation', updateContactInformation: (
+    { __typename?: 'ContactInformation' }
+    & ContactInformationFieldsFragment
+  ) };
+
+export type LockContactInformationMutationVariables = Exact<{
+  id: Scalars['ID'];
+}>;
+
+
+export type LockContactInformationMutation = { __typename?: 'Mutation', lockContactInformation: (
+    { __typename?: 'ContactInformation' }
+    & ContactInformationFieldsFragment
+  ) };
+
+export type UnlockContactInformationMutationVariables = Exact<{
+  id: Scalars['ID'];
+}>;
+
+
+export type UnlockContactInformationMutation = { __typename?: 'Mutation', unlockContactInformation: boolean };
+
+export type DeleteContactInformationMutationVariables = Exact<{
+  id: Scalars['ID'];
+}>;
+
+
+export type DeleteContactInformationMutation = { __typename?: 'Mutation', deleteContactInformation: boolean };
+
 export type GetEquipmentsQueryVariables = Exact<{ [key: string]: never; }>;
 
 
@@ -2002,6 +2054,11 @@ export type ContactInformationFieldsGeneralFragment = { __typename?: 'ContactInf
     & PersonFieldsGeneralFragment
   ) };
 
+export type ContactInformationFieldsFragment = (
+  { __typename?: 'ContactInformation', isLocked: boolean, isLockedByMe: boolean, lockedUntil?: Maybe<any> }
+  & ContactInformationFieldsGeneralFragment
+);
+
 export type EngagementFieldsForBikePageFragment = { __typename?: 'Engagement', id: string, isLocked: boolean, isLockedByMe: boolean, lockedBy?: Maybe<string>, lockedUntil?: Maybe<any>, engagementType: (
     { __typename?: 'EngagementType' }
     & EngagementTypeFieldsFragment
@@ -2514,6 +2571,15 @@ ${EquipmentFieldsForBikePageFragmentDoc}
 ${EquipmentTypeFieldsFragmentDoc}
 ${EngagementFieldsForBikePageFragmentDoc}
 ${TimeFrameFieldsForBikePageFragmentDoc}`;
+export const ContactInformationFieldsFragmentDoc = gql`
+    fragment ContactInformationFields on ContactInformation {
+  ...ContactInformationFieldsGeneral
+  isLocked
+  isLockedByMe
+  isLockedByMe
+  lockedUntil
+}
+    ${ContactInformationFieldsGeneralFragmentDoc}`;
 export const EquipmentFieldsForTableFragmentDoc = gql`
     fragment EquipmentFieldsForTable on Equipment {
   id
@@ -2741,6 +2807,110 @@ export const DeleteCargoBikeDocument = gql`
   export class DeleteCargoBikeGQL extends Apollo.Mutation<DeleteCargoBikeMutation, DeleteCargoBikeMutationVariables> {
     document = DeleteCargoBikeDocument;
     
+    constructor(apollo: Apollo.Apollo) {
+      super(apollo);
+    }
+  }
+export const GetContactInformationDocument = gql`
+    query GetContactInformation {
+  contactInformation {
+    ...ContactInformationFields
+  }
+}
+    ${ContactInformationFieldsFragmentDoc}`;
+
+  @Injectable({
+    providedIn: 'root'
+  })
+  export class GetContactInformationGQL extends Apollo.Query<GetContactInformationQuery, GetContactInformationQueryVariables> {
+    document = GetContactInformationDocument;
+    
+    constructor(apollo: Apollo.Apollo) {
+      super(apollo);
+    }
+  }
+export const CreateContactInformationDocument = gql`
+    mutation CreateContactInformation($contactInformation: ContactInformationCreateInput!) {
+  createContactInformation(contactInformation: $contactInformation) {
+    ...ContactInformationFields
+  }
+}
+    ${ContactInformationFieldsFragmentDoc}`;
+
+  @Injectable({
+    providedIn: 'root'
+  })
+  export class CreateContactInformationGQL extends Apollo.Mutation<CreateContactInformationMutation, CreateContactInformationMutationVariables> {
+    document = CreateContactInformationDocument;
+    
+    constructor(apollo: Apollo.Apollo) {
+      super(apollo);
+    }
+  }
+export const UpdateContactInformationDocument = gql`
+    mutation UpdateContactInformation($contactInformation: ContactInformationUpdateInput!) {
+  updateContactInformation(contactInformation: $contactInformation) {
+    ...ContactInformationFields
+  }
+}
+    ${ContactInformationFieldsFragmentDoc}`;
+
+  @Injectable({
+    providedIn: 'root'
+  })
+  export class UpdateContactInformationGQL extends Apollo.Mutation<UpdateContactInformationMutation, UpdateContactInformationMutationVariables> {
+    document = UpdateContactInformationDocument;
+    
+    constructor(apollo: Apollo.Apollo) {
+      super(apollo);
+    }
+  }
+export const LockContactInformationDocument = gql`
+    mutation LockContactInformation($id: ID!) {
+  lockContactInformation(id: $id) {
+    ...ContactInformationFields
+  }
+}
+    ${ContactInformationFieldsFragmentDoc}`;
+
+  @Injectable({
+    providedIn: 'root'
+  })
+  export class LockContactInformationGQL extends Apollo.Mutation<LockContactInformationMutation, LockContactInformationMutationVariables> {
+    document = LockContactInformationDocument;
+    
+    constructor(apollo: Apollo.Apollo) {
+      super(apollo);
+    }
+  }
+export const UnlockContactInformationDocument = gql`
+    mutation UnlockContactInformation($id: ID!) {
+  unlockContactInformation(id: $id)
+}
+    `;
+
+  @Injectable({
+    providedIn: 'root'
+  })
+  export class UnlockContactInformationGQL extends Apollo.Mutation<UnlockContactInformationMutation, UnlockContactInformationMutationVariables> {
+    document = UnlockContactInformationDocument;
+    
+    constructor(apollo: Apollo.Apollo) {
+      super(apollo);
+    }
+  }
+export const DeleteContactInformationDocument = gql`
+    mutation DeleteContactInformation($id: ID!) {
+  deleteContactInformation(id: $id)
+}
+    `;
+
+  @Injectable({
+    providedIn: 'root'
+  })
+  export class DeleteContactInformationGQL extends Apollo.Mutation<DeleteContactInformationMutation, DeleteContactInformationMutationVariables> {
+    document = DeleteContactInformationDocument;
+    
     constructor(apollo: Apollo.Apollo) {
       super(apollo);
     }