@entryscape/rdforms 10.4.0 → 10.5.0

package/package.json

@@ -8,7 +8,7 @@
     "application profile",
     "linked data"
   ],
-  "version": "10.4.0",
+  "version": "10.5.0",
   "main": "dist/rdforms.node.js",
   "browser": "dist/rdforms.react.js",
   "module": "main.js",
@@ -18,7 +18,7 @@
   "dependencies": {
     "@emotion/react": "^11.4.1",
     "@emotion/styled": "^11.3.0",
-    "@entryscape/rdfjson": "^2.5.3",
+    "@entryscape/rdfjson": "^2.5.4",
     "@mui/icons-material": "^5.0.3",
     "@mui/lab": "^5.0.0-alpha.51",
     "@mui/material": "^5.0.3",

package/src/model/ChoiceBinding.js

@@ -30,14 +30,6 @@ export default class ChoiceBinding extends ValueBinding {
     return this._choice;
   }
 
-  remove() {
-    this.setValue(null);
-    // Removed line below as it is also done in superclass
-    // and therefore causes an error
-    // this._parent.removeChildBinding(this);
-    super.remove();
-  }
-
   setValue(value, choice, silent) {
     super.setValue(value, choice, silent);
     const oldval = this.getValue();

package/src/template/Item.js

@@ -30,6 +30,8 @@ export default class Item {
       'multiline',
       'horizontalRadioButtons',
       'verticalRadioButtons',
+      'horizontalCheckBoxes',
+      'verticalCheckBoxes',
       'nonEditable',
       'expandable',
       'compact',

package/src/utils.js

@@ -3,7 +3,7 @@ import { cloneDeep } from 'lodash-es';
 import system from './model/system';
 
 const getLocalizedValue = (hash) => {
-  const locale = moment.locale();
+  const locale = moment.locale('sv');
   if (hash == null) {
     return { precision: 'none' };
   } else if (typeof hash === 'string') {

package/src/view/Editor.js

@@ -1,14 +1,14 @@
 import renderingContext from './renderingContext';
 import Presenter from './Presenter';
 import * as engine from '../model/engine';
-import {bindingReport} from '../model/validate';
+import { bindingReport } from '../model/validate';
 
 const showNow = (editor, item, bindings, includeLevel) => {
   // Invisible should be created as components and hidden using display: none
   // Otherwise certain extentions such as autoUUID does not work.
-  /*if (item.hasStyle('invisible')) {
+  /* if (item.hasStyle('invisible')) {
     return false;
-  }*/
+  } */
   if (item.hasStyle('presenterOnly')) {
     return false;
   }
@@ -135,6 +135,7 @@ export default class Editor extends Presenter {
     return showNow(this, item, bindings, this.includeLevel);
   }
 
+  // eslint-disable-next-line class-methods-use-this
   skipBinding(/* binding */) {
     return false;
   }
@@ -185,16 +186,16 @@ export default class Editor extends Presenter {
     if (firstBinding.getItem().hasStyle('nonEditable')) {
       return this.addComponent(newRow, firstBinding);
     }
-    return renderingContext.addEditorTable(newRow, firstBinding, {view: this});
+    return renderingContext.addEditorTable(newRow, firstBinding, { view: this });
   }
 
   fillTable(table, bindings) {
-    renderingContext.fillEditorTable(table, bindings, {view: this});
+    renderingContext.fillEditorTable(table, bindings, { view: this });
   }
 
   preRenderView() {
     renderingContext.preEditorViewRenderer(this.domNode, this.binding, {
-      view: this, inEditor: true, topLevel: this.topLevel, hideAddress: this.hideAddress
+      view: this, inEditor: true, topLevel: this.topLevel, hideAddress: this.hideAddress,
     });
   }
 
@@ -209,7 +210,7 @@ export default class Editor extends Presenter {
 
   createRowNode(lastRowNode, binding, item) {
     if (binding == null && item.hasStyle('nonEditable')) {
-      return;
+      return undefined;
     }
     const newNode = super.createRowNode(lastRowNode, binding, item);
     if (item.getType() === 'choice' && typeof item.getProperty() === 'undefined') {
@@ -255,4 +256,10 @@ export default class Editor extends Presenter {
     }
     return newNode;
   }
-};
+
+  // eslint-disable-next-line class-methods-use-this
+  isMultiValued(item) {
+    return renderingContext.multiValueSupport &&
+    (item.hasStyle('horizontalCheckBoxes') || item.hasStyle('verticalCheckBoxes'));
+  }
+}

package/src/view/View.js

@@ -180,11 +180,16 @@ export default class View {
 
         // Non table case
       } else if (bindings.length > 0) {
-        for (let i = 0; i < bindings.length; i++) {
-          // Add row with label if first row of same item or the binding is a group.
+        if (this.isMultiValued(item)) {
           this.context = { view: this };
-          lastRow = this.addRow(lastRow, bindings[i], i === 0 ||
-            bindings[i] instanceof GroupBinding);
+          lastRow = this.addRow(lastRow, bindings[0], true);
+        } else {
+          for (let i = 0; i < bindings.length; i++) {
+            // Add row with label if first row of same item or the binding is a group.
+            this.context = { view: this };
+            lastRow = this.addRow(lastRow, bindings[i], i === 0 ||
+              bindings[i] instanceof GroupBinding);
+          }
         }
       } else {
         lastRow = this.createRowNode(lastRow, null, item);
@@ -346,4 +351,8 @@ export default class View {
     this._labelIndex[binding.getHash()] = idx;
     return idx;
   }
+
+  isMultiValued(item) {
+    return false;
+  }
 }

package/src/view/jquery/text.js

@@ -1,10 +1,11 @@
 import moment from 'moment';
 import { escape } from 'lodash-es';
-import { fromDuration } from './util';
+import { getDatePresentation, fromDuration } from './util';
 import renderingContext from '../renderingContext';
 import utils from '../../utils';
 import system from '../../model/system';
 
+
 const presenters = renderingContext.presenterRegistry;
 
 // Presenter for URIs.
@@ -117,33 +118,29 @@ presenters.itemtype('text').register((fieldDiv, binding, context) => {
 // Presenter for duration
 presenters.itemtype('text').datatype('xsd:duration').register((fieldDiv, binding, context) => {
   const data = fromDuration(binding.getValue());
-  const bundle = context.view.messages
+  const bundle = context.view.messages;
   const node = jquery('<div>').appendTo(fieldDiv)[0];
   ['years', 'months', 'days', 'hours', 'minutes'].forEach((key) => {
     if (data.hasOwnProperty(key)) {
-      jquery(`<span class="durationlabel">${bundle['duration_'+key]}:</span><span class="durationValue">${data[key]}</span>`)
+      jquery(`<span class="durationlabel">${bundle[`duration_${key}`]}:</span><span class="durationValue">${data[key]}</span>`)
         .appendTo(node);
     }
   });
 });
 
-const datePresenter = (fieldDiv, binding, context) => {
-  const data = binding.getValue();
-  if (data != null && data !== '') {
-    try {
-      let str;
-      if (data.indexOf('T') > 0) {
-        str = moment(data).format('lll');
-      } else if (data.length > 4) {
-        str = moment(data).format('LL');
-      } else {
-        str = moment(data).format('YYYY');
-      }
-      jquery('<div>').html(str).appendTo(fieldDiv);
-    } catch (e) {
-      console.warn(`Could not present date, expected ISO8601 format in the form 2001-01-01 (potentially with time given after a 'T' character as well) but found '${data}' instead.`);
-    }
+const datePresenter = (fieldDiv, binding) => {
+  try {
+    const pres = getDatePresentation(binding);
+    jquery('<div>').html(pres).appendTo(fieldDiv);
+  } catch (e) {
+    console.warn(`Could not present date, expected ISO8601 format in the form 2001-01-01 
+    (potentially with time given after a 'T' character as well) but found '${binding.getValue()}' instead.`);
   }
 };
+presenters.itemtype('text').datatype('xsd:dateTime').register(datePresenter);
 presenters.itemtype('text').datatype('xsd:date').register(datePresenter);
-presenters.itemtype('text').datatype('dcterms:W3CDTF').register(datePresenter);
+presenters.itemtype('text').datatype('xsd:time').register(datePresenter);
+presenters.itemtype('text').datatype('xsd:gYear').register(datePresenter);
+presenters.itemtype('text').datatype('xsd:gYearMonth').register(datePresenter);
+presenters.itemtype('text').datatype('xsd:gMonthDay').register(datePresenter);
+presenters.itemtype('text').datatype('dcterms:W3CDTF').register(datePresenter);

package/src/view/jquery/util.js

@@ -1,3 +1,5 @@
+import moment from 'moment';
+
 export const fromDuration = (value) => {
   const f = val => (val && val.length > 1 ? parseInt(val[0], 10) : 0);
   const years = f(value.match(/([0-9])*Y/));
@@ -29,3 +31,171 @@ export const toDuration = (data) => {
   }
   return null;
 };
+
+export const getDate = (value) => {
+  try {
+    // xsd:time
+    if (value.includes(':') && !value.includes('T')) {
+      const datePart = new Date().toISOString().substr(0, 11);
+      const timeDate = new Date(`${datePart}${value}`);
+      timeDate.setMinutes(timeDate.getMinutes() + timeDate.getTimezoneOffset());
+      return timeDate;
+    }
+    // all other cases
+    return new Date(value);
+  } catch (e) {
+    return null;
+  }
+};
+
+export const getDatatype = (datatype) => {
+  switch (datatype) {
+    case 'http://www.w3.org/2001/XMLSchema#dateTime':
+    case 'http://purl.org/dc/terms/W3CDTF':
+      return 'DateTime';
+    case 'http://www.w3.org/2001/XMLSchema#date':
+      return 'Date';
+    case 'http://www.w3.org/2001/XMLSchema#gYear':
+      return 'Year';
+    case 'http://www.w3.org/2001/XMLSchema#time':
+      return 'Time';
+    case 'http://www.w3.org/2001/XMLSchema#gYearMonth':
+      return 'YearMonth';
+    case 'http://www.w3.org/2001/XMLSchema#gMonthDay':
+      return 'MonthDay';
+    default:
+      return undefined;
+  }
+};
+
+export const getDatatypeFromItem = (item) => {
+  const dt = item.getDatatype();
+  if (Array.isArray(dt)) {
+    return getDatatype(dt[0]);
+  }
+  return getDatatype(dt);
+};
+
+export const getDatatypeFromValue = (data) => {
+  if (data.indexOf('T') > 0) {
+    return 'DateTime';
+  } else if (data.indexOf(':') > 0) {
+    return 'Time';
+  } else if (/^\d\d\d\d-\d\d$/.test(data)) {
+    return 'YearMonth';
+  } else if (/^\d\d-\d\d$/.test(data)) {
+    return 'MonthDay';
+  } else if (data.length > 4) {
+    return 'Date';
+  }
+  return 'Year';
+};
+
+export const getDatatypeURI = (datatype) => {
+  switch (datatype) {
+    case 'DateTime':
+      return 'http://www.w3.org/2001/XMLSchema#dateTime';
+    case 'Date':
+      return 'http://www.w3.org/2001/XMLSchema#date';
+    case 'Time':
+      return 'http://www.w3.org/2001/XMLSchema#time';
+    case 'Year':
+      return 'http://www.w3.org/2001/XMLSchema#gYear';
+    case 'YearMonth':
+      return 'http://www.w3.org/2001/XMLSchema#gYearMonth';
+    case 'MonthDay':
+      return 'http://www.w3.org/2001/XMLSchema#gMonthDay';
+    default:
+      return '';
+  }
+};
+
+export const getDateValue = (value, datatype) => {
+  if (value) {
+    switch (datatype) {
+      case 'DateTime':
+        return value.toISOString();
+      case 'Date':
+        // Since we cut of the timezone section at the end we need to compensate for it
+        value.setMinutes(value.getMinutes() - value.getTimezoneOffset());
+        return value.toISOString().substr(0, 10);
+      case 'YearMonth':
+        // Since we cut of the timezone section at the end we need to compensate for it
+        value.setMinutes(value.getMinutes() - value.getTimezoneOffset());
+        return value.toISOString().substr(0, 7);
+      case 'MonthDay':
+        // Since we cut of the timezone section at the end we need to compensate for it
+        value.setMinutes(value.getMinutes() - value.getTimezoneOffset());
+        return value.toISOString().substr(5, 5);
+      case 'Time':
+        value.setMinutes(value.getMinutes() - value.getTimezoneOffset());
+        return value.toISOString().substr(11);
+      case 'Year':
+        // Since we cut of the timezone section at the end we need to compensate for it
+        value.setMinutes(value.getMinutes() - value.getTimezoneOffset());
+        return value.toISOString().substr(0, 4);
+      default:
+        return '';
+    }
+  }
+  return '';
+};
+
+export const getDatePresentationFromDatatype = (datatype, date) => {
+  switch (datatype) {
+    case 'DateTime':
+      return moment(date).format('lll');
+    case 'Date':
+      return moment(date).format('LL');
+    case 'Time':
+      return moment(date).format('LT');
+    case 'Year':
+      return moment(date).format('YYYY');
+    case 'YearMonth':
+      return moment(date).format('MMMM YYYY');
+    case 'MonthDay':
+      return moment(date).format('D MMMM');
+    default:
+      return '';
+  }
+};
+
+export const getAllowedDateAlternatives = (item) => {
+  const dateAllowedDataAlternatives = {};
+  const dt = item.getDatatype();
+  const alts = Array.isArray(dt) ? dt : [dt];
+  alts.forEach((datatype) => {
+    const alt = getDatatype(datatype);
+    if (alt) {
+      dateAllowedDataAlternatives[alt] = true;
+    }
+  });
+  return dateAllowedDataAlternatives;
+};
+
+export const getDatePresentation = (binding) => {
+  const data = binding.getValue();
+  if (data != null && data !== '') {
+    const item = binding.getItem();
+    const date = getDate(data);
+    if (date) {
+      const valueDatatype = getDatatypeFromValue(data);
+      const datatypeDatatype = getDatatype(binding.getDatatype());
+      const itemSuggestedDatatype = getDatatypeFromItem(item);
+      const allowed = getAllowedDateAlternatives(item);
+      let datatype;
+      if (allowed[datatypeDatatype]) {
+        // This is always the case unless "relaxedDatatypeMatch" is specified
+        datatype = datatypeDatatype;
+      } else if (allowed[valueDatatype]) {
+        // If the detected datatype from the value is supported
+        datatype = valueDatatype;
+      } else {
+        // Rely on the datatype from the item if everything else fails
+        datatype = itemSuggestedDatatype;
+      }
+      return getDatePresentationFromDatatype(datatype, date);
+    }
+  }
+  return undefined;
+};

package/src/view/react/buttons.js

@@ -14,9 +14,13 @@ renderingContext.addExpandButton = (rowDiv, labelDiv, item, context) => {
 
 const isClearButton = (binding, context) => {
   const item = binding.getItem();
+  const notDeprecated = !item.hasStyle('deprecated');
+  if (context.view.isMultiValued(item) && notDeprecated) {
+    return true;
+  }
   const cardTr = binding.getCardinalityTracker();
   const showOne = context.view.showNow(binding.getItem(), []);
-  return !item.hasStyle('deprecated') &&
+  return notDeprecated &&
     (cardTr.isMin() || (cardTr.getCardinality() === 1 && showOne && cardTr.isDepsOk()));
 };
 renderingContext.addRemoveButton = (rowDiv, binding, context) => () => {
@@ -61,6 +65,13 @@ renderingContext.addRemoveButton = (rowDiv, binding, context) => () => {
           binding.setLanguage('');
         }
       }
+    } else if (context.view.isMultiValued(item)) {
+      // This case corresponds to multivalued and deprecated.
+      // Slice so we have a copy of the array... since it will change behind the scenes otherwise
+      binding.getParent().getChildBindingsFor(item).slice(0).forEach((b) => {
+        b.remove();
+      });
+      rowDiv.parent.destroy();
     } else {
       binding.remove();
       rowDiv.destroy();
@@ -77,8 +88,8 @@ renderingContext.addRemoveButton = (rowDiv, binding, context) => () => {
 };
 
 renderingContext.addCreateChildButton = (rowDiv, labelDiv, binding, context) => () => {
-  const cardTr = binding.getCardinalityTracker();
   const item = binding.getItem();
+  const cardTr = binding.getCardinalityTracker();
   const [disabled, setDisabled] = useState(cardTr.isMax() || !cardTr.isDepsOk() || item.hasStyle('deprecated'));
   useEffect(() => {
     context.rememberParent = binding.getParent(); // If the current binding is removed and the label is not redrawn

package/src/view/react/choiceEditors/CheckBoxesEditor.js

@@ -0,0 +1,87 @@
+/* eslint-disable no-unused-vars */
+import React, { useState, useEffect, useMemo } from 'react';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Checkbox from '@mui/material/Checkbox';
+import { FormGroup } from '@mui/material';
+import { useLocalizedSortedChoices, useName } from '../hooks';
+import * as engine from '../../../model/engine';
+
+const CheckOption = (props) => {
+  const { choice, binding, onChoiceChange } = props;
+  const [checked, setChecked] = React.useState(choice.value === binding.getValue());
+
+  const handleChange = (evt) => {
+    binding.setChoice(evt.target.checked ? choice.original : null);
+    setChecked(evt.target.checked);
+    onChoiceChange();
+  };
+  return <FormControlLabel
+    label={choice.label} control={<Checkbox checked={checked} onChange={handleChange}/>}
+    {...(choice.mismatch ? { className: 'mismatch' } : {})}
+    title={choice.description || choice.seeAlso || choice.value}/>;
+};
+
+export default function CheckBoxesEditor(props) {
+  const [resetCount, setResetCount] = React.useState(0);
+  const binding = props.binding;
+  const item = binding.getItem();
+  const choices = useLocalizedSortedChoices(binding);
+  const choiceBindingPairs = useMemo(() => {
+    const parentBinding = binding.getParent();
+    const val2binding = {};
+    // eslint-disable-next-line no-return-assign
+    parentBinding.getChildBindingsFor(item).forEach(b => (val2binding[b.getValue()] = b));
+    const pairs = choices.map((c) => {
+      const existingbinding = val2binding[c.value];
+      if (existingbinding) {
+        delete val2binding[c.value];
+        return [c, existingbinding];
+      }
+      return [c, engine.create(parentBinding, item)];
+    });
+    // Add checks for values that are non-conforming (should have mismatch on their choices).
+    Object.values(val2binding).forEach((b) => {
+      const choice = b.getChoice();
+      if (choice) {
+        pairs.push([choice, b]);
+      }
+    });
+    return pairs;
+  });
+
+  const [error, setError] = useState(binding.getChoice()?.mismatch === true);
+  const row = item.hasStyle('verticalCheckboxes') ? {} : { row: true };
+
+  const onChoiceChange = () => {
+    const newError = choiceBindingPairs.find(pair => pair[1].getChoice()
+      && pair[1].getChoice().mismatch) !== undefined;
+    if (newError !== error) {
+      setError(newError);
+    }
+  };
+
+  useEffect(() => {
+    props.field.toggleClass('mismatchReport', error);
+  }, [error]);
+
+  props.context.clear = () => {
+    choiceBindingPairs.forEach(pair => pair[1].setChoice(null));
+    setError(false);
+    setResetCount(resetCount + 1);
+  };
+
+  return (
+    <><FormGroup {...row}>
+      {choiceBindingPairs.map(pair => (
+        <CheckOption key={`${resetCount}-${pair[1].getHash()}`}
+                     choice={pair[0]}
+                     binding={pair[1]}
+                     onChoiceChange={onChoiceChange} />
+      ))}
+    </FormGroup>{error && (
+      <div key="warning" className="rdformsWarning">
+        {props.context.view.messages.wrongValueField}
+      </div>
+    )}</>
+  );
+}

package/src/view/react/choiceEditors/index.js

@@ -2,6 +2,7 @@
 import React from 'react';
 import renderingContext from '../../renderingContext';
 import RadioButtonsEditor from './RadioButtonsEditor';
+import CheckBoxesEditor from './CheckBoxesEditor';
 import ChoiceSelector from './ChoiceSelector';
 import ChoiceLookup from './ChoiceLookup';
 import ChoiceLookupAndInlineSearch from './ChoiceLookupAndInlineSearch';
@@ -27,6 +28,14 @@ editors.itemtype('choice').choices().check(radioCheck).register((fieldDiv, bindi
                                            field={fieldDiv}/>);
 });
 
+const checkBoxComponent = (fieldDiv, binding, context) => {
+  // eslint-disable-next-line no-new
+  fieldDiv.appendChild(<CheckBoxesEditor key={binding.getHash()} binding={binding} context={context}
+                                         field={fieldDiv}/>);
+};
+editors.itemtype('choice').choices().style('verticalCheckBoxes').register(checkBoxComponent);
+editors.itemtype('choice').choices().style('horizontalCheckBoxes').register(checkBoxComponent);
+
 editors.itemtype('choice').choices().register((fieldDiv, binding, context) => {
   fieldDiv.appendChild(<ChoiceSelector key={binding.getHash()} binding={binding} context={context} field={fieldDiv}/>);
 });

package/src/view/react/components.js

@@ -95,11 +95,11 @@ const newStruct = (Tag, parent) => {
     // -- START: Initial methods used before react kicks in.
     toggleClass: (clsStr, addOrNot) => toggleClass(firstClsSet, clsStr, addOrNot),
     domQuery: selector => (selectorInClasses(selector, firstClsSet) ? ext : findStruct(selector, firstChildArr)),
-    appendChild: struct => {
+    appendChild: (struct) => {
       firstChildArr.push(struct);
     },
     appendAfter: (struct, sibling) => {
-      firstChildArr.splice(firstChildArr.indexOf(sibling) + 1, 0, struct)
+      firstChildArr.splice(firstChildArr.indexOf(sibling) + 1, 0, struct);
     },
     text: (str) => {
       firstTextStr = str;
@@ -248,3 +248,5 @@ renderingContext.renderValidationMessage = (fieldDiv, type, message) => {
   fieldDiv.appendChild(<div className="rdformsValidationMessageWrapper" key={ `rdforms_valcount_${validationCounter}`}
   ><ValidationIcon/><span className="rdformsValidationMessage">{message}</span></div>);
 };
+
+renderingContext.multiValueSupport = true;