@truedat/qx 5.17.2 → 5.18.0

package/src/components/search/QualityControlSelectedFilters.js

@@ -0,0 +1,56 @@
+import _ from "lodash/fp";
+import React from "react";
+import { FormattedMessage } from "react-intl";
+import FilterDropdown from "./FilterDropdown";
+import FilterMultilevelDropdown from "./FilterMultilevelDropdown";
+import HierarchyFilterDropdown from "./HierarchyFilterDropdown";
+
+import SearchContext, { useSearchContext } from "./SearchContext";
+
+export default function QualityControlSelectedFilters() {
+  const context = useSearchContext();
+  const {
+    selectedFilters,
+    resetFilters,
+    filterTypes,
+    activeFilterName,
+    activeFilterValues,
+  } = context;
+
+  return (
+    <>
+      <div className="selectedFilters">
+        {_.isEmpty(selectedFilters) ? null : (
+          <>
+            <div className="appliedFilters">
+              <FormattedMessage id="search.applied_filters" />
+            </div>
+            {selectedFilters.map((filter) => {
+              const filterType = _.prop(filter)(filterTypes);
+              const options = _.isEqual(filter, activeFilterName)
+                ? activeFilterValues
+                : null;
+              return (
+                <SearchContext.Provider
+                  value={{ ...context, filter, options }}
+                  key={filter}
+                >
+                  {filterType === "domain" ? (
+                    <FilterMultilevelDropdown />
+                  ) : filterType === "hierarchy" ? (
+                    <HierarchyFilterDropdown />
+                  ) : (
+                    <FilterDropdown />
+                  )}
+                </SearchContext.Provider>
+              );
+            })}
+            <a className="resetFilters" onClick={() => resetFilters()}>
+              <FormattedMessage id="search.clear_filters" />
+            </a>
+          </>
+        )}
+      </div>
+    </>
+  );
+}

package/src/components/search/QualityControlsSearch.js

@@ -0,0 +1,30 @@
+import React from "react";
+import { Input } from "semantic-ui-react";
+import { useIntl } from "react-intl";
+import QualityControlFilters from "./QualityControlFilters";
+import QualityControlSelectedFilters from "./QualityControlSelectedFilters";
+
+import { useSearchContext } from "./SearchContext";
+
+export default function QualityControlsSearch() {
+  const { formatMessage } = useIntl();
+
+  const { query, setQuery, loadingFilters: loading } = useSearchContext();
+
+  return (
+    <>
+      <Input
+        value={query}
+        onChange={(_e, data) => setQuery(data.value)}
+        icon={{ name: "search", link: true }}
+        iconPosition="left"
+        action={<QualityControlFilters />}
+        placeholder={formatMessage({
+          id: "quality_controls.search.placeholder",
+        })}
+        loading={loading}
+      />
+      <QualityControlSelectedFilters />
+    </>
+  );
+}

package/src/components/search/SearchContext.js

