@truedat/df 8.7.2 → 8.7.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/df",
-  "version": "8.7.2",
+  "version": "8.7.4",
   "description": "Truedat Web Data Quality Module",
   "sideEffects": false,
   "module": "src/index.js",
@@ -51,14 +51,14 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
-    "@truedat/test": "8.7.2",
+    "@truedat/test": "8.7.4",
     "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": "8.7.2",
+    "@truedat/core": "8.7.4",
     "axios": "^1.15.0",
     "graphql": "^16.11.0",
     "is-hotkey": "^0.2.0",
@@ -87,5 +87,5 @@
     "semantic-ui-react": "^3.0.0-beta.2",
     "swr": "^2.3.3"
   },
-  "gitHead": "e971cd8773dc15ad949f260abbfe4d3236473af7"
+  "gitHead": "74bf59ddf29e05b518dc206271c4f1215d66a942"
 }

package/src/components/DynamicForm.js

@@ -11,6 +11,7 @@ export const DynamicForm = ({
   applyTemplate,
   content,
   fieldsToOmit,
+  instanceId,
   isModification,
   loading,
   onChange,
@@ -21,15 +22,22 @@ export const DynamicForm = ({
   const { formatMessage } = useIntl();
   const domainId = selectedDomain?.id;
   const domainIds = selectedDomain?.ids;
-  const appliedContentRef = useRef(null);
+  const appliedKeyRef = useRef(null);
+  const latestContentRef = useRef(content);
 
   useEffect(() => {
     if (!_.isEmpty(template)) {
+      const templateId = template?.id || template?.name;
       const domainKey = JSON.stringify(domainIds || domainId);
-      const currentApplied = appliedContentRef.current;
-      if (currentApplied !== domainKey) {
-        appliedContentRef.current = domainKey;
-        const newContent = applyTemplate(content, domainIds || domainId);
+      const compositeKey = `${templateId}::${domainKey}`;
+      if (appliedKeyRef.current !== compositeKey) {
+        const wasAlreadyApplied = appliedKeyRef.current !== null;
+        appliedKeyRef.current = compositeKey;
+        const newContent = applyTemplate(
+          wasAlreadyApplied ? {} : content,
+          domainIds || domainId,
+        );
+        latestContentRef.current = newContent;
         onChange(newContent);
       }
     }
@@ -47,10 +55,18 @@ export const DynamicForm = ({
 
   const handleChange = (e, { name, value }) => {
     e && e.preventDefault();
+    const fieldName =
+      instanceId && name.startsWith(`${instanceId}_`)
+        ? name.slice(instanceId.length + 1)
+        : name;
     const newContent = applyTemplate(
-      { ...content, [name]: { value: value, origin: "user" } },
+      {
+        ...latestContentRef.current,
+        [fieldName]: { value: value, origin: "user" },
+      },
       domainIds || domainId,
     );
+    latestContentRef.current = newContent;
     onChange(newContent);
   };
 
@@ -63,6 +79,7 @@ export const DynamicForm = ({
 
   return parsedGroups.map(({ name, fields }, i) => (
     <FieldGroupSegment
+      instanceId={instanceId}
       key={i}
       name={
         name
@@ -85,6 +102,7 @@ DynamicForm.propTypes = {
   applyTemplate: PropTypes.func,
   content: PropTypes.object,
   fieldsToOmit: PropTypes.array,
+  instanceId: PropTypes.string,
   isModification: PropTypes.bool,
   loading: PropTypes.bool,
   onChange: PropTypes.func,

package/src/components/FieldGroupSegment.js

@@ -4,6 +4,7 @@ import { Segment, Header } from "semantic-ui-react";
 import DynamicField from "./widgets/DynamicField";
 
 export const FieldGroupSegment = ({
+  instanceId,
   scope,
   fields,
   isModification,
@@ -16,6 +17,7 @@ export const FieldGroupSegment = ({
     {fields &&
       fields.map((field, i) => (
         <DynamicField
+          instanceId={instanceId}
           scope={scope}
           field={{
             ...field,
@@ -36,6 +38,7 @@ export const FieldGroupSegment = ({
 
 FieldGroupSegment.propTypes = {
   fields: PropTypes.array,
+  instanceId: PropTypes.string,
   isModification: PropTypes.bool,
   name: PropTypes.string,
   onFieldChange: PropTypes.func,

package/src/components/SelectableDynamicForm.js

@@ -1,10 +1,26 @@
 import _ from "lodash/fp";
-import { useState } from "react";
+import { useState, useRef, useEffect } from "react";
 import PropTypes from "prop-types";
+import { useQuery } from "@apollo/client";
+import { TEMPLATES_QUERY } from "@truedat/core/api/queries";
 import { TemplateSelector } from "@truedat/core/components";
 import { validateContent } from "@truedat/df/utils";
 import DynamicForm from "./DynamicForm";
 
+const TemplateQueryFetcher = ({ scope, domainIds, onLoad }) => {
+  const onLoadRef = useRef(onLoad);
+  onLoadRef.current = onLoad;
+
+  useQuery(TEMPLATES_QUERY, {
+    fetchPolicy: "cache-and-network",
+    variables: { scope, domainIds },
+    onCompleted: (data) => {
+      onLoadRef.current(data);
+    },
+  });
+  return null;
+};
+
 export default function SelectableDynamicForm({
   content,
   domainIds,
@@ -28,7 +44,15 @@ export default function SelectableDynamicForm({
   selectedTemplate,
 }) {
   const [thisTemplate, setThisTemplate] = useState();
-  const template = selectedTemplate || thisTemplate;
+  const instanceId = useRef(
+    `sdf-${Math.random().toString(36).substring(2, 9)}`,
+  ).current;
+
+  useEffect(() => {
+    setThisTemplate(undefined);
+  }, [selectedTemplate]);
+
+  const template = thisTemplate || selectedTemplate;
   const domainIdsArray = _.size(domainIds) > 0 ? domainIds : null;
   const domain = domainIdsArray
     ? { id: _.head(domainIdsArray), ids: domainIdsArray }
@@ -40,16 +64,16 @@ export default function SelectableDynamicForm({
 
   const handleLoad = ({ templates }) => {
     if (selectedTemplate) return;
-    const template = name
+    const foundTemplate = name
       ? _.find(_.propEq("name", name))(templates)
       : _.size(templates) == 1
         ? _.head(templates)
         : null;
-    if (template?.name !== name) {
-      onNameChange(template?.name);
-      onTemplateChange(template);
+    if (foundTemplate?.name !== name) {
+      onNameChange(foundTemplate?.name);
+      onTemplateChange(foundTemplate);
     }
-    setThisTemplate(template);
+    setThisTemplate(foundTemplate);
   };
 
   const handleSelected = (_e, { template }) => {
@@ -60,7 +84,14 @@ export default function SelectableDynamicForm({
 
   return (
     <>
-      {(!actionKey || actionKey == "create") && !disableSelector ? (
+      {disableSelector && scope && domainIds ? (
+        <TemplateQueryFetcher
+          scope={scope}
+          domainIds={domainIds}
+          onLoad={handleLoad}
+        />
+      ) : null}
+      {(!actionKey || actionKey == "create") && !disableSelector && scope ? (
         <TemplateSelector
           scope={scope}
           domainIds={domainIds}
@@ -81,6 +112,7 @@ export default function SelectableDynamicForm({
           {header}
           <DynamicForm
             content={content}
+            instanceId={instanceId}
             selectedDomain={domain}
             template={template}
             noTranslatableFields={noTranslatableFields}

package/src/components/widgets/CheckboxField.js

@@ -3,13 +3,13 @@ import PropTypes from "prop-types";
 import { Form } from "semantic-ui-react";
 
 export const CheckboxField = ({
-  field: { name, value: fieldValue, parsedValues, disabled },
+  field: { name, value: fieldValue, parsedValues, disabled, instanceId },
   onChange,
 }) =>
   parsedValues ? (
     parsedValues.map(({ value, text }, i) => (
       <Form.Checkbox
-        name={name}
+        name={instanceId ? `${instanceId}_${name}` : name}
         key={i}
         label={text}
         value={value}
@@ -24,7 +24,7 @@ export const CheckboxField = ({
     ))
   ) : (
     <Form.Checkbox
-      name={name}
+      name={instanceId ? `${instanceId}_${name}` : name}
       checked={fieldValue === "Si"}
       onChange={(e, data) => {
         const { checked } = data;

package/src/components/widgets/DynamicField.js

@@ -19,6 +19,7 @@ export const DynamicField = ({
     disabled = false,
     ...fieldProps
   },
+  instanceId,
   isModification,
   onChange,
   scope,
@@ -87,7 +88,7 @@ export const DynamicField = ({
         ) : null}
       </label>
       <FieldByWidget
-        field={{ ...fieldProps, value, cardinality }}
+        field={{ ...fieldProps, value, cardinality, instanceId }}
         onChange={onChange}
         scope={scope}
         widget={_.prop("widget")(fieldProps)}
@@ -98,6 +99,7 @@ export const DynamicField = ({
 
 DynamicField.propTypes = {
   field: PropTypes.object.isRequired,
+  instanceId: PropTypes.string,
   isModification: PropTypes.bool,
   onChange: PropTypes.func.isRequired,
   scope: PropTypes.string,

package/src/components/widgets/RadioField.js

@@ -3,12 +3,12 @@ import PropTypes from "prop-types";
 import { Form } from "semantic-ui-react";
 
 export const RadioField = ({
-  field: { name, parsedValues, value: fieldValue },
+  field: { name, parsedValues, value: fieldValue, instanceId },
   onChange,
 }) =>
   _.map.convert({ cap: false })(({ value, text }, i) => (
     <Form.Radio
-      name={name}
+      name={instanceId ? `${instanceId}_${name}` : name}
       key={i}
       label={text}
       value={value}