Ethiopian calendar support: use period picker instead of date picker

BLSQ · Nov 13, 2023 · 48568d6 · 48568d6
1 parent 9c1b26a
commit 48568d6
Show file tree

Hide file tree

Showing 4 changed files with 84 additions and 53 deletions.
diff --git a/src/components/contracts/Contract.js b/src/components/contracts/Contract.js
@@ -28,7 +28,7 @@ class Contract {
     const startMonthPeriods = DatePeriods.split(period, "monthly");
 
     return startMonthPeriods.some(
-      (startMonthPeriod) => this.startPeriod <= startMonthPeriod && startMonthPeriod <= this.endPeriod,
+      (startMonthPeriod) => this.startPeriod <= startMonthPeriod && (this.endPeriod == undefined || startMonthPeriod <= this.endPeriod),
     );
   }
   overlaps(contract) {

diff --git a/src/components/contracts/PeriodPicker.js b/src/components/contracts/PeriodPicker.js
@@ -1,4 +1,4 @@
-import { FormControl, TextField, makeStyles } from "@material-ui/core";
+import { Divider, FormControl, MenuItem, TextField, makeStyles } from "@material-ui/core";
 import { Autocomplete, createFilterOptions } from "@material-ui/lab";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -23,14 +23,15 @@ const minYear = 1970;
 const maxYear = new Date().getFullYear() + 40;
 
 const PeriodPicker = ({ currentPeriod, mode, fieldName, min, max, onPeriodChange }) => {
-  const indexOfMonth = mode === "beginning" ? 0 : 2;
+  const indexOfMonths = mode === "active" ? [0, 1, 2] : mode === "beginning" ? [0] : [2];
   const classes = useStyles();
   const { t } = useTranslation();
-  const defaultPeriod = currentPeriod || "" + new Date().getFullYear() + (mode == "beginning" ? "01" : "12");
+  const defaultPeriod =
+    mode === "active"
+      ? currentPeriod || ""
+      : currentPeriod || "" + new Date().getFullYear() + (mode == "beginning" ? "01" : "12");
 
-  const [period, setPeriod] = useState(undefined);
-
-  const visibibleQuarters = [];
+  let visibibleQuarters = [];
   let year = minYear;
   while (year <= maxYear) {
     DatePeriods.split("" + year, "quarterly").forEach((p) => visibibleQuarters.push(p));
@@ -41,15 +42,32 @@ const PeriodPicker = ({ currentPeriod, mode, fieldName, min, max, onPeriodChange
     visibibleQuarters.reverse();
   }
 
+  if (mode === "active") {
+    const currentQuarters = DatePeriods.split(
+      DatePeriods.split(DatePeriods.currentQuarter(), "yearly")[0],
+      "quarterly",
+    );
+    visibibleQuarters = currentQuarters.concat(visibibleQuarters);
+  }
+
+  if (!["beginning", "end", "active"].includes(mode)) {
+    throw new Error("non support mode for period picker '" + mode + "'");
+  }
+  let index = 0;
+
   const visibleMonths = visibibleQuarters
-    .map((period) => {
-      const monthPeriod = DatePeriods.split(period, "monthly")[indexOfMonth];
-      return {
-        value: monthPeriod,
-        label: DatePeriods.displayName(monthPeriod, "monthYear"),
-        monthPeriod: monthPeriod,
-        quarterPeriod: period,
-      }; // +" / "+
+    .flatMap((period) => {
+      return indexOfMonths.map((indexOfMonth) => {
+        const monthPeriod = DatePeriods.split(period, "monthly")[indexOfMonth];
+        index = index + 1;
+        return {
+          value: monthPeriod,
+          label: DatePeriods.displayName(monthPeriod, "monthYear"),
+          monthPeriod: monthPeriod,
+          quarterPeriod: period,
+          index: index,
+        };
+      });
     })
     .filter((p) => {
       if (min && p.monthPeriod < min) {
@@ -60,6 +78,9 @@ const PeriodPicker = ({ currentPeriod, mode, fieldName, min, max, onPeriodChange
       }
       return true;
     });
+
+  const [period, setPeriod] = useState(undefined);
+
   const handleChange = (newperiod) => {
     setPeriod(newperiod);
     onPeriodChange(newperiod ? newperiod.monthPeriod : undefined);
@@ -72,19 +93,29 @@ const PeriodPicker = ({ currentPeriod, mode, fieldName, min, max, onPeriodChange
     },
   });
   const current = visibleMonths.filter((v) => v.monthPeriod === defaultPeriod);
-
   return (
     <FormControl>
       <Autocomplete
+        key={"periodpicker-" + currentPeriod}
         fullWidth
         noOptionsText={t("noResult")}
-        multiple={false}
-        value={period}
+        value={current[0]}
         defaultValue={current[0]}
         options={visibleMonths}
         getOptionLabel={(option) => option.label}
         getOptionSelected={(option) => option.value}
         filterOptions={filterOptions}
+        renderOption={(option, props2) => {
+          const { key, ...otherProps } = props2;
+          return (
+            <span>
+              <li key={option.index} {...otherProps} title={option.monthPeriod}>
+                {option.label}
+              </li>
+              {option.index == 12 && <hr />}
+            </span>
+          );
+        }}
         onChange={(event, newValue) => handleChange(newValue)}
         renderInput={(params) => (
           <TextField
@@ -97,6 +128,7 @@ const PeriodPicker = ({ currentPeriod, mode, fieldName, min, max, onPeriodChange
             InputLabelProps={{
               className: classes.label,
             }}
+            title={current[0]?.monthPeriod }
             placeholder=""
           />
         )}

diff --git a/src/components/contracts/filters.js b/src/components/contracts/filters.js
@@ -24,19 +24,16 @@ import PluginRegistry from "../core/PluginRegistry";
 export const endAtFilter = {
   id: "contract_end_date_eq",
   key: "contracts.endsAt",
-  type: "date",
+  type: "monthlyPeriod",
   column: 3,
   value: null,
-  /* value is a string like "12/31/2020"*/
+  /* value is a string like "202001"*/
   onFilter: (value, contracts) => {
     if (!value) {
       return contracts;
     }
-    const filterPeriodCompents = value.split("/");
-    const filterPeriod = filterPeriodCompents[2] + filterPeriodCompents[0];
-
     const filteredContracts = contracts.filter((c) => {
-      return c.endPeriod == filterPeriod;
+      return c.endPeriod == value;
     });
     return filteredContracts;
   },
@@ -46,16 +43,15 @@ export const endAtFilter = {
 export const activeAtFilter = {
   id: "active_at",
   key: "contracts.activeAt",
-  type: "date",
+  type: "monthlyPeriod",
   column: 2,
   value: null,
   onFilter: (value, contracts) => {
     if (!value) {
       return contracts;
     }
     const filteredContracts = contracts.filter((c) => {
-      const contractDates = getContractDates(c);
-      return moment(value).isBetween(contractDates.startDate, contractDates.endDate);
+      return c.matchPeriod(value)
     });
     return filteredContracts;
   },
@@ -160,13 +156,15 @@ const defaultFilters = (currentUser) => {
       id: "only_sub_contracts",
       key: "contracts.onlySubContracts",
       type: "checkbox",
-      column: 2,
+      column: 1,
       value: false,
       onFilter: (onlySubContracts, contracts, contractsOverlaps) => {
         if (!onlySubContracts) {
           return contracts;
         }
-        return contracts.filter((c) => c.fieldValues.contract_main_orgunit && c.fieldValues.contract_main_orgunit !== "");
+        return contracts.filter(
+          (c) => c.fieldValues.contract_main_orgunit && c.fieldValues.contract_main_orgunit !== "",
+        );
       },
       urlEncode: (value) => (value ? "true" : "false"),
       urlDecode: (value) => value === "true",

diff --git a/src/components/shared/Filter.js b/src/components/shared/Filter.js
@@ -21,6 +21,7 @@ import InfoIcon from "@material-ui/icons/Info";
 import Clear from "@material-ui/icons/Clear";
 import { KeyboardDatePicker } from "@material-ui/pickers";
 import OuSearch from "./OuSearch";
+import PeriodPicker from "../contracts/PeriodPicker";
 
 const styles = (theme) => ({
   formControl: {
@@ -61,10 +62,7 @@ const Filter = ({ filter, setFilterValue, onSearch, t }) => {
     case "search": {
       return (
         <FormControl className={classes.formControl}>
-          <InputLabel
-            shrink={filter.value !== ""}
-            className={classes.searchLabel}
-          >
+          <InputLabel shrink={filter.value !== ""} className={classes.searchLabel}>
             {t(filter.key)}
           </InputLabel>
           <Input
@@ -111,12 +109,7 @@ const Filter = ({ filter, setFilterValue, onSearch, t }) => {
               className: classes.input,
             }}
             value={filter.value === "" ? null : filter.value}
-            onChange={(newValue) =>
-              setFilterValue(
-                filter.id,
-                newValue ? newValue.format("MM/DD/YYYY") : null,
-              )
-            }
+            onChange={(newValue) => setFilterValue(filter.id, newValue ? newValue.format("MM/DD/YYYY") : null)}
           />
 
           {filter.value && (
@@ -134,11 +127,9 @@ const Filter = ({ filter, setFilterValue, onSearch, t }) => {
       );
     }
     case "select": {
-      let shrink =
-        (filter.value && filter.value !== "") || selectInputValue !== "";
+      let shrink = (filter.value && filter.value !== "") || selectInputValue !== "";
       if (filter.multi) {
-        shrink =
-          (filter.value && filter.value.length > 0) || selectInputValue !== "";
+        shrink = (filter.value && filter.value.length > 0) || selectInputValue !== "";
       }
       return (
         <FormControl className={classes.formControl}>
@@ -183,9 +174,7 @@ const Filter = ({ filter, setFilterValue, onSearch, t }) => {
             <Checkbox
               color="primary"
               checked={filter.value === true}
-              onChange={(event) =>
-                setFilterValue(filter.id, event.target.checked)
-              }
+              onChange={(event) => setFilterValue(filter.id, event.target.checked)}
               value={filter.value}
             />
           }
@@ -198,17 +187,29 @@ const Filter = ({ filter, setFilterValue, onSearch, t }) => {
         <OuSearch
           defaultValue={filter.value}
           label={t("limit_org_unit_under")}
-          onChange={
-            (orgunit) => {
-              setFilterValue(filter.id, orgunit ? orgunit.id : undefined)
-            }
-          }
+          onChange={(orgunit) => {
+            setFilterValue(filter.id, orgunit ? orgunit.id : undefined);
+          }}
         />
-      )
+      );
+    }
+
+    case "monthlyPeriod": {
+      return (
+        <div style={{ marginTop: "5px" }}>
+          <PeriodPicker
+            fieldName={t(filter.key)}
+            currentPeriod={filter.value}
+            mode="active"
+            onPeriodChange={(p) => setFilterValue(filter.id, p)}
+          ></PeriodPicker>
+          <br></br>
+        </div>
+      );
     }
 
     default:
-      return "unsupported "+filter.type;
+      return "unsupported " + filter.type;
   }
 };
 Filter.defaultProps = {