From b02d7ef9757336a78d672bc25aaf069d61451273 Mon Sep 17 00:00:00 2001 From: amentis Date: Wed, 29 May 2024 17:12:42 +0300 Subject: [PATCH] add dmp contact pop up dialog --- .../app/core/services/user/user.service.ts | 2 +- .../dmp-contact-prefill-dialog.component.html | 23 +++++++ .../dmp-contact-prefill-dialog.component.scss | 49 ++++++++++++++ .../dmp-contact-prefill-dialog.component.ts | 66 +++++++++++++++++++ ...dmp-contact-prefill-dialog.editor.model.ts | 38 +++++++++++ .../dmp-contact-prefill-dialog.module.ts | 14 ++++ .../dmp-editor.component.html | 5 ++ .../dmp-editor.component.ts | 19 +++++- .../dmp-editor-blueprint/dmp-editor.module.ts | 4 +- dmp-frontend/src/assets/i18n/en.json | 15 ++++- 10 files changed, 231 insertions(+), 4 deletions(-) create mode 100644 dmp-frontend/src/app/ui/dmp/dmp-contact-prefill-dialog/dmp-contact-prefill-dialog.component.html create mode 100644 dmp-frontend/src/app/ui/dmp/dmp-contact-prefill-dialog/dmp-contact-prefill-dialog.component.scss create mode 100644 dmp-frontend/src/app/ui/dmp/dmp-contact-prefill-dialog/dmp-contact-prefill-dialog.component.ts create mode 100644 dmp-frontend/src/app/ui/dmp/dmp-contact-prefill-dialog/dmp-contact-prefill-dialog.editor.model.ts create mode 100644 dmp-frontend/src/app/ui/dmp/dmp-contact-prefill-dialog/dmp-contact-prefill-dialog.module.ts diff --git a/dmp-frontend/src/app/core/services/user/user.service.ts b/dmp-frontend/src/app/core/services/user/user.service.ts index 4da784898..0ed666ee3 100644 --- a/dmp-frontend/src/app/core/services/user/user.service.ts +++ b/dmp-frontend/src/app/core/services/user/user.service.ts @@ -166,7 +166,7 @@ export class UserService { valueAssign: (item: DmpAssociatedUser) => item.id, }; - private buildAutocompleteLookup(like?: string, excludedIds?: Guid[], ids?: Guid[]): UserLookup { + public buildAutocompleteLookup(like?: string, excludedIds?: Guid[], ids?: Guid[]): UserLookup { const lookup: UserLookup = new UserLookup(); lookup.page = { size: 100, offset: 0 }; if (excludedIds && excludedIds.length > 0) { lookup.excludedIds = excludedIds; } diff --git a/dmp-frontend/src/app/ui/dmp/dmp-contact-prefill-dialog/dmp-contact-prefill-dialog.component.html b/dmp-frontend/src/app/ui/dmp/dmp-contact-prefill-dialog/dmp-contact-prefill-dialog.component.html new file mode 100644 index 000000000..8f44faa24 --- /dev/null +++ b/dmp-frontend/src/app/ui/dmp/dmp-contact-prefill-dialog/dmp-contact-prefill-dialog.component.html @@ -0,0 +1,23 @@ +
+
+
+ {{'DMP-CONTACT-PREFILL-DIALOG.TITLE' | translate}}{{label}} +
+
+ {{'DMP-CONTACT-PREFILL-DIALOG.TITLE' | translate}}{{enumUtils.toDmpBlueprintSystemFieldTypeString(3)}} +
+
+
+
{{'DMP-CONTACT-PREFILL-DIALOG.TEXT' | translate}}
+
+
+ + {{'DMP-CONTACT-PREFILL-DIALOG.FIELDS.USER' | translate}} + + +
+
+
+
+
+
\ No newline at end of file diff --git a/dmp-frontend/src/app/ui/dmp/dmp-contact-prefill-dialog/dmp-contact-prefill-dialog.component.scss b/dmp-frontend/src/app/ui/dmp/dmp-contact-prefill-dialog/dmp-contact-prefill-dialog.component.scss new file mode 100644 index 000000000..f43c06c3e --- /dev/null +++ b/dmp-frontend/src/app/ui/dmp/dmp-contact-prefill-dialog/dmp-contact-prefill-dialog.component.scss @@ -0,0 +1,49 @@ +.dmp-contact-prefill-dialog { + + padding: 24px; + overflow: hidden; + + .confirmation { + padding-bottom: 20px; + } + + .close-btn { + margin-left: auto; + cursor: pointer; + } + + .warn-text { + // color: #f44336; + + } + + .cancel { + background-color: #aaaaaa; + color: #ffffff; + } + + .cancel-btn { + min-width: 101px; + height: 43px; + background: #ffffff; + border: 1px solid #b5b5b5; + border-radius: 30px; + opacity: 1; + } + + + .delete { + background-color: #ba2c2c; + color: #ffffff; + } + + .delete-btn { + min-width: 101px; + height: 43px; + background: #ffffff; + color: #ba2c2c; + border: 1px solid #ba2c2c; + border-radius: 30px; + opacity: 1; + } +} diff --git a/dmp-frontend/src/app/ui/dmp/dmp-contact-prefill-dialog/dmp-contact-prefill-dialog.component.ts b/dmp-frontend/src/app/ui/dmp/dmp-contact-prefill-dialog/dmp-contact-prefill-dialog.component.ts new file mode 100644 index 000000000..59c00caeb --- /dev/null +++ b/dmp-frontend/src/app/ui/dmp/dmp-contact-prefill-dialog/dmp-contact-prefill-dialog.component.ts @@ -0,0 +1,66 @@ +import { Component, Inject } from '@angular/core'; +import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; +import { BaseComponent } from '@common/base/base.component'; +import { UserService } from '@app/core/services/user/user.service'; +import { SingleAutoCompleteConfiguration } from '@app/library/auto-complete/single/single-auto-complete-configuration'; +import { map } from 'rxjs'; +import { DmpAssociatedUser } from '@app/core/model/user/user'; +import { UntypedFormGroup } from '@angular/forms'; +import { DmpContactPrefillDialogEditorModel } from './dmp-contact-prefill-dialog.editor.model'; +import { FormService } from '@common/forms/form-service'; +import { EnumUtils } from '@app/core/services/utilities/enum-utils.service'; +import { DmpBlueprintSystemFieldType } from '@app/core/common/enum/dmp-blueprint-system-field-type'; + +@Component({ + selector: 'app-dmp-contact-prefill-dialog', + templateUrl: './dmp-contact-prefill-dialog.component.html', + styleUrls: ['./dmp-contact-prefill-dialog.component.scss'] +}) +export class DmpContactPrefillDialogComponent extends BaseComponent { + + formGroup: UntypedFormGroup; + contactFormGroup: UntypedFormGroup; + label: string; + + singleAutoCompleteDmpAssociatedUserConfiguration: SingleAutoCompleteConfiguration = { + initialItems: (data?: any) => this.userService.queryDmpAssociated(this.userService.buildAutocompleteLookup()).pipe(map(x => x.items)), + filterFn: (searchQuery: string, data?: any) => this.userService.queryDmpAssociated(this.userService.buildAutocompleteLookup(searchQuery)).pipe(map(x => x.items)), + getSelectedItem: (selectedItem: any) => this.userService.queryDmpAssociated(this.userService.buildAutocompleteLookup(null, null, [selectedItem])).pipe(map(x => x.items[0])), + displayFn: (item: DmpAssociatedUser) => item.name, + subtitleFn: (item: DmpAssociatedUser) => item.email, + titleFn: (item: DmpAssociatedUser) => item.name, + valueAssign: (item: DmpAssociatedUser) => item, + uniqueAssign: (item: DmpAssociatedUser) => item.id + + }; constructor( + private userService: UserService, + private formService: FormService, + public enumUtils: EnumUtils, + public dialogRef: MatDialogRef, + @Inject(MAT_DIALOG_DATA) public data: any + ) { + super(); + this.contactFormGroup = data.contactFormGroup; + this.label = data.label; + } + + ngOnInit(): void { + this.formGroup = new DmpContactPrefillDialogEditorModel().buildForm(); + } + + cancel() { + this.dialogRef.close(false); + } + + confirm() { + this.formService.touchAllFormFields(this.formGroup); + if (!this.formGroup.valid) { return; } + + this.contactFormGroup.get('firstName').patchValue(this.formGroup.get('name').value); + this.contactFormGroup.get('lastName').patchValue(null); + this.contactFormGroup.get('email').patchValue(this.formGroup.get('email').value); + + this.dialogRef.close(true); + } + +} diff --git a/dmp-frontend/src/app/ui/dmp/dmp-contact-prefill-dialog/dmp-contact-prefill-dialog.editor.model.ts b/dmp-frontend/src/app/ui/dmp/dmp-contact-prefill-dialog/dmp-contact-prefill-dialog.editor.model.ts new file mode 100644 index 000000000..3eedad13c --- /dev/null +++ b/dmp-frontend/src/app/ui/dmp/dmp-contact-prefill-dialog/dmp-contact-prefill-dialog.editor.model.ts @@ -0,0 +1,38 @@ +import { UntypedFormBuilder, UntypedFormGroup, Validators } from "@angular/forms"; +import { DmpAssociatedUser } from "@app/core/model/user/user"; +import { BackendErrorValidator } from '@common/forms/validation/custom-validator'; +import { ValidationErrorModel } from '@common/forms/validation/error-model/validation-error-model'; +import { Validation, ValidationContext } from '@common/forms/validation/validation-context'; +import { Guid } from "@common/types/guid"; + +export class DmpContactPrefillDialogEditorModel implements DmpAssociatedUser { + id: Guid; + name: string; + email: string; + + public validationErrorModel: ValidationErrorModel = new ValidationErrorModel(); + protected formBuilder: UntypedFormBuilder = new UntypedFormBuilder(); + + constructor() { } + + buildForm(context: ValidationContext = null, disabled: boolean = false): UntypedFormGroup { + if (context == null) { context = this.createValidationContext(); } + + return this.formBuilder.group({ + id: [{ value: this.id, disabled: disabled }, context.getValidation('id').validators], + name: [{ value: this.name, disabled: disabled }, context.getValidation('name').validators], + email: [{ value: this.email, disabled: disabled }, context.getValidation('email').validators], + }); + } + + createValidationContext(): ValidationContext { + const baseContext: ValidationContext = new ValidationContext(); + const baseValidationArray: Validation[] = new Array(); + baseValidationArray.push({ key: 'id', validators: [Validators.required, BackendErrorValidator(this.validationErrorModel, 'id')] }); + baseValidationArray.push({ key: 'name', validators: [Validators.required, BackendErrorValidator(this.validationErrorModel, 'name')] }); + baseValidationArray.push({ key: 'email', validators: [Validators.required, BackendErrorValidator(this.validationErrorModel, 'email')] }); + + baseContext.validation = baseValidationArray; + return baseContext; + } +} diff --git a/dmp-frontend/src/app/ui/dmp/dmp-contact-prefill-dialog/dmp-contact-prefill-dialog.module.ts b/dmp-frontend/src/app/ui/dmp/dmp-contact-prefill-dialog/dmp-contact-prefill-dialog.module.ts new file mode 100644 index 000000000..432e14131 --- /dev/null +++ b/dmp-frontend/src/app/ui/dmp/dmp-contact-prefill-dialog/dmp-contact-prefill-dialog.module.ts @@ -0,0 +1,14 @@ +import { NgModule } from '@angular/core'; +import { FormsModule, ReactiveFormsModule } from '@angular/forms'; +import { CommonUiModule } from '@common/ui/common-ui.module'; +import { AutoCompleteModule } from '@app/library/auto-complete/auto-complete.module'; +import { DmpContactPrefillDialogComponent } from './dmp-contact-prefill-dialog.component'; + +@NgModule({ + imports: [CommonUiModule, FormsModule, ReactiveFormsModule, AutoCompleteModule], + declarations: [DmpContactPrefillDialogComponent], + exports: [DmpContactPrefillDialogComponent] +}) +export class DmpContactPrefillDialogModule { + constructor() { } +} diff --git a/dmp-frontend/src/app/ui/dmp/dmp-editor-blueprint/dmp-editor.component.html b/dmp-frontend/src/app/ui/dmp/dmp-editor-blueprint/dmp-editor.component.html index b85ae8fe0..b2bd9df84 100644 --- a/dmp-frontend/src/app/ui/dmp/dmp-editor-blueprint/dmp-editor.component.html +++ b/dmp-frontend/src/app/ui/dmp/dmp-editor-blueprint/dmp-editor.component.html @@ -222,6 +222,11 @@ +
+ +