@truedat/qx 5.17.2 → 5.18.0

package/src/components/qualityControls/resultCriterias/ErrorsNumber.js

@@ -0,0 +1,88 @@
+import React, { useContext } from "react";
+import { useIntl } from "react-intl";
+import { Controller, useFormContext } from "react-hook-form";
+import { Form } from "semantic-ui-react";
+import QxContext from "@truedat/qx/components/QxContext";
+import { FieldLabel } from "@truedat/core/components";
+import { numberRules } from "@truedat/core/services/formRules";
+
+export default function ErrorsNumber() {
+  const { formatMessage } = useIntl();
+  const { field } = useContext(QxContext);
+  const { control, watch } = useFormContext();
+
+  const maximumField = `${field}.maximum`;
+  const goalField = `${field}.goal`;
+  const maximum = watch(maximumField);
+  const goal = watch(goalField);
+
+  return (
+    <>
+      <Controller
+        name={goalField}
+        control={control}
+        rules={numberRules({
+          formatMessage,
+          minValue: 0,
+          maxValue: maximum,
+          required: true,
+        })}
+        render={({
+          field: { onBlur, onChange, value },
+          fieldState: { error },
+        }) => (
+          <FieldLabel
+            label={formatMessage({
+              id: "quality_control.result_criteria.errors_number.goal",
+            })}
+            required
+            error={error?.message}
+          >
+            <Form.Input
+              autoComplete="off"
+              placeholder={formatMessage({
+                id: "quality_control.result_criteria.errors_number.goal",
+              })}
+              error={!!error}
+              onBlur={onBlur}
+              onChange={(_e, { value }) => onChange(value)}
+              value={value}
+            />
+          </FieldLabel>
+        )}
+      />
+      <Controller
+        name={maximumField}
+        control={control}
+        rules={numberRules({
+          formatMessage,
+          minValue: goal,
+          required: true,
+        })}
+        render={({
+          field: { onBlur, onChange, value },
+          fieldState: { error },
+        }) => (
+          <FieldLabel
+            label={formatMessage({
+              id: "quality_control.result_criteria.errors_number.maximum",
+            })}
+            required
+            error={error?.message}
+          >
+            <Form.Input
+              autoComplete="off"
+              placeholder={formatMessage({
+                id: "quality_control.result_criteria.errors_number.maximum",
+              })}
+              error={!!error}
+              onBlur={onBlur}
+              onChange={(_e, { value }) => onChange(value)}
+              value={value}
+            />
+          </FieldLabel>
+        )}
+      />
+    </>
+  );
+}

package/src/components/qualityControls/resultCriterias/Percentage.js

@@ -0,0 +1,89 @@
+import React, { useContext } from "react";
+import { useIntl } from "react-intl";
+import { Controller, useFormContext } from "react-hook-form";
+import { Form } from "semantic-ui-react";
+import QxContext from "@truedat/qx/components/QxContext";
+import { FieldLabel } from "@truedat/core/components";
+import { numberRules } from "@truedat/core/services/formRules";
+
+export default function Percentage() {
+  const { formatMessage } = useIntl();
+  const { field } = useContext(QxContext);
+  const { control, watch } = useFormContext();
+
+  const minimumField = `${field}.minimum`;
+  const goalField = `${field}.goal`;
+  const minimum = watch(minimumField);
+  const goal = watch(goalField);
+
+  return (
+    <>
+      <Controller
+        name={minimumField}
+        control={control}
+        rules={numberRules({
+          formatMessage,
+          minValue: 0,
+          maxValue: goal,
+          required: true,
+        })}
+        render={({
+          field: { onBlur, onChange, value },
+          fieldState: { error },
+        }) => (
+          <FieldLabel
+            label={formatMessage({
+              id: "quality_control.result_criteria.percentage.minimum",
+            })}
+            required
+            error={error?.message}
+          >
+            <Form.Input
+              autoComplete="off"
+              placeholder={formatMessage({
+                id: "quality_control.result_criteria.percentage.minimum",
+              })}
+              error={!!error}
+              onBlur={onBlur}
+              onChange={(_e, { value }) => onChange(value)}
+              value={value}
+            />
+          </FieldLabel>
+        )}
+      />
+      <Controller
+        name={goalField}
+        control={control}
+        rules={numberRules({
+          formatMessage,
+          minValue: minimum,
+          maxValue: 100,
+          required: true,
+        })}
+        render={({
+          field: { onBlur, onChange, value },
+          fieldState: { error },
+        }) => (
+          <FieldLabel
+            label={formatMessage({
+              id: "quality_control.result_criteria.percentage.goal",
+            })}
+            required
+            error={error?.message}
+          >
+            <Form.Input
+              autoComplete="off"
+              placeholder={formatMessage({
+                id: "quality_control.result_criteria.percentage.goal",
+              })}
+              error={!!error}
+              onBlur={onBlur}
+              onChange={(_e, { value }) => onChange(value)}
+              value={value}
+            />
+          </FieldLabel>
+        )}
+      />
+    </>
+  );
+}

