From 933bb130e575e29d346f96f3ce655c92e3b81832 Mon Sep 17 00:00:00 2001
From: mdelez <60604010+mdelez@users.noreply.github.com>
Date: Thu, 12 Aug 2021 15:30:21 +0200
Subject: [PATCH] feat(display-edit): disable delete depending on cardinality
 (DSP-1814) (#329)

* feat(display-edit): do not allow user to delete a value if the property's cardinality does now allow it

* fix: makes unit tests happy

* feat(display-edit): disables delete button instead of not showing it. Also adds a tooltip explaining why a value cannot be deleted.

* test(display-edit): adds test to check if disabling the delete button works as expected
---
 package-lock.json                                  |  1 +
 projects/dsp-ui/src/assets/style/_viewer.scss      |  8 ++++++++
 .../display-edit/display-edit.component.html       | 12 +++++++-----
 .../display-edit/display-edit.component.spec.ts    | 14 ++++++++++++++
 .../display-edit/display-edit.component.ts         |  2 ++
 .../property-view/property-view.component.html     |  1 +
 .../property-view/property-view.component.spec.ts  |  1 +
 .../views/property-view/property-view.component.ts | 12 ++++++++++++
 8 files changed, 46 insertions(+), 5 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index c5c83c362..af9eb2d82 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4,6 +4,7 @@
   "requires": true,
   "packages": {
     "": {
+      "name": "dsp-ui-lib",
       "license": "AGPL-3.0-or-later",
       "dependencies": {
         "@angular/animations": "^11.2.9",
diff --git a/projects/dsp-ui/src/assets/style/_viewer.scss b/projects/dsp-ui/src/assets/style/_viewer.scss
index f387cc0b3..487cdee17 100644
--- a/projects/dsp-ui/src/assets/style/_viewer.scss
+++ b/projects/dsp-ui/src/assets/style/_viewer.scss
@@ -82,6 +82,14 @@
 
     .button-container {
 
+      button.mat-button-disabled {
+
+        .mat-icon {
+          color: #aaaaaa;
+        }
+
+      }
+
       button {
         cursor: pointer;
         border: none;
diff --git a/projects/dsp-ui/src/lib/viewer/operations/display-edit/display-edit.component.html b/projects/dsp-ui/src/lib/viewer/operations/display-edit/display-edit.component.html
index 292a02f84..20e1483b0 100644
--- a/projects/dsp-ui/src/lib/viewer/operations/display-edit/display-edit.component.html
+++ b/projects/dsp-ui/src/lib/viewer/operations/display-edit/display-edit.component.html
@@ -28,7 +28,7 @@
             <div class="button-container">
                 <button mat-button
                         class="edit"
-                        title="edit"
+                        [matTooltip]="'edit'"
                         *ngIf="!readOnlyValue && canModify && !editModeActive"
                         (click)="activateEditMode()">
                     <mat-icon>edit</mat-icon>
@@ -46,13 +46,15 @@
                         (click)="toggleComment()">
                     <mat-icon>comment</mat-icon>
                 </button>
-                <button mat-button
+                <span [matTooltip]="(canDelete ? 'delete' : 'This value cannot be deleted because at least one value is required')">
+                    <button mat-button
                         class="delete"
-                        title="delete"
                         *ngIf="!readOnlyValue && canModify && !editModeActive"
+                        [disabled]="!canDelete"
                         (click)="openDialog()">
-                    <mat-icon>delete</mat-icon>
-                </button>
+                        <mat-icon>delete</mat-icon>
+                    </button>
+                </span>
             </div>
         </div>
     </div>
diff --git a/projects/dsp-ui/src/lib/viewer/operations/display-edit/display-edit.component.spec.ts b/projects/dsp-ui/src/lib/viewer/operations/display-edit/display-edit.component.spec.ts
index 5f6347dd5..3db3ace8a 100644
--- a/projects/dsp-ui/src/lib/viewer/operations/display-edit/display-edit.component.spec.ts
+++ b/projects/dsp-ui/src/lib/viewer/operations/display-edit/display-edit.component.spec.ts
@@ -256,6 +256,7 @@ class TestDateValueComponent {
       <dsp-display-edit *ngIf="readValue" #displayEditVal [parentResource]="readResource"
                         [displayValue]="readValue"
                         [propArray]="propArray"
+                        [canDelete]="deleteIsAllowed"
                         (referredResourceClicked)="internalLinkClicked($event)"
                         (referredResourceHovered)="internalLinkHovered($event)"
       ></dsp-display-edit>`
@@ -270,6 +271,8 @@ class TestHostDisplayValueComponent implements OnInit {
 
   mode: 'read' | 'update' | 'create' | 'search';
 
+  deleteIsAllowed: boolean;
+
   linkValClicked: ReadLinkValue | string = 'init'; // "init" is set because there is a test that checks that this does not emit for standoff links
                                                    // (and if it emits undefined because of a bug, we cannot check)
   linkValHovered: ReadLinkValue | string = 'init'; // see comment above
@@ -280,6 +283,8 @@ class TestHostDisplayValueComponent implements OnInit {
       this.readResource = res;
 
       this.mode = 'read';
+
+      this.deleteIsAllowed = true;
     });
   }
 
@@ -1183,5 +1188,14 @@ describe('DisplayEditComponent', () => {
             expect(valuesSpy.v2.values.deleteValue).toHaveBeenCalledTimes(1);
         });
     });
+
+    it('should disable the delete button', async () => {
+        testHostComponent.displayEditValueComponent.canDelete = false;
+
+        testHostFixture.detectChanges();
+
+        const deleteButton = await rootLoader.getHarness(MatButtonHarness.with({selector: '.delete'}));
+        expect(deleteButton.isDisabled).toBeTruthy;
+    });
   });
 });
diff --git a/projects/dsp-ui/src/lib/viewer/operations/display-edit/display-edit.component.ts b/projects/dsp-ui/src/lib/viewer/operations/display-edit/display-edit.component.ts
index e5887303f..c0a322be4 100644
--- a/projects/dsp-ui/src/lib/viewer/operations/display-edit/display-edit.component.ts
+++ b/projects/dsp-ui/src/lib/viewer/operations/display-edit/display-edit.component.ts
@@ -75,6 +75,8 @@ export class DisplayEditComponent implements OnInit {
 
     @Input() configuration?: object;
 
+    @Input() canDelete: boolean;
+
     @Output() referredResourceClicked: EventEmitter<ReadLinkValue> = new EventEmitter<ReadLinkValue>();
 
     @Output() referredResourceHovered: EventEmitter<ReadLinkValue> = new EventEmitter<ReadLinkValue>();
diff --git a/projects/dsp-ui/src/lib/viewer/views/property-view/property-view.component.html b/projects/dsp-ui/src/lib/viewer/views/property-view/property-view.component.html
index ebdc0abca..e62c6675b 100644
--- a/projects/dsp-ui/src/lib/viewer/views/property-view/property-view.component.html
+++ b/projects/dsp-ui/src/lib/viewer/views/property-view/property-view.component.html
@@ -25,6 +25,7 @@
                             [parentResource]="parentResource"
                             [displayValue]="val"
                             [propArray]="propArray"
+                            [canDelete]="deleteValueIsAllowed(prop)"
                             (referredResourceClicked)="referredResourceClicked.emit($event)"
                             (referredResourceHovered)="referredResourceHovered.emit($event)">
                         </dsp-display-edit>
diff --git a/projects/dsp-ui/src/lib/viewer/views/property-view/property-view.component.spec.ts b/projects/dsp-ui/src/lib/viewer/views/property-view/property-view.component.spec.ts
index 5d9aa9dbd..4fd347fba 100644
--- a/projects/dsp-ui/src/lib/viewer/views/property-view/property-view.component.spec.ts
+++ b/projects/dsp-ui/src/lib/viewer/views/property-view/property-view.component.spec.ts
@@ -113,6 +113,7 @@ class TestDisplayValueComponent {
     @Input() displayValue: ReadValue;
     @Input() propArray: PropertyInfoValues[];
     @Input() configuration?: object;
+    @Input() canDelete: boolean;
 
     @Output() referredResourceClicked: EventEmitter<ReadLinkValue> = new EventEmitter<ReadLinkValue>();
     @Output() referredResourceHovered: EventEmitter<ReadLinkValue> = new EventEmitter<ReadLinkValue>();
diff --git a/projects/dsp-ui/src/lib/viewer/views/property-view/property-view.component.ts b/projects/dsp-ui/src/lib/viewer/views/property-view/property-view.component.ts
index 7fad61df6..36ab95993 100644
--- a/projects/dsp-ui/src/lib/viewer/views/property-view/property-view.component.ts
+++ b/projects/dsp-ui/src/lib/viewer/views/property-view/property-view.component.ts
@@ -131,4 +131,16 @@ export class PropertyViewComponent implements OnInit, OnDestroy {
         // user has write permissions
         return isAllowed && this.propID !== prop.propDef.id && this.addButtonIsVisible;
     }
+
+    /**
+     * Given a resource property, check if its cardinality allows a value to be deleted
+     *
+     * @param prop the resource property
+     */
+    deleteValueIsAllowed(prop: PropertyInfoValues): boolean {
+        const isAllowed = CardinalityUtil.deleteValueForPropertyAllowed(
+            prop.propDef.id, prop.values.length, this.parentResource.entityInfo.classes[this.parentResource.type]);
+
+        return isAllowed;
+    }
 }