@truedat/core 5.20.0 → 5.20.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/core",
-  "version": "5.20.0",
+  "version": "5.20.2",
   "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": "4f02a44805ab1746f026b3fb53e8a3b31ec86765"
 }

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/components/__tests__/SelectedFilters.spec.js

@@ -38,6 +38,8 @@ describe("<SelectedFilters/>", () => {
   const messages = {
     "search.clear_filters": "clean filters",
     "search.save_filters": "save filters",
+    "search.applied_filters": "applied filters",
+    "filter.empty": "empty",
   };
 
   const renderOptions = {

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,51 @@
+import _ from "lodash/fp";
+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";
+
+const toApiLocalesPath = compile(API_LOCALES);
+
+export const useLocales = (includeMessages = true) => {
+  const url = toApiLocalesPath() + "?includeMessages=" + includeMessages;
+  const { data, error, mutate, isValidating } = useSWR(url, apiJson);
 
-export const useLocales = () => {
-  const { data, error, mutate } = useSWR(API_LOCALES, apiJson);
   const locales = data?.data?.data;
-  return { locales, error, loading: !error && !data, mutate };
+  return { locales, error, loading: !error && !data, mutate, isValidating };
+};
+
+export const useLocalesUpdate = (id) => {
+  const toApiPath = compile(API_LOCALE);
+  const url = toApiPath({ id });
+  return useSWRMutations(url, (url, { arg }) => {
+    const { mutateData, handleDimmer } = arg;
+    const payload = { id: arg.id, locale: arg };
+    apiJsonPatch(url, payload).then(() => {
+      mutateData();
+      handleDimmer(false);
+    });
+  });
+};
+
+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,231 @@
+import _ from "lodash/fp";
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import { useIntl } from "react-intl";
+import {
+  Button,
+  Dimmer,
+  Dropdown,
+  Form,
+  Icon,
+  Input,
+  Loader,
+  Table,
+  TableBody,
+  TableCell,
+  TableHeader,
+  TableRow,
+} from "semantic-ui-react";
+import { ConfirmModal } from "@truedat/core/components";
+import { useAllLocales } from "../../hooks/useAllLocales";
+import {
+  useLocalesCreate,
+  useLocalesDelete,
+  useLocalesUpdate,
+  useLocales,
+} from "../../hooks/useLocales";
+
+const LanguajeRow = ({ code, local, name, config, mutate, handleDimmer }) => {
+  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,
+    };
+    handleDimmer(true);
+    trigger({ ...newConfig, mutateData: mutate, handleDimmer: handleDimmer });
+  };
+
+  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,
+  handleDimmer: PropTypes.func,
+};
+
+const Languages = () => {
+  const includeMessages = false;
+  const {
+    locales,
+    loading: loadingUseLocales,
+    mutate,
+    isValidating,
+  } = useLocales(includeMessages);
+  const langs = _.map("lang")(locales);
+
+  const { formatMessage } = useIntl();
+  const { all_locales, loading, error } = useAllLocales();
+  const [newLocales, setNewLocales] = useState([]);
+  const { trigger } = useLocalesCreate();
+  const [dimmerState, setDimmerState] = useState(false);
+
+  const handleDimmer = (isMutating) => {
+    setDimmerState(isMutating);
+  };
+
+  const langsConfig = _.flow(
+    _.map((locale) => _.omit("messages")(locale)),
+    _.groupBy("lang"),
+    _.mapValues(_.first)
+  )(locales);
+
+  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>
+
+      <Dimmer.Dimmable dimmed={isValidating || dimmerState}>
+        <Dimmer active={isValidating || dimmerState} inverted>
+          <Loader />
+        </Dimmer>
+        <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={langsConfig[code]}
+                    mutate={mutate}
+                    handleDimmer={handleDimmer}
+                  />
+                );
+              })
+            )(all_locales)}
+          </TableBody>
+        </Table>
+      </Dimmer.Dimmable>
+    </>
+  );
+};
+
+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

@@ -1,5 +1,6 @@
 import _ from "lodash/fp";
 import React, { useState } from "react";
+import PropTypes from "prop-types";
 import { useIntl, FormattedMessage } from "react-intl";
 import {
   Button,
@@ -18,12 +19,18 @@ 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 }) {
   const langs = _.map("lang")(locales);
-  const [selectedLang, setSelectedLang] = useState(_.head(langs));
+
+  const [selectedLang, setSelectedLang] = useState(
+    _.head(_.filter((lang) => lang === "en" || lang === "es")(langs))
+  );
+
+  const [selectedManageView, setSelectedManageView] = useState(false);
   const [page, setPage] = useState(1);
   const [filter, setFilter] = useState("");
   const { formatMessage } = useIntl();
@@ -56,38 +63,64 @@ 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 />
+      )}
     </>
   );
 }
 
+MessagesContent.propTypes = {
+  locales: PropTypes.array,
+  loading: PropTypes.bool,
+};
+
 export default function Messages() {
   const { formatMessage } = useIntl();
+
   const { locales, loading } = useLocales();
 
   return (

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

@@ -1,5 +1,4 @@
 import React from "react";
-import userEvent from "@testing-library/user-event";
 import { render } from "@truedat/test/render";
 import messages from "@truedat/core/messages";
 import MessageForm from "../MessageForm";

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"
         >