@truedat/bg 6.1.4 → 6.2.0

package/src/concepts/components/ConceptEdit.js

@@ -1,161 +1,117 @@
 import _ from "lodash/fp";
-import React, { useState, useEffect } from "react";
+import React, { useState } from "react";
 import PropTypes from "prop-types";
-import {
-  Button,
-  Container,
-  Form,
-  Header,
-  Icon,
-  Label,
-  Segment,
-} from "semantic-ui-react";
 import { compose } from "redux";
 import { connect } from "react-redux";
-import { injectIntl, FormattedMessage } from "react-intl";
-import { HistoryBackButton } from "@truedat/core/components";
-import { apiJsonPost } from "@truedat/core/services/api";
-import { selectTemplate, selectDomain } from "@truedat/df/routines";
 import { applyTemplate } from "@truedat/df/utils";
-import { useAvailabilityCheck } from "@truedat/ai/hooks/useSuggestions";
-import { API_SUGGESTIONS_REQUEST } from "@truedat/ai/api";
-import SuggestionsWidget from "@truedat/ai/components/suggestions/SuggestionsWidget";
+import { useLocales } from "@truedat/core/hooks";
+import {
+  splitTranslatableFields,
+  formatLocales,
+} from "@truedat/core/services/i18nContent";
 import { conceptAction } from "../routines";
 
-const DynamicForm = React.lazy(() =>
-  import("@truedat/df/components/DynamicForm")
-);
-
-const TemplateLoader = React.lazy(() =>
-  import("@truedat/df/templates/components/TemplateLoader")
-);
-
+import ConceptForms from "./ConceptForms";
 const actionKey = "update";
 
