Merge branch 'release/v1.0.84'

Author: nnkogift

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hisptz/react-ui",
   "homepage": "https://hisptz.github.io/react-ui",
-  "version": "1.0.83",
+  "version": "1.0.84",
   "description": "A collection of reusable complex DHIS2 react ui components.",
   "license": "BSD-3-Clause",
   "scripts": {
@@ -37,7 +37,7 @@
     "@dhis2/cli-utils-cypress": "^9.0.2",
     "@dhis2/cypress-commands": "^9.0.2",
     "@dhis2/cypress-plugins": "^9.0.2",
-    "@dhis2/ui": "^8.6.2",
+    "@dhis2/ui": "^8.7.6",
     "@hookform/devtools": "^4.1.0",
     "@storybook/addon-actions": "^6.5.9",
     "@storybook/addon-essentials": "^6.5.9",
@@ -83,7 +83,7 @@
   "dependencies": {
     "@google/earthengine": "^0.1.330",
     "@hisptz/dhis2-utils": "^1.0.0-alpha.2",
-    "@iapps/period-utilities": "^1.0.0-beta.7",
+    "@iapps/period-utilities": "1.0.0-beta.7",
     "@material-ui/core": "^4.12.4",
     "@material-ui/icons": "^4.11.3",
     "async-es": "^3.2.4",
@@ -97,7 +97,7 @@
     "leaflet": "^1.8.0",
     "leaflet-easyprint": "^2.1.9",
     "leaflet.fullscreen": "^2.4.0",
-    "luxon": "^2.4.0",
+    "luxon": "^3.2.1",
     "material-ui": "^0.20.2",
     "print-message": "^3.0.1",
     "react-beautiful-dnd": "^13.1.0",

src/components/OrgUnitSelector/OrgUnitSelector.stories.tsx

@@ -12,6 +12,22 @@ Default.args = {
     console.log(value);
   },
 };
+
+export const SelectedOrgUnit = Template.bind({});
+SelectedOrgUnit.args = {
+  value: {
+    orgUnits: [
+      {
+        path: "/ImspTQPwCqd/Vth0fbpFcsO/LhaAPLxdSFH/AvGz949akv4",
+        children: [],
+        id: "AvGz949akv4",
+      },
+    ],
+  },
+  onUpdate: (value) => {
+    console.log(value);
+  },
+};
 export const SingleSelection = Template.bind({});
 SingleSelection.args = {
   value: { orgUnits: [] },

src/components/OrgUnitSelector/components/OrgUnitSearch/index.tsx

@@ -7,12 +7,14 @@ import { useFilterOrgUnits } from "../../hooks";
 export function OrgUnitSearch({ searchable }: { searchable?: boolean }) {
   const [keyword, setKeyword] = useState<string | undefined>();
   const { onSearch } = useFilterOrgUnits();
-  const search = useRef(onSearch ? debounce(onSearch, 500) : null);
+  const search = onSearch;
 
   const onSearchChange = useCallback(
     ({ value }: { value: string }) => {
       setKeyword(value);
-      search.current?.(value);
+      if (onSearch) {
+        onSearch(value);
+      }
     },
     [search]
   );

src/components/OrgUnitSelector/components/OrgUnitTree/index.tsx

@@ -37,6 +37,8 @@ function Tree({
   const { searchMode, searchValue, expanded, filtering, filteredOrgUnits, handleExpand } = useFilterOrgUnits();
   const selectedOrgUnits = value?.orgUnits ?? [];
 
+  console.log(expanded);
+
   const onSelect = (orgUnit: any) => {
     const orgUnitLevel = orgUnit.level ?? orgUnit.path.split("/").length - 1;
     const allowSelection = limitSelectionToLevels?.includes(orgUnitLevel) ?? true;
@@ -75,6 +77,7 @@ function Tree({
         </div>
       ) : (
         <OrganisationUnitTree
+          initiallyExpanded={expanded}
           forceReload
           filter={filteredOrgUnits}
           disableSelection={disableSelections}

src/components/OrgUnitSelector/states/filter.tsx

@@ -1,7 +1,7 @@
 import { useDataQuery } from "@dhis2/app-runtime";
 import type { OrganisationUnit } from "@hisptz/dhis2-utils";
-import { compact, isEmpty } from "lodash";
-import React, { createContext, ReactNode, useCallback, useEffect, useMemo, useState } from "react";
+import { compact, debounce, isEmpty } from "lodash";
+import React, { createContext, ReactNode, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { orgUnitSearchQuery } from "../services";
 import { sanitizeExpansionPaths, sanitizeFilters } from "../utils";
 
@@ -73,14 +73,12 @@ export function FilterStateProvider({
     }
   }, [orgUnitsPaths]);
 
-  const onSearch = useCallback(
-    async (keyword: string) => {
+  const onSearch = useRef(
+    debounce(async (keyword: string) => {
       setSearchValue(keyword);
       return await getSearch(keyword);
-    },
-    [getSearch]
-  );
-
+    }, 500)
+  )?.current;
   const handleExpand = ({ path }: { path: string }) => {
     setExpanded((prevState) => {
       if (prevState.includes(path)) {

src/components/OrgUnitSelector/utils/index.ts

@@ -118,5 +118,16 @@ export const sanitizeFilters = (filters: Array<OrganisationUnit>): Array<string>
 };
 
 export const sanitizeExpansionPaths = (orgUnitPaths: string[]): string[] => {
-  return orgUnitPaths.map((path: string) => path.split("/").slice(0, -1).join("/"));
+  return uniq(
+    orgUnitPaths
+      .map((path: string) => {
+        const orgUnits = path.split("/").filter((value) => !isEmpty(value));
+        return orgUnits
+          .map((orgUnit, index) => {
+            return `/${orgUnits.slice(0, -(index + 1)).join("/")}`;
+          })
+          .filter((value) => value !== "/");
+      })
+      .flat()
+  );
 };

src/components/PeriodSelector/PeriodSelector.stories.tsx

@@ -100,6 +100,23 @@ SelectedPeriods.args = {
   calendar: CalendarTypes.GREGORIAN,
 };
 
+export const WithAllowedFuturePeriods = Template.bind({});
+WithAllowedFuturePeriods.args = {
+  onSelect: ({ items }) => {
+    console.log(items);
+  },
+  enableDateRange: true,
+  selectedPeriods: [
+    {
+      id: "2022",
+      name: "2022",
+    },
+  ],
+  allowFuturePeriods: false,
+  excludedPeriodTypes: [],
+  calendar: CalendarTypes.GREGORIAN,
+};
+
 export const DateRange = Template.bind({});
 DateRange.args = {
   onSelect: ({ items }) => {

src/components/PeriodSelector/components/CalendarSpecificPeriodDimension/index.tsx

@@ -8,6 +8,19 @@ import { CalendarTypes } from "./constants/calendar";
 import { PeriodCategories } from "./constants/period";
 import { CalendarSpecificPeriodSelectorProps } from "./interfaces/props";
 import "../../../../styles/styles.css";
+import { DateTime, Interval } from "luxon";
+
+function filterFuturePeriods(periods: PeriodInterface[]): PeriodInterface[] {
+  return periods.filter((period) => {
+    if (period.startDate && period.endDate) {
+      const startDate = DateTime.fromFormat(period.startDate, "dd-MM-yyyy");
+      const endDate = DateTime.fromFormat(period.endDate, "dd-MM-yyyy");
+      return startDate.diffNow("days").days < 0 || Interval.fromDateTimes(startDate, endDate).contains(DateTime.now());
+    } else {
+      return true;
+    }
+  });
+}
 
 export default function CalendarSpecificPeriodSelector({
   excludedPeriodTypes,
@@ -17,6 +30,7 @@ export default function CalendarSpecificPeriodSelector({
   excludeFixedPeriods,
   excludeRelativePeriods,
   singleSelection,
+  allowFuturePeriods,
 }: CalendarSpecificPeriodSelectorProps) {
   const periodInstance = new Period().setCalendar(CalendarTypes.ETHIOPIAN);
 
@@ -78,13 +92,21 @@ export default function CalendarSpecificPeriodSelector({
       }
       if (selectedFixedPeriodType) {
         if (selectedPeriodCategory.key === PeriodCategories.FIXED.key) {
-          return new Period()
+          const periods = new Period()
             .setPreferences({ openFuturePeriods: 4, allowFuturePeriods: true })
             .setCalendar(calendar)
             .setYear(year)
             .setType(selectedFixedPeriodType)
             .get()
             .list();
+
+          console.log(periods);
+
+          if (allowFuturePeriods) {
+            return periods;
+          } else {
+            return filterFuturePeriods(periods);
+          }
         }
       }
     }

src/components/PeriodSelector/components/CalendarSpecificPeriodDimension/interfaces/props.ts

@@ -9,4 +9,5 @@ export interface CalendarSpecificPeriodSelectorProps {
   selectedPeriods?: Array<PeriodInterface>;
   excludeRelativePeriods?: boolean;
   excludeFixedPeriods?: boolean;
+  allowFuturePeriods?: boolean;
 }

src/components/PeriodSelector/index.tsx

@@ -18,6 +18,7 @@ export default function PeriodSelector({
   singleSelection,
   enableDateRange,
   defaultInputType,
+  allowFuturePeriods,
 }: PeriodSelectorProps) {
   const initialInputType = useMemo(() => {
     if (!isEmpty(selectedPeriods)) {
@@ -61,6 +62,7 @@ export default function PeriodSelector({
       )}
       {inputType === "period" && (
         <CalendarSpecificPeriodSelector
+          allowFuturePeriods={allowFuturePeriods}
           singleSelection={singleSelection}
           excludedPeriodTypes={excludedPeriodTypes ?? []}
           calendar={calendar ?? CalendarTypes.GREGORIAN}