package/src/components/search/FilterDropdown.js

@@ -0,0 +1,76 @@
+import _ from "lodash/fp";
+import React from "react";
+import { FormattedMessage } from "react-intl";
+import { Label, Icon, Dropdown, Dimmer, Loader } from "semantic-ui-react";
+import { accentInsensitivePathOrder } from "@truedat/core/services/sort";
+import FilterItem from "./FilterItem";
+
+import { useSearchContext } from "./SearchContext";
+
+const removePrefix = _.replace(/^.*\./, "");
+
+export default function FilterDropdown() {
+  const {
+    loadingFilters: loading,
+    filter,
+    options,
+    activeFilterSelectedValues,
+
+    openFilter,
+    closeFilter,
+    removeFilter,
+    toggleFilterValue,
+  } = useSearchContext();
+
+  return (
+    <Dropdown
+      item
+      floating
+      scrolling
+      icon={false}
+      upward={false}
+      trigger={
+        <Label key={filter}>
+          <FormattedMessage
+            id={`filters.${filter}`}
+            defaultMessage={removePrefix(filter)}
+          />
+          <Icon
+            name="delete"
+            onClick={(e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              removeFilter({ filter });
+            }}
+          />
+        </Label>
+      }
+      onOpen={() => openFilter({ filter })}
+      onClose={() => closeFilter({ filter })}
+      open={!_.isEmpty(options)}
+    >
+      <Dimmer.Dimmable as={Dropdown.Menu} dimmed={loading}>
+        {options &&
+          _.flow(
+            _.sortBy(accentInsensitivePathOrder("text")),
+            _.map.convert({ cap: false })((option, i) => (
+              <FilterItem
+                key={i}
+                filter={filter}
+                option={option}
+                toggleFilterValue={toggleFilterValue}
+                active={_.includes(_.prop("value")(option))(
+                  activeFilterSelectedValues
+                )}
+              />
+            ))
+          )(options)}
+        {loading && (
+          <Dimmer active inverted>
+            <Loader size="tiny" />
+          </Dimmer>
+        )}
+      </Dimmer.Dimmable>
+    </Dropdown>
+  );
+}

package/src/components/search/FilterItem.js

@@ -0,0 +1,49 @@
+import _ from "lodash/fp";
+import React from "react";
+import PropTypes from "prop-types";
+import { FormattedMessage } from "react-intl";
+import { Icon, Dropdown } from "semantic-ui-react";
+
+const FilterItemText = ({ filterName, text }) =>
+  _.trim(text) ? (
+    <FormattedMessage
+      id={`filters.${filterName}.${_.trim(text)}`}
+      defaultMessage={_.trim(text)}
+    />
+  ) : (
+    <i>
+      <FormattedMessage id="filter.empty" />
+    </i>
+  );
+
+const preventDefault = (e, callback) => {
+  e && e.preventDefault();
+  e && e.stopPropagation();
+  callback();
+};
+
+export const FilterItem = ({
+  active,
+  filter,
+  toggleFilterValue,
+  option: { text, value },
+}) => (
+  <Dropdown.Item
+    onClick={(e) =>
+      preventDefault(e, () => toggleFilterValue({ filter, value }))
+    }
+    active={active}
+  >
+    <Icon name={active ? "check square outline" : "square outline"} />
+    <FilterItemText filterName={filter} text={text} />
+  </Dropdown.Item>
+);
+
+FilterItem.propTypes = {
+  filterName: PropTypes.string,
+  text: PropTypes.string,
+  toggleFilterValue: PropTypes.func,
+  option: PropTypes.object,
+};
+
+export default FilterItem;

