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 0dbf3cb01..1d19aac67 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 @@ -35,11 +35,7 @@ - -
+
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; + } }