@@ -0,0 +1,180 @@
+import _ from "lodash/fp";
+import React, {
+  useState,
+  useEffect,
+  useContext,
+  createContext,
+  useMemo,
+} from "react";
+import { useIntl } from "react-intl";
+import {
+  toFilterValues,
+  formatFilterValues,
+} from "@truedat/core/services/filters";
+import { makeOption } from "@truedat/core/services/i18n";
+
+import {
+  useQualityControlsSearch,
+  useQualityControlsFilters,
+} from "../../hooks/useQualityControls";
+
+const SearchContext = createContext();
+
+export const SearchContextProvider = (props) => {
+  const children = _.prop("children")(props);
+  const initialSortColumn = _.prop("initialSortColumn")(props);
+  const initialSortDirection = _.prop("initialSortDirection")(props);
+  const { formatMessage } = useIntl();
+
+  const [loadingSearch, setLoadingSearch] = useState(true);
+  const [qualityControls, setQualityControls] = useState([]);
+
+  const [filtersPayload, setFiltersPayload] = useState([]);
+  const [loadingFilters, setLoadingFilters] = useState(true);
+  const [query, setQuery] = useState("");
+  const [activeFilterName, setActiveFilterName] = useState([]);
+  const [allActiveFilters, setAllActiveFilters] = useState({});
+
+  const [sortColumn, setSortColumn] = useState(initialSortColumn);
+  const [sortDirection, setSortDirection] = useState(initialSortDirection);
+
+  //STATE FUNCTIONS
+  const addFilter = ({ filter }) => {
+    setAllActiveFilters({ ...allActiveFilters, [filter]: [] });
+    setActiveFilterName(filter);
+  };
+  const resetFilters = () => setAllActiveFilters({});
+
+  const openFilter = ({ filter }) => setActiveFilterName(filter);
+  const closeFilter = () => {
+    setActiveFilterName(null);
+    setAllActiveFilters(_.pickBy(_.negate(_.isEmpty))(allActiveFilters));
+  };
+  const removeFilter = ({ filter }) => {
+    setAllActiveFilters(_.omit(filter)(allActiveFilters));
+    setActiveFilterName(activeFilterName == filter ? null : activeFilterName);
+  };
+
+  const toggleFilterValue = ({ filter, value }) => {
+    const values = _.propOr([], filter)(allActiveFilters);
+    const newValue = _.isArray(value)
+      ? value
+      : _.includes(value)(values)
+      ? _.without([value])(values)
+      : _.union([value])(values);
+
+    setAllActiveFilters({ ...allActiveFilters, [filter]: newValue });
+  };
+
+  //CALCULATIONS ON STATE
+  const selectedFilters = _.keys(allActiveFilters);
+
+  const filters = _.flow(
+    _.propOr({}, "data"),
+    _.omitBy(_.flow(_.propOr([], "values"), (values) => _.size(values) < 2))
+  )(filtersPayload);
+
+  // getAvailableFilters selector
+  const availableFilters = _.flow(_.keys, _.without(selectedFilters))(filters);
+
+  // getFilterTypes selector
+  const filterTypes = _.mapValues("type")(filters);
+
+  const translations = (formatMessage) => ({
+    "status.raw": (v) => formatMessage({ id: v, defaultMessage: v }),
+  });
+  const activeFilterValues = _.flow(
+    _.propOr({ values: [] }, activeFilterName),
+    ({ values, type }) => ({
+      values: _.flow(
+        _.concat(_.prop(activeFilterName)(allActiveFilters)),
+        _.uniq
+      )(values),
+      type,
+    }),
+    formatFilterValues,
+    _.map(makeOption(translations(formatMessage), activeFilterName))
+  )(filters);
+  const activeFilterSelectedValues = _.flow(
+    _.propOr([], activeFilterName),
+    toFilterValues
+  )(allActiveFilters);
+
+  const searchMust = useMemo(
+    () => _.pickBy(_.negate(_.isEmpty))(allActiveFilters),
+    [allActiveFilters]
+  );
+  const filterMust = useMemo(
+    () =>
+      _.flow(
+        _.pickBy(_.negate(_.isEmpty)),
+        _.omit(activeFilterName)
+      )(allActiveFilters),
+    [allActiveFilters, activeFilterName]
+  );
+
+  const sort = useMemo(
+    () =>
+      sortColumn
+        ? {
+            [sortColumn]: sortDirection === "ascending" ? "asc" : "desc",
+          }
+        : null,
+    [sortColumn, sortDirection]
+  );
+
+  const { trigger: triggerFilters } = useQualityControlsFilters();
+  useEffect(() => {
+    setLoadingFilters(true);
+    triggerFilters({ query, must: filterMust }).then(({ data }) => {
+      setFiltersPayload(data);
+      setLoadingFilters(false);
+    });
+  }, [query, filterMust, triggerFilters]);
+
+  const { trigger: triggerSearch } = useQualityControlsSearch();
+  useEffect(() => {
+    setLoadingSearch(true);
+    triggerSearch({ query, must: searchMust, sort }).then(({ data }) => {
+      setQualityControls(data?.data);
+      setLoadingSearch(false);
+    });
+  }, [query, searchMust, sort, triggerSearch]);
+
+  const context = {
+    disabled: false,
+    loadingFilters,
+
+    availableFilters,
+    selectedFilters,
+    filterTypes,
+
+    activeFilterName,
+    activeFilterSelectedValues,
+    activeFilterValues,
+    query,
+
+    addFilter,
+    resetFilters,
+    openFilter,
+    closeFilter,
+    removeFilter,
+    toggleFilterValue,
+    setQuery,
+
+    qualityControls,
+    loadingSearch,
+
+    sortColumn,
+    sortDirection,
+    setSortColumn,
+    setSortDirection,
+  };
+
+  return (
+    <SearchContext.Provider value={context}>{children}</SearchContext.Provider>
+  );
+};
+
+export const useSearchContext = () => useContext(SearchContext);
+export default SearchContext;

