@truedat/bg 6.1.5 → 6.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/bg",
-  "version": "6.1.5",
+  "version": "6.2.0",
   "description": "Truedat Web Business Glossary",
   "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": "6.1.5",
+    "@truedat/test": "6.2.0",
     "babel-jest": "^28.1.0",
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "babel-plugin-lodash": "^3.3.4",
@@ -86,9 +86,9 @@
     ]
   },
   "dependencies": {
-    "@truedat/core": "6.1.5",
-    "@truedat/df": "6.1.5",
-    "@truedat/lm": "6.1.5",
+    "@truedat/core": "6.2.0",
+    "@truedat/df": "6.2.0",
+    "@truedat/lm": "6.2.0",
     "decode-uri-component": "^0.2.2",
     "file-saver": "^2.0.5",
     "moment": "^2.29.4",
@@ -111,5 +111,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 2.0.3 < 2.2"
   },
-  "gitHead": "3cbadffa2227cac1cce3c21d8442245082324ac1"
+  "gitHead": "5c10ee429997ab081477edf0679547eb4bc11f9b"
 }

package/src/concepts/components/ConceptCompleteness.js

@@ -5,13 +5,11 @@ import { connect } from "react-redux";
 import { List, Header, Progress, Segment, Icon } from "semantic-ui-react";
 import { FormattedMessage } from "react-intl";
 import { isRequired } from "@truedat/df/utils";
+import { useLocales } from "@truedat/core/hooks";
+import { splitTranslatableFields } from "@truedat/core/services/i18nContent";
 
-export const ConceptCompleteness = ({ concept }) => {
-  const completeness = _.get("completeness")(concept);
-  const content = _.getOr({}, "content")(concept);
-  const status = _.get("status")(concept);
-
-  const missingRequiredFields = _.flow(
+const missingRequiredFields = (concept, content) => {
+  return _.flow(
     _.path("template.content"),
     _.flatMap(({ fields }) =>
       _.filter((field) => {
@@ -25,15 +23,25 @@ export const ConceptCompleteness = ({ concept }) => {
       })(fields)
     )
   )(concept);
+};
 
+export const Completeness = ({
+  status,
+  completeness,
+  langLocalName,
+  concept,
+  content,
+}) => {
   return (
-    <Segment className="completeness">
+    <>
       <Header as="h3" dividing>
         <FormattedMessage
           id="concepts.props.completeness"
           defaultMessage="Completeness"
-        />
+        />{" "}
+        {langLocalName || null}
       </Header>
+      <>{}</>
       <Progress
         error={completeness < 50}
         warning={completeness >= 50 && completeness < 85}
@@ -41,7 +49,7 @@ export const ConceptCompleteness = ({ concept }) => {
         percent={completeness}
         progress
       />
-      {_.negate(_.isEmpty)(missingRequiredFields) &&
+      {_.negate(_.isEmpty)(missingRequiredFields(concept, content)) &&
         !_.includes(status)(["published", "versioned"]) && (
           <>
             <Header as="h4" dividing>
@@ -62,10 +70,80 @@ export const ConceptCompleteness = ({ concept }) => {
                     />
                   ) : null}
                 </List.Item>
-              ))(missingRequiredFields)}
+              ))(missingRequiredFields(concept, content))}
             </List>
           </>
         )}
+    </>
+  );
+};
+
+Completeness.propTypes = {
+  concept: PropTypes.object,
+  status: PropTypes.string,
+  completeness: PropTypes.number,
+  langLocalName: PropTypes.string,
+  content: PropTypes.object,
+};
+
+export const ConceptCompleteness = ({ concept }) => {
+  const { locales } = useLocales(false);
+
+  const completeness = _.get("completeness")(concept);
+  const content = _.getOr({}, "content")(concept);
+  const status = _.get("status")(concept);
+
+  const i18nContent = concept.i18n_content || {};
+
+  const { noTranslatable: noTranslatableFields } = splitTranslatableFields(
+    concept.template
+  );
+
+  const noTranslatableContent = _.pick(_.keys(noTranslatableFields))(
+    concept.content
+  );
+  const i18nConcept = _.flow(
+    _.filter(({ is_enabled, is_required }) => is_enabled && is_required),
+    _.map(({ id, lang, is_default, is_required, local_name }) => {
+      const contentLang = _.get(lang)(i18nContent);
+
+      const langContent = is_default
+        ? content
+        : { ...noTranslatableContent, ...contentLang?.content };
+      const langName = is_default ? concept.name : contentLang?.name || "";
+      const langCompleteness = is_default
+        ? completeness
+        : contentLang?.completeness;
+
+      return {
+        id,
+        lang,
+        isDefault: is_default,
+        isRequired: is_required,
+        name: langName,
+        langLocalName: local_name,
+        completeness: langCompleteness,
+        content: langContent,
+      };
+    }),
+    _.orderBy(["isDefault", "isRequired", "lang"], ["desc", "desc", "asc"]),
+    _.keyBy("lang")
+  )(locales);
+
+  return (
+    <Segment className="completeness">
+      {_.map(({ completeness, lang, langLocalName, content, isRequired }) => {
+        return isRequired == true ? (
+          <Completeness
+            key={lang}
+            status={status}
+            completeness={completeness}
+            langLocalName={langLocalName}
+            concept={concept}
+            content={content}
+          />
+        ) : null;
+      })(i18nConcept)}
     </Segment>
   );
 };