package/src/components/search/FilterMultilevelDropdown.js

@@ -0,0 +1,200 @@
+import _ from "lodash/fp";
+import React, { useState, useEffect } from "react";
+import { FormattedMessage } from "react-intl";
+import {
+  Label,
+  Icon,
+  Input,
+  Dropdown,
+  Dimmer,
+  Loader,
+} from "semantic-ui-react";
+import { lowerDeburr } from "@truedat/core/services/sort";
+import DropdownMenuItem from "@truedat/core/components/DropdownMenuItem";
+
+import { useSearchContext } from "./SearchContext";
+
+export default function FilterMultilevelDropdown() {
+  const {
+    loadingFilters: loading,
+    filter,
+    options,
+    activeFilterSelectedValues,
+
+    openFilter,
+    closeFilter,
+    removeFilter,
+    toggleFilterValue,
+  } = useSearchContext();
+
+  const [selected, setSelected] = useState();
+  const [query, setQuery] = useState();
+  const [open, setOpen] = useState([]);
+  const [displayed, setDisplayed] = useState([]);
+
+  useEffect(() => {
+    const activeOptions = _.filter((option) =>
+      _.includes(option.id)(activeFilterSelectedValues)
+    )(options);
+
+    _.flow(
+      _.reduce(
+        (acc, option) => [
+          ...acc,
+          option.id,
+          ..._.map("id")(option.descendents),
+        ],
+        []
+      ),
+      _.uniq,
+      setSelected
+    )(activeOptions);
+    if (_.isEmpty(open) && _.isEmpty(displayed)) {
+      const withAncestors = _.flow(
+        _.reduce(
+          (acc, option) => [...acc, ..._.map("id")(option.ancestors)],
+          []
+        ),
+        _.uniq
+      )(activeOptions);
+      const newDisplayed = [..._.map("id")(activeOptions), ...withAncestors];
+      !_.isEqual(open, withAncestors) && setOpen(withAncestors);
+      !_.isEqual(displayed, newDisplayed) && setDisplayed(newDisplayed);
+    }
+  }, [activeFilterSelectedValues, options, open, displayed]);
+
+  const handleOpen = (selection) => {
+    const option = _.find({ id: selection })(options);
+    const isOpen = _.contains(selection)(open);
+    const children = _.map("id")(option.children);
+    const descendents = _.map("id")(option.descendents);
+
+    if (isOpen) {
+      setOpen(_.without([selection, ...descendents])(open));
+      setDisplayed(_.without(descendents)(displayed));
+    } else {
+      setOpen(_.union([selection])(open));
+      setDisplayed(_.union(children)(displayed));
+    }
+  };
+
+  const handleClick = (e, selection) => {
+    const option = _.find({ id: selection })(options);
+    const ancestorsToDelete = _.intersection(_.map("id")(option.ancestors))(
+      activeFilterSelectedValues
+    );
+    if (!_.isEmpty(ancestorsToDelete)) {
+      const active = _.union([selection])(activeFilterSelectedValues);
+      const value = _.without(ancestorsToDelete)(active);
+      toggleFilterValue({ filter, value });
+    } else if (_.includes(selection)(activeFilterSelectedValues)) {
+      const descendents = _.map("id")(option.descendents);
+      const value = _.without([selection, ...descendents])(
+        activeFilterSelectedValues
+      );
+      toggleFilterValue({ filter, value });
+    } else {
+      const descendents = _.map("id")(option.descendents);
+      const active = _.without(descendents)(activeFilterSelectedValues);
+      const value = _.union([selection])(active);
+      toggleFilterValue({ filter, value });
+    }
+  };
+
+  const displayAll = () => {
+    const ids = _.map("id")(options);
+    setOpen(ids);
+    setDisplayed(ids);
+  };
+
+  const handleSearch = (e, { value }) => {
+    e.preventDefault();
+    setQuery(lowerDeburr(value));
+    if (!_.isEmpty(value)) {
+      displayAll();
+    }
+  };
+  const match = (name, query) => _.contains(query)(lowerDeburr(name));
+  const filterSearch = (all) => {
+    if (query) {
+      return _.filter(
+        (domain) =>
+          match(domain.name, query) ||
+          _.some((descendent) => match(descendent.name, query))(
+            domain.descendents
+          )
+      )(all);
+    }
+    return all;
+  };
+
+  const filterDisplayed = (all) =>
+    _.filter((domain) => domain.level == 0 || _.contains(domain.id)(displayed))(
+      all
+    );
+
+  const filteredOptions = _.flow(filterSearch, filterDisplayed)(options);
+
+  return (
+    <Dropdown
+      item
+      floating
+      icon={false}
+      upward={false}
+      onOpen={() => openFilter({ filter })}
+      onClose={() => closeFilter({ filter })}
+      trigger={
+        <Label key={filter}>
+          <FormattedMessage id={`filters.${filter}`} defaultMessage={filter} />
+          <Icon
+            name="delete"
+            onClick={(e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              removeFilter({ filter });
+            }}
+          />
+        </Label>
+      }
+      open={!_.isEmpty(options)}
+    >
+      <Dimmer.Dimmable dimmed={loading} as={Dropdown.Menu}>
+        <>
+          <Input
+            icon="search"
+            iconPosition="left"
+            className="search"
+            onKeyDown={(e) => {
+              if (e.key === " ") {
+                e.stopPropagation();
+              }
+            }}
+            onChange={handleSearch}
+            onClick={(e) => {
+              e.preventDefault();
+              e.stopPropagation();
+            }}
+          />
+          <Dropdown.Menu scrolling>
+            {_.map.convert({ cap: false })((option, i) => (
+              <DropdownMenuItem
+                key={i}
+                onOpen={handleOpen}
+                onClick={handleClick}
+                open={_.contains(option.id)(open)}
+                canOpen={_.negate(_.isEmpty)(option.children)}
+                selected={_.contains(option.id)(selected)}
+                {...option}
+              />
+            ))(filteredOptions)}
+          </Dropdown.Menu>
+        </>
+        {loading && (
+          <Dimmer active inverted>
+            <Loader size="tiny" />
+          </Dimmer>
+        )}
+      </Dimmer.Dimmable>
+    </Dropdown>
+  );
+}

