@truedat/core 4.46.4 → 4.46.7

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Changelog
 
+## [4.46.6] 2022-06-20
+
+### Added
+
+- [TD-4858] Added CardGroupsAccordion component to aggrupate cards in different
+  groups
+
+## [4.46.5] 2022-06-17
+
+### Added
+
+- [TD-4894] Multiple column operator in implementation creation
+
 ## [4.46.4] 2022-06-16
 
 ### Changed

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/core",
-  "version": "4.46.4",
+  "version": "4.46.7",
   "description": "Truedat Web Core",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -35,7 +35,7 @@
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^12.0.0",
     "@testing-library/user-event": "^13.2.1",
-    "@truedat/test": "4.46.4",
+    "@truedat/test": "4.46.7",
     "babel-jest": "^28.1.0",
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "babel-plugin-lodash": "^3.3.4",
@@ -112,5 +112,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 0.88.2 < 2.1"
   },
-  "gitHead": "dcd0aa42ffe1fb816945154ec2a2d06889dca7e7"
+  "gitHead": "2b1c3f0fcf94a7b510f171c06cfb2e1550a14166"
 }

package/src/components/CardGroupsAccordion.js

@@ -0,0 +1,145 @@
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import _ from "lodash/fp";
+import { useIntl } from "react-intl";
+
+import { Accordion, Icon, Header, Card } from "semantic-ui-react";
+
+import "../styles/CardGroupsAccordion.less";
+
+/**
+ * Component to split Card.Groups into different folding sections
+ *
+ * If an element doesn't have a df_content.system_group, it must be appear
+ * under the "default" key.
+ *
+ * The objects that are inside the list of each group must contain the keys
+ * that will be passed as properties to cardComponent
+ *
+ * @component
+ * @example
+ *
+ * import { Card } from "semantic-ui-react";
+ *
+ *
+ * const groups = {
+ *   foo: [
+ *     {
+ *       title: "hello foo",
+ *       meta: "world foo",
+ *       description: "Test description foo 1",
+ *     },
+ *     {
+ *       title: "hello foo 2",
+ *       meta: "world foo 2",
+ *       description: "Test description foo 2",
+ *     },
+ *   ],
+ *   bar: [
+ *     {
+ *       title: "hello bar",
+ *       meta: "world bar",
+ *       description: "Test description bar 1",
+ *     },
+ *     {
+ *       title: "hello bar 2",
+ *       meta: "world bar 2",
+ *       description: "Test description bar 2",
+ *     },
+ *   ],
+ * }
+ *
+ * const CustomCard = (props) => (
+ *   <Card>
+ *     <Card.Content>
+ *       <Card.Header>{props.title}</Card.Header>
+ *       <Card.Meta>
+ *         <span>{props.meta}</span>
+ *       </Card.Meta>
+ *       <Card.Description>{props.description}</Card.Description>
+ *     </Card.Content>
+ *   </Card>
+ * );
+ *
+ * return (
+ *   <CardGroupsAccordion groups={groups} cardComponent={CustomCard} />
+ * )
+ */
+const CardGroupsAccordion = ({ groups, cardComponent: CardComponent }) => {
+  const { formatMessage } = useIntl();
+
+  // State and lifecycle methods
+
+  const [cardGroups, setCardGroups] = _.flow(
+    _.toPairs,
+    _.reduce(
+      (acc, [groupName, members]) => ({
+        ...acc,
+        [groupName]: { members, active: true },
+      }),
+      {}
+    ),
+    useState
+  )(groups);
+
+  // Handlers
+
+  const handleClick = (e, { index: groupName }) =>
+    _.flow(
+      _.set(`${groupName}.active`, !cardGroups[groupName].active),
+      setCardGroups
+    )(cardGroups);
+
+  // Renders
+
+  const renderSection = (groupName, group) => (
+    <div key={groupName}>
+      <Accordion.Title
+        active={group.active}
+        index={groupName}
+        onClick={handleClick}
+        className="CardGroupTitle"
+      >
+        <Header as="h3" dividing>
+          <Icon name="dropdown" />
+          {groupName === "default"
+            ? formatMessage({
+                id: "components.CardGroupsAccordion.withoutGroups",
+              })
+            : groupName}
+        </Header>
+      </Accordion.Title>
+      <Accordion.Content active={group.active}>
+        <Card.Group>
+          {group.members.map((cardProps) => (
+            <CardComponent key={cardProps.id} {...cardProps} />
+          ))}
+        </Card.Group>
+      </Accordion.Content>
+    </div>
+  );
+
+  return (
+    <Accordion exclusive={false}>
+      {cardGroups?.default
+        ? renderSection("default", cardGroups.default)
+        : null}
+      {_.flow(
+        _.omit(["default"]),
+        _.toPairs,
+        _.sortBy(0),
+        _.map(([groupName, group]) => renderSection(groupName, group))
+      )(cardGroups)}
+    </Accordion>
+  );
+};
+
+CardGroupsAccordion.propTypes = {
+  /** Object where the key is the name of group and the value is an array with
+   * card props that will be used in cardComponent */
+  groups: PropTypes.object,
+  /** Component to render Card content using card props passed in groups  */
+  cardComponent: PropTypes.func,
+};
+
+export default CardGroupsAccordion;

