added a checkbox control for JsonForms

Issue imixs#196

open-bpmn.glsp-client/open-bpmn-properties/src/ImixsCheckboxGroup.tsx

@@ -0,0 +1,119 @@
+/********************************************************************************
+ * Copyright (c) 2022 Imixs Software Solutions GmbH and others.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License v. 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * This Source Code may also be made available under the following Secondary
+ * Licenses when the conditions for such availability set forth in the Eclipse
+ * Public License v. 2.0 are satisfied: GNU General Public License, version 2
+ * with the GNU Classpath Exception which is available at
+ * https://www.gnu.org/software/classpath/license.html.
+ *
+ * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
+ ********************************************************************************/
+import {
+  computeLabel,
+  ControlProps,
+  isDescriptionHidden,
+  OwnPropsOfEnum
+} from '@jsonforms/core';
+import { VanillaRendererProps } from '@jsonforms/vanilla-renderers';
+import merge from 'lodash/merge';
+import React, { useState } from 'react';
+// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+export const ImixsCheckboxGroup = ({
+  classNames,
+  id,
+  label,
+  options,
+  required,
+  description,
+  errors,
+  data,
+  uischema,
+  visible,
+  config,
+  enabled,
+  path,
+  handleChange
+}: ControlProps & VanillaRendererProps & OwnPropsOfEnum) => {
+  const [isFocused, setFocus] = useState(false);
+  const isValid = errors.length === 0;
+  const appliedUiSchemaOptions = merge({}, config, uischema.options);
+  const showDescription = !isDescriptionHidden(
+    visible,
+    description,
+    isFocused,
+    appliedUiSchemaOptions.showUnfocusedDescription
+  );
+
+  let groupStyle: { [x: string]: any } = {};
+  // compute flexDirection based on the optional option 'orientation=vertical|horizontal'
+    groupStyle = {
+      display: 'flex',
+      flexDirection: ('vertical' === uischema!.options!.orientation) ? 'column' : 'row'
+    };
+
+  // onChange={ev => handleChange(path, ev.currentTarget.value)}
+  const handleCheckboxChange = (path,value) => {
+      console.log('Hello Checkbox Click');
+      console.log('path='+path);
+      console.log('value='+value);
+      // add value only if not yed done
+      if (!data.includes(value)) {
+        data.push(value);
+      } else {
+        console.log('we unchcke it');
+        const ipos = data.indexOf(value);
+        if (ipos !== -1) {
+          data.splice(ipos, 1);
+        }
+      }
+      // call main handler
+      handleChange(path, data);
+  };
+
+  return (
+    <div
+      className={'control imixs-checkbox-group'}
+      hidden={!visible}
+      onFocus={() => setFocus(true)}
+      onBlur={() => setFocus(false)}
+    >
+      <label htmlFor={id} className={'imixs'}>
+        {computeLabel(
+          label,
+          false,
+          appliedUiSchemaOptions.hideRequiredAsterisk
+        )}
+      </label>
+      <div style={groupStyle}>
+        {options!.map(option => (
+          <div key={option.label}>
+            <h4>{data.length}</h4>
+            <input
+              type='checkbox'
+              value={option.value}
+              id={option.value}
+              name={id}
+              checked={data.includes(option.value)}
+              onChange={ev => handleCheckboxChange(path, ev.currentTarget.value)}
+              disabled={!enabled}
+            />
+            <label
+              htmlFor={option.value}
+            >
+              {option.label}
+            </label>
+          </div>
+        ))}
+      </div>
+      <div className={'input-description'}>
+        {!isValid ? errors : showDescription ? description : undefined}
+      </div>
+    </div>
+  );
+};
+

open-bpmn.glsp-client/open-bpmn-properties/src/ImixsCheckboxGroupControl.tsx

