@truedat/df 7.12.5 → 7.12.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/df",
-  "version": "7.12.5",
+  "version": "7.12.7",
   "description": "Truedat Web Data Quality Module",
   "sideEffects": false,
   "module": "src/index.js",
@@ -48,14 +48,14 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
-    "@truedat/test": "7.12.5",
+    "@truedat/test": "7.12.7",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "redux-saga-test-plan": "^4.0.6"
   },
   "dependencies": {
     "@apollo/client": "^3.13.8",
-    "@truedat/core": "7.12.5",
+    "@truedat/core": "7.12.7",
     "axios": "^1.12.0",
     "graphql": "^16.11.0",
     "is-hotkey": "^0.2.0",
@@ -84,5 +84,5 @@
     "semantic-ui-react": "^3.0.0-beta.2",
     "swr": "^2.3.3"
   },
-  "gitHead": "7d60ce1b280a2815d9b441f38d27b6b8d5b7a694"
+  "gitHead": "4fcf1a96c366bb13af6261808308a00cc7480a82"
 }

package/src/components/DynamicFieldValue.js

@@ -56,7 +56,7 @@ export const DynamicFieldValue = ({
         ) : type == "hierarchy" ? (
           <HierarchyPreview hierarchyValue={_.castArray(value)} />
         ) : _.isArray(value) ? (
-          type == "table" ? (
+          ["table", "dynamic_table"].includes(type) ? (
             <FieldViewerValue type={type} value={value} values={values} />
           ) : type == "system" ? (
             <SystemPreview value={value} />

package/src/components/DynamicFormViewer.js

@@ -24,15 +24,16 @@ export const DynamicFormViewer = ({
     );
 
   const parsedGroups = parseGroups(formatMessage)(template, content);
+
   return parsedGroups.map(({ name, fields }, i) => (
     <FieldGroupDetail
       key={i}
       name={
         name
           ? formatMessage({
-              id: `templates.groups.${name}`,
-              defaultMessage: name,
-            })
+            id: `templates.groups.${name}`,
+            defaultMessage: name,
+          })
           : null
       }
       fields={fields}

package/src/components/DynamicFormWithTranslations.js

@@ -69,9 +69,9 @@ export const DynamicFormWithTranslations = ({
       name={
         name
           ? formatMessage({
-              id: `templates.groups.${name}`,
-              defaultMessage: name,
-            })
+            id: `templates.groups.${name}`,
+            defaultMessage: name,
+          })
           : null
       }
       scope={template?.scope}

package/src/components/EditableDynamicFieldValue.js

@@ -109,7 +109,7 @@ export const EditableDynamicFieldValue = (props) => {
         ) : type == "domain" ? (
           <DomainPreview domainIds={_.castArray(value)} />
         ) : _.isArray(value) ? (
-          type == "table" ? (
+          ["table", "dynamic_table"].includes(type) ? (
             <FieldViewerValue type={type} value={value} values={values} />
           ) : type == "system" ? (
             <SystemPreview value={value} />

package/src/components/FieldViewerValue.js

@@ -1,3 +1,4 @@
+import _ from "lodash";
 import PropTypes from "prop-types";
 import { useIntl } from "react-intl";
 import { Icon, Label, Table } from "semantic-ui-react";
@@ -19,6 +20,21 @@ LocalizedFieldValue.propTypes = {
   value: PropTypes.any,
 };
 
+const DynamicTableField = (field) => {
+  const { value } = field;
+
+  return (
+    <Table.Cell>
+      {_.isNil(value) || _.isEmpty(value) ? null : _.isArray(value) ? (
+        value
+          .filter((v) => !_.isNil(v) && !_.isEmpty(v))
+          .map((v, i) => <FieldViewerValue {...field} value={v} key={i} multiple />)
+      ) : (
+        <FieldViewerValue {...field} value={value} />
+      )}
+    </Table.Cell>
+  );
+};
 export const FieldViewerValue = ({
   label,
   multiple,
@@ -27,6 +43,8 @@ export const FieldViewerValue = ({
   values,
   widget,
 }) => {
+  if (_.isNil(value)) return null;
+
   switch (type) {
     case "url":
       return value.url_value ? (
@@ -39,12 +57,11 @@ export const FieldViewerValue = ({
     case "enriched_text":
       return <RichTextEditor readOnly value={value} />;
     case "table":
-      const { table_columns } = values;
       return (
         <Table style={{ marginTop: "10px" }} celled striped compact fixed>
           <Table.Header>
             <Table.Row>
-              {table_columns.map(({ name }, i) => (
+              {values?.table_columns.map(({ name }, i) => (
                 <Table.HeaderCell key={i}>{name}</Table.HeaderCell>
               ))}
             </Table.Row>
@@ -52,7 +69,7 @@ export const FieldViewerValue = ({
           <Table.Body>
             {value.map((row, i) => (
               <Table.Row key={i}>
-                {table_columns.map(({ name }, i) => (
+                {values?.table_columns.map(({ name }, i) => (
                   <Table.Cell key={i}>{row[name]}</Table.Cell>
                 ))}
               </Table.Row>
@@ -60,6 +77,30 @@ export const FieldViewerValue = ({
           </Table.Body>
         </Table>
       );
+    case "dynamic_table":
+      return (
+        <Table style={{ marginTop: "10px" }} celled striped compact fixed>
+          <Table.Header>
+            <Table.Row>
+              {values?.table_columns.map(({ name }, i) => (
+                <Table.HeaderCell key={i}>{name}</Table.HeaderCell>
+              ))}
+            </Table.Row>
+          </Table.Header>
+          <Table.Body>
+            {value.map((row, i) => (
+              <Table.Row key={i}>
+                {values?.table_columns.map((column, i) => (
+                  <DynamicTableField
+                    key={i}
+                    {...{ ...column, value: row[column.name]?.value }}
+                  />
+                ))}
+              </Table.Row>
+            ))}
+          </Table.Body>
+        </Table>
+      );
     case "image":
       return <ImagePreview value={value} />;
     case "system":

package/src/components/__tests__/FieldViewerValue.spec.js

@@ -54,15 +54,19 @@ describe("<FieldViewerValue />", () => {
       value: "datetime",
       type: "datetime",
     },
+    {
+      values: { table_columns: [{ name: "col1", cardinality: "?", type: "string" }] },
+      value: [{ col1: { value: "v2", origin: "user" } }, { col1: { value: "v2", origin: "user" } }],
+      type: "dynamic_table",
+    }
   ];
 
   testTypes.forEach((props) =>
-    it(`matches the latest snapshot with type: ${props.type}${
-      props.alternative ? " " + props.alternative : ""
-    }`, () => {
-      const { container } = render(<FieldViewerValue {...props} />);
-      expect(container).toMatchSnapshot();
-    })
+    it(`matches the latest snapshot with type: ${props.type}${props.alternative ? " " + props.alternative : ""
+      }`, () => {
+        const { container } = render(<FieldViewerValue {...props} />);
+        expect(container).toMatchSnapshot();
+      })
   );
 
   it("matches the latest snapshot for multiple", () => {

package/src/components/__tests__/__snapshots__/FieldViewerValue.spec.js.snap

@@ -30,6 +30,59 @@ exports[`<FieldViewerValue /> matches the latest snapshot with type: datetime 1`
 </div>
 `;
 
+exports[`<FieldViewerValue /> matches the latest snapshot with type: dynamic_table 1`] = `
+<div>
+  <table
+    class="ui celled fixed striped compact table"
+    style="margin-top: 10px;"
+  >
+    <thead
+      class=""
+    >
+      <tr
+        class=""
+      >
+        <th
+          class=""
+        >
+          col1
+        </th>
+      </tr>
+    </thead>
+    <tbody
+      class=""
+    >
+      <tr
+        class=""
+      >
+        <td
+          class=""
+        >
+          <div
+            class="default-value"
+          >
+            v2
+          </div>
+        </td>
+      </tr>
+      <tr
+        class=""
+      >
+        <td
+          class=""
+        >
+          <div
+            class="default-value"
+          >
+            v2
+          </div>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+`;
+
 exports[`<FieldViewerValue /> matches the latest snapshot with type: image 1`] = `
 <div>
   <img

package/src/components/widgets/DynamicField.js

@@ -3,67 +3,11 @@ import PropTypes from "prop-types";
 import { Form, Icon, Popup, Label } from "semantic-ui-react";
 import { FormattedMessage } from "react-intl";
 import OriginLabel from "@truedat/core/components/OriginLabel";
-import DateTimeField from "./DateTimeField";
-import CheckboxField from "./CheckboxField";
-import ColorPickerField from "./ColorPickerField";
-import DropdownField from "./DropdownField";
-import EnrichedTextField from "./EnrichedTextField";
-import IdentifierField from "./IdentifierField";
-import ImageField from "./ImageField";
-import PairListField from "./PairListField";
-import PasswordField from "./PasswordField";
-import RadioField from "./RadioField";
-import StringField from "./StringField";
-import TableField from "./TableField";
-import TextField from "./TextField";
-import NumberField from "./NumberField";
-import DateField from "./DateField";
+import FieldByWidget from "./FieldByWidget";
 
 const isNullOrEmpty = (value) =>
   !_.isNumber(value) && (!value || _.isEmpty(value));
 
-const FieldByWidget = ({ scope, widget, onChange, field }) => {
-  switch (widget) {
-    case "identifier":
-      return <IdentifierField field={field} />;
-    case "dropdown":
-      return <DropdownField field={field} scope={scope} onChange={onChange} />;
-    case "radio":
-      return <RadioField field={field} onChange={onChange} />;
-    case "checkbox":
-      return <CheckboxField field={field} onChange={onChange} />;
-    case "textarea":
-      return <TextField field={field} onChange={onChange} />;
-    case "color_picker":
-      return <ColorPickerField field={field} onChange={onChange} />;
-    case "pair_list":
-      return <PairListField field={field} onChange={onChange} />;
-    case "enriched_text":
-      return <EnrichedTextField field={field} onChange={onChange} />;
-    case "table":
-      return <TableField field={field} onChange={onChange} />;
-    case "password":
-      return <PasswordField field={field} onChange={onChange} />;
-    case "image":
-      return <ImageField field={field} onChange={onChange} />;
-    case "number":
-      return <NumberField field={field} onChange={onChange} />;
-    case "date":
-      return <DateField field={field} onChange={onChange} />;
-    case "datetime":
-      return <DateTimeField field={field} onChange={onChange} />;
-    default:
-      return <StringField field={field} onChange={onChange} />;
-  }
-};
-
-FieldByWidget.propTypes = {
-  onChange: PropTypes.func.isRequired,
-  field: PropTypes.object.isRequired,
-  scope: PropTypes.string,
-  widget: PropTypes.string,
-};
-
 export const DynamicField = ({
   field: {
     label,
@@ -89,14 +33,14 @@ export const DynamicField = ({
     >
       <label>
         {(label && fieldProps.type != "hierarchy") ||
-        (fieldProps.type == "hierarchy" &&
-          (fieldProps.values.hierarchy.min_depth == 0 ||
-            !fieldProps.values.hierarchy.min_depth)) ? (
+          (fieldProps.type == "hierarchy" &&
+            (fieldProps.values.hierarchy.min_depth == 0 ||
+              !fieldProps.values.hierarchy.min_depth)) ? (
           <FormattedMessage id={`fields.${label}`} defaultMessage={label} />
         ) : null}
         {label &&
-        fieldProps.type == "hierarchy" &&
-        fieldProps.values.hierarchy.min_depth > 0 ? (
+          fieldProps.type == "hierarchy" &&
+          fieldProps.values.hierarchy.min_depth > 0 ? (
           <>
             <FormattedMessage id={`fields.${label}`} defaultMessage={label} />
             <Label pointing="left">

package/src/components/widgets/DynamicTableField.js

@@ -0,0 +1,150 @@
+import _ from "lodash/fp";
+import { lazy } from "react";
+import PropTypes from "prop-types";
+import { Button, Icon, Label, Table } from "semantic-ui-react";
+import { useIntl } from "react-intl";
+
+const FieldByWidget = lazy(() => import("./FieldByWidget"));
+
+export const DynamicTableField = ({
+    field: { name, value: fieldValue = [], values },
+    onChange,
+    scope,
+}) => {
+    const value = fieldValue || [];
+    const table_columns = _.get("table_columns")(values) || [];
+    const { formatMessage } = useIntl();
+
+    const handleAddRow = (e) => {
+        e && e.preventDefault();
+        onChange(e, {
+            name,
+            value: [...value, {}],
+        });
+    };
+
+    const handleRemoveRow = (e, id) => {
+        e && e.preventDefault();
+        const newValue = [...value];
+        newValue.splice(id, 1);
+        onChange(e, { name, value: newValue });
+    };
+
+    const handleChange = (idx, e, data) => {
+        const currentValue = removeDeletedColumns(table_columns, [...value]);
+        const input = {
+            ...currentValue[idx],
+            [data.name]: { origin: "user", value: data.value },
+        };
+        onChange(e, {
+            name,
+            value: currentValue.map((newElem, i) => (i == idx ? input : newElem)),
+        });
+    };
+
+    const removeDeletedColumns = (table_columns, content) => {
+        const columns_name = _.map((column) => column.name)(table_columns);
+        return content.map((row) => {
+            const field_deleted = _.keys(row).filter(
+                (x) => !columns_name.includes(x),
+            );
+            return _.omit(field_deleted)(row);
+        });
+    };
+
+    const rows = value.map((row) => {
+        return table_columns.map((field) => {
+            return { ...field, value: row[field.name]?.value };
+        });
+    });
+
+    const requiredErrors = _.flow(
+        _.flatten,
+        _.filter(_.prop("required")),
+        _.groupBy("name"),
+        _.toPairs,
+        _.map(([key, values]) => [
+            key,
+            _.any((value) => _.isEmpty(value?.value))(values),
+        ]),
+        _.fromPairs
+    )(rows);
+
+    return (
+        <Table celled className="no_padding">
+            <Table.Header>
+                <Table.Row>
+                    {table_columns.map((v, i) => (
+                        <Table.HeaderCell key={i}>
+                            {v.name}
+                            {["+", "1"].includes(v.cardinality) && (
+                                <span className="is_required">*</span>
+                            )}
+                            {requiredErrors[v.name] && (<Label pointing="left">
+                                {formatMessage({
+                                    id: "template.form.validation.empty_required",
+                                })}
+                            </Label>)
+                            }
+                        </Table.HeaderCell>
+                    ))}
+                    <Table.HeaderCell />
+                </Table.Row>
+            </Table.Header>
+            <Table.Body>
+                {rows.map((row, i) => (
+                    <Table.Row key={i}>
+                        {row.map((field, k) => (
+                            <Table.Cell key={k} width={5}>
+                                <FieldByWidget
+                                    field={field}
+                                    widget={field.widget}
+                                    onChange={(e, data) => handleChange(i, e, data)}
+                                    scope={scope}
+                                />
+                            </Table.Cell>
+                        ))}
+                        <Table.Cell style={{ textAlign: "center", padding: "1px" }} width={1}>
+                            <Button
+                                icon={
+                                    <Icon
+                                        className="selectable"
+                                        name="trash alternate outline"
+                                        color="red"
+                                        onClick={(e) => handleRemoveRow(e, i)}
+                                    />
+                                }
+                                color="red"
+                                size="mini"
+                                basic
+                            />
+                        </Table.Cell>
+                    </Table.Row>
+                ))}
+            </Table.Body>
+            <Table.Footer>
+                <Table.Row>
+                    <Table.HeaderCell colSpan={`${table_columns.length + 1}`}>
+                        <Button
+                            compact
+                            data-testid="add-button"
+                            floated="right"
+                            icon={{ name: "add", color: "green" }}
+                            name="add_button"
+                            onClick={handleAddRow}
+                            size="small"
+                        />
+                    </Table.HeaderCell>
+                </Table.Row>
+            </Table.Footer>
+        </Table>
+    );
+};
+
+DynamicTableField.propTypes = {
+    field: PropTypes.object,
+    onChange: PropTypes.func,
+    scope: PropTypes.string,
+};
+
+export default DynamicTableField;

package/src/components/widgets/FieldByWidget.js

@@ -0,0 +1,63 @@
+import PropTypes from "prop-types";
+import DateTimeField from "./DateTimeField";
+import CheckboxField from "./CheckboxField";
+import ColorPickerField from "./ColorPickerField";
+import DropdownField from "./DropdownField";
+import EnrichedTextField from "./EnrichedTextField";
+import IdentifierField from "./IdentifierField";
+import ImageField from "./ImageField";
+import PairListField from "./PairListField";
+import PasswordField from "./PasswordField";
+import RadioField from "./RadioField";
+import StringField from "./StringField";
+import TableField from "./TableField";
+import DynamicTableField from "./DynamicTableField";
+import TextField from "./TextField";
+import NumberField from "./NumberField";
+import DateField from "./DateField";
+
+const FieldByWidget = ({ scope, widget, onChange, field }) => {
+    switch (widget) {
+        case "identifier":
+            return <IdentifierField field={field} />;
+        case "dropdown":
+            return <DropdownField field={field} scope={scope} onChange={onChange} />;
+        case "radio":
+            return <RadioField field={field} onChange={onChange} />;
+        case "checkbox":
+            return <CheckboxField field={field} onChange={onChange} />;
+        case "textarea":
+            return <TextField field={field} onChange={onChange} />;
+        case "color_picker":
+            return <ColorPickerField field={field} onChange={onChange} />;
+        case "pair_list":
+            return <PairListField field={field} onChange={onChange} />;
+        case "enriched_text":
+            return <EnrichedTextField field={field} onChange={onChange} />;
+        case "table":
+            return <TableField field={field} onChange={onChange} />;
+        case "dynamic_table":
+            return <DynamicTableField field={field} onChange={onChange} />;
+        case "password":
+            return <PasswordField field={field} onChange={onChange} />;
+        case "image":
+            return <ImageField field={field} onChange={onChange} />;
+        case "number":
+            return <NumberField field={field} onChange={onChange} />;
+        case "date":
+            return <DateField field={field} onChange={onChange} />;
+        case "datetime":
+            return <DateTimeField field={field} onChange={onChange} />;
+        default:
+            return <StringField field={field} onChange={onChange} />;
+    }
+};
+
+FieldByWidget.propTypes = {
+    onChange: PropTypes.func.isRequired,
+    field: PropTypes.object.isRequired,
+    scope: PropTypes.string,
+    widget: PropTypes.string,
+};
+
+export default FieldByWidget;

package/src/components/widgets/StandardDropdown.js

@@ -35,8 +35,8 @@ const makeOptions = (formatMessage, label) => (cardinality, values) =>
   isMultiple(cardinality)
     ? translateValues(formatMessage, label)(values)
     : _.union(translateValues(formatMessage, label)(values), [
-        { text: formatMessage({ id: "selector.no.selection" }), value: null },
-      ]);
+      { text: formatMessage({ id: "selector.no.selection" }), value: null },
+    ]);
 
 const singleValueType = (name, value, options) =>
   _.flow(

package/src/components/widgets/StringField.js

@@ -3,9 +3,10 @@ import { Form } from "semantic-ui-react";
 import { useIntl } from "react-intl";
 
 export const StringField = ({
-  field: { name, cardinality, placeholder, value },
+  field,
   onChange,
 }) => {
+  const { name, cardinality, placeholder, value } = field;
   const { formatMessage } = useIntl();
   return cardinality == "+" || cardinality == "*" ? (
     <Form.Dropdown

package/src/components/widgets/__tests__/DynamicField.spec.js

@@ -1,4 +1,4 @@
-import { render } from "@truedat/test/render";
+import { render, waitForLoad } from "@truedat/test/render";
 import { within } from "@testing-library/react";
 import { DynamicField } from "../DynamicField";
 
@@ -146,4 +146,13 @@ describe("<DynamicField />", () => {
     const input = within(formField).getByDisplayValue("input_placeholder");
     expect(input).toBeInTheDocument();
   });
+
+  it("matches the latest snapshot (dynamic_table widget)", async () => {
+    const table_columns = [{ name: "col", type: "string", widget: "string", cardinality: "1" }];
+    const value = { value: [{ col: { origin: "user", value: "foo" } }], origin: "user" };
+    const props = { field: { widget: "dynamic_table", values: { table_columns }, value }, onChange };
+    const rendered = render(<DynamicField {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
 });