@truedat/df 5.0.1 → 5.0.2

package/src/components/hierarchies/HierarchyView.js

@@ -0,0 +1,261 @@
+import _ from "lodash/fp";
+import React, { useState, useEffect } from "react";
+import PropTypes from "prop-types";
+import { Button, Header, Icon, Segment, Label } from "semantic-ui-react";
+import { useIntl } from "react-intl";
+import { Link } from "react-router-dom";
+import { linkTo } from "@truedat/core/routes";
+import { CSVFileModal } from "@truedat/core/components";
+import { HistoryBackButton } from "@truedat/core/components";
+import { ConfirmModal } from "@truedat/core/components";
+import HierarchyCrumbs from "./HierarchyCrumbs";
+import Hierarchy from "./Hierarchy";
+
+const getLastId = _.flow(
+  _.pathOr([], "nodes"),
+  _.map("id"),
+  _.concat(0),
+  _.max
+);
+
+const validateHierarchy = (hierarchy) => {
+  const validatedHierarchy = {
+    ...hierarchy,
+    nodes: _.flow(
+      _.pathOr([], "nodes"),
+      _.map((node) => {
+        const hasError =
+          _.isEmpty(node.name) ||
+          node.name === "" ||
+          hasDuplicatedSiblings(node, hierarchy);
+        return {
+          ...node,
+          error: hasError,
+        };
+      })
+    )(hierarchy),
+  };
+
+  const valid =
+    hierarchy.name !== "" &&
+    _.flow(
+      _.pathOr([], "nodes"),
+      _.filter({ error: true }),
+      _.isEmpty
+    )(validatedHierarchy);
+  return [valid, validatedHierarchy];
+};
+
+const hasDuplicatedSiblings = ({ parentId, name }, { nodes }) => {
+  return _.size(_.filter({ parentId, name })(nodes)) > 1;
+};
+
+export const HierarchyView = ({
+  isEditionMode = false,
+  originalHierarchy,
+  onSubmit,
+  onDelete,
+}) => {
+  const { formatMessage } = useIntl();
+  const [hierarchy, setHierarchy] = useState(originalHierarchy);
+  const [maxId, setMaxId] = useState(getLastId(originalHierarchy));
+  const [deletedNodes, setDeletedNodes] = useState(0);
+  const [isValid, setIsValid] = useState();
+  useEffect(() => {
+    setIsValid(validateHierarchy(originalHierarchy)[0]);
+  }, [originalHierarchy]);
+
+  const validateAndSetHierarchy = (hierarchy) => {
+    const [isValid, validatedHierarchy] = validateHierarchy(hierarchy);
+    setIsValid(isValid);
+    setHierarchy(validatedHierarchy);
+  };
+
+  const addedNodes = _.flow(
+    _.pathOr([], "nodes"),
+    _.filter({ editionStatus: "added" }),
+    _.size
+  )(hierarchy);
+
+  const modifiedNodes = _.flow(
+    _.pathOr([], "nodes"),
+    _.filter({ editionStatus: "dirty" }),
+    _.size
+  )(hierarchy);
+
+  const updateMetadata = ({ name, description }) =>
+    validateAndSetHierarchy({
+      ...hierarchy,
+      name: name,
+      description: description,
+    });
+
+  const updateNode = (id, { name, description }) => {
+    validateAndSetHierarchy({
+      ...hierarchy,
+      nodes: _.map((node) =>
+        node.id == id
+          ? {
+              ...node,
+              name: name,
+              description: description,
+              error: false,
+              editionStatus: _.flow(_.find({ id }), (originalNode) =>
+                originalNode !== undefined &&
+                (originalNode?.name != name ||
+                  originalNode?.description != description)
+                  ? "dirty"
+                  : node.editionStatus == "dirty"
+                  ? null
+                  : node.editionStatus
+              )(originalHierarchy.nodes),
+            }
+          : node
+      )(hierarchy.nodes),
+    });
+  };
+
+  const addNode = (parentId = null, name) => {
+    const id = maxId + 1;
+    validateAndSetHierarchy({
+      ...hierarchy,
+      nodes: [
+        ...hierarchy.nodes,
+        { id, parentId, name, editionStatus: "added", description: null },
+      ],
+    });
+    setMaxId(id);
+  };
+
+  const removeNode = (id) => {
+    _.flow(
+      _.pathOr([], "nodes"),
+      _.find({ id: id }),
+      _.isEmpty
+    )(originalHierarchy)
+      ? null
+      : setDeletedNodes(deletedNodes + 1);
+    validateAndSetHierarchy({
+      ...hierarchy,
+      nodes: _.reject({ id })(hierarchy.nodes),
+    });
+  };
+
+  return (
+    <>
+      <HierarchyCrumbs name={hierarchy.name} />
+      <Segment>
+        <Header as="h2">
+          <div className="actions_wrapper">
+            <div className="actions">
+              {isEditionMode ? (
+                <>
+                  <Button
+                    floated="right"
+                    onClick={() => onSubmit(hierarchy)}
+                    primary
+                    loading={false}
+                    disabled={!isValid}
+                    content={formatMessage({ id: "actions.save" })}
+                    title={formatMessage(
+                      {
+                        id: "hierarchies.modifications.summary",
+                      },
+                      {
+                        added: addedNodes,
+                        modified: modifiedNodes,
+                        deleted: deletedNodes,
+                      }
+                    )}
+                  />
+
+                  <HistoryBackButton
+                    floated="right"
+                    content={formatMessage({ id: "actions.cancel" })}
+                  />
+
+                  <CSVFileModal
+                    param="hierarchy"
+                    onSubmit={(nodes) => {
+                      const csvHierarchy = {
+                        ...hierarchy,
+                        nodes: _.map((node) => {
+                          const id = parseInt(node.id);
+                          const parentId = parseInt(node.parentId);
+                          return {
+                            ...node,
+                            id: _.isNaN(id) ? null : id,
+                            parentId: _.isNaN(parentId) ? null : parentId,
+                          };
+                        })(nodes),
+                      };
+                      validateAndSetHierarchy(csvHierarchy);
+                      setMaxId(getLastId(hierarchy));
+                    }}
+                  />
+                </>
+              ) : (
+                <>
+                  <Button
+                    floated="right"
+                    primary
+                    as={Link}
+                    to={linkTo.HIERARCHY_EDIT({ hierarchyId: hierarchy.id })}
+                    content={formatMessage({ id: "actions.edit" })}
+                  />
+
+                  <ConfirmModal
+                    icon="trash"
+                    trigger={
+                      <Button
+                        floated="right"
+                        secondary
+                        loading={false}
+                        disabled={false}
+                        content={formatMessage({ id: "actions.delete" })}
+                      />
+                    }
+                    header={formatMessage({
+                      id: "hierarchy.actions.delete.confirmation.header",
+                    })}
+                    size="small"
+                    content={formatMessage({
+                      id: "hierarchy.actions.delete.confirmation.content",
+                    })}
+                    onConfirm={() => onDelete(hierarchy.id)}
+                  />
+                </>
+              )}
+            </div>
+          </div>
+          <Icon circular name="tree" />
+          <Header.Content>
+            {hierarchy.name
+              ? hierarchy.name
+              : formatMessage({ id: "hierarchy.name" })}
+            <Header.Subheader>{hierarchy.description}</Header.Subheader>
+          </Header.Content>
+        </Header>
+        <Segment attached="bottom">
+          <Hierarchy
+            hierarchy={hierarchy}
+            updateMetadata={updateMetadata}
+            updateNode={updateNode}
+            addNode={addNode}
+            removeNode={removeNode}
+            isEditionMode={isEditionMode}
+          />
+        </Segment>
+      </Segment>
+    </>
+  );
+};
+
+HierarchyView.propTypes = {
+  isEditionMode: PropTypes.bool,
+  originalHierarchy: PropTypes.object,
+  onDelete: PropTypes.func,
+  onSubmit: PropTypes.func,
+};
+
+export default HierarchyView;