package/src/hooks/useQualityControls.js

@@ -0,0 +1,74 @@
+import { compile } from "path-to-regexp";
+import useSWR from "swr";
+import useSWRMutations from "swr/mutation";
+import {
+  apiJson,
+  apiJsonPost,
+  apiJsonPatch,
+  apiJsonDelete,
+} from "@truedat/core/services/api";
+import {
+  API_QUALITY_CONTROLS,
+  API_QUALITY_CONTROL,
+  // API_QUALITY_CONTROL_VERSIONS,
+  // API_QUALITY_CONTROL_PUBLISHED,
+  API_QUALITY_CONTROL_DRAFT,
+  API_QUALITY_CONTROL_STATUS,
+  API_QUALITY_CONTROL_DOMAINS,
+  API_QUALITY_CONTROL_SEARCH,
+  API_QUALITY_CONTROL_FILTERS,
+} from "../api";
+
+export const useQualityControls = () => {
+  const { data, error, mutate } = useSWR(API_QUALITY_CONTROLS, apiJson);
+  return { data: data?.data, error, loading: !error && !data, mutate };
+};
+export const useQualityControl = (id) => {
+  const url = compile(API_QUALITY_CONTROL)({ id });
+  const { data, error, mutate } = useSWR(url, apiJson);
+  return { data: data?.data, error, loading: !error && !data, mutate };
+};
+
+export const useQualityControlCreate = () => {
+  return useSWRMutations(API_QUALITY_CONTROLS, (url, { arg }) =>
+    apiJsonPost(url, arg)
+  );
+};
+
+export const useQualityControlCreateDraft = (id) => {
+  const url = compile(API_QUALITY_CONTROL_DRAFT)({ id });
+  return useSWRMutations(url, (url, { arg }) => apiJsonPost(url, arg));
+};
+
+export const useQualityControlUpdateDraft = (id) => {
+  const url = compile(API_QUALITY_CONTROL_DRAFT)({ id });
+  return useSWRMutations(url, (url, { arg }) => apiJsonPatch(url, arg));
+};
+
+export const useQualityControlUpdateStatus = (id) => {
+  const url = compile(API_QUALITY_CONTROL_STATUS)({ id });
+  return useSWRMutations(url, (url, { arg }) => apiJsonPatch(url, arg));
+};
+
+export const useQualityControlUpdateDomains = (id) => {
+  const url = compile(API_QUALITY_CONTROL_DOMAINS)({ id });
+  return useSWRMutations(url, (url, { arg }) => apiJsonPatch(url, arg));
+};
+
+export const useQualityControlDelete = (qualityControl) => {
+  const id = qualityControl?.id || 0;
+  const url = compile(API_QUALITY_CONTROL)({ id });
+  return useSWRMutations(url, (url, { arg }) => apiJsonDelete(url, arg));
+};
+
+export const useQualityControlsSearch = () => {
+  return useSWRMutations(API_QUALITY_CONTROL_SEARCH, (url, { arg }) =>
+    apiJsonPost(url, arg)
+  );
+};
+
+export const useQualityControlsFilters = () => {
+  return useSWRMutations(API_QUALITY_CONTROL_FILTERS, (url, { arg }) =>
+    apiJsonPost(url, arg)
+  );
+};

package/src/styles/Expression.less

@@ -45,6 +45,12 @@
   justify-content: center;
 }
 
+.shape-icon {
+  font-size: 12px;
+  font-weight: bold;
+  font-family: monospace;
+}
+
 .function-params-label {
   display: flex;
   flex: 1;
@@ -153,10 +159,6 @@ ul.function-tree {
 }
 
 
-
-
-
-
 .join_type{
   display:inline-flex;
   left: 25%;
@@ -249,4 +251,37 @@ ul.function-tree {
 .join-type-dropdown-item {
   display: flex !important;
   align-items: center;
+}
+
+.float-right {
+  float: right;
+}
+
+.text-align-left {
+  text-align: left;
+}
+
+.display-flex {
+  display: flex;
+}
+
+.clause-viewer-function {
+  padding-left: 8px;
+  margin-top: 2px;
+}
+.divider-compact {
+  font-size: smaller !important;
+  margin: 5px !important;
+}
+.no-margin {
+  margin: 0px !important;
+}
+.font-big {
+  font-size: x-large;
+  margin: 4px;
+}
+.condition-function-viewer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }