@truedat/core 5.20.0 → 5.20.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/core",
-  "version": "5.20.0",
+  "version": "5.20.1",
   "description": "Truedat Web Core",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -117,5 +117,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 2.0.3 < 2.2"
   },
-  "gitHead": "3981bdf2fff50f0d8c79643c6f423dfdc7f5a57f"
+  "gitHead": "a7197e02a1b1a88c375fe044dee65c7e96ccd618"
 }

package/src/api.js

@@ -1,6 +1,8 @@
 export const API_COMMENTS = "/api/business_concepts/comments";
+export const API_LOCALE = "/api/locales/:id";
 export const API_LOCALE_MESSAGES = "/api/locales/:lang/messages";
 export const API_LOCALES = "/api/locales";
+export const API_ALL_LOCALES = "/api/locales/all_locales";
 export const API_MESSAGE = "/api/messages/:id";
 export const API_MESSAGES = "/api/messages";
 export const API_REINDEX_GRANTS = "/api/grants/search/reindex_all";

package/src/hooks/useAllLocales.js

@@ -0,0 +1,9 @@
+import useSWR from "swr";
+import { API_ALL_LOCALES } from "../api";
+import { apiJson } from "../services/api";
+
+export const useAllLocales = () => {
+  const { data, loading, error, mutate } = useSWR(API_ALL_LOCALES, apiJson);
+  const all_locales = data?.data?.data;
+  return { all_locales, error, loading, mutate };
+};

package/src/hooks/useLocales.js

@@ -1,9 +1,44 @@
+import { compile } from "path-to-regexp";
 import useSWR from "swr";
-import { API_LOCALES } from "../api";
-import { apiJson } from "../services/api";
+import useSWRMutations from "swr/mutation";
+import { API_LOCALES, API_LOCALE } from "../api";
+import {
+  apiJson,
+  apiJsonDelete,
+  apiJsonPatch,
+  apiJsonPost,
+} from "../services/api";
+import _ from "lodash/fp";
 
 export const useLocales = () => {
   const { data, error, mutate } = useSWR(API_LOCALES, apiJson);
   const locales = data?.data?.data;
   return { locales, error, loading: !error && !data, mutate };
 };
+
+export const useLocalesUpdate = (id) => {
+  const toApiPath = compile(API_LOCALE);
+  const url = toApiPath({ id });
+  return useSWRMutations(url, (url, { arg }) => {
+    const { mutateData } = arg;
+    const payload = { id: arg.id, locale: arg };
+    apiJsonPatch(url, payload).then(() => mutateData());
+  });
+};
+
+export const useLocalesCreate = () => {
+  const url = API_LOCALES;
+
+  return useSWRMutations(url, (url, { arg }) => {
+    apiJsonPost(url, arg);
+  });
+};
+
+export const useLocalesDelete = (id) => {
+  const toApiPath = compile(API_LOCALE);
+  const url = toApiPath({ id });
+  return useSWRMutations(url, (url, { arg }) => {
+    const payload = { id: arg.id };
+    apiJsonDelete(url, payload);
+  });
+};

package/src/hooks/useMessages.js

@@ -1,6 +1,5 @@
 import { compile } from "path-to-regexp";
-import { mutate } from "swr";
-import useSWR from "swr";
+import useSWR, { mutate } from "swr";
 import useSWRMutations from "swr/mutation";
 import {
   API_LOCALE_MESSAGES,

package/src/i18n/components/Languages.js

@@ -0,0 +1,205 @@
+import React, { useEffect, useState } from "react";
+import PropTypes from "prop-types";
+import { useIntl, FormattedMessage } from "react-intl";
+import _ from "lodash/fp";
+import {
+  Button,
+  Dropdown,
+  Form,
+  Icon,
+  Input,
+  Table,
+  TableBody,
+  TableCell,
+  TableHeader,
+  TableRow,
+} from "semantic-ui-react";
+import { ConfirmModal } from "@truedat/core/components";
+import { useAllLocales } from "../../hooks/useAllLocales";
+import {
+  useLocalesCreate,
+  useLocalesDelete,
+  useLocalesUpdate,
+} from "../../hooks/useLocales";
+
+const LanguajeRow = ({ code, local, name, config, mutate }) => {
+  const { formatMessage } = useIntl();
+  const { trigger } = useLocalesUpdate(config.id);
+  const { trigger: triggerDelete } = useLocalesDelete(config.id);
+
+  const handleChange = (data) => {
+    const { name, checked } = data;
+    const newConfig = {
+      ...config,
+      [name]: !checked,
+    };
+    trigger({ ...newConfig, mutateData: mutate });
+  };
+
+  const handleDelete = () => {
+    triggerDelete(config).then(() => {
+      mutate();
+    });
+  };
+
+  return (
+    <TableRow>
+      <TableCell>
+        {_.upperCase(code)} | {local} ( {name} )
+      </TableCell>
+      <TableCell textAlign="center">
+        <Input
+          type="checkbox"
+          name="is_required"
+          checked={config.is_required}
+          disabled={config.is_default}
+          onChange={(_e, data) => handleChange(data)}
+        />
+      </TableCell>
+      <TableCell textAlign="center">
+        <Input
+          id={`radio-${code}`}
+          type="radio"
+          name="is_default"
+          checked={config.is_default}
+          onChange={(_e, data) => handleChange(data)}
+        />
+      </TableCell>
+      <TableCell>
+        <ConfirmModal
+          icon="trash"
+          trigger={
+            <Icon
+              className="lang-manager-delete"
+              name="trash alternate outline"
+              color="red"
+              disabled={config.is_default || ["es", "en"].includes(code)}
+            />
+          }
+          header={formatMessage({
+            id: "i18n.messages.locale.delete.confirmation.header",
+          })}
+          content={formatMessage({
+            id: "i18n.messages.locale.delete.confirmation.content",
+          })}
+          onConfirm={() => handleDelete()}
+        />
+      </TableCell>
+    </TableRow>
+  );
+};
+
+LanguajeRow.propTypes = {
+  code: PropTypes.string,
+  local: PropTypes.string,
+  name: PropTypes.string,
+  config: PropTypes.object,
+  mutate: PropTypes.func,
+};
+
+const Languages = ({ config, langs, mutate }) => {
+  const { formatMessage } = useIntl();
+  const { all_locales, loading, error } = useAllLocales();
+  const [newLocales, setNewLocales] = useState([]);
+  const { trigger } = useLocalesCreate();
+
+  const options = _.flow(
+    _.filter(({ code }) => {
+      return !langs.includes(code);
+    }),
+    _.map(({ code, name, local }) => {
+      return { text: `${local} (${name} | ${code})`, value: code };
+    })
+  )(all_locales);
+
+  const handleOnChange = ({ value }) => {
+    setNewLocales(value);
+  };
+
+  const handleSubmit = () => {
+    setNewLocales([]);
+    trigger({ locales: newLocales }).then(() => {
+      mutate();
+    });
+  };
+
+  return (
+    <>
+      <Form
+        onSubmit={() => {
+          handleSubmit();
+        }}
+      >
+        <Dropdown
+          className="lang-manager-dropdown"
+          placeholder={formatMessage({
+            id: "i18n.messages.locale.lang_select",
+            defaultMessage: "Select languaje",
+          })}
+          name="add-locales"
+          multiple={true}
+          search={true}
+          selection={true}
+          options={options}
+          clearable={true}
+          value={newLocales}
+          onChange={(_e, data) => {
+            handleOnChange(data);
+          }}
+        />
+        <Button
+          type="submit"
+          className="lang-manager-button"
+          disabled={_.isEmpty(newLocales)}
+        >
+          {formatMessage({
+            id: "i18n.messages.locale.add_lang",
+          })}
+        </Button>
+      </Form>
+      <Table collapsing striped>
+        <TableHeader>
+          <TableRow>
+            <TableCell></TableCell>
+            <TableCell textAlign="center">
+              {formatMessage({
+                id: "i18n.messages.locale.required",
+              })}
+            </TableCell>
+            <TableCell textAlign="center">
+              {formatMessage({
+                id: "i18n.messages.locale.default",
+              })}
+            </TableCell>
+            <TableCell></TableCell>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {_.flow(
+            _.filter((locale) => _.includes(locale.code)(langs)),
+            _.map(({ code, local, name }) => {
+              return (
+                <LanguajeRow
+                  key={code}
+                  code={code}
+                  local={local}
+                  name={name}
+                  config={config[code]}
+                  mutate={mutate}
+                />
+              );
+            })
+          )(all_locales)}
+        </TableBody>
+      </Table>
+    </>
+  );
+};
+
+Languages.propTypes = {
+  config: PropTypes.array,
+  langs: PropTypes.object,
+  mutate: PropTypes.func,
+};
+
+export default Languages;

package/src/i18n/components/MessageForm.js

@@ -104,15 +104,17 @@ export const MessageForm = ({ onSubmit, isSubmitting }) => {
         )}
       />
 
-      {locales.map((lang, i) => (
-        <LangForm
-          key={i}
-          control={control}
-          lang={lang}
-          errors={errors}
-          formatMessage={formatMessage}
-        />
-      ))}
+      {locales
+        .filter(({ lang }) => lang === "en" || lang === "es")
+        .map((lang, i) => (
+          <LangForm
+            key={i}
+            control={control}
+            lang={lang}
+            errors={errors}
+            formatMessage={formatMessage}
+          />
+        ))}
 
       <div className="actions">
         <Button

