fix(link-value): re-validate form when cancel button is clicked (#711)

dasch-swiss · Apr 8, 2022 · 7768fb9 · 7768fb9
1 parent 5ccd18d
commit 7768fb9
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 9 deletions.
diff --git a/src/app/main/dialog/dialog.component.ts b/src/app/main/dialog/dialog.component.ts
@@ -31,6 +31,10 @@ export interface ConfirmationWithComment {
     comment?: string;
 }
 
+export enum DialogEvent {
+    DialogCanceled
+}
+
 @Component({
     selector: 'app-material-dialog',
     templateUrl: './dialog.component.html',

diff --git a/...pp/workspace/resource/operations/create-link-resource/create-link-resource.component.html b/...pp/workspace/resource/operations/create-link-resource/create-link-resource.component.html
@@ -16,7 +16,7 @@
     </app-select-properties>
     <div class="form-panel form-action">
         <span>
-            <button mat-button type="button" (click)="closeDialog.emit()">
+            <button mat-button type="button" (click)="onCancel()">
                 {{ 'appLabels.form.action.cancel' | translate }}
             </button>
         </span>

diff --git a/src/app/workspace/resource/operations/create-link-resource/create-link-resource.component.ts b/src/app/workspace/resource/operations/create-link-resource/create-link-resource.component.ts
@@ -14,6 +14,7 @@ import {
     ResourcePropertyDefinition
 } from '@dasch-swiss/dsp-js';
 import { DspApiConnectionToken } from 'src/app/main/declarations/dsp-api-tokens';
+import { DialogEvent } from 'src/app/main/dialog/dialog.component';
 import { ErrorHandlerService } from 'src/app/main/error/error-handler.service';
 import { SelectPropertiesComponent } from '../../resource-instance-form/select-properties/select-properties.component';
 
@@ -29,7 +30,7 @@ export class CreateLinkResourceComponent implements OnInit {
     @Input() resourceClassDef: string;
     @Input() currentOntoIri: string;
 
-    @Output() closeDialog: EventEmitter<ReadResource> = new EventEmitter<ReadResource>();
+    @Output() closeDialog: EventEmitter<ReadResource | DialogEvent> = new EventEmitter<ReadResource | DialogEvent>();
 
     @ViewChild('selectProps') selectPropertiesComponent: SelectPropertiesComponent;
 
@@ -140,6 +141,11 @@ export class CreateLinkResourceComponent implements OnInit {
         }
     }
 
+    onCancel() {
+        // emit DialogCanceled event
+        this.closeDialog.emit(DialogEvent.DialogCanceled);
+    }
+
     setFileValue(file: CreateFileValue) {
         this.fileValue = file;
     }

diff --git a/src/app/workspace/resource/values/link-value/link-value.component.ts b/src/app/workspace/resource/values/link-value/link-value.component.ts
@@ -27,7 +27,7 @@ import {
 } from '@dasch-swiss/dsp-js';
 import { Subscription } from 'rxjs';
 import { DspApiConnectionToken } from 'src/app/main/declarations/dsp-api-tokens';
-import { DialogComponent } from 'src/app/main/dialog/dialog.component';
+import { DialogComponent, DialogEvent } from 'src/app/main/dialog/dialog.component';
 import { BaseValueDirective } from 'src/app/main/directive/base-value.directive';
 
 export function resourceValidator(control: AbstractControl) {
@@ -264,14 +264,25 @@ export class LinkValueComponent extends BaseValueDirective implements OnInit, On
 
         const dialogRef = this._dialog.open(DialogComponent, dialogConfig);
 
-        dialogRef.afterClosed().subscribe((event: any) => {
-            const newResource = event as ReadResource;
+        dialogRef.afterClosed().subscribe((event: ReadResource | DialogEvent) => {
+            // save button clicked
+            if (event instanceof ReadResource ) {
+                const newResource = event as ReadResource;
 
-            // set value of value form control to the newly created resource
-            this.form.controls.value.setValue(newResource);
+                // set value of value form control to the newly created resource
+                this.form.controls.value.setValue(newResource);
 
-            // hide the autocomplete results
-            this.autocomplete.closePanel();
+                // hide the autocomplete results
+                this.autocomplete.closePanel();
+            }
+
+            // cancel button clicked
+            if (event === DialogEvent.DialogCanceled){
+                this.resetFormControl();
+
+                // hide the autocomplete results
+                this.autocomplete.closePanel();
+            }
         });
     }
 }