Fix Date range picker on the plan form (#1291)

* Update util that decides what dates should be disabled

disable dates that fall in the past

* Remove stripping styling from tables

* Enable the current date for selection in planform

* Update tests

packages/fhir-location-management/src/components/LocationUnitList/LocationUnitList.css

@@ -21,7 +21,3 @@
   font-size: 18px;
   border-left-color: #e9e9e9;
 }
-
-table tr:nth-child(2n) td {
-  background-color: #f4f4f4;
-}

packages/location-management/src/components/LocationUnitGroupList/LocationUnitGroupList.css

@@ -21,7 +21,3 @@
   font-size: 18px;
   border-left-color: #e9e9e9;
 }
-
-table tr:nth-child(2n) td {
-  background-color: #f4f4f4;
-}

packages/location-management/src/components/LocationUnitList/LocationUnitList.css

@@ -21,7 +21,3 @@
   font-size: 18px;
   border-left-color: #e9e9e9;
 }
-
-table tr:nth-child(2n) td {
-  background-color: #f4f4f4;
-}

packages/plan-form/src/Form/index.tsx

@@ -5,7 +5,6 @@ import { Dictionary } from '@onaio/utils';
 import { xor } from 'lodash';
 import React, { useEffect, useState } from 'react';
 import { Redirect } from 'react-router-dom';
-import { RangePickerSharedProps } from 'rc-picker/lib/RangePicker';
 import { useTranslation } from '../mls';
 import { PLAN_LIST_URL, PLAN_DESCRIPTION_WORD_LIMIT } from '../constants';
 import { getConditionAndTriggers } from './componentsUtils/actions';
@@ -137,22 +136,13 @@ export interface PlanFormProps extends CommonProps {
 }
 
 /**
- * Plan Form Date range picker
- * Function checks end date to be greater than start date and today date
+ * Denotes what range of dates can be picked. I.e. only dates in the future
  *
  * @param {dayjs.Dayjs} current - current selected/hovered date (date picker)
- * @param {dayjs.Dayjs[]} dates - start and end date
- * @returns {boolean} - returns true if disabled and viseversa
+ * @returns {boolean} - returns true if disabled and vice versa
  */
-export const disableDate = (current: dayjs.Dayjs, dates: dayjs.Dayjs[]) => {
-  if (!dates || dates.length === 0) {
-    return false;
-  }
-  return (
-    current.valueOf() <= Date.now() ||
-    current.format('L') <= (dates[0] && dates[0].format('L')) ||
-    (dates[1] && dates[1].valueOf() <= Date.now())
-  );
+export const disableDate = (current: dayjs.Dayjs) => {
+  return current && current < dayjs().startOf('day');
 };
 
 /**
@@ -169,7 +159,6 @@ const PlanForm = (props: PlanFormProps) => {
   const [actionTriggers, setActionTriggers] = useState<Dictionary>({});
   const [actionDynamicValue, setActionDynamicValue] = useState<Dictionary>({});
   const [isSubmitting, setSubmitting] = useState<boolean>(false);
-  const [dates, setDates] = useState<dayjs.Dayjs[]>([]);
   const { t } = useTranslation();
   const {
     allFormActivities,
@@ -436,25 +425,7 @@ const PlanForm = (props: PlanFormProps) => {
             id="dateRange"
           >
             <DatePicker.RangePicker
-              onCalendarChange={
-                ((val: dayjs.Dayjs[]) => {
-                  setDates(val);
-                }) as RangePickerSharedProps<dayjs.Dayjs>['onCalendarChange']
-              }
-              onOpenChange={(open: boolean) => {
-                if (open) {
-                  if (form.getFieldValue('dateRange')) {
-                    setDates(
-                      form.getFieldValue('dateRange')[0] && form.getFieldValue('dateRange')[1]
-                        ? form.getFieldValue('dateRange')
-                        : []
-                    );
-                  } else {
-                    setDates([]);
-                  }
-                }
-              }}
-              disabledDate={(current: dayjs.Dayjs) => disableDate(current, dates)}
+              disabledDate={(current: dayjs.Dayjs) => disableDate(current)}
               disabled={disabledFields.includes('dateRange')}
               format={configs.dateFormat}
             />

packages/plan-form/src/Form/tests/index.test.tsx

@@ -295,38 +295,17 @@ describe('containers/forms/PlanForm', () => {
     wrapper.unmount();
   });
 
-  it('disableDate should return false if no value selected', async () => {
-    const dates = [];
-    const current = dayjs('2017-07-13');
-    expect(disableDate(current, dates)).toBeFalsy();
+  it('disableDate should return false if date is now or future', async () => {
+    let current = dayjs('2017-07-13');
+    expect(disableDate(current)).toBeFalsy();
+    current = dayjs('2017-07-14');
+    expect(disableDate(current)).toBeFalsy();
   });
 
-  it('disableDate should return true if end date is less than todays date', async () => {
-    const dates = [dayjs('2017-07-10'), dayjs('2017-07-11')];
-    const current = dayjs('2017-07-13');
+  it('disableDate should return true if date is in the past', async () => {
+    const current = dayjs('2017-07-12');
     // date today is 2017-07-13
-    expect(disableDate(current, dates)).toBeTruthy();
-  });
-
-  it('disableDate should return true if start and end date is same', async () => {
-    const dates = [dayjs('2017-07-10'), dayjs('2017-07-10')];
-    const current = dayjs('2017-07-13');
-    // date today is 2017-07-13
-    expect(disableDate(current, dates)).toBeTruthy();
-  });
-
-  it('renders correcty when dates are passed', async () => {
-    const wrapper = mount(
-      <MemoryRouter>
-        <PlanForm />
-      </MemoryRouter>
-    );
-
-    const instance = wrapper.find('#dateRange RangePicker').at(0).props();
-    instance.onCalendarChange(['2022-07-13', '2022-07-14']);
-    instance.onOpenChange(true);
-    expect(instance.disabledDate(dayjs('2017-07-13'))).toBeFalsy();
-    wrapper.unmount();
+    expect(disableDate(current)).toBeTruthy();
   });
 
   it('Form submission for new plans works', async () => {

packages/server-settings/src/components/ServerSettingsView/ServerSettingsView.css

@@ -21,7 +21,3 @@
   font-size: 18px;
   border-left-color: #e9e9e9;
 }
-
-table tr:nth-child(2n) td {
-  background-color: #f4f4f4;
-}

packages/team-management/src/components/TeamsView/TeamsView.css

@@ -1,3 +0,0 @@
-table tr:nth-child(2n) td {
-  background-color: #f4f4f4;
-}