package/src/components/hierarchies/__tests__/Hierarchies.spec.js

@@ -0,0 +1,34 @@
+import React from "react";
+import { render } from "@truedat/test/render";
+import Hierarchies from "../Hierarchies";
+import en from "../../../messages/en";
+
+const renderOpts = { messages: { en: en } };
+
+const data = [
+  {
+    id: 1,
+    name: "Baggins",
+    nodes: [
+      {
+        id: 11,
+        name: "Fosco",
+        parentId: null,
+      },
+    ],
+  },
+];
+
+jest.mock("../../../hooks/useHierarchies", () => ({
+  useHierarchies: jest.fn(() => ({
+    loading: false,
+    data: data,
+  })),
+}));
+
+describe("<Hierarchies />", () => {
+  it("matches the last snapshot", () => {
+    const { container } = render(<Hierarchies />, renderOpts);
+    expect(container).toMatchSnapshot();
+  });
+});

package/src/components/hierarchies/__tests__/HierarchiesView.spec.js

@@ -0,0 +1,34 @@
+import React from "react";
+import { render } from "@truedat/test/render";
+import HierarchiesView from "../HierarchiesView";
+import en from "../../../messages/en";
+
+const renderOpts = { messages: { en: en } };
+
+const data = [
+  {
+    id: 1,
+    name: "Baggins",
+    nodes: [
+      {
+        id: 11,
+        name: "Fosco",
+        parentId: null,
+      },
+    ],
+  },
+];
+
+jest.mock("../../../hooks/useHierarchies", () => ({
+  useHierarchies: jest.fn(() => ({
+    loading: false,
+    data: data,
+  })),
+}));
+
+describe("<HierarchiesView />", () => {
+  it("matche the last snapshot", () => {
+    const { container } = render(<HierarchiesView />, renderOpts);
+    expect(container).toMatchSnapshot();
+  });
+});

