@truedat/core 5.18.1 → 5.18.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/core",
-  "version": "5.18.1",
+  "version": "5.18.3",
   "description": "Truedat Web Core",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -117,5 +117,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 2.0.3 < 2.2"
   },
-  "gitHead": "95d5a42f5bd259ad53fa66d4fe8cce48be73ee03"
+  "gitHead": "ba00f358149f00dcdabb3e3edd883c54c0bbd43a"
 }

package/src/components/ConfirmModal.js

@@ -60,6 +60,7 @@ export const ConfirmModal = ({
         <Modal.Content>{content}</Modal.Content>
       )
     }
+    role="dialog"
   />
 );
 

package/src/components/FilterDropdown.js

@@ -1,9 +1,16 @@
 import _ from "lodash/fp";
-import React from "react";
+import React, { useState, useEffect } from "react";
 import PropTypes from "prop-types";
 import { FormattedMessage } from "react-intl";
-import { Label, Icon, Dropdown, Dimmer, Loader } from "semantic-ui-react";
-import { accentInsensitivePathOrder } from "../services/sort";
+import {
+  Label,
+  Icon,
+  Dropdown,
+  Dimmer,
+  Loader,
+  Input,
+} from "semantic-ui-react";
+import { accentInsensitivePathOrder, lowerDeburr } from "../services/sort";
 import FilterItem from "./FilterItem";
 
 const removePrefix = _.replace(/^.*\./, "");
