fix: property flags

Author: tpluscode

.changeset/dull-icons-own.md

@@ -0,0 +1,5 @@
+---
+"@hydrofoil/shaperone-playground-examples": patch
+---
+
+Horor the canAdd/canRemove flags in language multi select

.changeset/fast-ducks-swim.md

@@ -0,0 +1,5 @@
+---
+"@hydrofoil/shaperone-core": patch
+---
+
+Correctly set intital canAdd/canRemove flag values

demos/examples/LanguageMultiSelect/index.ts

@@ -18,10 +18,26 @@ export const component: (theme: 'lumo' | 'material') => MultiEditorComponent = t
     const values = property.objects.map(o => o.object)
     const selected = languages.filter(lang => values.find(object => object?.term.equals(lang.term)))
 
+    function setValues(e: any) {
+      const newSelection = e.target.selectedItems
+
+      if (newSelection.length > selected.length && !property.canAdd) {
+        e.target.selectedItems = selected
+        return
+      }
+
+      if (newSelection.length < selected.length && !property.canRemove) {
+        e.target.selectedItems = selected
+        return
+      }
+
+      update(newSelection.map((lang: any) => lang.term))
+    }
+
     return html`<multiselect-combo-box item-id-path="id" item-label-path="label"
                     .selectedItems="${selected}"
                     .items="${languages}"
-                    @change="${(e: any) => { update(e.target.selectedItems.map((lang: any) => lang.term)) }}"></multiselect-combo-box>`
+                    @change="${setValues}"></multiselect-combo-box>`
   },
   loadDependencies() {
     return [

packages/core/models/forms/lib/stateBuilder.ts

@@ -77,8 +77,8 @@ function initialisePropertyShape(params: InitPropertyShapeParams, previous: Prop
   }
 
   const editor = editors[0]
-  const canRemove = !!editor || canRemoveObject(shape, objects.length)
-  const canAdd = !!editor || canAddObject(shape, objects.length)
+  const canRemove = canRemoveObject(shape, objects.length)
+  const canAdd = canAddObject(shape, objects.length)
 
   let selectedEditor: NamedNode | undefined = editor?.term
   if (previous) {

packages/core/models/forms/reducers/updateObject.ts

@@ -7,6 +7,7 @@ import type { FormState, PropertyObjectState } from '../index'
 import type { FocusNode } from '../../../index'
 import { EditorsState } from '../../editors'
 import { nextid } from '../lib/objectid'
+import { canAddObject, canRemoveObject } from '../lib/property'
 
 export interface UpdateObjectParams extends BaseParams {
   focusNode: FocusNode
@@ -44,6 +45,8 @@ export const setPropertyObjects = formStateReducer((state: FormState, { focusNod
     return
   }
 
+  propertyState.canAdd = canAddObject(property, objects.terms.length)
+  propertyState.canRemove = canRemoveObject(property, objects.terms.length)
   propertyState.objects = objects.map<PropertyObjectState>((object) => {
     const suitableEditors = editors.matchSingleEditors({ shape: property, object })
     return {

packages/core/test/models/forms/reducers/updateObject.test.ts

@@ -5,47 +5,55 @@ import $rdf from 'rdf-ext'
 import { expect } from 'chai'
 import * as sinon from 'sinon'
 import { setObjectValue, setPropertyObjects } from '../../../../models/forms/reducers/updateObject'
-import { RecursivePartial, testFocusNodeState, testObjectState, testState, testStore } from '../util'
+import { RecursivePartial, testObjectState, testStore } from '../util'
 import { propertyShape } from '../../../util'
 import { Store } from '../../../../state'
 import { FormState } from '../../../../models/forms'
 
 const ex = ns('http://example.com/')
 
 describe('core/models/forms/reducers/updateObject', () => {
+  let store: Store
+  let form: symbol
+  let formState: {
+    focusNodes: RecursivePartial<FormState['focusNodes']>
+    focusStack: FormState['focusStack']
+  }
+
+  beforeEach(() => {
+    ({ form, store } = testStore())
+    formState = store.getState().forms.get(form)!
+  })
+
   describe('setPropertyObjects', () => {
-    it('removes all current triples and creates new', () => {
+    it('removes all current objects and creates new', () => {
       // given
       const graph = cf({ dataset: $rdf.dataset() })
       const focusNode = graph.node(ex.FocusNode)
         .addOut(ex.prop, ['foo1', 'foo2'])
       const property = propertyShape(graph.blankNode(), {
         path: ex.prop,
       })
-      const { form, state } = testState({
-        form: {
-          focusNodes: {
-            ...testFocusNodeState(focusNode, {
-              properties: [{
-                shape: property,
-                objects: [],
-                name: 'prop',
-                canRemove: true,
-                canAdd: true,
-                editors: [],
-                selectedEditor: undefined,
-              }],
-            }),
-          },
+      formState.focusNodes = {
+        [focusNode.value]: {
+          properties: [{
+            shape: property,
+            objects: [],
+            name: 'prop',
+            canRemove: true,
+            canAdd: true,
+            editors: [],
+            selectedEditor: undefined,
+          }],
         },
-      })
+      }
 
       // when
-      const after = setPropertyObjects(state, {
+      const after = setPropertyObjects(store.getState().forms, {
         focusNode,
         form,
         property,
-        editors: testStore().store.getState().editors,
+        editors: store.getState().editors,
         objects: graph.node([$rdf.literal('bar1'), $rdf.literal('bar2'), $rdf.literal('bar3')]),
       })
 
@@ -55,21 +63,102 @@ describe('core/models/forms/reducers/updateObject', () => {
       expect(values).to.have.length(3)
       expect(values).to.include.members(['bar1', 'bar2', 'bar3'])
     })
-  })
 
-  describe('setObjectValue', () => {
-    let store: Store
-    let form: symbol
-    let formState: {
-      focusNodes: RecursivePartial<FormState['focusNodes']>
-      focusStack: FormState['focusStack']
-    }
-
-    beforeEach(() => {
-      ({ form, store } = testStore())
-      formState = store.getState().forms.get(form)!
+    it('flips canAdd flag when max reached', () => {
+      // given
+      const graph = cf({ dataset: $rdf.dataset() })
+      const focusNode = graph.node(ex.FocusNode)
+      const property = propertyShape(graph.blankNode(), {
+        path: ex.prop,
+        maxCount: 2,
+      })
+      formState.focusNodes = {
+        [focusNode.value]: {
+          properties: [{
+            shape: property,
+            canAdd: true,
+          }],
+        },
+      }
+
+      // when
+      const after = setPropertyObjects(store.getState().forms, {
+        focusNode,
+        form,
+        property,
+        editors: testStore().store.getState().editors,
+        objects: graph.node([$rdf.literal('foo'), $rdf.literal('bar')]),
+      })
+
+      // then
+      expect(after.get(form)?.focusNodes[focusNode.value].properties[0].canAdd).to.be.false
+    })
+
+    it('sets canRemove flag when min reached', () => {
+      // given
+      const graph = cf({ dataset: $rdf.dataset() })
+      const focusNode = graph.node(ex.FocusNode)
+      const property = propertyShape(graph.blankNode(), {
+        path: ex.prop,
+        minCount: 2,
+      })
+      formState.focusNodes = {
+        [focusNode.value]: {
+          properties: [{
+            shape: property,
+            canRemove: true,
+          }],
+        },
+      }
+
+      // when
+      const after = setPropertyObjects(store.getState().forms, {
+        focusNode,
+        form,
+        property,
+        editors: testStore().store.getState().editors,
+        objects: graph.node([$rdf.literal('foo')]),
+      })
+
+      // then
+      expect(after.get(form)?.focusNodes[focusNode.value].properties[0].canRemove).to.be.false
     })
 
+    it('sets canAdd/canRemove flags to true', () => {
+      // given
+      const graph = cf({ dataset: $rdf.dataset() })
+      const focusNode = graph.node(ex.FocusNode)
+      const property = propertyShape(graph.blankNode(), {
+        path: ex.prop,
+        minCount: 1,
+        maxCount: 4,
+      })
+      formState.focusNodes = {
+        [focusNode.value]: {
+          properties: [{
+            shape: property,
+            canAdd: false,
+            canRemove: false,
+          }],
+        },
+      }
+
+      // when
+      const after = setPropertyObjects(store.getState().forms, {
+        focusNode,
+        form,
+        property,
+        editors: testStore().store.getState().editors,
+        objects: graph.node([$rdf.literal('foo'), $rdf.literal('bar')]),
+      })
+
+      // then
+      expect(after.get(form)?.focusNodes[focusNode.value].properties[0].canAdd).to.be.true
+      expect(after.get(form)?.focusNodes[focusNode.value].properties[0].canRemove).to.be.true
+    })
+  })
+
+  describe('setObjectValue', () => {
     it('recalculates editors', () => {
       // given
       const graph = cf({ dataset: $rdf.dataset() })