@truedat/df 7.2.11 → 7.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/df",
-  "version": "7.2.11",
+  "version": "7.3.0",
   "description": "Truedat Web Data Quality Module",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -34,7 +34,7 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^12.0.0",
     "@testing-library/user-event": "^13.2.1",
-    "@truedat/test": "7.2.11",
+    "@truedat/test": "7.3.0",
     "babel-jest": "^28.1.0",
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "babel-plugin-lodash": "^3.3.4",
@@ -87,8 +87,8 @@
   },
   "dependencies": {
     "@apollo/client": "^3.7.1",
-    "@truedat/auth": "7.2.11",
-    "@truedat/core": "7.2.11",
+    "@truedat/auth": "7.3.0",
+    "@truedat/core": "7.3.0",
     "decode-uri-component": "^0.2.2",
     "path-to-regexp": "^1.7.0",
     "prop-types": "^15.8.1",
@@ -109,5 +109,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 2.0.3 < 2.2"
   },
-  "gitHead": "74eb04f81dd49275229cf3050b56b897ff78410e"
+  "gitHead": "cbf85fe17b535953689418b85658cc804d095dfb"
 }

package/src/components/DynamicFormWithTranslations.js

@@ -0,0 +1,115 @@
+import _ from "lodash/fp";
+import React, { useEffect } from "react";
+import PropTypes from "prop-types";
+import { useIntl } from "react-intl";
+import { connect } from "react-redux";
+import { useLanguage } from "@truedat/core/i18n";
+import { makeGetApplyTemplate, makeGetTemplate } from "../selectors";
+import { parseGroupsWithLangs } from "../utils";
+import FieldGroupWithTranslations from "./FieldGroupWithTranslations";
+
+export const DynamicFormWithTranslations = ({
+  applyTemplate,
+  i18nContent,
+  fieldsToOmit,
+  isModification,
+  loading,
+  onChange,
+  selectedDomain,
+  template,
+}) => {
+  const { formatMessage } = useIntl();
+  const { defaultLang, requiredLangs } = useLanguage();
+  const domainId = selectedDomain?.id;
+  useEffect(() => {
+    if (!_.isNil(domainId) && !_.isEmpty(template)) {
+      const defaultContent = i18nContent[defaultLang]?.content;
+      if (defaultContent) {
+        const newContent = applyTemplate(defaultContent, domainId);
+        onChange(defaultLang, { content: newContent });
+      }
+    }
+  }, [applyTemplate, domainId, template, defaultLang, i18nContent, onChange]);
+
+  if (
+    loading ||
+    _.isEmpty(template) ||
+    _.isNil(template) ||
+    !_.isArray(template.content)
+  ) {
+    return null;
+  }
+
+  const handleChange = (e, { lang, name, value }) => {
+    e && e.preventDefault();
+
+    const currentContent = i18nContent[lang] || {};
+    const newLanguageContent = {
+      ...currentContent,
+      [name]: {
+        value: value === "" ? null : value,
+        origin: "user",
+      },
+    };
+    const newContent = applyTemplate(newLanguageContent, domainId);
+    onChange(lang, { content: newContent });
+  };
+
+  const parsedGroups = parseGroupsWithLangs(formatMessage)(
+    template,
+    i18nContent,
+    fieldsToOmit,
+    selectedDomain,
+    requiredLangs
+  );
+
+  return parsedGroups.map(({ name, langs }, i) => (
+    <FieldGroupWithTranslations
+      key={i}
+      name={
+        name
+          ? formatMessage({
+              id: `templates.groups.${name}`,
+              defaultMessage: name,
+            })
+          : null
+      }
+      scope={template?.scope}
+      fieldsByLang={langs}
+      onFieldChange={handleChange}
+      isModification={isModification}
+    />
+  ));
+};
+
+DynamicFormWithTranslations.propTypes = {
+  applyTemplate: PropTypes.func,
+  i18nContent: PropTypes.object,
+  fieldsToOmit: PropTypes.array,
+  isModification: PropTypes.bool,
+  loading: PropTypes.bool,
+  onChange: PropTypes.func,
+  selectedDomain: PropTypes.object,
+  template: PropTypes.object,
+};
+
+const makeMapStateToProps = () => {
+  const getTemplate = makeGetTemplate();
+  const getApplyTemplate = makeGetApplyTemplate();
+
+  const mapStateToProps = (state, props) => ({
+    applyTemplate: getApplyTemplate(state, props),
+    loading: state.loading,
+    selectedDomain:
+      props.selectedDomain ||
+      (!_.isEmpty(state.selectedDomain)
+        ? state.selectedDomain
+        : _.isNil(_.head(state.selectedDomains))
+        ? null
+        : { id: _.head(state.selectedDomains) }),
+    template: getTemplate(state, props),
+  });
+  return mapStateToProps;
+};
+
+export default connect(makeMapStateToProps)(DynamicFormWithTranslations);