-const isNonEmptyString = _.flow(_.trim, _.negate(_.isEmpty));
-const isValid = _.conforms({
-  name: isNonEmptyString,
-});
-
 export const ConceptEdit = ({
   concept,
   loading,
-  intl: { formatMessage },
   template,
   action,
   conceptAction,
   applyTemplate,
-  selectDomain,
-  selectTemplate,
-  templateId,
 }) => {
   const { content: propContent, name: propName, domain } = concept;
-  const [content, setContent] = useState(propContent);
-  const [name, setName] = useState(propName);
-  const [hasSuggestions, setHasSuggestions] = useState(false);
-
-  const { trigger: checkSuggestionAvailability } = useAvailabilityCheck();
-
-  useEffect(() => {
-    const domain_id = _.prop("id")(domain);
-    selectDomain({ id: domain_id });
-    selectTemplate({ id: templateId });
-    checkSuggestionAvailability({
-      template_id: templateId,
-      domain_ids: [domain.id],
-      resource_type: "business_concept",
-    }).then((prop) =>
-      setHasSuggestions(_.prop("data.data.status")(prop) == "ok")
-    );
-  }, []);
-
-  if (_.isNil(content)) {
+  const { locales, loading: localesLoading } = useLocales(false);
+  const [i18nConcept, setI18nConcept] = useState({});
+
+  if (_.isNil(propContent)) {
     return null;
   }
 
-  const isInvalid = () => _.negate(isValid)({ name });
+  if (_.isEmpty(i18nConcept)) {
+    const i18n_content = concept.i18n_content || {};
+
+    const { translatable: translatableFields } =
+      splitTranslatableFields(template);
+
+    const i18nConceptInit = _.flow(
+      _.filter(({ is_enabled }) => is_enabled),
+      _.map(({ id, lang, is_default, is_required }) => {
+        const contentLang = _.get(lang)(i18n_content);
+
+        const langContent = is_default
+          ? propContent
+          : { ...translatableFields, ...contentLang?.content };
+        const langName = is_default ? propName : contentLang?.name || "";
+
+        return {
+          id,
+          lang,
+          is_default,
+          is_required,
+          name: langName,
+          content: langContent,
+        };
+      }),
+      _.keyBy("lang")
+    )(locales);
+
+    setI18nConcept(i18nConceptInit);
+  }
+
+  const templateFields = splitTranslatableFields(template);
+
+  const translatableKeys = _.keys(templateFields.translatable);
+  const noTranslatableKeys = _.keys(templateFields.noTranslatable);
+  const langs = formatLocales(locales);
+  const defaultContent = _.flow(_.find("is_default"))(i18nConcept);
 
   const handleSubmit = (e) => {
     e.preventDefault();
 
-    const businessConceptVersion = { name, type: concept.type };
-    const newContent = applyTemplate(content, domain?.id);
+    const i18nSendConcept = _.flow(
+      _.omit(defaultContent.lang),
+      _.mapValues((langConcept) =>
+        _.flow(_.pick(["name", "content"]), ({ name, content }) => {
+          return { name, content: _.pick(translatableKeys)(content) };
+        })(langConcept)
+      )
+    )(i18nConcept);
+
+    const newContent = applyTemplate(defaultContent.content, domain?.id);
+
+    const business_concept_version = {
+      name: defaultContent.name,
+      domain_id: domain.id,
+      type: template.name,
+      content: newContent,
+      i18n_content: i18nSendConcept,
+    };
 
     conceptAction({
       action: actionKey,
       ...action,
-      business_concept_version: {
-        ...businessConceptVersion,
-        content: newContent,
-      },
+      business_concept_version,
     });
   };
 
-  const requestAiSuggestion = (callback) => {
-    const body = {
-      resource_type: "business_concept",
-      resource_body: {
-        name,
-        domain: domain.name,
-        type: template.name,
-      },
-      domain_ids: [domain.id],
-      template_id: templateId,
-    };
-    apiJsonPost(API_SUGGESTIONS_REQUEST, body).then(callback);
-  };
-
   return (
-    <Container as={Segment} text>
-      <Header as="h2">
-        <Icon name="book" />
-        <Header.Content>
-          <FormattedMessage id="concepts.header.edit" />
-        </Header.Content>
-      </Header>
-      <TemplateLoader />
-      <Form loading={loading}>
-        <Form.Field required>
-          <label>
-            {formatMessage({ id: "concepts.props.name" })}
-            {_.isEmpty(name) ? (
-              <Label pointing="left">
-                <FormattedMessage id="template.form.validation.empty_required" />
-              </Label>
-            ) : null}
-          </label>
-          <Form.Input
-            name="name"
-            value={name}
-            onChange={(_e, { value }) => setName(value)}
-          />
-        </Form.Field>
-        {hasSuggestions ? (
-          <SuggestionsWidget
-            requestAiSuggestion={requestAiSuggestion}
-            template={template}
-            applySuggestions={(suggestions) =>
-              setContent({ ...content, ...suggestions })
-            }
-            isModification={true}
-          />
-        ) : null}
-        {_.isEmpty(template) || _.isNil(content) ? null : (
-          <DynamicForm
-            onChange={setContent}
-            content={content}
-            isModification={true}
-          />
-        )}
-        <Button
-          primary
-          onClick={handleSubmit}
-          disabled={isInvalid()}
-          content={formatMessage({ id: "actions.save" })}
-        />
-        <HistoryBackButton content={formatMessage({ id: "actions.cancel" })} />
-      </Form>
-    </Container>
+    <>
+      <ConceptForms
+        actionKey={actionKey}
+        domainId={domain.id}
+        template={template}
+        i18nConcept={i18nConcept}
+        loading={loading || localesLoading}
+        langs={langs}
+        noTranslatableFields={noTranslatableKeys}
+        translatableFields={translatableKeys}
+        setI18nConcept={setI18nConcept}
+        onSubmit={handleSubmit}
+      />
+    </>
   );
 };
 
@@ -169,7 +125,6 @@ ConceptEdit.propTypes = {
   selectDomain: PropTypes.func,
   selectTemplate: PropTypes.func,
   template: PropTypes.object,
-  templateId: PropTypes.number,
 };
 
 const mapStateToProps = ({
@@ -178,29 +133,26 @@ const mapStateToProps = ({
   conceptActions,
   templateLoading,
   templates,
-  template,
 }) => {
   const action = _.prop(actionKey)(conceptActions);
   const loading =
     templateLoading ||
     (action && action.href && conceptActionLoading === action.href);
 
-  const templateId =
+  const template =
     templates && concept && concept.type
-      ? _.flow(_.find(_.propEq("name", concept.type)), _.prop("id"))(templates)
+      ? _.flow(_.find(_.propEq("name", concept.type)))(templates)
       : null;
   return {
     action,
     concept,
     loading,
-    templateId,
     template,
     loading,
     applyTemplate: applyTemplate(template),
   };
 };
 
-export default compose(
-  injectIntl,
-  connect(mapStateToProps, { conceptAction, selectTemplate, selectDomain })
-)(ConceptEdit);
+export default compose(connect(mapStateToProps, { conceptAction }))(
+  ConceptEdit
+);

package/src/concepts/components/ConceptForm.js

@@ -1,57 +1,39 @@
 import _ from "lodash/fp";
 import React, { useState, useEffect } from "react";
 import PropTypes from "prop-types";
-import {
-  Button,
-  Container,
-  Form,
-  Header,
-  Icon,
-  Label,
-  Segment,
-} from "semantic-ui-react";
-import { compose } from "redux";
-import { connect } from "react-redux";
-import { injectIntl, FormattedMessage } from "react-intl";
+import { Form, Header, Label } from "semantic-ui-react";
+import { useIntl, FormattedMessage } from "react-intl";
 import { apiJsonPost } from "@truedat/core/services/api";
-import { DomainSelector, HistoryBackButton } from "@truedat/core/components";
+import { DomainSelector } from "@truedat/core/components";
 import { useAvailabilityCheck } from "@truedat/ai/hooks/useSuggestions";
 import { API_SUGGESTIONS_REQUEST } from "@truedat/ai/api";
 import SuggestionsWidget from "@truedat/ai/components/suggestions/SuggestionsWidget";
-import { conceptAction } from "../routines";
 
 const SelectableDynamicForm = React.lazy(() =>
   import("@truedat/df/components/SelectableDynamicForm")
 );
 
-const actionKey = "create";
-
-const isNonEmptyString = _.flow(_.trim, _.negate(_.isEmpty));
-const isValid = _.conforms({
-  name: isNonEmptyString,
-  domain_id: _.isFinite,
-  type: isNonEmptyString,
-});
-
 const ConceptForm = ({
-  action,
-  conceptActionLoading,
-  conceptAction,
-  intl: { formatMessage },
+  actionKey,
+  domainId,
+  template,
+  concept,
+  loading,
+  defaultContent,
+  noTranslatableFields,
+  onChangeDomainId,
+  onChangeName,
+  onChangeTemplate,
+  onChangeConceptContent,
 }) => {
-  const [name, setName] = useState("");
-  const [content, setContent] = useState({});
-  const [type, setType] = useState();
-  const [template, setTemplate] = useState();
-  const [domainId, setDomainId] = useState();
+  const { formatMessage } = useIntl();
   const [domains, setDomains] = useState();
   const [domainsLoading, setDomainsLoading] = useState(true);
   const [hasSuggestions, setHasSuggestions] = useState(false);
 
   const { trigger: checkSuggestionAvailability } = useAvailabilityCheck();
 
-  const loading = action && action.href && conceptActionLoading === action.href;
-  const templateDisabled = !domainId || !name;
+  const templateDisabled = !domainId || (!concept?.name && concept?.is_default);
   const templateId = template?.id;
 
   useEffect(() => {
@@ -66,33 +48,14 @@ const ConceptForm = ({
     }
   }, [templateId, domainId]);
 
-  const handleDomainSelected = (_e, { value }) =>
-    setDomainId(_.toInteger(value));
-  const handleContentChange = ({ content }) => setContent(content);
   const handleDomainsLoaded = ({ domains }) => {
     setDomains(domains);
     setDomainsLoading(false);
   };
 
-  const isInvalid = () =>
-    _.negate(isValid)({ name, domain_id: domainId, type });
-
-  const handleSubmit = (e) => {
-    e.preventDefault();
-
-    const business_concept_version = {
-      name,
-      domain_id: domainId,
-      type,
-      content,
-    };
-
-    conceptAction({
-      action: actionKey,
-      ...action,
-      business_concept_version,
-    });
-  };
+  if (domainsLoading && domainId) {
+    setDomainsLoading(false);
+  }
 
   const requestAiSuggestion = (callback) => {
     const domainName = _.flow(
@@ -102,9 +65,9 @@ const ConceptForm = ({
     const body = {
       resource_type: "business_concept",
       resource_body: {
-        name,
+        name: concept.name,
         domain: domainName,
-        type,
+        type: template?.name,
       },
       domain_ids: [domainId],
       template_id: templateId,
@@ -112,32 +75,29 @@ const ConceptForm = ({
     apiJsonPost(API_SUGGESTIONS_REQUEST, body).then(callback);
   };
 
+  const handleOnChangeConceptContent = (content) =>
+    onChangeConceptContent(concept.lang, content);
+
   return (
-    <Container as={Segment} text>
-      <Header as="h2">
-        <Icon name="book" />
-        <Header.Content>
-          <FormattedMessage id="concepts.actions.create" />
-        </Header.Content>
-      </Header>
+    <>
       <Form loading={loading || domainsLoading}>
-        <Header
-          as="h3"
-          content={formatMessage({ id: "concepts.form.required_fields" })}
-        />
-        <DomainSelector
-          action="createBusinessConcept"
-          label={formatMessage({ id: "domain.selector.label" })}
-          labels
-          required
-          onChange={handleDomainSelected}
-          onLoad={handleDomainsLoaded}
-          value={domainId}
-        />
+        {actionKey == "create" ? (
+          <DomainSelector
+            action="createBusinessConcept"
+            label={formatMessage({ id: "domain.selector.label" })}
+            labels
+            required
+            disabled={!concept?.is_default}
+            onChange={onChangeDomainId}
+            onLoad={handleDomainsLoaded}
+            value={domainId}
+          />
+        ) : null}
+
         <Form.Field required>
           <label>
             <FormattedMessage id="concepts.props.name" />
-            {_.isEmpty(name) ? (
+            {_.isEmpty(concept?.name) ? (
               <Label pointing="left">
                 <FormattedMessage id="template.form.validation.empty_required" />
               </Label>
@@ -145,11 +105,13 @@ const ConceptForm = ({
           </label>
           <Form.Input
             name="name"
-            value={name}
-            onChange={(_e, { value }) => setName(value)}
+            value={concept?.name}
+            onChange={(_e, { value }) => onChangeName(concept?.lang, value)}
           />
         </Form.Field>
         <SelectableDynamicForm
+          key={concept?.lang}
+          disableSelector={!concept?.is_default}
           disabled={templateDisabled}
           scope="bg"
           domainIds={_.isNil(domainId) ? null : [domainId]}
@@ -162,53 +124,47 @@ const ConceptForm = ({
                   id: "concepts.form.aditional_fields",
                 })}
               />
-              {hasSuggestions ? (
+              {hasSuggestions && concept?.is_default ? (
                 <SuggestionsWidget
                   requestAiSuggestion={requestAiSuggestion}
                   template={template}
                   applySuggestions={(suggestions) =>
-                    setContent({ ...content, ...suggestions })
+                    handleOnChangeConceptContent({
+                      ...concept?.content,
+                      ...suggestions,
+                    })
                   }
                   isModification={true}
                 />
               ) : null}
             </>
           }
-          content={content}
-          name={type}
-          onChange={handleContentChange}
-          onNameChange={setType}
-          onTemplateChange={setTemplate}
+          content={{ ...defaultContent, ...concept?.content }}
+          name={template?.name}
+          noTranslatableFields={noTranslatableFields}
+          actionKey={actionKey}
+          onChange={handleOnChangeConceptContent}
+          onNameChange={onChangeName}
+          onTemplateChange={onChangeTemplate}
+          selectedTemplate={template}
         />
-        <div className="actions">
-          <HistoryBackButton
-            content={formatMessage({ id: "actions.cancel" })}
-          />
-          <Button
-            primary
-            disabled={isInvalid()}
-            onClick={handleSubmit}
-            content={formatMessage({ id: "actions.create" })}
-          />
-        </div>
       </Form>
-    </Container>
+    </>
   );
 };
 
 ConceptForm.propTypes = {
-  action: PropTypes.object,
-  conceptAction: PropTypes.func,
+  domainId: PropTypes.number,
+  template: PropTypes.object,
+  concept: PropTypes.object,
+  defaultContent: PropTypes.object,
+  noTranslatableFields: PropTypes.array,
+  onChangeDomainId: PropTypes.func,
+  onChangeName: PropTypes.func,
+  onChangeTemplate: PropTypes.func,
+  onChangeConceptContent: PropTypes.func,
+  actionKey: PropTypes.string,
   conceptActionLoading: PropTypes.string,
-  intl: PropTypes.object,
 };
 
-const mapStateToProps = ({ conceptActionLoading, conceptsActions }) => ({
-  action: _.prop(actionKey)(conceptsActions),
-  conceptActionLoading,
-});
-
-export default compose(
-  injectIntl,
-  connect(mapStateToProps, { conceptAction })
-)(ConceptForm);
+export default ConceptForm;

package/src/concepts/components/ConceptFormTabs.js

@@ -0,0 +1,75 @@
+import _ from "lodash/fp";
+import React from "react";
+import PropTypes from "prop-types";
+import { Grid, Tab } from "semantic-ui-react";
+import { useIntl } from "react-intl";
+import ConceptForm from "./ConceptForm";
+
+const ConceptFormTabs = ({
+  domainId,
+  template,
+  langs,
+  conceptActionLoading,
+  i18nConcept,
+  noTranslatableFields = [],
+  actionKey,
+  onChangeDomainId,
+  onChangeName,
+  onChangeTemplate,
+  onChangeConceptContent,
+}) => {
+  const { formatMessage } = useIntl();
+
+  const defaultContent = _.flow(
+    _.find("is_default"),
+    _.get("content")
+  )(i18nConcept);
+
+  const panes = _.map((locale) => {
+    const { lang, name, local_name, is_required, is_default } = locale;
+    return {
+      menuItem: `${formatMessage({
+        id: `i18n.messages.locale.${lang}`,
+        defaultMessage: `${name} ( ${local_name} )`,
+      })} ${is_required && !is_default ? "*" : ""}`,
+      render: () => (
+        <ConceptForm
+          domainId={domainId}
+          template={template}
+          concept={i18nConcept[lang]}
+          defaultContent={defaultContent}
+          noTranslatableFields={noTranslatableFields}
+          onChangeDomainId={onChangeDomainId}
+          onChangeName={onChangeName}
+          onChangeTemplate={onChangeTemplate}
+          onChangeConceptContent={onChangeConceptContent}
+          actionKey={actionKey}
+          conceptActionLoading={conceptActionLoading}
+        />
+      ),
+    };
+  })(langs);
+
+  return (
+    <Grid.Column>
+      <Tab className="concept-forms-tab" panes={panes} />
+    </Grid.Column>
+  );
+};
+
+ConceptFormTabs.propTypes = {
+  domainId: PropTypes.number,
+  template: PropTypes.object,
+  langs: PropTypes.object,
+  action: PropTypes.object,
+  actionKey: PropTypes.string,
+  conceptActionLoading: PropTypes.string,
+  i18nConcept: PropTypes.object,
+  noTranslatableFields: PropTypes.array,
+  onChangeDomainId: PropTypes.func,
+  onChangeName: PropTypes.func,
+  onChangeTemplate: PropTypes.func,
+  onChangeConceptContent: PropTypes.func,
+};
+
+export default ConceptFormTabs;