FIX: Boolean add button (#182)

* fix (property-viewer): check if a property with a cardinality of 0-1 currently has a value. If not, show the add button.

* tests (property-view): added test for a property that has a cardinality of 0-1 and does not contain a value

* refactor (property-view): move logic to show add button from the template to the class

* refactor (property-view): use CardinalityUtil to simply logic

* fix (property-view): small change to use gui element to check if it should hide the add button for a Rich Text Value

* refactor (property-view): simplified return

projects/dsp-ui/src/lib/viewer/views/property-view/property-view.component.html

@@ -35,11 +35,7 @@
                         </dsp-add-value>
                     </div>
                     <!-- Add button -->
-                    <!-- temporary hack to hide add button for an XML value -->
-                    <div *ngIf="prop.guiDef.propertyIndex !== 'http://0.0.0.0:3333/ontology/0001/anything/v2#hasRichtext' &&
-                        addButtonIsVisible &&
-                        prop.guiDef.cardinality !== 1 &&
-                        propID !== prop.propDef.id">
+                    <div *ngIf="addValueIsAllowed(prop)">
                         <button class="create" (click)="showAddValueForm(prop)" title="Add a new value">
                             <mat-icon>add_box</mat-icon>
                         </button>

projects/dsp-ui/src/lib/viewer/views/property-view/property-view.component.spec.ts

@@ -217,12 +217,34 @@ describe('PropertyViewComponent', () => {
             testHostFixture.detectChanges();
         });
 
-        it('should show an add button under each property that has a value component and for which the cardinality is not 1', () => {
+        it('should show an add button under each property that has a value component and value and appropriate cardinality', () => {
             const addButtons = propertyViewComponentDe.queryAll(By.css('button.create'));
             expect(addButtons.length).toEqual(13);
 
         });
 
+        it('should show an add button under a property with a cardinality of 1 and does not have a value', () => {
+
+            // show all properties so that we can access properties with no values
+            testHostComponent.showAllProps = true;
+            testHostFixture.detectChanges();
+
+            let addButtons = propertyViewComponentDe.queryAll(By.css('button.create'));
+
+            // current amount of buttons should equal 18 because the boolean property shouldn't have an add button if it has a value
+            expect(addButtons.length).toEqual(18);
+
+            // remove value from the boolean property
+            testHostComponent.propArray[9].values = [];
+
+            testHostFixture.detectChanges();
+
+            // now the boolean property should have an add button so the amount of add buttons on the page should increase by 1
+            addButtons = propertyViewComponentDe.queryAll(By.css('button.create'));
+            expect(addButtons.length).toEqual(19);
+
+        });
+
         it('should show an add value component when the add button is clicked', () => {
             const addButtonDebugElement = propertyViewComponentDe.query(By.css('button.create'));
             const addButtonNativeElement = addButtonDebugElement.nativeElement;

projects/dsp-ui/src/lib/viewer/views/property-view/property-view.component.ts

@@ -1,12 +1,11 @@
-import { animate, state, style, transition, trigger } from '@angular/animations';
 import {
     Component,
     Input,
     OnDestroy,
     OnInit,
     ViewChild
 } from '@angular/core';
-import { PermissionUtil, ReadResource, SystemPropertyDefinition } from '@dasch-swiss/dsp-js';
+import { CardinalityUtil, PermissionUtil, ReadResource, ResourcePropertyDefinition, SystemPropertyDefinition } from '@dasch-swiss/dsp-js';
 import { Subscription } from 'rxjs';
 import { AddValueComponent } from '../../operations/add-value/add-value.component';
 import { DisplayEditComponent } from '../../operations/display-edit/display-edit.component';
@@ -53,7 +52,6 @@ export class PropertyViewComponent implements OnInit, OnDestroy {
     addButtonIsVisible: boolean; // used to toggle add value button
     addValueFormIsVisible: boolean; // used to toggle add value form field
     propID: string; // used in template to show only the add value form of the corresponding value
-    readOnlyProp: boolean; // used in template to not show an "add" button for properties we do not yet have a way to create/edit
 
     valueOperationEventSubscription: Subscription;
 
@@ -86,10 +84,8 @@ export class PropertyViewComponent implements OnInit, OnDestroy {
      * Called from the template when the user clicks on the add button
      */
     showAddValueForm(prop: PropertyInfoValues) {
-
         this.propID = prop.propDef.id;
         this.addValueFormIsVisible = true;
-
     }
 
     /**
@@ -100,4 +96,26 @@ export class PropertyViewComponent implements OnInit, OnDestroy {
         this.addButtonIsVisible = true;
         this.propID = undefined;
     }
+
+    /**
+     * Given a resource property, check if an add button should be displayed under the property values
+     *
+     * @param prop the resource property
+     */
+    addValueIsAllowed(prop: PropertyInfoValues): boolean {
+        // temporary until CkEditor is integrated
+        const guiElement = (prop.propDef as ResourcePropertyDefinition).guiElement;
+        if (guiElement === 'http://api.knora.org/ontology/salsah-gui/v2#Richtext') {
+            return false;
+        }
+
+        const isAllowed = CardinalityUtil.createValueForPropertyAllowed(
+            prop.propDef.id, prop.values.length, this.parentResource.entityInfo.classes[this.parentResource.type]);
+
+        // check if:
+        // cardinality allows for a value to be added
+        // value component does not already have an add value form open
+        // user has write permissions
+        return isAllowed && this.propID !== prop.propDef.id && this.addButtonIsVisible;
+    }
 }