@truedat/core 7.6.3 → 7.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/core",
-  "version": "7.6.3",
+  "version": "7.7.0",
   "description": "Truedat Web Core",
   "sideEffects": false,
   "module": "src/index.js",
@@ -48,7 +48,7 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
-    "@truedat/test": "7.6.3",
+    "@truedat/test": "7.7.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "redux-saga-test-plan": "^4.0.6"
@@ -85,5 +85,5 @@
     "slate-react": "^0.22.10",
     "swr": "^2.3.3"
   },
-  "gitHead": "bfd5e53aeb7fb8da6ad19e9403fc6d141fbe9693"
+  "gitHead": "758c330b9a55bf81463dc4d97e4850d713ba8c76"
 }

package/src/components/DateFilter.js

@@ -53,6 +53,7 @@ export const DateFilter = ({
   defaultValues,
   size = "small",
   name = "date",
+  isGrantDateRange = false,
 }) => {
   const intl = useIntl();
   const [type, setType] = useState(defaultValues?.type || "since");
@@ -68,6 +69,10 @@ export const DateFilter = ({
     }
   }, [name, type, unit, value, rangeStart, rangeEnd]);
 
+  const typeOpts = isGrantDateRange
+    ? typeOptions(intl).filter((opt) => opt.key === "range")
+    : typeOptions(intl);
+
   const currentDate = moment();
   return (
     <Form size={size} autoComplete="off">
@@ -77,7 +82,7 @@ export const DateFilter = ({
           <Dropdown
             selection
             value={type}
-            options={typeOptions(intl)}
+            options={typeOpts}
             onChange={(_e, { value }) => setType(value)}
           />
         </Form.Field>
@@ -125,6 +130,7 @@ DateFilter.propTypes = {
   name: PropTypes.string,
   onChange: PropTypes.func,
   size: PropTypes.string,
+  isGrantDateRange: PropTypes.bool,
 };
 
 export default DateFilter;

package/src/components/__tests__/SearchDateFilter.spec.js

@@ -26,6 +26,7 @@ describe("<SearchDateFilter/>", () => {
         "structures.search.placeholder": "placeholder",
         "structures.loading.header": "loading",
         "filter.updated_at": "Updated at",
+        "filter.start_date_end_date": "Period of validity:",
         "dateFilter.years": "Years",
         "dateFilter.months": "Months",
         "dateFilter.weeks": "Weeks",
@@ -51,6 +52,23 @@ describe("<SearchDateFilter/>", () => {
     expect(container).toMatchSnapshot();
   });
 
+  it("matches the latest snapshot for grants", () => {
+    const grantDefaultValues = {
+      active: true,
+      name: "start_date,end_date",
+      type: "range",
+      rangeStart: "",
+      rangeEnd: "", 
+    };
+    const { container } = render(
+      <SearchContextWrapper props={searchProps}>
+        <SearchDateFilter active={true} isGrantDateRange defaultValues={grantDefaultValues} />,
+      </SearchContextWrapper>,
+      renderOpts
+    );
+    expect(container).toMatchSnapshot();
+  });
+
   it("active false", () => {
     const { container } = render(
       <SearchContextWrapper props={searchProps}>

package/src/components/__tests__/__snapshots__/SearchDateFilter.spec.js.snap

@@ -181,3 +181,93 @@ exports[`<SearchDateFilter/> matches the latest snapshot 1`] = `
   ,
 </div>
 `;
+
+exports[`<SearchDateFilter/> matches the latest snapshot for grants 1`] = `
+<div>
+  <form
+    autocomplete="off"
+    class="ui small form"
+  >
+    <div
+      class="fields date filter"
+    >
+      <div
+        class="inline field"
+      >
+        <label>
+          Period of validity:
+        </label>
+        <div
+          aria-expanded="false"
+          class="ui selection dropdown"
+          role="listbox"
+          tabindex="0"
+        >
+          <div
+            aria-atomic="true"
+            aria-live="polite"
+            class="divider text"
+            role="alert"
+          >
+            Range
+          </div>
+          <i
+            aria-hidden="true"
+            class="dropdown icon"
+          />
+          <div
+            class="menu transition"
+          >
+            <div
+              aria-checked="true"
+              aria-selected="true"
+              class="active selected item"
+              role="option"
+              style="pointer-events: all;"
+            >
+              <span
+                class="text"
+              >
+                Range
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="field range"
+      >
+        <div
+          class="fields"
+        >
+          <div
+            class="field"
+          >
+            <div
+              class="ui input"
+            >
+              <input
+                type="date"
+                value=""
+              />
+            </div>
+          </div>
+          <div
+            class="field"
+          >
+            <div
+              class="ui input"
+            >
+              <input
+                type="date"
+                value=""
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </form>
+  ,
+</div>
+`;

package/src/search/SearchDateFilter.js

@@ -9,23 +9,26 @@ const SearchDateFilter = ({
   active,
   defaultValues,
   searchField = "updated_at",
+  isGrantDateRange = false,
 }) => {
-  const dateFormatter = dateFilterFormatter();
-  const dateMust = (dateFilter) => omitBy(isEmpty)(dateFormatter(dateFilter));
+  const dateFormatter = dateFilterFormatter(isGrantDateRange ? "grantDateFilter" : undefined);
 
   const { setDateFilters } = useSearchContext();
 
+  const dateMust = (dateFilter) => omitBy(isEmpty)(dateFormatter(dateFilter));
+
   const onChangeDateFilter = (e) => {
-    const dateFilterFormatted = dateMust({ active, ...e });
+    const dateFilterFormatted = dateMust({ active, isGrantDateRange, ...e });
     setDateFilters(dateFilterFormatted);
   };
 
   return active ? (
     <DateFilter
-      label={<FormattedMessage id="filter.updated_at" />}
+      label={<FormattedMessage id={isGrantDateRange ? "filter.start_date_end_date" : "filter.updated_at"} />}
       name={searchField}
       onChange={onChangeDateFilter}
       defaultValues={defaultValues}
+      isGrantDateRange={isGrantDateRange}
     />
   ) : null;
 };

package/src/search/SearchWidget.js

@@ -6,7 +6,7 @@ import SearchSelectedFilters from "./SearchSelectedFilters";
 import { useSearchContext } from "./SearchContext";
 import SearchDateFilter from "./SearchDateFilter";
 
-export default function SearchWidget({ dateFilter = false, searchField }) {
+export default function SearchWidget({ dateFilter = false, searchField, isGrantDateRange = false }) {
   const { formatMessage } = useIntl();
 
   const {
@@ -25,6 +25,13 @@ export default function SearchWidget({ dateFilter = false, searchField }) {
     value: "1",
   };
 
+  const defaultValuesGrants = {
+    name: "start_date,end_date",
+    type: "range",
+    rangeStart: "",
+    rangeEnd: "", 
+  };
+
   const onClickSearchDateFilter = () => {
     setToggleDateFilter(!toggleDateFilter);
     toggleDateFilter ? setDateFilters({}) : null;
@@ -56,8 +63,9 @@ export default function SearchWidget({ dateFilter = false, searchField }) {
       <SearchSelectedFilters />
       <SearchDateFilter
         active={toggleDateFilter}
-        defaultValues={defaultValues}
+        defaultValues={isGrantDateRange ? defaultValuesGrants : defaultValues}
         searchField={searchField}
+        isGrantDateRange={isGrantDateRange}
       />
     </>
   );

package/src/services/dateFilterFormatter.js

@@ -9,12 +9,15 @@ import {
 } from "lodash/fp";
 
 const relativeDate = ({ unit, value }) => `now-${value}${unit}`;
-const sinceDate = ({ name, ...props }) => ({
+
+const sinceDate = ({ name, ...props }) => ({ 
   [name]: { gte: relativeDate(props) },
 });
+
 const untilDate = ({ name, ...props }) => ({
   [name]: { lt: relativeDate(props) },
 });
+
 const dateRange = ({ name, rangeStart, rangeEnd }) => ({
   [name]: {
     ...(rangeStart ? { gte: rangeStart } : {}),