package/src/components/FieldGroupWithTranslations.js

@@ -0,0 +1,200 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { Segment, Header, Grid, Tab } from "semantic-ui-react";
+import { useIntl } from "react-intl";
+import { useLanguage, I18nProvider } from "@truedat/core/i18n";
+import { LanguagesTabs } from "@truedat/core/components";
+import {
+  hasTranslatableFields,
+  isTranslatableField,
+} from "@truedat/core/services/i18nContent";
+import DynamicField from "./widgets/DynamicField";
+import FieldGroupSubSegment from "./FieldGroupSubSegment/FieldGroupSubSegment";
+
+export const FieldGroupWithTranslations = ({
+  scope,
+  name: groupName,
+  fieldsByLang,
+  isModification,
+  onFieldChange,
+}) => {
+  const { formatMessage } = useIntl();
+  const {
+    defaultLang,
+    altLang,
+    altLangs,
+    requiredLangs,
+    setAltLang,
+    isMultilingual,
+  } = useLanguage();
+  const hasTranslations = hasTranslatableFields(
+    fieldsByLang[defaultLang] || []
+  );
+
+  const getFieldForLang = (field, lang) => {
+    const langFields = fieldsByLang[lang] || [];
+    const langField = langFields.find((f) => f.name === field.name);
+
+    if (!langField) {
+      return {
+        ...field,
+        value: { value: "", origin: "default" },
+      };
+    }
+
+    return {
+      ...langField,
+      value:
+        langField.value === ""
+          ? ""
+          : !langField.value?.value
+          ? { value: "", origin: "default" }
+          : langField.value,
+    };
+  };
+
+  return (
+    <>
+      {groupName && groupName !== "undefined" && (
+        <Header as="h4" content={groupName} />
+      )}
+      {hasTranslations && isMultilingual ? (
+        <>
+          <Grid>
+            <Grid.Row columns={2}>
+              <Grid.Column>
+                <Tab
+                  className="attached-tab"
+                  attached="top"
+                  panes={[
+                    {
+                      menuItem: formatMessage({
+                        id: `i18n.messages.locale.${defaultLang}`,
+                        defaultMessage: defaultLang,
+                      }),
+                    },
+                  ]}
+                  activeIndex={0}
+                />
+              </Grid.Column>
+              <Grid.Column>
+                <LanguagesTabs
+                  altLangs={altLangs}
+                  requiredLangs={requiredLangs}
+                  selectedLang={altLang}
+                  onLangChange={setAltLang}
+                />
+              </Grid.Column>
+            </Grid.Row>
+          </Grid>
+          <Segment attached="bottom" className="attached-segment">
+            <Grid>
+              {fieldsByLang[defaultLang] &&
+                fieldsByLang[defaultLang].map((field, i) => (
+                  <Grid.Row columns={2} key={i}>
+                    <Grid.Column>
+                      {field.widget === "copy" ? (
+                        <FieldGroupSubSegment
+                          onFieldChange={onFieldChange}
+                          name={field.name}
+                          fields={field.value.value}
+                          prevFields={fieldsByLang[defaultLang]}
+                        />
+                      ) : (
+                        <I18nProvider lang={defaultLang}>
+                          <DynamicField
+                            scope={scope}
+                            field={{
+                              ...getFieldForLang(field, defaultLang),
+                              disabled: false,
+                            }}
+                            fields={fieldsByLang[defaultLang]}
+                            isModification={isModification}
+                            key={`${field.name}-${defaultLang}`}
+                            lang={defaultLang}
+                            onChange={(e, { name, value }) =>
+                              onFieldChange(e, {
+                                lang: defaultLang,
+                                name,
+                                value,
+                              })
+                            }
+                          />
+                        </I18nProvider>
+                      )}
+                    </Grid.Column>
+
+                    <Grid.Column>
+                      {isTranslatableField(field) && fieldsByLang[altLang] ? (
+                        field.widget === "copy" ? (
+                          <FieldGroupSubSegment
+                            onFieldChange={onFieldChange}
+                            name={field.name}
+                            fields={field.value.value}
+                            prevFields={fieldsByLang[altLang]}
+                          />
+                        ) : (
+                          <I18nProvider lang={altLang}>
+                            <DynamicField
+                              scope={scope}
+                              field={getFieldForLang(field, altLang)}
+                              fields={fieldsByLang[altLang]}
+                              isModification={isModification}
+                              key={`${field.name}-${altLang}`}
+                              onChange={(e, { name, value }) =>
+                                onFieldChange(e, {
+                                  lang: altLang,
+                                  name,
+                                  value,
+                                })
+                              }
+                            />
+                          </I18nProvider>
+                        )
+                      ) : null}
+                    </Grid.Column>
+                  </Grid.Row>
+                ))}
+            </Grid>
+          </Segment>
+        </>
+      ) : (
+        <Grid>
+          <Grid.Row columns={isMultilingual ? 2 : 1}>
+            <Grid.Column>
+              <Segment>
+                {fieldsByLang[defaultLang] &&
+                  fieldsByLang[defaultLang].map((field, i) => (
+                    <DynamicField
+                      key={i}
+                      scope={scope}
+                      field={{
+                        ...getFieldForLang(field, defaultLang),
+                        disabled: false,
+                      }}
+                      fields={fieldsByLang[defaultLang]}
+                      isModification={isModification}
+                      lang={defaultLang}
+                      onChange={(e, { name, value }) =>
+                        onFieldChange(e, { lang: defaultLang, name, value })
+                      }
+                    />
+                  ))}
+              </Segment>
+            </Grid.Column>
+          </Grid.Row>
+        </Grid>
+      )}
+    </>
+  );
+};
+
+FieldGroupWithTranslations.propTypes = {
+  fieldsByLang: PropTypes.objectOf(PropTypes.array),
+  isModification: PropTypes.bool,
+  name: PropTypes.string,
+  onFieldChange: PropTypes.func,
+  scope: PropTypes.string,
+};
+
+export default FieldGroupWithTranslations;

