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

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;

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>

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;
+    });
   });
 });

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>();

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>

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>();

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;
+    }
 }