feat: Add table entries to properties panel

packages/form-js-editor/src/features/modeling/behavior/ColumnsSourceBehavior.js

@@ -0,0 +1,51 @@
+import CommandInterceptor from 'diagram-js/lib/command/CommandInterceptor';
+
+import { get, isArray, isDefined, isString } from 'min-dash';
+
+const COLUMNS_SOURCE_PROPERTIES = {
+ columns: 'columns',
+ columnsExpression: 'columnsExpression'
+};
+
+export class ColumnsSourceBehavior extends CommandInterceptor {
+ constructor(eventBus) {
+ super(eventBus);
+
+ this.preExecute('formField.edit', function(context) {
+ const { properties, oldProperties } = context;
+
+ const isColumnSourceUpdate = Object.values(COLUMNS_SOURCE_PROPERTIES).some(path => {
+ return get(properties, [ path ]) !== undefined;
+ });
+
+ if (!isColumnSourceUpdate) {
+ return;
+ }
+
+ const columns = get(properties, [ COLUMNS_SOURCE_PROPERTIES.columns ]);
+ const oldColumns = get(oldProperties, [ COLUMNS_SOURCE_PROPERTIES.columns ]);
+ const columnsExpression = get(properties, [ COLUMNS_SOURCE_PROPERTIES.columnsExpression ]);
+ const oldColumnsExpression = get(oldProperties, [ COLUMNS_SOURCE_PROPERTIES.columnsExpression ]);
+
+ if (isArray(columns) && !isDefined(oldColumns)) {
+ context.properties = {
+ ...properties,
+ columnsExpression: undefined
+ };
+ return;
+ }
+
+ if (isString(columnsExpression) && !isString(oldColumnsExpression)) {
+ context.properties = {
+ ...properties,
+ columns: undefined
+ };
+ return;
+ }
+
+ }, true);
+ }
+}
+
+ColumnsSourceBehavior.$inject = [ 'eventBus' ];
+

packages/form-js-editor/src/features/modeling/behavior/index.js

@@ -3,18 +3,21 @@ import KeyBehavior from './KeyBehavior';
 import PathBehavior from './PathBehavior';
 import ValidateBehavior from './ValidateBehavior';
 import ValuesSourceBehavior from './ValuesSourceBehavior';
+import { ColumnsSourceBehavior } from './ColumnsSourceBehavior';
 
 export default {
  __init__: [
  'idBehavior',
  'keyBehavior',
  'pathBehavior',
  'validateBehavior',
- 'valuesSourceBehavior'
+ 'valuesSourceBehavior',
+ 'columnsSourceBehavior'
  ],
  idBehavior: [ 'type', IdBehavior ],
  keyBehavior: [ 'type', KeyBehavior ],
  pathBehavior: [ 'type', PathBehavior ],
  validateBehavior: [ 'type', ValidateBehavior ],
- valuesSourceBehavior: [ 'type', ValuesSourceBehavior ]
+ valuesSourceBehavior: [ 'type', ValuesSourceBehavior ],
+ columnsSourceBehavior: [ 'type', ColumnsSourceBehavior ]
 };

packages/form-js-editor/src/features/properties-panel/PropertiesProvider.js

@@ -7,7 +7,8 @@ import {
  ConstraintsGroup,
  ValidationGroup,
  ValuesGroups,
- LayoutGroup
+ LayoutGroup,
+ TableHeaderGroups
 } from './groups';
 
 import { hasEntryConfigured } from './Util';