package/src/concepts/components/ConceptCreate.js

@@ -0,0 +1,116 @@
+import _ from "lodash/fp";
+import React, { useState, useEffect } from "react";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
+import { useLocales } from "@truedat/core/hooks";
+import {
+  splitTranslatableFields,
+  formatLocales,
+} from "@truedat/core/services/i18nContent";
+import { conceptAction } from "../routines";
+import ConceptForms from "./ConceptForms";
+
+const actionKey = "create";
+
+const ConceptCreate = ({ action, conceptActionLoading, conceptAction }) => {
+  const { locales, loading: localesLoading } = useLocales(false);
+
+  const [i18nConcept, setI18nConcept] = useState({});
+  const [domainId, setDomainId] = useState();
+  const [template, setTemplate] = useState();
+  const [translatableKeys, setTranslatableKeys] = useState([]);
+  const [noTranslatableKeys, setNoTranslatableKeys] = useState([]);
+
+  useEffect(() => {
+    const templateFields = splitTranslatableFields(template);
+
+    setTranslatableKeys(_.keys(templateFields.translatable));
+    setNoTranslatableKeys(_.keys(templateFields.noTranslatable));
+
+    const updateI18nConcept = _.flow(
+      _.map((langContent) => ({
+        ...langContent,
+        content: langContent.is_default
+          ? {
+              ...templateFields.translatable,
+              ...templateFields.noTranslatable,
+            }
+          : { ...templateFields.translatable },
+      })),
+      _.keyBy("lang")
+    )(i18nConcept);
+
+    setI18nConcept(updateI18nConcept);
+  }, [template]);
+
+  if (_.isEmpty(i18nConcept)) {
+    const i18nConceptInit = _.flow(
+      _.filter(({ is_enabled }) => is_enabled),
+      _.map(({ id, lang, is_default, is_required }) => {
+        return { id, lang, is_default, is_required, name: "", content: {} };
+      }),
+      _.keyBy("lang")
+    )(locales);
+
+    setI18nConcept(i18nConceptInit);
+  }
+
+  const langs = formatLocales(locales);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    const defaultContent = _.flow(_.find("is_default"))(i18nConcept);
+
+    const i18nSendConcept = _.flow(
+      _.omit(defaultContent.lang),
+      _.mapValues((langConcept) =>
+        _.flow(_.pick(["name", "content"]), ({ name, content }) => {
+          return { name, content: _.pick(translatableKeys)(content) };
+        })(langConcept)
+      )
+    )(i18nConcept);
+
+    const business_concept_version = {
+      name: defaultContent.name,
+      domain_id: domainId,
+      type: template.name,
+      content: defaultContent.content,
+      i18n_content: i18nSendConcept,
+    };
+
+    conceptAction({
+      action: actionKey,
+      ...action,
+      business_concept_version,
+    });
+  };
+  return (
+    <ConceptForms
+      actionKey={actionKey}
+      domainId={domainId}
+      template={template}
+      i18nConcept={i18nConcept}
+      loading={localesLoading || conceptActionLoading}
+      langs={langs}
+      noTranslatableFields={noTranslatableKeys}
+      translatableFields={translatableKeys}
+      setI18nConcept={setI18nConcept}
+      setDomainId={setDomainId}
+      setTemplate={setTemplate}
+      onSubmit={handleSubmit}
+    />
+  );
+};
+
+ConceptCreate.propTypes = {
+  action: PropTypes.object,
+  conceptAction: PropTypes.func,
+  conceptActionLoading: PropTypes.string,
+};
+
+const mapStateToProps = ({ conceptActionLoading, conceptsActions }) => ({
+  action: _.prop(actionKey)(conceptsActions),
+  conceptActionLoading,
+});
+
+export default connect(mapStateToProps, { conceptAction })(ConceptCreate);

package/src/concepts/components/ConceptCrumbs.js