package/src/components/search/HierarchyFilterDropdown.js

@@ -0,0 +1,116 @@
+import _ from "lodash/fp";
+import React from "react";
+import PropTypes from "prop-types";
+import { useHierarchy } from "@truedat/df/hooks/useHierarchies";
+import {
+  getHierarchyOptions,
+  getKeyAndParents,
+} from "@truedat/core/services/getHierarchyOptions";
+import FilterMultilevelDropdown from "./FilterMultilevelDropdown";
+
+const PopulatedHierarchyFilterDropdown = (props) => {
+  const {
+    activeValues,
+    closeFilter,
+    filter,
+    loading,
+    openFilter,
+    options,
+    removeFilter,
+    toggleFilterValue,
+  } = props;
+  const hierarchyId = _.flow(
+    _.first,
+    _.prop("value"),
+    (value) => value.split("_"),
+    _.first
+  )(options);
+
+  const { data, error, loading: hierarchyLoading } = useHierarchy(hierarchyId);
+  if (error) return null;
+  if (hierarchyLoading) return null;
+
+  const hierarchyOptions = getHierarchyOptions(data?.nodes);
+
+  const includedKeys = _.flow(
+    _.map("value"),
+    _.flatMap(getKeyAndParents(hierarchyOptions)),
+    _.uniq
+  )(options);
+
+  const filterIncludedKeys = _.filter(({ key }) =>
+    _.includes(key)(includedKeys)
+  );
+
+  const filteredChildren = _.flow(_.prop("children"), filterIncludedKeys);
+
+  const filteredOptions = _.flow(
+    filterIncludedKeys,
+    _.map((node) => ({ ...node, children: filteredChildren(node) }))
+  )(hierarchyOptions);
+
+  const idActiveValues = _.map((key) =>
+    _.flow(_.find({ key }), _.prop("id"))(filteredOptions)
+  )(activeValues);
+
+  const handleToggleFilterValue = ({ filter, value }) => {
+    const getChildrenKeys = (id) => {
+      const { key, descendents } = _.flow(
+        _.find({ id }),
+        _.pick(["key", "descendents"])
+      )(filteredOptions);
+      const descendentKeys = _.map("key")(descendents);
+      return [key, ...descendentKeys];
+    };
+    const newValue = _.flow(
+      _.flatMap(getChildrenKeys),
+      _.uniq,
+      _.reject(_.isNil)
+    )(value);
+    toggleFilterValue({ filter, value: newValue });
+  };
+
+  return (
+    <FilterMultilevelDropdown
+      activeValues={idActiveValues}
+      closeFilter={closeFilter}
+      filter={filter}
+      loading={loading}
+      openFilter={openFilter}
+      options={filteredOptions}
+      removeFilter={removeFilter}
+      toggleFilterValue={handleToggleFilterValue}
+    />
+  );
+};
+
+PopulatedHierarchyFilterDropdown.propTypes = {
+  activeValues: PropTypes.array,
+  closeFilter: PropTypes.func,
+  filter: PropTypes.string,
+  loading: PropTypes.bool,
+  openFilter: PropTypes.func,
+  options: PropTypes.array,
+  removeFilter: PropTypes.func,
+  toggleFilterValue: PropTypes.func,
+};
+
+const HierarchyFilterDropdown = (props) =>
+  _.isEmpty(props.options) ? (
+    <FilterMultilevelDropdown {...props} />
+  ) : (
+    <PopulatedHierarchyFilterDropdown {...props} />
+  );
+
+HierarchyFilterDropdown.propTypes = {
+  activeValues: PropTypes.array,
+  closeFilter: PropTypes.func,
+  filter: PropTypes.string,
+  loading: PropTypes.bool,
+  openFilter: PropTypes.func,
+  options: PropTypes.array,
+  removeFilter: PropTypes.func,
+  toggleFilterValue: PropTypes.func,
+};
+
+export default HierarchyFilterDropdown;