@@ -17,55 +24,128 @@ export const FilterDropdown = ({
   options,
   removeFilter,
   toggleFilterValue,
-}) => (
-  <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))(activeValues)}
-            />
-          ))
-        )(options)}
-      {loading && (
-        <Dimmer active inverted>
-          <Loader size="tiny" />
-        </Dimmer>
-      )}
-    </Dimmer.Dimmable>
-  </Dropdown>
-);
+}) => {
+  const [selected, setSelected] = useState();
+  const [query, setQuery] = useState();
+
+  useEffect(() => {
+    const activeOptions = _.filter((option) =>
+      _.includes(option.value)(activeValues)
+    )(options);
+
+    _.flow(
+      _.reduce((acc, option) => [...acc, option], []),
+      _.uniq,
+      setSelected
+    )(activeOptions);
+  }, [activeValues, options]);
+
+  const handleSearch = (e, { value }) => {
+    e.preventDefault();
+    setQuery(lowerDeburr(value));
+  };
+
+  const toogleSelectedOption = (selectedOption) => {
+    const newSelectedOptions = selected.find(
+      (s) => s.value === selectedOption.value
+    )
+      ? selected.filter((s) => s.value !== selectedOption.value)
+      : [...selected, selectedOption];
+    setSelected(newSelectedOptions);
+    toggleFilterValue({ filter, value: selectedOption.value });
+  };
+
+  const match = (name, query) => _.contains(query)(lowerDeburr(name));
+  const filterSearch = (all) =>
+    query ? _.filter((option) => match(option.text, query))(all) : all;
+
+  const filteredOptions = filterSearch(options);
+
+  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 && options.length >= 8 && (
+            <>
+              <Input
+                icon="search"
+                iconPosition="left"
+                className="search"
+                onKeyDown={(e) => {
+                  if (e.key === " ") {
+                    e.stopPropagation();
+                  }
+                }}
+                onChange={handleSearch}
+                onClick={(e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                }}
+              />
+              {selected &&
+                _.flow(
+                  _.sortBy(accentInsensitivePathOrder("text")),
+                  _.map.convert({ cap: false })((option, i) => (
+                    <FilterItem
+                      key={i}
+                      filter={filter}
+                      option={option}
+                      toggleFilterValue={toogleSelectedOption}
+                      active={_.includes(_.prop("value")(option))(activeValues)}
+                    />
+                  ))
+                )(selected)}
+              <Dropdown.Divider />
+            </>
+          )}
+          {filteredOptions &&
+            _.flow(
+              _.sortBy(accentInsensitivePathOrder("text")),
+              _.map.convert({ cap: false })((option, i) => (
+                <FilterItem
+                  key={i}
+                  filter={filter}
+                  option={option}
+                  toggleFilterValue={toggleFilterValue}
+                  active={_.includes(_.prop("value")(option))(activeValues)}
+                />
+              ))
+            )(filteredOptions)}
+        </>
+        {loading && (
+          <Dimmer active inverted>
+            <Loader size="tiny" />
+          </Dimmer>
+        )}
+      </Dimmer.Dimmable>
+    </Dropdown>
+  );
+};
 
 FilterDropdown.propTypes = {
   activeValues: PropTypes.array,

package/src/components/FilterMultilevelDropdown.js

@@ -14,6 +14,7 @@ import { lowerDeburr } from "../services/sort";
 import DropdownMenuItem from "./DropdownMenuItem";
 
 export const FilterMultilevelDropdown = ({
+  name,
   activeValues,
   closeFilter,
   filter,
@@ -130,6 +131,7 @@ export const FilterMultilevelDropdown = ({
 
   return (
     <Dropdown
+      name={name || "filterMultilevelDropdown"}
       item
       floating
       icon={false}
@@ -193,6 +195,7 @@ export const FilterMultilevelDropdown = ({
 };
 
 FilterMultilevelDropdown.propTypes = {
+  name: PropTypes.string,
   activeValues: PropTypes.array,
   closeFilter: PropTypes.func,
   filter: PropTypes.string,

package/src/components/HierarchyFilterDropdown.js

@@ -72,6 +72,7 @@ const PopulatedHierarchyFilterDropdown = (props) => {
 
   return (
     <FilterMultilevelDropdown
+      name="hierarchyFilterDropdown"
       activeValues={idActiveValues}
       closeFilter={closeFilter}
       filter={filter}
@@ -97,7 +98,7 @@ PopulatedHierarchyFilterDropdown.propTypes = {
 
 const HierarchyFilterDropdown = (props) =>
   _.isEmpty(props.options) ? (
-    <FilterMultilevelDropdown {...props} />
+    <FilterMultilevelDropdown {...props} name="hierarchyFilterDropdown" />
   ) : (
     <PopulatedHierarchyFilterDropdown {...props} />
   );

package/src/components/SearchFilterDropdown.js

@@ -0,0 +1,155 @@
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+
+import _ from "lodash/fp";
+import { useIntl } from "react-intl";
+
+import {
+  Label,
+  Icon,
+  Dropdown,
+  Dimmer,
+  Loader,
+  Input,
+} from "semantic-ui-react";
+import { accentInsensitivePathOrder } from "../services/sort";
+
+const removePrefix = _.replace(/^.*\./, "");
+const SPACE_CODE = 32;
+
+export const SearchFilterDropdown = ({
+  query,
+  searchCallback,
+  placeholder,
+  options,
+  open,
+  loading,
+  activeValues,
+  closeFilter,
+  filter,
+  FilterDataLoader,
+  loaderProps,
+  FilterItem,
+  openFilter,
+  removeFilter,
+  toggleFilterValue,
+  searchFilterDispacher,
+}) => {
+  const [selectedOptions, setSelectedOptions] = useState([]);
+  const { formatMessage } = useIntl();
+
+  const toogleSelectedOption = (selectedOption) => {
+    const newSelectedOptions = selectedOptions.find(
+      (s) => s.id === selectedOption.id
+    )
+      ? selectedOptions.filter((s) => s.id !== selectedOption.id)
+      : [...selectedOptions, selectedOption];
+    setSelectedOptions(newSelectedOptions);
+    toggleFilterValue({ filter, value: selectedOption.id });
+  };
+
+  return (
+    <Dropdown
+      name="searchFilterDropdown"
+      item
+      floating
+      scrolling
+      icon={false}
+      upward={false}
+      trigger={
+        <Label key={filter}>
+          {formatMessage({
+            id: `filters.${filter}`,
+            defaultMessage: removePrefix(filter),
+          })}
+          <Icon
+            name="delete"
+            onClick={(e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              removeFilter({ filter });
+            }}
+          />
+        </Label>
+      }
+      onOpen={() => openFilter({ filter })}
+      onClose={(e) => {
+        // Next line Fix bug: https://github.com/Semantic-Org/Semantic-UI-React/pull/3766
+        if (e?.type === "keydown" && e?.keyCode === SPACE_CODE) return;
+        closeFilter({ filter });
+      }}
+      open={open}
+    >
+      <Dimmer.Dimmable as={Dropdown.Menu} dimmed={loading}>
+        <FilterDataLoader {...loaderProps} />
+        <Input
+          icon="search"
+          iconPosition="left"
+          placeholder={placeholder}
+          // Next line Fix bug: https://github.com/Semantic-Org/Semantic-UI-React/issues/1593
+          onClick={(e) => e.stopPropagation()}
+          value={query}
+          onChange={(_e, data) =>
+            searchFilterDispacher(searchCallback({ query: data.value }))
+          }
+          // Next line Fix bug: https://github.com/Semantic-Org/Semantic-UI-React/issues/4374
+          onKeyDown={(e) => e.keyCode === SPACE_CODE && e.stopPropagation()}
+        />
+        {selectedOptions &&
+          _.flow(
+            _.sortBy(accentInsensitivePathOrder("text")),
+            _.map.convert({ cap: false })((option, i) => (
+              <FilterItem
+                key={i}
+                filter={filter}
+                option={option}
+                toggleFilterValue={toogleSelectedOption}
+                active={_.includes(_.prop("id")(option))(activeValues)}
+              />
+            ))
+          )(selectedOptions)}
+        <Dropdown.Divider />
+        {options &&
+          _.flow(
+            _.sortBy(accentInsensitivePathOrder("text")),
+            _.filter((o) => !_.includes(_.prop("id")(o))(activeValues)),
+            _.map.convert({ cap: false })((option, i) => (
+              <FilterItem
+                key={i}
+                filter={filter}
+                option={option}
+                toggleFilterValue={toogleSelectedOption}
+                active={_.includes(_.prop("id")(option))(activeValues)}
+              />
+            ))
+          )(options)}
+        {loading && (
+          <Dimmer active inverted>
+            <Loader size="tiny" />
+          </Dimmer>
+        )}
+      </Dimmer.Dimmable>
+    </Dropdown>
+  );
+};
+
+SearchFilterDropdown.propTypes = {
+  query: PropTypes.string,
+  searchCallback: PropTypes.func,
+  placeholder: PropTypes.string,
+  options: PropTypes.object,
+  open: PropTypes.bool,
+  loading: PropTypes.bool,
+  activeValues: PropTypes.array,
+  closeFilter: PropTypes.func,
+  filter: PropTypes.string,
+  FilterDataLoader: PropTypes.node,
+  loaderProps: PropTypes.object,
+  FilterItem: PropTypes.object,
+  openFilter: PropTypes.func,
+  removeFilter: PropTypes.func,
+  toggleFilterValue: PropTypes.func,
+  searchFilterDispacher: PropTypes.func,
+};
+
+export default SearchFilterDropdown;

package/src/components/SelectedFilters.js

@@ -5,6 +5,7 @@ import { FormattedMessage } from "react-intl";
 import FilterDropdown from "./FilterDropdown";
 import FilterMultilevelDropdown from "./FilterMultilevelDropdown";
 import HierarchyFilterDropdown from "./HierarchyFilterDropdown";
+import SearchFilterDropdown from "./SearchFilterDropdown";
 import ModalSaveFilter from "./ModalSaveFilter";
 import UserFilters from "./UserFilters";
 
@@ -27,6 +28,8 @@ export const SelectedFilters = ({
   toggleFilterValue,
   userFilters,
   userFilterScope,
+  searchFiltersPropsMapping,
+  searchFilterDispacher,
 }) => (
   <>
     {_.isEmpty(userFilters) ? null : (
@@ -47,10 +50,10 @@ export const SelectedFilters = ({
             <FormattedMessage id="search.applied_filters" />
           </div>
           {selectedFilters.map((filter) => {
+            const isSelectedFilter = _.isEqual(filter, selectedFilter);
+
             const filterType = _.prop(filter)(filterTypes);
-            const options = _.isEqual(filter, selectedFilter)
-              ? selectedFilterValues
-              : null;
+            const options = isSelectedFilter ? selectedFilterValues : null;
 
             const props = {
               key: filter,
@@ -63,13 +66,24 @@ export const SelectedFilters = ({
               removeFilter,
               toggleFilterValue,
             };
-            return filterType === "domain" ? (
-              <FilterMultilevelDropdown {...props} />
-            ) : filterType === "hierarchy" ? (
-              <HierarchyFilterDropdown {...props} />
-            ) : (
-              <FilterDropdown {...props} />
-            );
+
+            switch (filterType) {
+              case "domain":
+                return <FilterMultilevelDropdown {...props} />;
+              case "hierarchy":
+                return <HierarchyFilterDropdown {...props} />;
+              case "search":
+                return (
+                  <SearchFilterDropdown
+                    {...props}
+                    {...searchFiltersPropsMapping[filter]}
+                    open={isSelectedFilter}
+                    searchFilterDispacher={searchFilterDispacher}
+                  />
+                );
+              default:
+                return <FilterDropdown {...props} />;
+            }
           })}
           <a className="resetFilters" onClick={() => resetFilters()}>
             <FormattedMessage id="search.clear_filters" />
@@ -106,6 +120,8 @@ SelectedFilters.propTypes = {
   toggleFilterValue: PropTypes.func,
   userFilters: PropTypes.array,
   userFilterScope: PropTypes.string,
+  searchFiltersPropsMapping: PropTypes.object,
+  searchFilterDispacher: PropTypes.func,
 };
 
 export default SelectedFilters;

package/src/components/StructureFilterItem.js

@@ -0,0 +1,33 @@
+import _ from "lodash/fp";
+import React from "react";
+import PropTypes from "prop-types";
+import { Icon, Dropdown, Segment } from "semantic-ui-react";
+
+const preventDefault = (e, callback) => {
+  e && e.preventDefault();
+  e && e.stopPropagation();
+  callback();
+};
+
+export const StructureFilterItem = ({ active, toggleFilterValue, option }) => (
+  <Dropdown.Item
+    onClick={(e) => preventDefault(e, () => toggleFilterValue(option))}
+    active={active}
+  >
+    <Segment vertical>
+      <Icon name={active ? "check square outline" : "square outline"} />
+      {_.trim(option.name)}
+      <small>{` - (${option.type})`}</small>
+      <br />
+      <small>{option.path.join(" > ")}</small>
+    </Segment>
+  </Dropdown.Item>
+);
+
+StructureFilterItem.propTypes = {
+  active: PropTypes.bool,
+  toggleFilterValue: PropTypes.func,
+  option: PropTypes.object,
+};
+
+export default StructureFilterItem;