@truedat/core 6.10.0 → 6.10.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/core",
-  "version": "6.10.0",
+  "version": "6.10.2",
   "description": "Truedat Web Core",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -118,5 +118,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 2.0.3 < 2.2"
   },
-  "gitHead": "803604f0c5267ba435ea3e897873fe2b6f10d624"
+  "gitHead": "817d6538b10d561ae1de4a342bcb9836f07d8026"
 }

package/src/hooks/useUserFilters.js

@@ -1,6 +1,6 @@
 import _ from "lodash/fp";
 import { compile } from "path-to-regexp";
-import useSWR from "swr";
+import useSWR, { mutate } from "swr";
 import useSWRMutations from "swr/mutation";
 import { accentInsensitivePathOrder } from "@truedat/core/services/sort";
 import {
@@ -15,11 +15,18 @@ import {
   API_GET_USER_FILTERS,
 } from "../api";
 
-export const useUserFilters = (type, scope) => {
-  const url = _.flow(
+const buildUrl = (type, scope) =>
+  _.flow(
     () => compile(API_GET_USER_FILTERS)({ type }),
     (baseUrl) => `${baseUrl}${scope ? `?scope=${scope}` : ""}`
   )("");
+
+export const mutateUserFilters = (type, scope) => {
+  const url = buildUrl(type, scope);
+  mutate(url);
+};
+export const useUserFilters = (type, scope) => {
+  const url = buildUrl(type, scope);
   const { data, error, mutate } = useSWR(url, apiJson);
   const userFilters = data?.data?.data;
   _.sortBy(accentInsensitivePathOrder("name"))(userFilters);

package/src/search/ModalSaveFilter.js

@@ -0,0 +1,114 @@
+import _ from "lodash/fp";
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import { Form } from "semantic-ui-react";
+import { FormattedMessage } from "react-intl";
+import { useAuthorized } from "@truedat/core/hooks";
+import {
+  useUserFiltersCreate,
+  mutateUserFilters,
+} from "../hooks/useUserFilters";
+import { ConfirmModal } from "../components/ConfirmModal";
+import { useSearchContext } from "./SearchContext";
+
+export const SaveFilterForm = ({ setFilterName }) => {
+  const onChange = (value) => {
+    setFilterName(value);
+  };
+
+  return (
+    <Form>
+      <Form.Field>
+        <label>
+          <FormattedMessage id="search.saveFilterForm.filter_name" />
+        </label>
+        <Form.Input
+          name="filter_name"
+          onChange={(e, { value }) => onChange(value)}
+        />
+      </Form.Field>
+    </Form>
+  );
+};
+
+SaveFilterForm.propTypes = {
+  setFilterName: PropTypes.func,
+};
+
+export const ModalSaveFilter = () => {
+  const [filterName, setFilterName] = useState("");
+  const authorized = useAuthorized();
+
+  const {
+    allActiveFilters: activeFilters,
+    userFiltersType,
+    userFilterScope,
+  } = useSearchContext();
+
+  const { trigger: saveFilters } = useUserFiltersCreate(userFiltersType);
+
+  const handleSubmitGlobal = (e) => doSubmit(e, true);
+  const handleSubmit = (e) => doSubmit(e, false);
+
+  const doSubmit = (e, isGlobal) => {
+    e.preventDefault();
+    const requestData = {
+      user_search_filter: {
+        name: filterName,
+        filters: activeFilters,
+        is_global: isGlobal,
+        scope: userFilterScope,
+      },
+    };
+    saveFilters(requestData).then(() => {
+      mutateUserFilters(userFiltersType);
+    });
+  };
+
+  const actions = [
+    {
+      key: "no",
+      secondary: true,
+      content: <FormattedMessage id="search.save_filter.cancel" />,
+    },
+    {
+      key: "yes",
+      primary: true,
+      disabled: _.isEmpty(filterName),
+      content: <FormattedMessage id="search.save_filter.save" />,
+      onClick: handleSubmit,
+    },
+    ...(authorized
+      ? [
+          {
+            key: "yes_global",
+            primary: true,
+            disabled: _.isEmpty(filterName),
+            content: <FormattedMessage id="search.save_filter.save_global" />,
+            onClick: handleSubmitGlobal,
+          },
+        ]
+      : []),
+  ];
+
+  return (
+    <ConfirmModal
+      actions={actions}
+      icon="save"
+      trigger={
+        <a className="resetFilters">
+          <FormattedMessage id="search.save_filters" />
+        </a>
+      }
+      header={
+        <FormattedMessage id="search.filters.actions.save.confirmation.header" />
+      }
+      content={
+        <SaveFilterForm setFilterName={setFilterName} filterName={filterName} />
+      }
+      onConfirm={handleSubmit}
+    />
+  );
+};
+
+export default ModalSaveFilter;

package/src/search/Pagination.js

@@ -0,0 +1,29 @@
+import React from "react";
+import { Pagination as SemanticPagination } from "semantic-ui-react";
+import { useSearchContext } from "./SearchContext";
+
+export const MAX_PAGES = 100;
+
+export const Pagination = () => {
+  const { count, size, page: activePage, selectPage } = useSearchContext();
+  const totalPages = Math.ceil(count / size);
+
+  return totalPages > MAX_PAGES ? (
+    <SemanticPagination
+      activePage={activePage}
+      boundaryRange={0}
+      lastItem={null}
+      totalPages={MAX_PAGES}
+      onPageChange={(_e, { activePage }) => selectPage({ activePage })}
+    />
+  ) : totalPages ? (
+    <SemanticPagination
+      activePage={activePage}
+      disabled={totalPages <= 1}
+      totalPages={totalPages}
+      onPageChange={(_e, { activePage }) => selectPage({ activePage })}
+    />
+  ) : null;
+};
+
+export default Pagination;

package/src/search/SearchContext.js

@@ -17,7 +17,8 @@ import { makeOption } from "@truedat/core/services/i18n";
 const SearchContext = createContext();
 
 export const SearchContextProvider = (props) => {
-  const inicialDefaultFilters = _.prop("defaultFilters")(props);
+  const initialDefaultFilters = _.prop("defaultFilters")(props);
+  const initialActiveFilters = _.propOr({}, "defaultSelectedFilters")(props);
   const children = _.prop("children")(props);
   const initialSortColumn = _.prop("initialSortColumn")(props);
   const initialSortDirection = _.prop("initialSortDirection")(props);
@@ -40,29 +41,36 @@ export const SearchContextProvider = (props) => {
   const [loadingFilters, setLoadingFilters] = useState(true);
   const [query, setQuery] = useState("");
   const [activeFilterName, setActiveFilterName] = useState([]);
-  const [allActiveFilters, setAllActiveFilters] = useState({});
+  const [allActiveFilters, setAllActiveFilters] =
+    useState(initialActiveFilters);
   const [hiddenFilters, setHiddenFilters] = useState({});
   const [dateFilters, setDateFilters] = useState({});
   const [toggleDateFilter, setToggleDateFilter] = useState(false);
-  const [defaultFilters, setDefaultFilters] = useState(inicialDefaultFilters);
+  const [defaultFilters, setDefaultFilters] = useState(initialDefaultFilters);
   const [filterParams, setFilterParams] = useState({});
   const [sortColumn, setSortColumn] = useState(initialSortColumn);
   const [sortDirection, setSortDirection] = useState(initialSortDirection);
   const [page, setPage] = useState(1);
   const [size, setSize] = useState(pageSize);
   const [count, setCount] = useState(0);
+
+  const [onSearchChange, setOnSearchChange] = useState();
+
   useEffect(() => {
-    if (inicialDefaultFilters !== defaultFilters) {
-      setDefaultFilters(inicialDefaultFilters);
+    if (initialDefaultFilters !== defaultFilters) {
+      setDefaultFilters(initialDefaultFilters);
     }
-  }, [inicialDefaultFilters]);
+  }, [initialDefaultFilters]);
 
   //STATE FUNCTIONS
   const addFilter = ({ filter }) => {
     setAllActiveFilters({ ...allActiveFilters, [filter]: [] });
     setActiveFilterName(filter);
   };
-  const resetFilters = () => setAllActiveFilters({});
+  const resetFilters = () => {
+    setAllActiveFilters({});
+    onSearchChange && onSearchChange();
+  };
 
   const openFilter = ({ filter }) => setActiveFilterName(filter);
   const closeFilter = () => {
@@ -72,6 +80,7 @@ export const SearchContextProvider = (props) => {
   const removeFilter = ({ filter }) => {
     setAllActiveFilters(_.omit(filter)(allActiveFilters));
     setActiveFilterName(activeFilterName == filter ? null : activeFilterName);
+    onSearchChange && onSearchChange();
   };
 
   const toggleFilterValue = ({ filter, value }) => {
@@ -83,6 +92,7 @@ export const SearchContextProvider = (props) => {
       : _.union([value])(values);
 
     setAllActiveFilters({ ...allActiveFilters, [filter]: newValue });
+    onSearchChange && onSearchChange();
   };
 
   const toggleHiddenFilterValue = ({ filter, value }) => {
@@ -98,9 +108,7 @@ export const SearchContextProvider = (props) => {
 
   //CALCULATIONS ON STATE
 
-  const selectPage = (props) => {
-    setPage(props.activePage);
-  };
+  const selectPage = ({ activePage }) => setPage(activePage);
 
   const setCountData = (headers) => {
     setCount(parseInt(_.propOr("0", "x-total-count")(headers)));
@@ -144,21 +152,23 @@ export const SearchContextProvider = (props) => {
     () => ({
       ...defaultFilters,
       ...dateFilters,
+      ...hiddenFilters,
       ..._.pickBy(_.negate(_.isEmpty))(allActiveFilters),
     }),
-    [allActiveFilters, defaultFilters, dateFilters]
+    [allActiveFilters, defaultFilters, dateFilters, hiddenFilters]
   );
 
   const filterMust = useMemo(
     () => ({
       ...defaultFilters,
+      ...hiddenFilters,
       ..._.flow(
         _.pickBy(_.negate(_.isEmpty)),
         _.omit(activeFilterName)
       )(allActiveFilters),
     }),
 
-    [allActiveFilters, activeFilterName, defaultFilters]
+    [allActiveFilters, activeFilterName, defaultFilters, hiddenFilters]
   );
 
   const sort = useMemo(
@@ -264,7 +274,10 @@ export const SearchContextProvider = (props) => {
     setSortColumn(query == "" ? initialSortColumn : "_score");
     setSortDirection(query == "" ? initialSortDirection : "descending");
     setQuery(query);
+    onSearchChange && onSearchChange();
   };
+
+  const cleanQuery = () => setQuery("");
   const context = {
     disabled: false,
     loadingFilters,
@@ -289,8 +302,10 @@ export const SearchContextProvider = (props) => {
     removeFilter,
     toggleFilterValue,
     toggleHiddenFilterValue,
+    setHiddenFilters,
     searchMust,
     setQuery: setQueryAndScoreSort,
+    cleanQuery,
     setAllActiveFilters,
     allActiveFilters,
     filters,
@@ -318,6 +333,8 @@ export const SearchContextProvider = (props) => {
 
     userFiltersType,
     userFilterScope,
+
+    setOnSearchChange,
   };
 
   return (

package/src/search/SearchSelectedFilters.js

@@ -1,8 +1,7 @@
 import _ from "lodash/fp";
 import React, { useState } from "react";
 import { FormattedMessage } from "react-intl";
-import { useUserFilters, useUserFiltersCreate } from "../hooks/useUserFilters";
-import ModalSaveFilter from "../components/ModalSaveFilter";
+import ModalSaveFilter from "./ModalSaveFilter";
 import UserFilters from "./UserFilters";
 import FilterDropdown from "./FilterDropdown";
 import FilterQueryDropdown from "./FilterQueryDropdown";
@@ -20,38 +19,14 @@ export default function SearchSelectedFilters() {
     filterTypes,
     activeFilterName,
     activeFilterValues,
-    allActiveFilters,
     userFiltersType,
-    userFilterScope,
   } = context;
   const [selectedUserFilter, setSelectedUserFilter] = useState();
-  const { trigger: saveFilters } = useUserFiltersCreate(userFiltersType);
-  const { userFilters, loading, mutate } = useUserFilters(
-    userFiltersType,
-    userFilterScope
-  );
-
-  const handleSubmit = ({ filterName, filters, isGlobal, scope }) => {
-    const requestData = {
-      user_search_filter: {
-        name: filterName,
-        filters,
-        is_global: isGlobal,
-        scope: scope,
-      },
-    };
-    saveFilters(requestData).then(() => {
-      mutate();
-    });
-  };
 
   return (
     <>
-      {!_.isEmpty(userFilters) ? (
+      {userFiltersType ? (
         <UserFilters
-          mutate={mutate}
-          userFilters={userFilters}
-          disabled={loading}
           setSelectedUserFilter={setSelectedUserFilter}
           selectedUserFilter={selectedUserFilter}
         />
@@ -94,11 +69,7 @@ export default function SearchSelectedFilters() {
             >
               <FormattedMessage id="search.clear_filters" />
             </a>
-            <ModalSaveFilter
-              saveFilters={handleSubmit}
-              activeFilters={allActiveFilters}
-              scope={userFilterScope}
-            />
+            {userFiltersType ? <ModalSaveFilter /> : null}
           </>
         )}
       </div>

package/src/search/UserFilters.js

@@ -1,11 +1,11 @@
 import _ from "lodash/fp";
-import React, { useState } from "react";
+import React from "react";
 import PropTypes from "prop-types";
 import { Label, Icon } from "semantic-ui-react";
 import { FormattedMessage } from "react-intl";
 import { useAuthorized } from "@truedat/core/hooks";
 import { useSearchContext } from "@truedat/core/search/SearchContext";
-import { useUserFiltersDelete } from "../hooks/useUserFilters";
+import { useUserFilters, useUserFiltersDelete } from "../hooks/useUserFilters";
 import { ConfirmModal } from "../components/ConfirmModal";
 
 export const DeleteModal = ({ userFilter, userFiltersType, mutate }) => {
@@ -57,16 +57,20 @@ DeleteModal.propTypes = {
   mutate: PropTypes.func,
 };
 
-export const UserFilters = ({
-  mutate,
-  userFilters,
-  disabled,
-  setSelectedUserFilter,
-  selectedUserFilter,
-}) => {
+export const UserFilters = ({ setSelectedUserFilter, selectedUserFilter }) => {
   const authorized = useAuthorized();
-  const { userFiltersType, resetFilters, setAllActiveFilters } =
-    useSearchContext();
+  const {
+    userFiltersType,
+    userFilterScope,
+    resetFilters,
+    setAllActiveFilters,
+  } = useSearchContext();
+
+  const {
+    userFilters,
+    loading: disabled,
+    mutate,
+  } = useUserFilters(userFiltersType, userFilterScope);
 
   const sortedUserFilters = _.orderBy(
     ["is_global", "id"],
@@ -124,13 +128,7 @@ export const UserFilters = ({
 
 UserFilters.propTypes = {
   selectedUserFilter: PropTypes.string,
-  userFilters: PropTypes.array,
-  disabled: PropTypes.bool,
-  userFilterScope: PropTypes.string,
-  mutate: PropTypes.func,
-  applyUserFilter: PropTypes.func,
-  deleteUserFilter: PropTypes.func,
-  resetFilters: PropTypes.func,
+  setSelectedUserFilter: PropTypes.func,
 };
 
 export default UserFilters;

package/src/search/__tests__/ModalSaveFilter.spec.js

@@ -0,0 +1,48 @@
+import React from "react";
+import userEvent from "@testing-library/user-event";
+import { render } from "@truedat/test/render";
+import messages from "@truedat/core/messages";
+import SearchContext from "@truedat/core/search/SearchContext";
+import ModalSaveFilter from "../ModalSaveFilter";
+
+const renderOpts = {
+  messages: {
+    en: {
+      ...messages.en,
+    },
+  },
+};
+
+describe("<ModalSaveFilter /> admin", () => {
+  jest.mock("../../hooks", () => ({
+    ...jest.requireActual("../../hooks"),
+    useAuthorized: jest.fn(() => true),
+  }));
+
+  const searchProps = {
+    allActiveFilters: {},
+    userFiltersType: "filters_type",
+    userFilterScope: "filters_scope",
+  };
+
+  it("matches the latest snapshot", () => {
+    const { container } = render(
+      <SearchContext.Provider value={searchProps}>
+        <ModalSaveFilter />
+      </SearchContext.Provider>,
+      renderOpts
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  it("matches the latest snapshot with opened modal", async () => {
+    const { container, findByText } = render(
+      <SearchContext.Provider value={searchProps}>
+        <ModalSaveFilter />
+      </SearchContext.Provider>,
+      renderOpts
+    );
+    userEvent.click(await findByText(/save/i));
+    expect(container).toMatchSnapshot();
+  });
+});

package/src/search/__tests__/__snapshots__/ModalSaveFilter.spec.js.snap

@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<ModalSaveFilter /> admin matches the latest snapshot 1`] = `
+<div>
+  <a
+    class="resetFilters"
+  >
+    Save
+  </a>
+</div>
+`;
+
+exports[`<ModalSaveFilter /> admin matches the latest snapshot with opened modal 1`] = `
+<div>
+  <a
+    class="resetFilters"
+  >
+    Save
+  </a>
+</div>
+`;