package/src/i18n/components/Messages.js

@@ -18,12 +18,20 @@ import { useLocales } from "@truedat/core/hooks";
 import { I18N_MESSAGES_NEW } from "@truedat/core/routes";
 import { Pagination } from "@truedat/core/components";
 import MessagesTable from "./MessagesTable";
+import Languages from "./Languages";
 
 const ITEMS_PER_PAGE = 30;
 
-export function MessagesContent({ locales, loading }) {
+export function MessagesContent({ locales, loading, mutate }) {
   const langs = _.map("lang")(locales);
+
+  const langsConfig = _.flow(
+    _.map((locale) => _.omit("messages")(locale)),
+    _.groupBy("lang"),
+    _.mapValues(_.first)
+  )(locales);
   const [selectedLang, setSelectedLang] = useState(_.head(langs));
+  const [selectedManageView, setSelectedManageView] = useState(false);
   const [page, setPage] = useState(1);
   const [filter, setFilter] = useState("");
   const { formatMessage } = useIntl();
@@ -56,39 +64,59 @@ export function MessagesContent({ locales, loading }) {
   return (
     <>
       <Menu attached="top" secondary pointing tabular>
-        {langs.map((lang, i) => (
-          <Menu.Item
-            key={i}
-            active={lang === selectedLang}
-            onClick={() => setSelectedLang(lang)}
-          >
-            <FormattedMessage id={`i18n.messages.locale.${lang}`} />
-          </Menu.Item>
-        ))}
+        <Menu.Item
+          key={0}
+          active={selectedManageView}
+          onClick={() => setSelectedManageView(true)}
+        >
+          <FormattedMessage id="i18n.messages.locale.manage" />
+        </Menu.Item>
+        {langs
+          .filter((lang) => lang === "en" || lang === "es")
+          .map((lang, i) => (
+            <Menu.Item
+              key={i}
+              active={lang === selectedLang && !selectedManageView}
+              onClick={() => {
+                setSelectedLang(lang);
+                setSelectedManageView(false);
+              }}
+            >
+              <FormattedMessage id={`i18n.messages.locale.${lang}`} />
+            </Menu.Item>
+          ))}
       </Menu>
       <Divider hidden />
-      <SearchInput
-        onChange={handleSearch}
-        placeholder={formatMessage({ id: "i18n.messages.search.placeholder" })}
-        value={filter}
-      />
-      <MessagesTable
-        messages={paginatedMessages}
-        locales={locales}
-        loading={loading}
-      />
-      <Pagination
-        totalPages={totalPages}
-        activePage={page}
-        selectPage={({ activePage }) => setPage(activePage)}
-      />
+      {!selectedManageView ? (
+        <>
+          <SearchInput
+            onChange={handleSearch}
+            placeholder={formatMessage({
+              id: "i18n.messages.search.placeholder",
+            })}
+            value={filter}
+          />
+          <MessagesTable
+            messages={paginatedMessages}
+            locales={locales}
+            loading={loading}
+          />
+          <Pagination
+            totalPages={totalPages}
+            activePage={page}
+            selectPage={({ activePage }) => setPage(activePage)}
+          />
+        </>
+      ) : (
+        <Languages langs={langs} config={langsConfig} mutate={mutate} />
+      )}
     </>
   );
 }
 
 export default function Messages() {
   const { formatMessage } = useIntl();
-  const { locales, loading } = useLocales();
+  const { locales, loading, mutate } = useLocales();
 
   return (
     <Segment>
@@ -116,7 +144,11 @@ export default function Messages() {
           to={I18N_MESSAGES_NEW}
         />
         {!loading ? (
-          <MessagesContent locales={locales} loading={loading} />
+          <MessagesContent
+            locales={locales}
+            loading={loading}
+            mutate={mutate}
+          />
         ) : null}
       </Segment>
     </Segment>

package/src/i18n/components/__tests__/Messages.spec.js

@@ -1,9 +1,11 @@
 import React from "react";
 import { render } from "@truedat/test/render";
-import messages from "@truedat/core/messages";
+import en from "@truedat/core/messages/en";
 import Messages from "../Messages";
 
-const renderOpts = { messages };
+const renderOpts = {
+  messages: { en: { ...en, "i18n.messages.locale.manage": "manage" } },
+};
 
 jest.mock("@truedat/core/hooks", () => ({
   useLocales: jest.fn(() => ({

package/src/i18n/components/__tests__/__snapshots__/Messages.spec.js.snap

@@ -55,6 +55,11 @@ exports[`<Messages /> matches the latest snapshot 1`] = `
       <div
         class="ui pointing secondary top attached tabular menu"
       >
+        <a
+          class="item"
+        >
+          manage
+        </a>
         <a
           class="active item"
         >