@@ -1,24 +1,34 @@
+import _ from "lodash/fp";
 import React from "react";
 import PropTypes from "prop-types";
 import { Breadcrumb } from "semantic-ui-react";
 import { useActiveRoute } from "@truedat/core/hooks";
 import { connect } from "react-redux";
 import { Link, useHistory } from "react-router-dom";
-import { FormattedMessage } from "react-intl";
+import { FormattedMessage, useIntl } from "react-intl";
 import {
   CONCEPTS_BULK_UPDATE,
   CONCEPTS,
   CONCEPTS_PENDING,
-  linkTo
+  linkTo,
 } from "@truedat/core/routes";
 
 export const ConceptCrumbs = ({
-  name,
+  name: defaultName,
   status,
   conceptAction,
   business_concept_id,
-  id
+  id,
+  i18n_content,
 }) => {
+  const { locale } = useIntl();
+
+  const i18n_lang_content = _.get(locale)(i18n_content);
+
+  const name = _.isUndefined(i18n_lang_content)
+    ? defaultName
+    : i18n_lang_content?.name;
+
   const bulkUpdateActive = useActiveRoute(CONCEPTS_BULK_UPDATE);
   const history = useHistory();
   const fromStatus = () =>
@@ -65,7 +75,7 @@ ConceptCrumbs.propTypes = {
   name: PropTypes.string,
   conceptAction: PropTypes.string,
   id: PropTypes.number,
-  status: PropTypes.string
+  status: PropTypes.string,
 };
 
 const mapStateToProps = ({ concept }) => ({ ...concept });

package/src/concepts/components/ConceptDetails.js

@@ -1,19 +1,90 @@
-import React from "react";
+import _ from "lodash/fp";
+import React, { useEffect, useState } from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
-import { Segment } from "semantic-ui-react";
+import { Button, ButtonGroup, Segment } from "semantic-ui-react";
+import { useIntl } from "react-intl";
+import { useLocales } from "@truedat/core/hooks";
+import { splitTranslatableFields } from "@truedat/core/services/i18nContent";
 
 const DynamicFormViewer = React.lazy(() =>
   import("@truedat/df/components/DynamicFormViewer")
 );
 
-export const ConceptDetails = ({
-  concept: { content, description, template },
-}) => (
-  <Segment attached="bottom">
-    <DynamicFormViewer template={template} content={content} />
-  </Segment>
-);
+export const ConceptDetails = ({ concept }) => {
+  const { locale } = useIntl();
+  const { locales } = useLocales(false);
+  const [selectedLang, setSelectedLang] = useState(locale);
+
+  useEffect(() => {
+    setSelectedLang(locale);
+  }, [locale]);
+
+  const content = _.getOr({}, "content")(concept);
+
+  const { noTranslatable: noTranslatableFields } = splitTranslatableFields(
+    concept.template
+  );
+  const noTranslatableContent = _.pick(_.keys(noTranslatableFields))(
+    concept.content
+  );
+
+  const i18nContent = concept.i18n_content || {};
+
+  const i18nConcept = _.flow(
+    _.filter(({ is_enabled, is_required }) => is_enabled && is_required),
+    _.map(({ id, lang, is_default, is_required, local_name }) => {
+      const contentLang = _.get(lang)(i18nContent);
+      const langContent = is_default
+        ? content
+        : _.isEmpty(contentLang?.content)
+        ? {}
+        : { ...noTranslatableContent, ...contentLang?.content };
+      const langName = is_default ? concept.name : contentLang?.name || "";
+
+      return {
+        id,
+        lang,
+        isDefault: is_default,
+        isRequired: is_required,
+        name: langName,
+        langLocalName: local_name,
+        content: langContent,
+      };
+    }),
+    _.orderBy(["isDefault", "isRequired", "lang"], ["desc", "desc", "asc"]),
+    _.keyBy("lang")
+  )(locales);
+
+  return (
+    <Segment attached="bottom">
+      {_.size(i18nConcept > 1) ? (
+        <ButtonGroup floated="right">
+          {_.flow(
+            _.filter(
+              ({ lang, is_default }) => i18nConcept[lang]?.content || is_default
+            ),
+            _.map(({ lang, content }) => {
+              return !_.isEmpty(content) ? (
+                <Button
+                  key={lang}
+                  content={lang}
+                  size="mini"
+                  onClick={() => setSelectedLang(lang)}
+                  active={selectedLang == lang}
+                />
+              ) : null;
+            })
+          )(i18nConcept)}
+        </ButtonGroup>
+      ) : null}
+      <DynamicFormViewer
+        template={concept.template}
+        content={i18nConcept[selectedLang]?.content}
+      />
+    </Segment>
+  );
+};
 
 ConceptDetails.propTypes = {
   concept: PropTypes.object,