package/src/components/hierarchies/__tests__/Hierarchy.spec.js

@@ -0,0 +1,42 @@
+import React from "react";
+import { render } from "@truedat/test/render";
+import Hierarchy from "../Hierarchy";
+import en from "../../../messages/en";
+
+const hierarchy = {
+  id: 1,
+  name: "Baggins",
+  description: "bar",
+  nodes: [
+    {
+      id: 11,
+      name: "Fosco",
+      parentId: null,
+    },
+    {
+      id: 12,
+      name: "Fosco children",
+      parentId: 11,
+    },
+  ],
+};
+const props = { hierarchy: hierarchy, isEditionMode: false };
+
+const renderOpts = {
+  messages: { en: en },
+};
+
+describe("<Hierarchy />", () => {
+  it("matches the last snapshot with edition mode false", () => {
+    const { container } = render(<Hierarchy {...props} />, renderOpts);
+    expect(container).toMatchSnapshot();
+  });
+
+  it("matches snapshot with edition mode", () => {
+    const { container } = render(
+      <Hierarchy {...{ ...props, isEditionMode: true }} />,
+      renderOpts
+    );
+    expect(container).toMatchSnapshot();
+  });
+});

package/src/components/hierarchies/__tests__/HierarchyCrumbs.spec.js

@@ -0,0 +1,11 @@
+import React from "react";
+import { render } from "@truedat/test/render";
+import HierarchyCrumbs from "../HierarchyCrumbs";
+
+describe("<HierarchyCrumbs />", () => {
+  it("matches the latest snapshot", () => {
+    const props = { name: "foo" };
+    const container = render(<HierarchyCrumbs {...props} />);
+    expect(container).toMatchSnapshot();
+  });
+});

package/src/components/hierarchies/__tests__/HierarchyView.spec.js

@@ -0,0 +1,36 @@
+import React from "react";
+import { render } from "@truedat/test/render";
+import HierarchyView from "../HierarchyView";
+import en from "../../../messages/en";
+
+const renderOpts = {
+  messages: {
+    en: { ...en, "actions.edit": "Edit", "actions.delete": "Delete" },
+  },
+};
+
+const originalHierarchy = {
+  id: 1,
+  name: "Baggins",
+  nodes: [
+    {
+      id: 11,
+      name: "Fosco",
+      parentId: null,
+    },
+  ],
+};
+
+const opts = {
+  isEditionMode: false,
+  originalHierarchy,
+  loading: false,
+  onSubmit: jest.fn(),
+};
+
+describe("<HierarchyView />", () => {
+  it("matches the last snapshot", () => {
+    const { container } = render(<HierarchyView {...opts} />, renderOpts);
+    expect(container).toMatchSnapshot();
+  });
+});

package/src/components/hierarchies/__tests__/__snapshots__/Hierarchies.spec.js.snap

@@ -0,0 +1,48 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Hierarchies /> matches the last snapshot 1`] = `
+<div>
+  <table
+    class="ui celled table"
+  >
+    <thead
+      class=""
+    >
+      <tr
+        class=""
+      >
+        <th
+          class=""
+        >
+          Hierarchy name
+        </th>
+        <th
+          class=""
+        >
+          Description
+        </th>
+      </tr>
+    </thead>
+    <tbody
+      class=""
+    >
+      <tr
+        class=""
+      >
+        <td
+          class=""
+        >
+          <a
+            href="/hierarchies/1"
+          >
+            Baggins
+          </a>
+        </td>
+        <td
+          class=""
+        />
+      </tr>
+    </tbody>
+  </table>
+</div>
+`;

package/src/components/hierarchies/__tests__/__snapshots__/HierarchiesView.spec.js.snap

@@ -0,0 +1,81 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<HierarchiesView /> matche the last snapshot 1`] = `
+<div>
+  <div
+    class="ui segment"
+  >
+    <h2
+      class="ui header"
+    >
+      <a
+        class="ui primary right floated button"
+        href="/hierarchies/new"
+        role="button"
+      >
+        New hierarchy
+      </a>
+      <i
+        aria-hidden="true"
+        class="tree circular icon"
+      />
+      <div
+        class="content"
+      >
+        Hierarchies
+        <div
+          class="sub header"
+        >
+          List of hierarchies
+        </div>
+      </div>
+    </h2>
+    <div
+      class="ui bottom attached segment"
+    >
+      <table
+        class="ui celled table"
+      >
+        <thead
+          class=""
+        >
+          <tr
+            class=""
+          >
+            <th
+              class=""
+            >
+              Hierarchy name
+            </th>
+            <th
+              class=""
+            >
+              Description
+            </th>
+          </tr>
+        </thead>
+        <tbody
+          class=""
+        >
+          <tr
+            class=""
+          >
+            <td
+              class=""
+            >
+              <a
+                href="/hierarchies/1"
+              >
+                Baggins
+              </a>
+            </td>
+            <td
+              class=""
+            />
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</div>
+`;