@@ -0,0 +1,43 @@
+/********************************************************************************
+ * Copyright (c) 2022 Imixs Software Solutions GmbH and others.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License v. 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * This Source Code may also be made available under the following Secondary
+ * Licenses when the conditions for such availability set forth in the Eclipse
+ * Public License v. 2.0 are satisfied: GNU General Public License, version 2
+ * with the GNU Classpath Exception which is available at
+ * https://www.gnu.org/software/classpath/license.html.
+ *
+ * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
+ ********************************************************************************/
+import {
+  and,
+  ControlProps,
+  isEnumControl,
+  optionIs, RankedTester, rankWith
+} from '@jsonforms/core';
+import { withJsonFormsEnumProps } from '@jsonforms/react';
+import { VanillaRendererProps, withVanillaControlProps } from '@jsonforms/vanilla-renderers';
+import React from 'react';
+import { ImixsCheckboxGroup } from './ImixsCheckboxGroup';
+
+/***********************
+ * This is a custom Checkbox renderer that allows vertical and horizontal orientation
+ * <p>
+ * In addition the renderer support label|value pairs separated by a | char.
+ *
+ */
+/* eslint-disable arrow-body-style */
+// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+export const ImixsCheckboxGroupControl = (props: ControlProps & VanillaRendererProps) => {
+  return <ImixsCheckboxGroup {...props} />;
+};
+
+export const imixsCheckboxGroupControlTester: RankedTester = rankWith(
+  3,
+  and(isEnumControl, optionIs('format', 'checkbox-imixs'))
+);
+export default withVanillaControlProps(withJsonFormsEnumProps(ImixsCheckboxGroupControl));

open-bpmn.glsp-client/open-bpmn-properties/src/ImixsRadioGroup.tsx

@@ -22,7 +22,7 @@ import {
 import { VanillaRendererProps } from '@jsonforms/vanilla-renderers';
 import merge from 'lodash/merge';
 import React, { useState } from 'react';
-
+// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 export const ImixsRadioGroup = ({
   classNames,
   id,

open-bpmn.glsp-client/open-bpmn-properties/src/bpmn-property-panel.tsx

@@ -38,8 +38,9 @@ import { vanillaCells, vanillaRenderers } from '@jsonforms/vanilla-renderers';
 import { isBoundaryEvent } from '@open-bpmn/open-bpmn-model';
 import * as React from 'react';
 import { createRoot } from 'react-dom/client';
+import ImixsCheckboxGroupControl, { imixsCheckboxGroupControlTester } from './ImixsCheckboxGroupControl';
 import ImixsRadioGroupControl, { imixsRadioGroupControlTester } from './ImixsRadioGroupControl';
-// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+ // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 @injectable()
 export class BPMNPropertyPanel extends AbstractUIExtension implements SelectionListener, IActionHandler { // IActionHandler EditModeListener
 
@@ -301,7 +302,8 @@ export class BPMNPropertyPanel extends AbstractUIExtension implements SelectionL
                     const bpmnRenderers = [
                        ...vanillaRenderers,
                        // optional register custom renderers...
-                      { tester: imixsRadioGroupControlTester, renderer: ImixsRadioGroupControl }
+                      { tester: imixsRadioGroupControlTester, renderer: ImixsRadioGroupControl },
+                      { tester: imixsCheckboxGroupControlTester, renderer: ImixsCheckboxGroupControl }
                     ];
 
                     // render JSONForm // vanillaRenderers

open-bpmn.glsp-server/src/main/java/org/openbpmn/glsp/jsonforms/DataBuilder.java

@@ -18,6 +18,7 @@
 import java.io.IOException;
 import java.io.StringWriter;
 import java.io.Writer;
+import java.util.List;
 import java.util.logging.Logger;
 
 import javax.json.Json;
@@ -74,6 +75,22 @@ public DataBuilder addData(final String name, final String value) {
         return this;
     }
 
+    public DataBuilder addDataList(final String name, final List<String> values) {
+        if (arrayBuilder != null) {
+            if (arrayObjectBuilder == null) {
+                arrayObjectBuilder = Json.createObjectBuilder();
+            }
+
+            JsonArrayBuilder jsonValueArray = Json.createArrayBuilder(values);
+            arrayObjectBuilder.add(name, jsonValueArray);
+
+        } else {
+            JsonArrayBuilder jsonValueArray = Json.createArrayBuilder(values);
+            rootBuilder.add(name, jsonValueArray);
+        }
+        return this;
+    }
+
     /**
      * Adds a new property array type
      *