From 4aae9c8ff5799ba2f71f8d23bc9be9a382f0100e Mon Sep 17 00:00:00 2001 From: Max Ehrlicher-Schmidt Date: Wed, 2 Dec 2020 00:57:19 +0100 Subject: [PATCH] Add edit contact information functionallity on lendingStations --- src/app/app.module.ts | 2 +- .../data-page/data-page.component.html | 13 +- .../data-page/data-page.component.ts | 26 ++- .../select-object-dialog.component.html | 0 .../select-object-dialog.component.scss | 0 .../select-object-dialog.component.ts | 11 +- src/app/components/table/table.component.ts | 3 +- .../contactInformation.graphql | 33 ++++ .../fragments/contactInformation.graphql | 10 +- .../lending-station.component.ts | 50 +++++- .../services/contactInformation.service.ts | 128 +++++++++++++ src/generated/graphql.ts | 170 ++++++++++++++++++ 12 files changed, 431 insertions(+), 15 deletions(-) rename src/app/components/{tableComponents => }/select-object-dialog/select-object-dialog.component.html (100%) rename src/app/components/{tableComponents => }/select-object-dialog/select-object-dialog.component.scss (100%) rename src/app/components/{tableComponents => }/select-object-dialog/select-object-dialog.component.ts (83%) create mode 100644 src/app/graphqlOperations/contactInformation.graphql create mode 100644 src/app/services/contactInformation.service.ts diff --git a/src/app/app.module.ts b/src/app/app.module.ts index f32d82d..6ab213a 100644 --- a/src/app/app.module.ts +++ b/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'; diff --git a/src/app/components/data-page/data-page.component.html b/src/app/components/data-page/data-page.component.html index e2ff041..b247899 100644 --- a/src/app/components/data-page/data-page.component.html +++ b/src/app/components/data-page/data-page.component.html @@ -10,11 +10,20 @@

{{ data[headlineDataPath] }} - {{headlineIconName}} + {{ headlineIconName }}

- {{ object.title }} + {{ object.title }} + + { + 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; } diff --git a/src/app/components/tableComponents/select-object-dialog/select-object-dialog.component.html b/src/app/components/select-object-dialog/select-object-dialog.component.html similarity index 100% rename from src/app/components/tableComponents/select-object-dialog/select-object-dialog.component.html rename to src/app/components/select-object-dialog/select-object-dialog.component.html diff --git a/src/app/components/tableComponents/select-object-dialog/select-object-dialog.component.scss b/src/app/components/select-object-dialog/select-object-dialog.component.scss similarity index 100% rename from src/app/components/tableComponents/select-object-dialog/select-object-dialog.component.scss rename to src/app/components/select-object-dialog/select-object-dialog.component.scss diff --git a/src/app/components/tableComponents/select-object-dialog/select-object-dialog.component.ts b/src/app/components/select-object-dialog/select-object-dialog.component.ts similarity index 83% rename from src/app/components/tableComponents/select-object-dialog/select-object-dialog.component.ts rename to src/app/components/select-object-dialog/select-object-dialog.component.ts index 8a259a6..b7b9bee 100644 --- a/src/app/components/tableComponents/select-object-dialog/select-object-dialog.component.ts +++ b/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, + public dialogRef: MatDialogRef, @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); } diff --git a/src/app/components/table/table.component.ts b/src/app/components/table/table.component.ts index f86d4e1..9a651f5 100644 --- a/src/app/components/table/table.component.ts +++ b/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 '../tableComponents/select-object-dialog/select-object-dialog.component'; +import { SelectObjectDialogComponent } from '../select-object-dialog/select-object-dialog.component'; @Component({ selector: 'app-table', diff --git a/src/app/graphqlOperations/contactInformation.graphql b/src/app/graphqlOperations/contactInformation.graphql new file mode 100644 index 0000000..cc4a3e3 --- /dev/null +++ b/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) +} diff --git a/src/app/graphqlOperations/fragments/contactInformation.graphql b/src/app/graphqlOperations/fragments/contactInformation.graphql index 2248d81..0a74d92 100644 --- a/src/app/graphqlOperations/fragments/contactInformation.graphql +++ b/src/app/graphqlOperations/fragments/contactInformation.graphql @@ -8,4 +8,12 @@ fragment ContactInformationFieldsGeneral on ContactInformation { email email2 note -} \ No newline at end of file +} + +fragment ContactInformationFields on ContactInformation { + ...ContactInformationFieldsGeneral + isLocked + isLockedByMe + isLockedByMe + lockedUntil +} diff --git a/src/app/pages/dataPages/lending-station/lending-station.component.ts b/src/app/pages/dataPages/lending-station/lending-station.component.ts index b6f1b30..b689c97 100644 --- a/src/app/pages/dataPages/lending-station/lending-station.component.ts +++ b/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 { diff --git a/src/app/services/contactInformation.service.ts b/src/app/services/contactInformation.service.ts new file mode 100644 index 0000000..7610900 --- /dev/null +++ b/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 = new BehaviorSubject(null); + loadingRowIds: BehaviorSubject = new BehaviorSubject([]); + successfullyCreatedRowWithId: Subject = new Subject(); + pageData: BehaviorSubject = new BehaviorSubject(null); + isLoadingPageData: BehaviorSubject = 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); + } + } +} diff --git a/src/generated/graphql.ts b/src/generated/graphql.ts index fa74b75..9a79482 100644 --- a/src/generated/graphql.ts +++ b/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 } + & ContactInformationFieldsGeneralFragment +); + export type EngagementFieldsForBikePageFragment = { __typename?: 'Engagement', id: string, isLocked: boolean, isLockedByMe: boolean, lockedBy?: Maybe, lockedUntil?: Maybe, 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 { 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + document = DeleteContactInformationDocument; + constructor(apollo: Apollo.Apollo) { super(apollo); }