IS-1931: Changed from select to checkbox group

Author: vetlesolgaard

src/components/PersonFilter.tsx

@@ -50,10 +50,10 @@ export const PersonFilter = ({
     });
   };
 
-  const onFristFilterChange = (fristFilter?: FristFilterOption) => {
+  const onFristFilterChange = (fristFilters: FristFilterOption[]) => {
     dispatchFilterAction({
       type: ActionType.SetSelectedFristFilter,
-      selectedFristFilter: fristFilter,
+      selectedFristFilters: fristFilters,
     });
   };
 
@@ -74,10 +74,7 @@ export const PersonFilter = ({
           onSelect={onBirthDateChange}
           selectedDates={filterState.selectedBirthDates}
         />
-        <FristFilter
-          onSelect={onFristFilterChange}
-          selectedFilterOption={filterState.selectedFristFilter}
-        />
+        <FristFilter onChange={onFristFilterChange} />
       </SpacedFilters>
     </Ekspanderbartpanel>
   );

src/components/Sokeresultat.tsx

@@ -69,7 +69,7 @@ const Sokeresultat = ({ allEvents }: SokeresultatProps) => {
   const filteredEvents = allEvents
     .applyFilter((v) => filterOnCompany(v, filterState.selectedCompanies))
     .applyFilter((v) => filterOnBirthDates(v, filterState.selectedBirthDates))
-    .applyFilter((v) => filterOnFrist(v, filterState.selectedFristFilter))
+    .applyFilter((v) => filterOnFrist(v, filterState.selectedFristFilters))
     .applyFilter((v) => filterOnPersonregister(v, selectedHendelsetypeFilter))
     .applyFilter((v) =>
       filterOnFodselsnummerOrName(v, filterState.tekstFilter)

src/components/filters/FristFilter.tsx

@@ -1,40 +1,33 @@
-import { Select } from '@navikt/ds-react';
+import { CheckboxGroup, Checkbox } from '@navikt/ds-react';
 import { FristFilterOption } from '@/utils/hendelseFilteringUtils';
 import React from 'react';
 
 const texts = {
   label: 'Frist',
   option: {
     noChoice: 'Velg visningsalternativ',
-    todayOrPast: 'I dag og tidligere datoer',
+    past: 'Tidligere datoer',
+    today: 'Dagens dato',
     future: 'Fremtidige datoer',
   },
 };
 
 interface Props {
-  onSelect(value?: FristFilterOption): void;
-
-  selectedFilterOption?: FristFilterOption;
+  onChange(value: FristFilterOption[]): void;
 }
 
-export const FristFilter = ({ onSelect, selectedFilterOption }: Props) => {
+export const FristFilter = ({ onChange }: Props) => {
   return (
-    <Select
-      label="Frist"
-      value={selectedFilterOption}
-      onChange={(event) => {
-        if (event.target.value === '') {
-          onSelect();
-        } else {
-          onSelect(event.target.value as FristFilterOption);
-        }
-      }}
+    <CheckboxGroup
+      legend="Frist"
+      onChange={(val: FristFilterOption[]) => onChange(val)}
+      size="small"
     >
-      <option value="">{texts.option.noChoice}</option>
-      <option value={FristFilterOption.TodayOrPast}>
-        {texts.option.todayOrPast}
-      </option>
-      <option value={FristFilterOption.Future}>{texts.option.future}</option>
-    </Select>
+      <Checkbox value={FristFilterOption.Past}>{texts.option.past}</Checkbox>
+      <Checkbox value={FristFilterOption.Today}>{texts.option.today}</Checkbox>
+      <Checkbox value={FristFilterOption.Future}>
+        {texts.option.future}
+      </Checkbox>
+    </CheckboxGroup>
   );
 };

src/context/filters/filterContextActions.ts

@@ -34,7 +34,7 @@ export interface SetSelectedCompanies {
 
 export interface SetSelectedFristFilter {
   type: ActionType.SetSelectedFristFilter;
-  selectedFristFilter?: FristFilterOption;
+  selectedFristFilters: FristFilterOption[];
 }
 
 export interface SetSelectedBirthDates {

src/context/filters/filterContextReducer.ts

@@ -45,7 +45,7 @@ export const filterReducer = (
     case ActionType.SetSelectedFristFilter: {
       return {
         ...state,
-        selectedFristFilter: action.selectedFristFilter,
+        selectedFristFilters: action.selectedFristFilters,
       };
     }
     case ActionType.SetSelectedVeilederIdents: {

src/context/filters/filterContextState.ts

@@ -19,7 +19,7 @@ export interface FilterState {
   selectedOptions: string[];
   selectedCompanies: string[];
   selectedBirthDates: string[];
-  selectedFristFilter?: FristFilterOption;
+  selectedFristFilters: FristFilterOption[];
   selectedHendelseType: HendelseTypeFilters;
 }
 
@@ -29,7 +29,7 @@ export const filterInitialState: FilterState = {
   selectedOptions: [],
   selectedCompanies: [],
   selectedBirthDates: [],
-  selectedFristFilter: undefined,
+  selectedFristFilters: [],
   selectedHendelseType: {
     arbeidsgiverOnskerMote: false,
     onskerMote: false,

src/utils/dateUtils.ts

@@ -8,22 +8,24 @@ export const toReadableDate = (dateArg: Date | null): string => {
   return dayjs(dateArg).format('DD.MM.YYYY');
 };
 
-export function isTodayOrPast(compareDate: Date): boolean {
+export function isPast(compareDate: Date): boolean {
   const currentDate = new Date();
   const date = new Date(compareDate);
+  return date < currentDate;
+}
 
-  const isSameDay =
+export function isToday(compareDate: Date): boolean {
+  const currentDate = new Date();
+  const date = new Date(compareDate);
+  return (
     date.getFullYear() === currentDate.getFullYear() &&
     date.getMonth() === currentDate.getMonth() &&
-    date.getDate() === currentDate.getDate();
-  const isPast = date < currentDate;
-
-  return isSameDay || isPast;
+    date.getDate() === currentDate.getDate()
+  );
 }
 
 export function isFuture(compareDate: Date): boolean {
   const currentDate = new Date();
   const date = new Date(compareDate);
-
   return currentDate < date;
 }

src/utils/hendelseFilteringUtils.tsx

@@ -9,7 +9,7 @@ import {
 } from './personDataUtil';
 import { Veileder } from '@/api/types/veiledereTypes';
 import { HendelseTypeFilters } from '@/context/filters/filterContextState';
-import { isFuture, isTodayOrPast } from '@/utils/dateUtils';
+import { isFuture, isPast, isToday } from '@/utils/dateUtils';
 
 export class Filterable<T> {
   value: T;
@@ -83,15 +83,16 @@ export const filterOnBirthDates = (
 };
 
 export enum FristFilterOption {
-  TodayOrPast = 'TodayOrPast',
+  Past = 'Past',
+  Today = 'Today',
   Future = 'Future',
 }
 
 export const filterOnFrist = (
   personregister: PersonregisterState,
-  fristFilter?: FristFilterOption
+  selectedFristFilters: FristFilterOption[]
 ): PersonregisterState => {
-  const isNoFilter = fristFilter === undefined;
+  const isNoFilter = selectedFristFilters.length === 0;
   if (isNoFilter) {
     return personregister;
   }
@@ -105,30 +106,33 @@ export const filterOnFrist = (
     ) {
       return true;
     }
+    const isOppfolgingsoppgaveVisible = oppfolgingsoppgaveFrist
+      ? isInFristFilter(selectedFristFilters, oppfolgingsoppgaveFrist)
+      : false;
+    const isAktivitetskravVisible = aktivitetskravVurderingFrist
+      ? isInFristFilter(selectedFristFilters, aktivitetskravVurderingFrist)
+      : false;
+    return isOppfolgingsoppgaveVisible || isAktivitetskravVisible;
+  });
+
+  return Object.fromEntries(filtered);
+};
 
+function isInFristFilter(
+  selectedFilters: FristFilterOption[],
+  fristDate: Date
+): boolean {
+  return selectedFilters.some((fristFilter) => {
     switch (fristFilter) {
-      case FristFilterOption.TodayOrPast:
-        return (
-          (oppfolgingsoppgaveFrist
-            ? isTodayOrPast(oppfolgingsoppgaveFrist)
-            : false) ||
-          (aktivitetskravVurderingFrist
-            ? isTodayOrPast(aktivitetskravVurderingFrist)
-            : false)
-        );
+      case FristFilterOption.Past:
+        return isPast(fristDate);
+      case FristFilterOption.Today:
+        return isToday(fristDate);
       case FristFilterOption.Future:
-        return (
-          (oppfolgingsoppgaveFrist
-            ? isFuture(oppfolgingsoppgaveFrist)
-            : false) ||
-          (aktivitetskravVurderingFrist
-            ? isFuture(aktivitetskravVurderingFrist)
-            : false)
-        );
+        return isFuture(fristDate);
     }
   });
-  return Object.fromEntries(filtered);
-};
+}
 
 type HendelseTypeFilterKey = keyof HendelseTypeFilters;