@truedat/core 7.0.5 → 7.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/core",
-  "version": "7.0.5",
+  "version": "7.0.6",
   "description": "Truedat Web Core",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -36,7 +36,7 @@
     "@testing-library/react": "^12.0.0",
     "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^13.2.1",
-    "@truedat/test": "7.0.5",
+    "@truedat/test": "7.0.6",
     "babel-jest": "^28.1.0",
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "babel-plugin-lodash": "^3.3.4",
@@ -118,5 +118,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 2.0.3 < 2.2"
   },
-  "gitHead": "d76d7852ddb993ed53f0266ec17858119e731bbf"
+  "gitHead": "00bc7f5ff0c4a073987b4ed538f9547a12d2d0ad"
 }

package/src/components/DomainSelector.js

@@ -9,12 +9,17 @@ import { DOMAINS_QUERY } from "../api/queries";
 import TreeSelector from "./TreeSelector";
 
 export const DomainSelector = ({
+  allNodesOpen,
   action,
+  className,
   multiple,
   domainActions,
   domainIds,
+  notDropdown,
+  onNodeClick,
   onLoad,
   value,
+  ascendants,
   ...props
 }) => {
   const { formatMessage } = useIntl();
@@ -39,6 +44,10 @@ export const DomainSelector = ({
 
   return (
     <TreeSelector
+      allNodesOpen={allNodesOpen}
+      className={className}
+      notDropdown={notDropdown}
+      onChange={onNodeClick}
       options={options}
       placeholder={formatMessage({
         id: multiple
@@ -47,17 +56,23 @@ export const DomainSelector = ({
       })}
       value={multiple ? _.map(_.toString)(value) : _.toString(value)}
       multiple={multiple}
+      ascendants={ascendants}
       {...props}
     />
   );
 };
 
 DomainSelector.propTypes = {
+  allNodesOpen: PropTypes.bool,
   action: PropTypes.string,
+  className: PropTypes.string,
   multiple: PropTypes.bool,
   domainActions: PropTypes.array,
   domainIds: PropTypes.array,
+  notDropdown: PropTypes.bool,
+  onNodeClick: PropTypes.func,
   onLoad: PropTypes.func,
+  ascendants: PropTypes.array,
   value: PropTypes.oneOfType([
     PropTypes.array,
     PropTypes.string,

package/src/components/DropdownMenuItem.js

@@ -13,6 +13,7 @@ export const DropdownMenuItem = ({
   name,
   level,
   disabled = false,
+  className,
 }) => {
   const handleOpen = (e) => {
     e && e.preventDefault();
@@ -27,7 +28,11 @@ export const DropdownMenuItem = ({
   };
 
   return (
-    <Dropdown.Item onClick={handleClick} selected={!check && selected}>
+    <Dropdown.Item
+      onClick={handleClick}
+      selected={!check && selected}
+      className={className}
+    >
       <div style={{ marginLeft: `${8 * level}px` }}>
         {canOpen ? (
           <Icon name={open ? "minus" : "plus"} onClick={handleOpen} />
@@ -47,6 +52,7 @@ DropdownMenuItem.propTypes = {
   id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   canOpen: PropTypes.bool,
   check: PropTypes.bool,
+  className: PropTypes.string,
   onOpen: PropTypes.func,
   onClick: PropTypes.func,
   selected: PropTypes.bool,

package/src/components/Hierarchy.js

@@ -0,0 +1,316 @@
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import { useIntl } from "react-intl";
+import { Icon, Grid, Label, Input, Form } from "semantic-ui-react";
+import DescriptionInput from "./DescriptionInput";
+
+const ListHierarchyItem = ({
+  node,
+  hierarchy,
+  onChange,
+  addNode,
+  removeNode,
+  isEditionMode,
+}) => {
+  const { formatMessage } = useIntl();
+  const { id, name, error, editionStatus, description } = node;
+  const [expanded, setExpanded] = useState(false);
+  const [mouseOver, setMouseOver] = useState(false);
+  const generation = hierarchy.nodes.filter((n) => n.parentId == id);
+  const hasChildren = !generation.length == 0;
+
+  return (
+    <li
+      key={id}
+      onMouseOver={() => setMouseOver(true)}
+      onMouseOut={() => setMouseOver(false)}
+    >
+      <Icon
+        className="li_trash"
+        size="large"
+        name="cut"
+        title={formatMessage({ id: "hierarchy.delete_node" })}
+        style={{
+          cursor: "pointer",
+          visibility:
+            isEditionMode && !hasChildren && mouseOver ? "visible" : "hidden",
+        }}
+        onClick={() => removeNode(id)}
+      />
+
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "row",
+          alignItems: "self-start",
+        }}
+      >
+        <div>
+          <Input
+            labelPosition="left"
+            type="text"
+            placeholder={formatMessage({ id: "hierarchy.node" })}
+            value={name == null ? "" : name}
+            error={error}
+            {...(!isEditionMode && {
+              "data-tooltip": name == null ? "" : name,
+              "data-position": "top left",
+            })}
+            className={isEditionMode ? "" : "hierarchyNode"}
+            disabled={!isEditionMode}
+            onChange={(_e, { value }) =>
+              onChange(id, { name: value, description: description })
+            }
+          >
+            {!hasChildren ? (
+              isEditionMode && mouseOver && name && name != "" ? (
+                <Label
+                  basic
+                  title={formatMessage({ id: "hierarchy.add_child" })}
+                  onClick={() => {
+                    addNode(id, null);
+                    setExpanded(true);
+                  }}
+                >
+                  <Icon
+                    fitted
+                    name="times circle outline"
+                    style={{ transform: "rotate(45deg)", cursor: "pointer" }}
+                    color={
+                      editionStatus == "dirty"
+                        ? "orange"
+                        : editionStatus == "added"
+                        ? "green"
+                        : null
+                    }
+                  />
+                </Label>
+              ) : (
+                <Label basic>
+                  <Icon
+                    fitted
+                    name="circle outline"
+                    color={
+                      editionStatus == "dirty"
+                        ? "orange"
+                        : editionStatus == "added"
+                        ? "green"
+                        : null
+                    }
+                  />
+                </Label>
+              )
+            ) : (
+              <Label
+                basic
+                title={
+                  expanded
+                    ? formatMessage({ id: "hierarchy.collapse_node" })
+                    : formatMessage({ id: "hierarchy.expand_node" })
+                }
+              >
+                <Icon
+                  fitted
+                  onClick={() => setExpanded(!expanded)}
+                  style={{ cursor: "pointer" }}
+                  color={
+                    editionStatus == "dirty"
+                      ? "orange"
+                      : editionStatus == "added"
+                      ? "green"
+                      : null
+                  }
+                  name={expanded ? "dot circle outline" : "circle"}
+                />
+              </Label>
+            )}
+            <input />
+          </Input>
+        </div>
+
+        <div className="description_wrapper">
+          <DescriptionInput
+            disabled={!isEditionMode}
+            value={description}
+            onChange={(_e, { value }) =>
+              onChange(id, { name: name, description: value })
+            }
+          />
+        </div>
+      </div>
+      {generation.length == 0 || !expanded ? null : (
+        <ListHierarchy
+          hierarchy={hierarchy}
+          parentId={id}
+          onItemChange={onChange}
+          addNode={addNode}
+          removeNode={removeNode}
+          isEditionMode={isEditionMode}
+        />
+      )}
+    </li>
+  );
+};
+
+ListHierarchyItem.propTypes = {
+  node: PropTypes.object,
+  hierarchy: PropTypes.object,
+  onChange: PropTypes.func,
+  addNode: PropTypes.func,
+  removeNode: PropTypes.func,
+  isEditionMode: PropTypes.bool,
+};
+
+const ListHierarchy = ({
+  hierarchy,
+  parentId = null,
+  onItemChange,
+  addNode,
+  removeNode,
+  isEditionMode,
+}) => {
+  const { formatMessage } = useIntl();
+  const [newNodeName, setNewNodeName] = useState();
+  const generation = hierarchy.nodes.filter(
+    (node) => node.parentId == parentId
+  );
+  const addNodeTo = (id = null) => (
+    <Form
+      onSubmit={() => {
+        addNode(id, newNodeName);
+        setNewNodeName("");
+      }}
+    >
+      <Input
+        labelPosition={newNodeName && newNodeName !== "" ? "right" : null}
+        onChange={(_e, { value }) => setNewNodeName(value)}
+        placeholder={formatMessage({ id: "hierarchy.new_node" })}
+        value={newNodeName}
+      >
+        <input />
+
+        {!newNodeName || newNodeName == "" ? null : (
+          <Label
+            style={{ cursor: "pointer" }}
+            onClick={() => {
+              addNode(id, newNodeName);
+              setNewNodeName("");
+            }}
+          >
+            {formatMessage({ id: "hierarchy.add" })}
+          </Label>
+        )}
+      </Input>
+    </Form>
+  );
+
+  return generation.length == 0 ? (
+    isEditionMode ? (
+      <ul className="wtree expanded">
+        <li>{addNodeTo()}</li>
+      </ul>
+    ) : null
+  ) : (
+    <ul className="wtree expanded">
+      {generation.map((node) => {
+        return (
+          <ListHierarchyItem
+            key={node.id}
+            node={node}
+            hierarchy={hierarchy}
+            onChange={onItemChange}
+            addNode={addNode}
+            removeNode={removeNode}
+            isEditionMode={isEditionMode}
+          />
+        );
+      })}
+      {isEditionMode ? (
+        <li className="add_node" key={generation.length}>
+          <div>{addNodeTo(parentId)}</div>
+        </li>
+      ) : null}
+    </ul>
+  );
+};
+
+ListHierarchy.propTypes = {
+  hierarchy: PropTypes.object,
+  parentId: PropTypes.number,
+  onItemChange: PropTypes.func,
+  addNode: PropTypes.func,
+  removeNode: PropTypes.func,
+  isEditionMode: PropTypes.bool,
+};
+
+const Hierarchy = ({
+  addNode,
+  hierarchy,
+  parentId = null,
+  updateMetadata,
+  updateNode,
+  removeNode,
+  isEditionMode,
+}) => {
+  const { formatMessage } = useIntl();
+  return (
+    <Grid.Column>
+      <Grid.Row>
+        <div
+          style={{
+            display: "flex",
+            flexDirection: "row",
+            alignItems: "self-start",
+          }}
+        >
+          <Input
+            type="text"
+            placeholder={formatMessage({ id: "hierarchy.name" })}
+            disabled={!isEditionMode}
+            {...(!isEditionMode && {
+              "data-tooltip": hierarchy.name == null ? "" : hierarchy.name,
+              "data-position": "top left",
+            })}
+            style={isEditionMode ? {} : { opacity: 1 }}
+            value={hierarchy.name}
+            onChange={(_e, { value }) =>
+              updateMetadata({
+                name: value,
+                description: hierarchy.description,
+              })
+            }
+          />
+          <div className="description_wrapper">
+            <DescriptionInput
+              disabled={!isEditionMode}
+              value={hierarchy.description}
+              onChange={(_e, { value }) =>
+                updateMetadata({ name: hierarchy.name, description: value })
+              }
+            />
+          </div>
+        </div>
+      </Grid.Row>
+      <ListHierarchy
+        hierarchy={hierarchy}
+        parentId={parentId}
+        onItemChange={updateNode}
+        addNode={addNode}
+        removeNode={removeNode}
+        isEditionMode={isEditionMode}
+      />
+    </Grid.Column>
+  );
+};
+
+Hierarchy.propTypes = {
+  addNode: PropTypes.func,
+  hierarchy: PropTypes.object,
+  parentId: PropTypes.number,
+  updateMetadata: PropTypes.func,
+  updateNode: PropTypes.func,
+  removeNode: PropTypes.func,
+  isEditionMode: PropTypes.bool,
+};
+
+export default Hierarchy;

package/src/components/HierarchyNodeFinder.js

@@ -0,0 +1,65 @@
+import _ from "lodash/fp";
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import { useHistory } from "react-router-dom";
+import { linkTo } from "@truedat/core/routes";
+import { Grid, Header, Icon, Segment } from "semantic-ui-react";
+import { FormattedMessage } from "react-intl";
+import { ascendants } from "../services/tree";
+import DomainSelector from "./DomainSelector";
+import NodeOpenActions from "./NodeOpenActions";
+
+const HierarchyNodeFinder = ({ nodes = [], idSelectedNode }) => {
+  const history = useHistory();
+  const [allOpen, setAllOpen] = useState(false);
+
+  const handleToggleAllNodes = () => {
+    setAllOpen((prev) => !prev);
+  };
+
+  const handleNodeClick = (e, { value }) => {
+    if (value) history.push(linkTo.DOMAIN_CONCEPTS({ id: value }));
+  };
+
+  return (
+    <Segment>
+      <Grid>
+        <Grid.Row>
+          <Grid.Column width={16}>
+            {!_.isEmpty(nodes) ? (
+              <>
+                <NodeOpenActions
+                  onClick={handleToggleAllNodes}
+                  allNodesOpen={allOpen}
+                  className="nodeOpenActions"
+                />
+                <DomainSelector
+                  notDropdown
+                  value={idSelectedNode}
+                  className="hierarchyNodeFinderTreeSelector"
+                  onNodeClick={handleNodeClick}
+                  ascendants={ascendants(idSelectedNode, nodes)}
+                  allNodesOpen={allOpen}
+                />
+              </>
+            ) : (
+              <Header as="h4">
+                <Icon name="cube" />
+                <Header.Content>
+                  <FormattedMessage id="domains.notExist" />
+                </Header.Content>
+              </Header>
+            )}
+          </Grid.Column>
+        </Grid.Row>
+      </Grid>
+    </Segment>
+  );
+};
+
+HierarchyNodeFinder.propTypes = {
+  nodes: PropTypes.array,
+  idSelectedNode: PropTypes.number,
+};
+
+export default HierarchyNodeFinder;

package/src/components/HierarchySelector.js

@@ -7,6 +7,21 @@ import { accentInsensitivePathOrder } from "../services/sort";
 import { stratify, flatten } from "../services/tree";
 import TreeSelector from "./TreeSelector";
 
+const maybeMapKeys = _.map((option) => {
+  if (_.has("children")(option)) {
+    return {
+      ...option,
+      id: _.has("key")(option) ? option.key : option.id,
+      children: maybeMapKeys(option.children),
+    };
+  } else {
+    return {
+      ...option,
+      id: _.has("key")(option) ? option.key : option.id,
+    };
+  }
+});
+
 const HierarchySelector = ({
   multiple,
   hierarchy,
@@ -25,7 +40,8 @@ const HierarchySelector = ({
     _.propOr([], "nodes"),
     _.sortBy(accentInsensitivePathOrder("name")),
     stratify({}),
-    flatten
+    flatten,
+    maybeMapKeys
   )(data);
 
   return (
@@ -37,7 +53,7 @@ const HierarchySelector = ({
           ? "hierarchy.multiple.placeholder"
           : "hierarchy.selector.placeholder",
       })}
-      value={value}
+      value={multiple ? _.map(_.toString)(value) : _.toString(value)}
       multiple={multiple}
       {...props}
     />

package/src/components/NodeOpenActions.js

@@ -0,0 +1,30 @@
+import _ from "lodash/fp";
+import React from "react";
+import { useIntl } from "react-intl";
+import PropTypes from "prop-types";
+import { Button } from "semantic-ui-react";
+
+export const NodeOpenActions = ({ allNodesOpen, className, onClick }) => {
+  const { formatMessage } = useIntl();
+  return (
+    <Button
+      floated="right"
+      className={className}
+      secondary
+      onClick={onClick}
+      data-tooltip={formatMessage({
+        id: allNodesOpen ? "actions.close.all" : "actions.open.all",
+      })}
+      data-position="bottom right"
+      icon={allNodesOpen ? "minus" : "plus"}
+    />
+  );
+};
+
+NodeOpenActions.propTypes = {
+  allNodesOpen: PropTypes.bool,
+  className: PropTypes.string,
+  onClick: PropTypes.func,
+};
+
+export default NodeOpenActions;

package/src/components/ResourceMembers.js

@@ -1,6 +1,5 @@
 import _ from "lodash/fp";
 import React, { useState } from "react";
-import { useParams } from "react-router-dom";
 import PropTypes from "prop-types";
 import { Card, Header, Input, Message, Grid } from "semantic-ui-react";
 import { useIntl } from "react-intl";
@@ -29,8 +28,7 @@ const filterData = (filter, data) => {
   return _.filter(matchesFilter(filter))(data);
 };
 
-export const ResourceMembers = ({ type }) => {
-  const { id } = useParams();
+export const ResourceMembers = ({ type, id }) => {
   const {
     data,
     loading,
@@ -100,6 +98,7 @@ export const ResourceMembers = ({ type }) => {
 
 ResourceMembers.propTypes = {
   type: PropTypes.string,
+  id: PropTypes.number,
 };
 
 export default ResourceMembers;