package/src/components/search/QualityControlFilters.js

@@ -0,0 +1,60 @@
+import _ from "lodash/fp";
+import React from "react";
+import { Dropdown } from "semantic-ui-react";
+import { FormattedMessage, useIntl } from "react-intl";
+import { i18nOrder } from "@truedat/core/services/sort";
+import { useSearchContext } from "./SearchContext";
+
+const removePrefix = _.replace(/^.*\./, "");
+
+export default function QualityControlFilters() {
+  const {
+    disabled,
+    availableFilters,
+    addFilter,
+    resetFilters,
+    loadingFilters: loading,
+  } = useSearchContext();
+
+  const { formatMessage } = useIntl();
+
+  return (
+    <Dropdown
+      button
+      className="icon"
+      disabled={disabled}
+      floating
+      icon="filter"
+      labeled
+      loading={loading}
+      scrolling
+      text={formatMessage({ id: "filters", defaultMessage: "Filters" })}
+      upward={false}
+    >
+      <Dropdown.Menu>
+        <Dropdown.Item onClick={resetFilters}>
+          <em>
+            <FormattedMessage
+              id="filters.reset"
+              defaultMessage="(reset filters)"
+            />
+          </em>
+        </Dropdown.Item>
+        {_.flow(
+          _.defaultTo([]),
+          _.sortBy(i18nOrder(formatMessage, "filters")),
+          _.map((filter) => (
+            <Dropdown.Item
+              key={filter}
+              text={formatMessage({
+                id: `filters.${filter}`,
+                defaultMessage: removePrefix(filter),
+              })}
+              onClick={() => addFilter({ filter })}
+            />
+          ))
+        )(availableFilters)}
+      </Dropdown.Menu>
+    </Dropdown>
+  );
+}