package/src/components/SelectDynamicFormWithTranslations.js

@@ -0,0 +1,137 @@
+import _ from "lodash/fp";
+import React, { useMemo, useState } from "react";
+import PropTypes from "prop-types";
+import { Grid } from "semantic-ui-react";
+import { TemplateSelector } from "@truedat/core/components";
+import { applyTemplate, validateContent } from "@truedat/df/utils";
+import { useLanguage } from "@truedat/core/i18n";
+import DynamicFormWithTranslations from "./DynamicFormWithTranslations";
+
+export default function SelectDynamicFormWithTranslations({
+  i18nContent,
+  onChangeContent,
+  domainIds,
+  header,
+  hideLabel,
+  isModification,
+  name,
+  actionKey,
+  onChangeTemplate = () => {},
+  label,
+  placeholder,
+  required,
+  scope,
+  disabled,
+  disableSelector,
+  selectedTemplate,
+}) {
+  const [thisTemplate, setThisTemplate] = useState();
+  const [showSelector, setShowSelector] = useState(false);
+  const template = selectedTemplate || thisTemplate;
+  const { defaultLang, enabledLangs, isMultilingual } = useLanguage();
+  const domain = useMemo(() => {
+    return _.size(domainIds) > 0 ? { id: _.head(domainIds) } : null;
+  }, [domainIds]);
+
+  const handleChange = (content, currentTemplate = thisTemplate, lang) => {
+    onChangeContent(lang, {
+      content,
+      valid: validateContent(currentTemplate)(content),
+    });
+  };
+
+  const handleLoad = ({ templates }) => {
+    const templateFound = name
+      ? _.find(_.propEq("name", name))(templates)
+      : _.size(templates) === 1
+      ? _.head(templates)
+      : null;
+
+    setShowSelector(templates.length > 1);
+
+    if (templateFound && (!name || templateFound.name === name)) {
+      onChangeTemplate(templateFound);
+      setThisTemplate(templateFound);
+
+      enabledLangs.forEach((lang) => {
+        const contentForLang = applyTemplate(templateFound)(
+          i18nContent[lang]?.content || {},
+          domain?.id
+        );
+        handleChange(contentForLang, templateFound, defaultLang);
+      });
+    }
+  };
+
+  const handleSelected = (_e, { template: selectedTpl }) => {
+    if (selectedTpl !== thisTemplate) {
+      onChangeTemplate(selectedTpl);
+      setThisTemplate(selectedTpl);
+
+      enabledLangs.forEach((lang) => {
+        const languageContent = i18nContent[lang]?.content || {};
+        const processedContent = selectedTpl
+          ? applyTemplate(selectedTpl)(languageContent, domain?.id)
+          : {};
+        handleChange(processedContent, selectedTpl, defaultLang);
+      });
+    }
+  };
+
+  return (
+    <>
+      {(!actionKey || actionKey === "create") && (
+        <Grid style={{ display: showSelector ? "block" : "none" }}>
+          <Grid.Row columns={isMultilingual ? 2 : 1}>
+            <Grid.Column>
+              <TemplateSelector
+                scope={scope}
+                domainIds={domainIds}
+                hideLabel={hideLabel}
+                onChange={handleSelected}
+                onLoad={handleLoad}
+                label={label}
+                placeholder={placeholder}
+                required={required}
+                selectedValue={template?.id}
+                disabled={disabled || disableSelector}
+              />
+            </Grid.Column>
+            {isMultilingual && <Grid.Column />}
+          </Grid.Row>
+        </Grid>
+      )}
+      {!disabled && template && (
+        <>
+          {header}
+          <DynamicFormWithTranslations
+            template={template}
+            i18nContent={i18nContent}
+            onChange={onChangeContent}
+            selectedDomain={domain}
+            isModification={isModification}
+          />
+        </>
+      )}
+    </>
+  );
+}
+
+SelectDynamicFormWithTranslations.propTypes = {
+  i18nContent: PropTypes.object,
+  onChangeContent: PropTypes.func,
+  domainIds: PropTypes.array,
+  header: PropTypes.node,
+  hideLabel: PropTypes.bool,
+  isModification: PropTypes.bool,
+  name: PropTypes.string,
+  actionKey: PropTypes.string,
+  onChangeTemplate: PropTypes.func,
+  label: PropTypes.string,
+  placeholder: PropTypes.string,
+  required: PropTypes.bool,
+  scope: PropTypes.string,
+  disabled: PropTypes.bool,
+  disableSelector: PropTypes.bool,
+  selectedTemplate: PropTypes.object,
+};