@@ -61,6 +62,7 @@ export default class PropertiesProvider {
  groups = [
  ...groups,
  GeneralGroup(field, editField, getService),
+ ...TableHeaderGroups(field, editField),
  ConditionGroup(field, editField),
  LayoutGroup(field, editField),
  AppearanceGroup(field, editField),

packages/form-js-editor/src/features/properties-panel/Util.js

@@ -56,6 +56,9 @@ export function textToLabel(text) {
  return null;
 }
 
+/**
+ * @param {string} path
+ */
 export function isValidDotPath(path) {
  return /^\w+(\.\w+)*$/.test(path);
 }
@@ -97,4 +100,11 @@ export function hasValuesGroupsConfigured(formFieldDefinition) {
  }
 
  return propertiesPanelEntries.some(id => id === 'values');
+}
+
+/**
+ * @param {string} path
+ */
+export function hasIntegerPathSegment(path) {
+ return path.split('.').some(segment => /^\d+$/.test(segment));
 }

packages/form-js-editor/src/features/properties-panel/entries/ColumnEntry.js

@@ -0,0 +1,138 @@
+import {
+ get,
+ set,
+ isString
+} from 'min-dash';
+
+import { useService } from '../hooks';
+
+import { TextFieldEntry } from '@bpmn-io/properties-panel';
+
+const path = 'columns';
+const labelPath = 'label';
+const keyPath = 'key';
+
+export function ColumnEntry(props) {
+ const {
+ editField,
+ field,
+ idPrefix,
+ index,
+ validateFactory
+ } = props;
+
+ const entries = [
+ {
+ component: Label,
+ editField,
+ field,
+ id: idPrefix + '-label',
+ idPrefix,
+ index,
+ validateFactory
+ },
+ {
+ component: Key,
+ editField,
+ field,
+ id: idPrefix + '-key',
+ idPrefix,
+ index,
+ validateFactory
+ }
+ ];
+
+ return entries;
+}
+
+function Label(props) {
+ const {
+ editField,
+ field,
+ id,
+ index
+ } = props;
+
+ const debounce = useService('debounce');
+
+ /**
+ * @param {string|void} value
+ * @param {string|void} error
+ * @returns {void}
+ */
+ const setValue = (value, error) => {
+ if (error) {
+ return;
+ }
+
+ const columns = get(field, [ path ]);
+ editField(field, path, set(columns, [ index, labelPath ], value));
+ };
+
+ const getValue = () => {
+ return get(field, [ path, index, labelPath ]);
+ };
+
+ return TextFieldEntry({
+ debounce,
+ element: field,
+ getValue,
+ id,
+ label: 'Label',
+ setValue
+ });
+}
+
+function Key(props) {
+ const {
+ editField,
+ field,
+ id,
+ index
+ } = props;
+
+ const debounce = useService('debounce');
+
+ /**
+ * @param {string|void} value
+ * @param {string|void} error
+ * @returns {void}
+ */
+ const setValue = (value, error) => {
+ if (error) {
+ return;
+ }
+
+ const columns = get(field, [ path ]);
+ editField(field, path, set(columns, [ index, keyPath ], value));
+ };
+
+ const getValue = () => {
+ return get(field, [ path, index, keyPath ]);
+ };
+
+ return TextFieldEntry({
+ debounce,
+ element: field,
+ getValue,
+ id,
+ label: 'Key',
+ setValue,
+ validate
+ });
+}
+
+
+// helpers //////////////////////
+
+/**
+ * @param {string|void} value
+ * @returns {string|null}
+ */
+function validate(value) {
+ if (!isString(value) || value.length === 0) {
+ return 'Must not be empty.';
+ }
+
+ return null;
+}

packages/form-js-editor/src/features/properties-panel/entries/ColumnsExpressionEntry.js

@@ -0,0 +1,92 @@
+import { get, isString } from 'min-dash';
+
+import { useService, useVariables } from '../hooks';
+
+import { FeelTemplatingEntry, isFeelEntryEdited } from '@bpmn-io/properties-panel';
+
+const PATH = [ 'columnsExpression' ];
+
+export function ColumnsExpressionEntry(props) {
+ const {
+ editField,
+ field
+ } = props;
+
+ const entries = [];
+ entries.push({
+ id: `${field.id}-columnsExpression`,
+ component: ColumnsExpression,
+ editField: editField,
+ field: field,
+ isEdited: isFeelEntryEdited,
+ isDefaultVisible: (field) => field.type === 'table' && isString(get(field, PATH))
+ });
+
+ return entries;
+}
+
+function ColumnsExpression(props) {
+ const {
+ editField,
+ field,
+ id
+ } = props;
+
+ const debounce = useService('debounce');
+
+ const variables = useVariables().map(name => ({ name }));
+
+ const getValue = () => {
+
+ return get(field, PATH);
+ };
+
+ /**
+ * @param {string|void} value
+ * @param {string|void} error
+ * @returns {void}
+ */
+ const setValue = (value, error) => {
+ if (error) {
+ return;
+ }
+
+ editField(field, PATH, value);
+ };
+
+ /**
+ * @param {string|void} value
+ * @returns {string|null}
+ */
+ const validate = (value) => {
+
+ if (!isString(value) || value.length === 0 || value === '=') {
+ return 'Must not be empty.';
+ }
+
+ return null;
+ };
+
+ const schema = '[\n {\n "key": "column_1",\n "label": "Column 1"\n }\n]';
+
+ const tooltip = <div>
+ The expression may result in an array of simple values or alternatively follow this schema:
+ <pre><code>{schema}</code></pre>
+ </div>;
+
+
+ return FeelTemplatingEntry({
+ debounce,
+ description: 'Specify an expression to populate column items',
+ element: field,
+ feel: 'required',
+ getValue,
+ id,
+ label: 'Expression',
+ tooltip,
+ setValue,
+ singleLine: true,
+ variables,
+ validate,
+ });
+}