ONI-125: Cookie for calendar type added. Date display added for all searches.

src/components/RequireAuth.js

@@ -28,6 +28,7 @@ import FormControlLabel from '@material-ui/core/FormControlLabel';
 import { Switch } from "@material-ui/core";
 import { toggleCurrentCalendarType } from "../actions"
 import { useDispatch } from 'react-redux';
+import { useTranslations } from "../helpers/i18n";
 
 export const APP_BAR_CONTRIBUTION_KEY = "core.AppBar";
 export const MAIN_MENU_CONTRIBUTION_KEY = "core.MainMenu";
@@ -215,10 +216,14 @@ const RequireAuth = (props) => {
   );
 
   const isAppBarMenu = useMemo(() => theme.menu.variant.toUpperCase() === "APPBAR", [theme.menu.variant]);
-  const [isSecondaryCalendar, setSecondaryCalendar] = useBoolean(false);
+  const [isSecondaryCalendar, setSecondaryCalendar] = useBoolean(true);
   const dispatch = useDispatch();
 
-  useEffect(() => dispatch(toggleCurrentCalendarType(!isSecondaryCalendar)), [isSecondaryCalendar])
+  useEffect(() =>{
+      localStorage.setItem("isSecondaryCalendarEnabled",  JSON.stringify(!isSecondaryCalendar));
+      dispatch(toggleCurrentCalendarType(!isSecondaryCalendar)), [isSecondaryCalendar]
+    }
+     )
 
   if (!auth.isAuthenticated) {
     return <Redirect to={redirectTo} />;
@@ -274,7 +279,7 @@ const RequireAuth = (props) => {
     </>
     )
   }
-
+  const { formatMessage } = useTranslations(module, modulesManager);
   return (
     <>
       <AppBar
@@ -324,7 +329,7 @@ const RequireAuth = (props) => {
               checked={isSecondaryCalendar}
               onChange={setSecondaryCalendar.toggle}
             />}
-            label= {"AD/BS"}
+            label={formatMessage("core.calendarSwitcher")}
             labelPlacement="start"
           />
           }

src/components/generics/Searcher.js

@@ -559,6 +559,8 @@ const mapStateToProps = (state) => ({
   paginationPage: state.core?.savedPagination?.paginationPage,
   afterCursor: state.core?.savedPagination?.afterCursor,
   beforeCursor: state.core?.savedPagination?.beforeCursor,
+  // This is not used directly, but is needed for Searcher component to be rerendered on change of calendar type
+  isSecondaryCalendarEnabled: state.core.isSecondaryCalendarEnabled ?? false
 });
 
 const mapDispatchToProps = (dispatch) => {

src/helpers/i18n.js

@@ -26,7 +26,8 @@ export function formatAmount(intl, amount) {
   return `${intl.formatMessage({ id: "currency" })} ${amount || 0}`;
 }
 
-export function formatDateFromISO(mm, intl, date, isSecondaryCalendar=false) {
+export function formatDateFromISO(mm, intl, date) {
+  let isSecondaryCalendar = JSON.parse(localStorage.getItem('isSecondaryCalendarEnabled'));
   if (isSecondaryCalendar) {
     return neFormateDateFromISO(date);
   }

src/pickers/DatePicker.js

@@ -64,7 +64,24 @@ class DatePicker extends Component {
       isSecondaryCalendarEnabled,
       ...otherProps
     } = this.props;
-    if (isSecondaryCalendarEnabled){
+
+  if (isSecondaryCalendarEnabled){
+    const nepaliDate = (!!this.state.value ? new NepaliDate(new Date(this.state.value)).format('YYYY-MM-DD'): new NepaliDate().format('YYYY-MM-DD'))
+    return (
+      <FormControl fullWidth={fullWidth}>
+        <label>{!!label ? formatMessage(intl, module, label) : null}</label>
+        <Calendar       
+          onChange={this.onChangeNepal}
+          defaultDate={nepaliDate} 
+          language="en"
+          style={{width:"100%", display: "flex", position:"static"}}
+          dateFormat="DD/MM/YYYY"
+          placeholder="Select date"
+        />
+      </FormControl>
+    );
+  }
+  else{
     return (
       <FormControl fullWidth={fullWidth}>
         <MUIDatePicker
@@ -85,22 +102,6 @@ class DatePicker extends Component {
       </FormControl>
     );
   }
-  else{
-    const nepaliDate = (!!this.state.value ? new NepaliDate(new Date(this.state.value)).format('YYYY-MM-DD'): new NepaliDate().format('YYYY-MM-DD'))
-    return (
-      <FormControl fullWidth={fullWidth}>
-        <label>{!!label ? formatMessage(intl, module, label) : null}</label>
-        <Calendar       
-          onChange={this.onChangeNepal}
-          defaultDate={nepaliDate} 
-          language="en"
-          style={{width:"100%", display: "flex", position:"static"}}
-          dateFormat="DD/MM/YYYY"
-          placeholder="Select date"
-        />
-      </FormControl>
-    );
-  }
   }
 }
 

src/pickers/NeDateFormatter.js

@@ -1,8 +1,14 @@
-import moment from "moment";
+import NepaliDate from 'nepali-date-converter'
 
 export function formatDateFromISO(date) {
+  const secondCalendarFormat = ['DD MM YYYY', 'np']
   if (!date) return "";
-  let dte = moment(date);
-  let bsDate = calendarFunctions.getBsDateByAdDate(dte.year(), dte.month() + 1, dte.date());
-  return calendarFunctions.bsDateFormat("%y-%m-%d", bsDate.bsYear, bsDate.bsMonth, bsDate.bsDate);
+  // this nepali-date-converter only supports dates up to this date, it will crash whole site if this date is exceeded
+  // added as a safeguard, other solution is probably needed
+  // TODO remove after nepal component change
+  if (date > new Date("2090/12/30")){
+    date = new Date("2090/12/30");
+  }
+  let bsDate = new NepaliDate(new Date(date)).format(...secondCalendarFormat);
+  return bsDate
 }

src/translations/en.json

@@ -109,5 +109,6 @@
   "core.advancedFilters.button.filter": "Filter",
   "core.RegistersStatusReport.region": "Region",
   "core.RegistersStatusReport.district": "District",
-  "core.Table.ordinalNumberHeader": "Number"
+  "core.Table.ordinalNumberHeader": "Number",
+  "core.calendarSwitcher": "BS/AD"
 }