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 cc8b6174c..96c667ca4 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
@@ -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;
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 3b149743d..713392069 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
@@ -1,4 +1,3 @@
-import { animate, state, style, transition, trigger } from '@angular/animations';
import {
Component,
Input,
@@ -6,7 +5,7 @@ import {
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;
+ }
}