package/src/components/widgets/DateField.js

@@ -14,7 +14,7 @@ export const DateField = ({ field: { name, value }, onChange }) => {
       placeholder="Date"
       value={_.isEmpty(value) ? "" : value}
       iconPosition="left"
-      onChange={(e, { value }) => onChange(e, { name: name, value: value })}
+      onChange={(_e, { value }) => onChange(null, { name: name, value: value })}
     />
   );
 };

package/src/styles/fieldGroupDetail.less

@@ -57,5 +57,18 @@
   font-size: medium;
 }
 .default-value {
-  whiteSpace: "pre-wrap"
+  white-space: pre-wrap;
+}
+
+.attached-tab.ui.menu.attached.top {
+  border: 1px solid #ddd;
+  border-radius: 4px 4px 0 0;
+  margin: 0;
+}
+
+.attached-segment.ui.attached.segment.bottom {
+  border: 1px solid #ddd;
+  border-top: none;
+  border-radius: 0 0 4px 4px;
+  padding: 1em;
 }

package/src/templates/utils/index.js

@@ -13,4 +13,4 @@ export {
   validateRequired,
 } from "./validateContent";
 export { parseFieldOptions } from "./parseFieldOptions";
-export { parseGroups } from "./parseGroups";
+export { parseGroups, parseGroupsWithLangs } from "./parseGroups";

package/src/templates/utils/parseGroups.js

@@ -41,3 +41,51 @@ export const parseGroups =
       }),
       _.filter(({ fields }) => _.negate(_.isEmpty)(fields))
     )(template);
+
+export const parseGroupsWithLangs =
+  (formatMessage) =>
+  (template, i18nContent, fieldsToOmit, selectedDomain, requiredLangs = []) => {
+    return _.flow(
+      _.getOr([], "content"),
+      _.map((group) => {
+        const langs = _.flow(
+          _.toPairs,
+          _.map(([lang, langContent]) => {
+            const fields = _.flow(
+              _.get("fields"),
+              _.reject((field) => _.includes(fieldsToOmit)(field?.name)),
+              _.filter((field) => {
+                return (
+                  (!("depends" in field) ||
+                    (hasDependentKeys(field) &&
+                      checkDependency(field, langContent))) &&
+                  (!(field.values && "switch" in field.values) ||
+                    _.prop(`${_.prop("values.switch.on")(field)}.value`)(
+                      langContent
+                    ) in _.prop("values.switch.values")(field))
+                );
+              }),
+              _.map((field) => ({
+                ...field,
+                ...parseFieldOptions(formatMessage)(
+                  langContent,
+                  selectedDomain
+                )(field),
+                ...(requiredLangs.includes(lang)
+                  ? enrichRequired(langContent)(field)
+                  : { required: false }),
+                ...enrichIsSecret(_.get("is_secret")(group))(field),
+              }))
+            )(group);
+            return [lang, fields];
+          }),
+          _.fromPairs
+        )(i18nContent);
+        return {
+          name: group.name,
+          langs,
+        };
+      }),
+      _.filter(({ langs }) => _.some((fields) => !_.isEmpty(fields))(langs))
+    )(template);
+  };