package/src/components/OptionGroup.js

@@ -1,5 +1,5 @@
 import _ from "lodash/fp";
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import PropTypes from "prop-types";
 import { Dropdown } from "semantic-ui-react";
 import { lowerDeburr } from "../services/sort";
@@ -27,9 +27,12 @@ export const OptionGroup = ({
   options = [],
   placeholder = "Select",
   onClick,
+  onChange,
   value,
+  multiple,
 }) => {
   const [availableOptions, setOptions] = useState(options);
+  const [flattenedOptions, setFlattenedOptions] = useState();
   const [open, openMenu] = useState(false);
   const [query, setQuery] = useState("");
 
@@ -55,6 +58,14 @@ export const OptionGroup = ({
     );
   };
 
+  useEffect(() => {
+    // eslint-disable-next-line prettier/prettier
+    _.flow(
+      toFlattenedShorthands,
+      setFlattenedOptions
+    )(availableOptions);
+  }, [availableOptions]);
+
   const flatOptionMatches = (o, searchQuery) =>
     !_.has("options")(o) && optionMatches(lowerDeburr(searchQuery))(o);
 
@@ -76,6 +87,10 @@ export const OptionGroup = ({
     onClick(values);
   };
 
+  const onChangeOptionsGroup = (e, dropdown) => {
+    multiple && onChange(dropdown.value);
+  };
+
   const findText = () =>
     _.flow(
       _.reduce(
@@ -89,10 +104,43 @@ export const OptionGroup = ({
 
   const text = value && !query && findText();
 
+  const toFlattenedShorthands = (availableOpts) =>
+    availableOpts.flatMap((option, i) => {
+      const result = _.has("options")(option)
+        ? [
+            {
+              key: i,
+              children: (
+                <>
+                  <Dropdown.Divider />
+                  <Dropdown.Header icon={option.icon} content={option.label} />
+                </>
+              ),
+            },
+            ...option.options.map((innerOption, i) => ({
+              ...innerOption,
+              className: "group",
+              onClick: doOnClick,
+            })),
+          ]
+        : [
+            {
+              ...option,
+              className: "header",
+              onClick: doOnClick,
+            },
+          ];
+      return result;
+    });
+
   return (
     <>
       {label && <label>{label}</label>}
+
       <Dropdown
+        multiple={multiple}
+        options={flattenedOptions}
+        onChange={onChangeOptionsGroup}
         fluid={fluid}
         className="selection"
         placeholder={placeholder}
@@ -106,41 +154,21 @@ export const OptionGroup = ({
         onBlur={() => openMenu(false)}
         text={text}
         value={value}
-      >
-        <Dropdown.Menu>
-          {availableOptions.map((option, i) =>
-            _.has("options")(option) ? (
-              <Group
-                key={i}
-                value={value}
-                onClick={doOnClick}
-                options={_.prop("options")(option)}
-                {...option}
-              />
-            ) : (
-              <Dropdown.Item
-                key={i}
-                {...option}
-                onClick={doOnClick}
-                className="header"
-                selected={value == option.value}
-              />
-            )
-          )}
-        </Dropdown.Menu>
-      </Dropdown>
+      />
     </>
   );
 };
 
 OptionGroup.propTypes = {
   onClick: PropTypes.func,
+  onChange: PropTypes.func,
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   fluid: PropTypes.bool,
   inline: PropTypes.bool,
   label: PropTypes.string,
   placeholder: PropTypes.string,
   options: PropTypes.array,
+  multiple: PropTypes.bool,
 };
 
 export default OptionGroup;

package/src/components/__tests__/CardGroupsAccordion.spec.js

@@ -0,0 +1,142 @@
+import React from "react";
+import { waitFor, fireEvent } from "@testing-library/react";
+import { render } from "@truedat/test/render";
+import { Card } from "semantic-ui-react";
+import { CardGroupsAccordion } from "..";
+
+const groups_all_cards_grouped = {
+  foo: [
+    {
+      id: 1,
+      name: "hello foo",
+      ueueue: "world foo",
+      description: "Test description foo 1",
+    },
+    {
+      id: 2,
+      name: "hello foo 2",
+      meta: "world foo 2",
+      description: "Test description foo 2",
+    },
+  ],
+  bar: [
+    {
+      id: 3,
+      name: "hello bar",
+      meta: "world bar",
+      description: "Test description bar 1",
+    },
+    {
+      id: 4,
+      name: "hello bar 2",
+      meta: "world bar 2",
+      description: "Test description bar 2",
+    },
+  ],
+};
+
+const groups_any_cards_without_group = {
+  foo: [
+    {
+      id: 1,
+      name: "hello foo",
+      meta: "world foo",
+      description: "Test description foo 1",
+    },
+    {
+      id: 2,
+      name: "hello foo 2",
+      meta: "world foo 2",
+      description: "Test description foo 2",
+    },
+  ],
+  default: [
+    {
+      id: 3,
+      name: "hello bar",
+      meta: "world bar",
+      description: "Test description bar 1",
+    },
+    {
+      id: 4,
+      name: "hello bar 2",
+      meta: "world bar 2",
+      description: "Test description bar 2",
+    },
+  ],
+};
+
+const cardComponent = (props) => (
+  <Card>
+    <Card.Content>
+      <Card.Header>{props.name}</Card.Header>
+      <Card.Meta>
+        <span>{props.meta}</span>
+      </Card.Meta>
+      <Card.Description>{props.description}</Card.Description>
+    </Card.Content>
+  </Card>
+);
+
+describe("<CardGroupsAccordion />", () => {
+  it("matches the latest snapshot", () => {
+    const { container } = render(
+      <CardGroupsAccordion
+        groups={groups_all_cards_grouped}
+        cardComponent={cardComponent}
+      />
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  it("Data without group appear in without group section", async () => {
+    const { getByText } = render(
+      <CardGroupsAccordion
+        groups={groups_any_cards_without_group}
+        cardComponent={cardComponent}
+      />
+    );
+
+    await waitFor(() => {
+      expect(getByText("Without Groups")).toBeTruthy();
+    });
+  });
+
+  it("Data without group appear in first position", async () => {
+    const { container } = render(
+      <CardGroupsAccordion
+        groups={groups_any_cards_without_group}
+        cardComponent={cardComponent}
+      />
+    );
+
+    const firstGroup = container.getElementsByClassName("title")[0].innerHTML;
+
+    await waitFor(() => {
+      expect(firstGroup).toMatch("Without Groups");
+    });
+  });
+
+  it("CardGroupsAccordion fold and unfold when click in title", async () => {
+    const { container } = render(
+      <CardGroupsAccordion
+        groups={groups_any_cards_without_group}
+        cardComponent={cardComponent}
+      />
+    );
+
+    const firstTitle = container.querySelector(".title");
+
+    fireEvent.click(firstTitle);
+
+    await waitFor(() => {
+      expect(firstTitle.classList.contains("active")).toBeFalsy();
+    });
+
+    fireEvent.click(firstTitle);
+
+    await waitFor(() => {
+      expect(firstTitle.classList.contains("active")).toBeTruthy();
+    });
+  });
+});

package/src/components/__tests__/__snapshots__/CardGroupsAccordion.spec.js.snap

@@ -0,0 +1,154 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<CardGroupsAccordion /> matches the latest snapshot 1`] = `
+<div>
+  <div
+    class="accordion ui"
+  >
+    <div>
+      <div
+        class="active title CardGroupTitle"
+      >
+        <h3
+          class="ui dividing header"
+        >
+          <i
+            aria-hidden="true"
+            class="dropdown icon"
+          />
+          bar
+        </h3>
+      </div>
+      <div
+        class="content active"
+      >
+        <div
+          class="ui cards"
+        >
+          <div
+            class="ui card"
+          >
+            <div
+              class="content"
+            >
+              <div
+                class="header"
+              >
+                hello bar
+              </div>
+              <div
+                class="meta"
+              >
+                <span>
+                  world bar
+                </span>
+              </div>
+              <div
+                class="description"
+              >
+                Test description bar 1
+              </div>
+            </div>
+          </div>
+          <div
+            class="ui card"
+          >
+            <div
+              class="content"
+            >
+              <div
+                class="header"
+              >
+                hello bar 2
+              </div>
+              <div
+                class="meta"
+              >
+                <span>
+                  world bar 2
+                </span>
+              </div>
+              <div
+                class="description"
+              >
+                Test description bar 2
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div>
+      <div
+        class="active title CardGroupTitle"
+      >
+        <h3
+          class="ui dividing header"
+        >
+          <i
+            aria-hidden="true"
+            class="dropdown icon"
+          />
+          foo
+        </h3>
+      </div>
+      <div
+        class="content active"
+      >
+        <div
+          class="ui cards"
+        >
+          <div
+            class="ui card"
+          >
+            <div
+              class="content"
+            >
+              <div
+                class="header"
+              >
+                hello foo
+              </div>
+              <div
+                class="meta"
+              >
+                <span />
+              </div>
+              <div
+                class="description"
+              >
+                Test description foo 1
+              </div>
+            </div>
+          </div>
+          <div
+            class="ui card"
+          >
+            <div
+              class="content"
+            >
+              <div
+                class="header"
+              >
+                hello foo 2
+              </div>
+              <div
+                class="meta"
+              >
+                <span>
+                  world foo 2
+                </span>
+              </div>
+              <div
+                class="description"
+              >
+                Test description foo 2
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

package/src/components/__tests__/__snapshots__/OptionGroup.spec.js.snap

@@ -13,6 +13,7 @@ exports[`<OptionGroup /> matches the latest snapshot 1`] = `
     minCharacters={1}
     noResultsMessage="No results found."
     onBlur={[Function]}
+    onChange={[Function]}
     onClick={[Function]}
     onSearchChange={[Function]}
     open={false}
@@ -25,8 +26,6 @@ exports[`<OptionGroup /> matches the latest snapshot 1`] = `
     selectOnBlur={true}
     selectOnNavigation={true}
     wrapSelection={true}
-  >
-    <DropdownMenu />
-  </Dropdown>
+  />
 </Fragment>
 `;

package/src/components/index.js

@@ -4,6 +4,7 @@ import MembersMenu from "./MembersMenu";
 import Alert from "./Alert";
 import Authorized from "./Authorized";
 import AvailableFilters from "./AvailableFilters";
+import CardGroupsAccordion from "./CardGroupsAccordion";
 import CatalogMenu from "./CatalogMenu";
 import Comments from "./Comments";
 import CommentsLoader from "./CommentsLoader";
@@ -51,6 +52,7 @@ export {
   Alert,
   Authorized,
   AvailableFilters,
+  CardGroupsAccordion,
   CatalogMenu,
   Comments,
   CommentsLoader,

package/src/messages/en.js

@@ -33,6 +33,7 @@ export default {
   "alert.status.504.header": "Gateway Timeout (504)",
   "comments.actions.new": "New comment",
   "comments.header": "Comments",
+  "components.CardGroupsAccordion.withoutGroups": "Without Groups",
   "confirmation.no": "No",
   "confirmation.yes": "Yes",
   "dateFilter.since": "less than",

package/src/messages/es.js

@@ -34,6 +34,7 @@ export default {
   "alert.status.504.header": "Gateway Timeout (504)",
   "comments.actions.new": "Añadir comentario",
   "comments.header": "Comentarios",
+  "components.CardGroupsAccordion.withoutGroups": "Sin Agrupación",
   "confirmation.no": "No",
   "confirmation.yes": "Sí",
   "dateFilter.since": "hace menos de",

package/src/routes.js

@@ -71,6 +71,8 @@ export const IMPLEMENTATION_EVENTS =
 export const IMPLEMENTATION_EDIT = "/implementations/:implementation_id/edit";
 export const IMPLEMENTATION_CLONE = "/implementations/:implementation_id/clone";
 export const IMPLEMENTATION_MOVE = "/implementations/:implementation_id/move";
+export const IMPLEMENTATION_HISTORY =
+  "/implementations/:implementation_id/history";
 export const IMPLEMENTATION_RESULT_DETAILS =
   "/implementations/:implementation_id/results/:rule_result_id";
 export const IMPLEMENTATION_RESULT_SEGMENTS_RESULTS =
@@ -242,6 +244,7 @@ const routes = {
   IMPLEMENTATION_CONCEPT_LINKS_NEW,
   IMPLEMENTATION_EDIT,
   IMPLEMENTATION_EVENTS,
+  IMPLEMENTATION_HISTORY,
   IMPLEMENTATION_MOVE,
   IMPLEMENTATION_NEW,
   IMPLEMENTATION_NEW_RAW,

package/src/styles/CardGroupsAccordion.less

@@ -0,0 +1,3 @@
+.CardGroupTitle {
+    margin-top: 1rem;
+}