@truedat/df 7.12.5 → 7.12.7

package/src/templates/components/templateForm/FieldForm.js

@@ -1,30 +1,14 @@
 import _ from "lodash/fp";
-import { useEffect } from "react";
 import PropTypes from "prop-types";
 import { FormattedMessage, useIntl } from "react-intl";
 import { Form, Button, Divider, Label, Segment } from "semantic-ui-react";
 import ValuesField from "./ValuesField";
 import ConditionalFieldForm from "./ConditionalFieldForm";
 import MandatoryConditional from "./MandatoryConditional";
-import {
-  getCardinalityOptions,
-  getWidgetOptions,
-  getTypeOptions,
-  WIDGETS,
-} from "./widgetDefinitions";
+import FieldDefinition from "./FieldDefinition";
+import TableValuesForm from "./TableValuesForm";
 import { getValues } from "./valueDefinitions";
 
-const typeFromKey = (keys) =>
-  _.includes("role_groups")(keys)
-    ? "role_groups"
-    : _.includes("role_users")(keys)
-      ? "role_users"
-      : _.includes("hierarchy")(keys)
-        ? "hierarchy"
-        : _.first(keys);
-
-const defaultType = (values) => _.flow(_.map("value"), _.first)(values);
-
 export const FieldForm = ({
   allFields,
   field,
@@ -53,83 +37,8 @@ export const FieldForm = ({
   const defaultField = `${fieldNamePrefix}.default`;
   const subscribableField = `${fieldNamePrefix}.subscribable`;
   const values = getValues(widget, type);
-  const keyType = _.flow([_.getOr({}, "values"), _.keys, typeFromKey])(field);
   const hasDependencies = _.negate(_.isEmpty)(dependencies);
 
-  const typeCheckOnChange = (widgetOptions) => {
-    if (widgetOptions && _.indexOf(type)(widgetOptions.types) < 0)
-      onChange(null, {
-        name: `${fieldNamePrefix}.type`,
-        value: widgetOptions.types[0],
-      });
-  };
-
-  const cardinalityCheckOnChange = (widgetOptions) => {
-    if (
-      widgetOptions &&
-      _.indexOf(cardinality)(widgetOptions.cardinalities) < 0
-    )
-      onChange(null, {
-        name: `${fieldNamePrefix}.cardinality`,
-        value: widgetOptions.cardinalities[0],
-      });
-  };
-
-  const changeValue = (name, value) =>
-    value == "null"
-      ? onChange(null, { name, value: null })
-      : onChange(null, {
-          name,
-          value: { [value]: null },
-        });
-
-  const handleCardinalityChange = (e, data) => {
-    const value = data?.value;
-    onChange(e, data);
-    if (_.includes(value)(["1", "+"]) && !_.isEmpty(field?.mandatory))
-      onChange(e, { name: `${fieldNamePrefix}.mandatory`, value: null });
-  };
-
-  const handleWidgetChange = (e, data) => {
-    const { value } = data;
-    const types = _.find({ value })(WIDGETS).types;
-    const updatedType = _.indexOf(type)(types) < 0 ? _.head(types) : type;
-    changeValue(
-      valueName,
-      defaultType(getValues(value, updatedType)) || "null"
-    );
-    onChange(e, {
-      name: defaultField,
-      value: { value: "", origin: "default" },
-    });
-    onChange(e, { name: subscribableField, value: false });
-    onChange(e, data);
-  };
-
-  const handleTypeChange = (e, data) => {
-    const { value } = data;
-    changeValue(valueName, defaultType(getValues(widget, value)) || "null");
-    onChange(e, {
-      name: defaultField,
-      value: { value: "", origin: "default" },
-    });
-    onChange(e, { name: subscribableField, value: false });
-    onChange(e, data);
-  };
-
-  const onValueSelectionChange = (e, { value }) => {
-    onChange(e, { name: subscribableField, value: false });
-    changeValue(valueName, value);
-  };
-
-  //On widget change, verify if type and cardinality are still valid
-  useEffect(() => {
-    const widgetOptions = _.find({ value: widget })(WIDGETS);
-    typeCheckOnChange(widgetOptions);
-    cardinalityCheckOnChange(widgetOptions);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [widget, type]);
-
   const isNullOrEmpty = (value) =>
     !_.isNumber(value) && (!value || _.isEmpty(value));
 
@@ -223,51 +132,39 @@ export const FieldForm = ({
         value={description || ""}
         onChange={onChange}
       />
-      <Form.Group size="small" widths="equal">
-        <Form.Dropdown
-          name={`${fieldNamePrefix}.widget`}
-          fluid
-          selection
-          label={formatMessage({ id: "template.field.widget" })}
-          value={widget}
-          options={getWidgetOptions()}
-          required
-          onChange={handleWidgetChange}
-        />
-        <Form.Dropdown
-          fluid
-          selection
-          label={formatMessage({ id: "template.field.type" })}
-          onChange={handleTypeChange}
-          name={`${fieldNamePrefix}.type`}
-          value={type}
-          required
-          options={getTypeOptions(formatMessage)(widget)}
-        />
-        <Form.Dropdown
-          fluid
-          selection
-          label={formatMessage({ id: "template.field.cardinality" })}
-          onChange={handleCardinalityChange}
-          name={`${fieldNamePrefix}.cardinality`}
-          value={cardinality}
-          required
-          options={getCardinalityOptions(formatMessage)(widget)}
-        />
-      </Form.Group>
-      <ValuesField
+      <FieldDefinition
         defaultField={defaultField}
-        field={field}
-        fieldType={type}
-        keyType={keyType}
-        name={valueName}
-        onChange={onChange}
-        onSelectionChange={onValueSelectionChange}
-        subscribableField={subscribableField}
         fieldNamePrefix={fieldNamePrefix}
-        scope={scope}
-        values={values}
+        type={type}
+        widget={widget}
+        cardinality={cardinality}
+        mandatory={field?.mandatory}
+        subscribableField={subscribableField}
+        onChange={onChange}
+        valueName={valueName}
       />
+      {field?.type == "dynamic_table" ? (
+        <TableValuesForm
+          name={valueName}
+          fieldNamePrefix={fieldNamePrefix}
+          values={_.path(`values.table_columns`)(field) || []}
+          type={"table_columns"}
+          field={field}
+          onChange={onChange}
+          scope={scope}
+        />
+      ) : (
+        <ValuesField
+          defaultField={defaultField}
+          field={field}
+          name={valueName}
+          onChange={onChange}
+          subscribableField={subscribableField}
+          fieldNamePrefix={fieldNamePrefix}
+          scope={scope}
+          values={values}
+        />
+      )}
       <ConditionalFieldForm
         allFields={allFields}
         fieldNamePrefix={fieldNamePrefix}

package/src/templates/components/templateForm/TableValuesForm.js

@@ -0,0 +1,258 @@
+import _ from "lodash/fp";
+import { Accordion, Button, Divider, Form, Icon, Label } from "semantic-ui-react";
+import { useState } from "react";
+import { useIntl } from "react-intl";
+import { FormattedMessage } from "react-intl";
+import FieldDefinition from "./FieldDefinition";
+import ValuesField from "./ValuesField";
+import { defaultFieldDefinition } from "./widgetDefinitions";
+import { getValues, getKeyType } from "./valueDefinitions";
+import ValuesConfiguration from "./ValuesConfiguration";
+
+const AccordionButtonGroup = ({
+    fieldIndex,
+    fieldCount,
+    onColumnUp,
+    onColumnDown,
+    onColumnRemoval,
+}) => {
+    return (
+        <Button.Group
+            basic
+            floated="right"
+            color="orange"
+            size="tiny"
+            buttons={[
+                {
+                    key: "up",
+                    icon: "arrow up",
+                    type: "button",
+                    onClick: () => onColumnUp(),
+                    disabled: fieldIndex === 0,
+                },
+                {
+                    key: "down",
+                    icon: "arrow down",
+                    type: "button",
+                    onClick: () => onColumnDown(),
+                    disabled: fieldIndex === fieldCount - 1,
+                },
+                {
+                    key: "delete",
+                    icon: "trash alternate outline",
+                    type: "button",
+                    onClick: () => onColumnRemoval(),
+                },
+            ]}
+        />
+    );
+};
+
+const TableContent = ({
+    field,
+    fieldIndex,
+    fieldCount,
+    onChange,
+    onColumnUp,
+    onColumnDown,
+    onColumnRemoval,
+    prefix,
+    scope,
+}) => {
+    const valueName = `${prefix}.values`;
+    const defaultField = `${prefix}.default`;
+    const widget = field?.widget || defaultFieldDefinition.widget;
+    const type = field?.type || defaultFieldDefinition.type;
+    const values = getValues(widget, type);
+
+    return (
+        <>
+            <AccordionButtonGroup
+                fieldIndex={fieldIndex}
+                fieldCount={fieldCount}
+                onColumnUp={onColumnUp}
+                onColumnDown={onColumnDown}
+                onColumnRemoval={onColumnRemoval}
+            />
+            <Divider hidden fitted />
+            <FieldDefinition
+                allowedTypes={["string", "user", "user_group"]}
+                allowedWidgets={["string", "dropdown"]}
+                defaultField={defaultField}
+                cardinality={field?.cardinality || defaultFieldDefinition.cardinality}
+                fieldNamePrefix={prefix}
+                mandatory={field?.mandatory || false}
+                onChange={onChange}
+                type={type}
+                valueName={valueName}
+                widget={widget}
+            />
+            <ValuesField
+                defaultField={defaultField}
+                field={field}
+                name={valueName}
+                onChange={onChange}
+                fieldNamePrefix={prefix}
+                scope={scope}
+                values={values}
+            />
+        </>
+    );
+};
+export const TableValuesForm = ({ name, onChange, type, values, scope, field, fieldNamePrefix }) => {
+    const fieldCount = _.size(values);
+    const [activeField, setActiveField] = useState();
+    const [fieldValue, setFieldValue] = useState();
+    const { formatMessage } = useIntl();
+
+    const swap = (targetKey, sourceKey) => {
+        const tagetValue = values[targetKey];
+        const sourceValue = values[sourceKey];
+
+        return _.flow(
+            _.set(sourceKey, tagetValue),
+            _.set(targetKey, sourceValue),
+        )(values);
+    };
+
+    const handleColumnUp = (key) => {
+        const updatedValues = swap(key - 1, key);
+        onChange(null, { name, value: { [type]: updatedValues } });
+        setActiveField(key - 1);
+    };
+
+    const handleColumnDown = (key) => {
+        const updatedValues = swap(key + 1, key);
+        onChange(null, { name, value: { [type]: updatedValues } });
+        setActiveField(key + 1);
+    };
+
+    const handleRemove = (key) => {
+        const updatedValues = values.toSpliced(key, 1);
+        onChange(null, { name, value: { [type]: updatedValues } });
+        if (_.size(updatedValues) > 0) {
+            setActiveField(key - 1);
+        }
+    };
+
+    const onSelectField = (e, { index }) =>
+        setActiveField((x) => (x == index ? null : index));
+
+    const handleAddColumnClick = (e) => {
+        e.preventDefault();
+        if (!fieldValue || fieldValue.trim() === "") {
+            return;
+        }
+        addColumn({ key: "Enter" });
+    };
+
+    const addColumn = ({ key }) => {
+        if (key === "Enter") {
+            if (!fieldValue || fieldValue.trim() === "") {
+                return;
+            }
+            const updatedValues = [
+                ...values,
+                { ...defaultFieldDefinition, name: fieldValue, ai_suggestion: false, label: fieldValue },
+            ];
+            onChange(null, { name, value: { [type]: updatedValues } });
+            setFieldValue("");
+            setActiveField(_.size(updatedValues) - 1);
+        }
+    };
+
+    const keyType = getKeyType(field);
+
+    const panels = values.map((value, i) => ({
+        title: {
+            content: (
+                <>
+                    <Label key={i} color="orange">
+                        {value?.errors?.hasErrors && (
+                            <Icon
+                                key={i}
+                                style={{ marginLeft: "5px" }}
+                                name="warning sign"
+                            />
+                        )}
+                        {value.name}
+                    </Label>
+                    {value?.errors?.nameDuplicated && <Label basic color="red" size={"small"} pointing={"left"}>
+                        {formatMessage({
+                            id: "template.form.validation.name_duplicated",
+                        })}
+                    </Label>}
+                </>
+            )
+        },
+        key: i,
+        onTitleClick: onSelectField,
+        active: activeField == i,
+        content: {
+            content: (
+                <TableContent
+                    prefix={`${name}.${type}[${i}]`}
+                    fieldIndex={i}
+                    fieldCount={fieldCount}
+                    onColumnUp={() => {
+                        handleColumnUp(i);
+                    }}
+                    onColumnDown={() => {
+                        handleColumnDown(i);
+                    }}
+                    onColumnRemoval={() => {
+                        handleRemove(i);
+                    }}
+                    onChange={onChange}
+                    field={value}
+                    scope={scope}
+                />
+            ),
+        },
+    }));
+
+    return (
+        <>
+            <Accordion panels={panels} />
+            {activeField == _.size(panels) - 1 && <Divider hidden />}
+            <Form.Input
+                label={
+                    <label>
+                        Header
+                        {(!fieldValue || fieldValue.trim() === "") && (
+                            <Label pointing="left" style={{ marginLeft: "10px" }}>
+                                <FormattedMessage id="template.form.validation.empty_required" />
+                            </Label>
+                        )}
+                       
+                    </label>
+                }
+                required
+                icon={
+                    <Icon
+                        name="add circle"
+                        link
+                        onClick={handleAddColumnClick}
+                    />
+                }
+                value={fieldValue}
+                onChange={(e, { value }) => setFieldValue(value)}
+                onKeyPress={addColumn}
+            />
+            <Divider hidden />
+            <ValuesConfiguration
+                aiSuggestion={field?.ai_suggestion || false}
+                editable={field?.editable || true}
+                keyType={keyType}
+                onChange={onChange}
+                searchable={field?.searchable || false}
+                fieldNamePrefix={fieldNamePrefix}
+                hasAiSuggestion={false}
+                subscribable={field?.subscribable}
+                scope={scope}
+            />
+        </>
+    );
+};
+
+export default TableValuesForm;

package/src/templates/components/templateForm/TemplateForm.js

@@ -61,38 +61,54 @@ export const TemplateForm = ({ loading, template, onSubmit }) => {
       content: [...editedTemplate.content, { name: "", fields: [] }],
     });
 
+  const formattedFields = (fields) => _.flow(
+    _.map((field) => {
+      const fieldProperties = [
+        "label",
+        "name",
+        "description",
+        "type",
+        "widget",
+        "cardinality",
+        "values",
+        "default",
+        "subscribable",
+        "editable",
+        "searchable",
+        "ai_suggestion",
+      ];
+
+      const dependsProperty = _.isEmpty(_.path("depends.on")(field))
+        ? []
+        : ["depends"];
+      const mandatoryProperty = _.isEmpty(_.path("mandatory.on")(field))
+        ? []
+        : ["mandatory"];
+      const allFields = _.flow(
+        _.concat(dependsProperty),
+        _.concat(mandatoryProperty))
+        (fieldProperties);
+
+      if (field?.type === "dynamic_table") {
+        const tableColumns = formattedFields(field?.values?.table_columns);
+        return _.flow(
+          _.set("values.table_columns", tableColumns),
+          _.pick(allFields),
+          _.omit(["default"]))
+          (field);
+      }
+      return _.pick(allFields)(field);
+    })
+  )(fields);
+
   const handleSubmit = () => {
     const formattedContent = _.flow(
       _.prop("content"),
       _.map(({ name, fields }) => {
-        const formattedFields = _.flow(
-          _.map((field) => {
-            const fieldProperties = [
-              "label",
-              "name",
-              "description",
-              "type",
-              "widget",
-              "cardinality",
-              "values",
-              "default",
-              "subscribable",
-              "mandatory",
-              "editable",
-              "searchable",
-              "ai_suggestion",
-            ];
-
-            const dependsProperty = _.isEmpty(_.path("depends.on")(field))
-              ? []
-              : ["depends"];
-            const allFields = _.concat(dependsProperty)(fieldProperties);
-            return _.pick(allFields)(field);
-          })
-        )(fields);
-        return { name, fields: formattedFields };
+        return { name, fields: formattedFields(fields) };
       })
     )(editedTemplate);
+
     onSubmit({ template: { ...editedTemplate, content: formattedContent } });
   };
 
@@ -115,6 +131,7 @@ export const TemplateForm = ({ loading, template, onSubmit }) => {
   const labelValue = editedTemplate.label || "";
   const scopeValue = editedTemplate.scope || "";
   const subscopeValue = editedTemplate.subscope || "";
+
   return (
     <Form loading={loading} className="template-form">
       <Divider horizontal>

package/src/templates/components/templateForm/ValuesConfiguration.js

@@ -0,0 +1,67 @@
+import _ from "lodash/fp";
+import { Form } from "semantic-ui-react";
+import { useIntl } from "react-intl";
+
+const searchableEnabledScopes = ["bg", "dq", "ie", "ri", "dd"];
+
+const ValuesConfiguration = ({ aiSuggestion, editable, searchable, fieldNamePrefix, hasAiSuggestion, keyType, onChange, scope, subscribable, subscribableField }) => {
+    const { formatMessage } = useIntl();
+
+    return <Form.Group size="small" widths="equal">
+        <Form.Field>
+            <Form.Checkbox
+                name={`${fieldNamePrefix}.editable`}
+                label={formatMessage({
+                    id: "template.field.editable",
+                    defaultMessage: "Editable",
+                })}
+                checked={editable}
+                onChange={(e, { name, checked: value }) =>
+                    onChange(null, { name, value })
+                }
+            />
+        </Form.Field>
+        {hasAiSuggestion ? (
+            <Form.Field>
+                <Form.Checkbox
+                    name={`${fieldNamePrefix}.ai_suggestion`}
+                    label={formatMessage({
+                        id: "template.field.ai_suggestion",
+                        defaultMessage: "AI Suggestions",
+                    })}
+                    checked={aiSuggestion}
+                    onChange={(_e, { name, checked: value }) =>
+                        onChange(null, { name, value })
+                    }
+                />
+            </Form.Field>
+        ) : null}
+        {_.includes(scope)(searchableEnabledScopes) ? (
+            <Form.Field>
+                <Form.Checkbox
+                    name={`${fieldNamePrefix}.searchable`}
+                    label={formatMessage({
+                        id: "template.field.searchable",
+                        defaultMessage: "Sercheable",
+                    })}
+                    checked={searchable}
+                    onChange={(_e, { name, checked: value }) =>
+                        onChange(null, { name, value })
+                    }
+                />
+            </Form.Field>
+        ) : null}
+        {_.includes(keyType)(["fixed", "fixed_tuple"]) ? (
+            <Form.Checkbox
+                name={subscribableField}
+                label={formatMessage({ id: "template.field.subscribable" })}
+                checked={subscribable}
+                onChange={(_e, { name, checked: value }) =>
+                    onChange(null, { name, value })
+                }
+            />
+        ) : null}
+    </Form.Group>
+}
+
+export default ValuesConfiguration;