10409: WIP Converting TrialLocations into a multi select

ustaxcourt · Sep 18, 2024 · 289d7fb · 289d7fb
1 parent 16d090f
commit 289d7fb
Show file tree

Hide file tree

Showing 7 changed files with 121 additions and 65 deletions.
diff --git a/web-client/src/presenter/actions/TrialSession/setTrialSessionsFiltersAction.test.ts b/web-client/src/presenter/actions/TrialSession/setTrialSessionsFiltersAction.test.ts
@@ -9,7 +9,7 @@ describe('setTrialSessionsFiltersAction', () => {
       },
     });
 
-    expect(result.state.trialSessionsPage.filters.trialLocation).toEqual(
+    expect(result.state.trialSessionsPage.filters.trialLocations).toEqual(
       'Baton Rouge, Louisiana',
     );
   });

diff --git a/web-client/src/presenter/actions/TrialSession/setTrialSessionsFiltersAction.ts b/web-client/src/presenter/actions/TrialSession/setTrialSessionsFiltersAction.ts
@@ -3,11 +3,17 @@ import { state } from '@web-client/presenter/app.cerebral';
 
 export type SetTrialSessionsFilters = Partial<{
   currentTab: 'calendared' | 'new';
-  judgeIds: { action: 'add' | 'remove'; judgeId: string };
+  judges: {
+    action: 'add' | 'remove';
+    judge: { name: string; userId: string };
+  };
   proceedingType: TrialSessionProceedingType | 'All';
   sessionStatus: string;
   sessionType: string;
-  trialLocation: string;
+  trialLocations: {
+    action: 'add' | 'remove';
+    trialLocation: string;
+  };
 }>;
 
 export const setTrialSessionsFiltersAction = ({
@@ -21,14 +27,14 @@ export const setTrialSessionsFiltersAction = ({
     store.set(state.trialSessionsPage.filters.currentTab, props.currentTab);
   }
 
-  if (props.judgeIds) {
-    const newJudgeIds =
-      props.judgeIds.action === 'add'
-        ? currentFilters.judgeIds.concat([props.judgeIds.judgeId])
-        : currentFilters.judgeIds.filter(
-            (id: string) => id !== props.judgeIds!.judgeId,
-          );
-    store.set(state.trialSessionsPage.filters.judgeIds, newJudgeIds);
+  if (props.judges) {
+    if (props.judges.action === 'add') {
+      currentFilters.judges[props.judges.judge.userId] = props.judges.judge;
+    } else {
+      delete currentFilters.judges[props.judges.judge.userId];
+    }
+
+    store.set(state.trialSessionsPage.filters.judges, currentFilters.judges);
   }
 
   if (props.proceedingType) {
@@ -49,10 +55,17 @@ export const setTrialSessionsFiltersAction = ({
     store.set(state.trialSessionsPage.filters.sessionType, props.sessionType);
   }
   // Update for Trial Sessions Page
-  if (props.trialLocation) {
+  if (props.trialLocations) {
+    const { action, trialLocation } = props.trialLocations;
+    if (action === 'add') {
+      currentFilters.trialLocations[trialLocation] = trialLocation;
+    } else {
+      delete currentFilters.trialLocations[trialLocation];
+    }
+
     store.set(
-      state.trialSessionsPage.filters.trialLocation,
-      props.trialLocation,
+      state.trialSessionsPage.filters.trialLocations,
+      currentFilters.trialLocations,
     );
   }
 };
diff --git a/web-client/src/presenter/computeds/trialSessionsHelper.test.ts b/web-client/src/presenter/computeds/trialSessionsHelper.test.ts
@@ -453,7 +453,7 @@ describe('trialSessionsHelper', () => {
       it('should show trial sessions in honolulu when trial sessions when trial location filter is honolulu', () => {
         trialSession1.trialLocation = 'Honolulu, Hawaii';
         trialSession2.trialLocation = 'Jacksonville, Florida';
-        trialSessionsPageState.filters.trialLocation = 'Honolulu, Hawaii';
+        trialSessionsPageState.filters.trialLocations = 'Honolulu, Hawaii';
         trialSessionsPageState.trialSessions = [trialSession1, trialSession2];
 
         const result = runCompute(trialSessionsHelper, {

diff --git a/web-client/src/presenter/computeds/trialSessionsHelper.ts b/web-client/src/presenter/computeds/trialSessionsHelper.ts
@@ -24,8 +24,7 @@ export const trialSessionsHelper = (
   showNoticeIssued: boolean;
   showSessionStatus: boolean;
   showUnassignedJudgeFilter: boolean;
-  trialSessionJudges: RawUser[];
-  trialSessionJudgeOptions: InputOption[];
+  trialSessionJudgeOptions: InputOption<{ name: string; userId: string }>[];
   trialSessionRows: (TrialSessionRow | TrialSessionWeek)[];
   sessionTypeOptions: InputOption[];
   searchableTrialLocationOptions: InputOption[];
@@ -40,7 +39,7 @@ export const trialSessionsHelper = (
     filters.currentTab === 'new' ||
     filters.sessionStatus === SESSION_STATUS_TYPES.open;
 
-  let trialSessionJudges; // 10409 TODO BUG. The judge options is not updating correctly. Showing legacy when it should not.
+  let trialSessionJudges: { name: string; userId: string }[]; // 10409 TODO BUG. The judge options is not updating correctly. Showing legacy when it should not.
   if (showCurrentJudgesOnly) {
     trialSessionJudges = get(state.judges);
     console.log('current length: ', trialSessionJudges.length);
@@ -54,10 +53,10 @@ export const trialSessionsHelper = (
     value: sessionType,
   }));
 
-  const trialSessionJudgeOptions: InputOption[] = trialSessionJudges.map(
+  const trialSessionJudgeOptions = trialSessionJudges.map(
     trialSessionJudge => ({
       label: trialSessionJudge.name,
-      value: trialSessionJudge.userId,
+      value: { name: trialSessionJudge.name, userId: trialSessionJudge.userId },
     }),
   );
   const trialCities = sortBy(TRIAL_CITIES.ALL, ['state', 'city']);
@@ -93,10 +92,13 @@ export const trialSessionsHelper = (
       return trialSession.isCalendared === isCalendaredFilter;
     })
     .filter(trialSession => {
-      if (filters.judgeIds.length === 0) return true;
-      const trialSessionHasJudge = filters.judgeIds.some(judgeIdFilter => {
-        if (judgeIdFilter === 'unassigned') return !trialSession.judge?.userId;
-        return judgeIdFilter === trialSession.judge?.userId;
+      const selectedJudges = Object.values(filters.judges);
+      if (selectedJudges.length === 0) return true;
+      const trialSessionHasJudge = selectedJudges.some(judgeFilter => {
+        if (judgeFilter.userId === 'unassigned') {
+          return !trialSession.judge?.userId;
+        }
+        return judgeFilter.userId === trialSession.judge?.userId;
       });
 
       return trialSessionHasJudge;
@@ -115,8 +117,8 @@ export const trialSessionsHelper = (
       return filters.sessionType === trialSession.sessionType;
     })
     .filter(trialSession => {
-      if (filters.trialLocation === 'All') return true;
-      return filters.trialLocation === trialSession.trialLocation;
+      if (Object.values(filters.trialLocations).length === 0) return true;
+      return !!filters.trialLocations[trialSession.trialLocation || ''];
     })
     .sort((sessionA, sessionB) => {
       return sessionA.startDate.localeCompare(sessionB.startDate);
@@ -136,7 +138,6 @@ export const trialSessionsHelper = (
     showUnassignedJudgeFilter: filters.currentTab === 'new',
     trialCitiesByState: states,
     trialSessionJudgeOptions,
-    trialSessionJudges,
     trialSessionRows,
   };
 };

diff --git a/web-client/src/presenter/state/trialSessionsPageState.ts b/web-client/src/presenter/state/trialSessionsPageState.ts
@@ -3,11 +3,11 @@ import { TrialSessionProceedingType } from '@shared/business/entities/EntityCons
 
 const filters: TrialSessionsFilters = {
   currentTab: 'calendared' as 'calendared' | 'new',
-  judgeIds: [],
+  judges: {},
   proceedingType: 'All' as TrialSessionProceedingType,
   sessionStatus: 'Open',
   sessionType: 'All',
-  trialLocation: 'All',
+  trialLocations: {},
 };
 
 export const initialTrialSessionPageState = {
@@ -17,9 +17,9 @@ export const initialTrialSessionPageState = {
 
 export type TrialSessionsFilters = {
   currentTab: 'calendared' | 'new';
-  judgeIds: string[];
+  judges: Record<string, { name: string; userId: string }>;
   proceedingType: TrialSessionProceedingType | 'All';
   sessionStatus: string;
   sessionType: string;
-  trialLocation: string;
+  trialLocations: Record<string, string>;
 };
diff --git a/web-client/src/ustc-ui/Utils/types.ts b/web-client/src/ustc-ui/Utils/types.ts
@@ -4,9 +4,9 @@ import { GetCasesByStatusAndByJudgeResponse } from '@web-api/business/useCases/j
 import { JudgeActivityReportFilters } from '@web-api/business/useCases/judgeActivityReport/getCountOfCaseDocumentsFiledByJudgesInteractor';
 import { TrialSessionReturnType } from '@web-api/business/useCases/judgeActivityReport/getTrialSessionsForJudgeActivityReportInteractor';
 
-export type InputOption = {
+export type InputOption<T = string> = {
   label: string;
-  value?: string;
+  value?: T;
   options?: InputOption[];
 };
 

diff --git a/web-client/src/views/TrialSessions/TrialSessions.tsx b/web-client/src/views/TrialSessions/TrialSessions.tsx
@@ -2,6 +2,7 @@ import { BigHeader } from '../BigHeader';
 import { Button } from '../../ustc-ui/Button/Button';
 import { DateRangePickerComponent } from '@web-client/ustc-ui/DateInput/DateRangePickerComponent';
 import { ErrorNotification } from '../ErrorNotification';
+import { PillButton } from '@web-client/ustc-ui/Button/PillButton';
 import {
   SESSION_STATUS_TYPES,
   TRIAL_SESSION_PROCEEDING_TYPES,
@@ -281,44 +282,85 @@ const TrialSessionFilters = connect(
             />
           </div>
           <div className="grid-col">
-            <label className="usa-label" htmlFor="location-filter">
-              Location <span className="optional-light-text">(optional)</span>
-            </label>
-            <SelectSearch
-              id="location-filter"
-              name="location"
-              options={trialSessionsHelper.trialCitiesByState}
-              placeholder="- Select one or more -"
-              searchableOptions={
-                trialSessionsHelper.searchableTrialLocationOptions
-              }
-              value="Select one or more"
-              onChange={inputValue => {
-                console.log('location', inputValue);
-              }}
-            />
+            <div>
+              <label className="usa-label" htmlFor="location-filter">
+                Location <span className="optional-light-text">(optional)</span>
+              </label>
+              <SelectSearch
+                id="location-filter"
+                name="location"
+                options={trialSessionsHelper.trialCitiesByState}
+                placeholder="- Select one or more -"
+                searchableOptions={
+                  trialSessionsHelper.searchableTrialLocationOptions
+                }
+                value="Select one or more"
+                onChange={location => {
+                  setTrialSessionsFiltersSequence({
+                    trialLocations: {
+                      action: 'add',
+                      trialLocation: location.value,
+                    },
+                  });
+                }}
+              />
+            </div>
+            <div>
+              {Object.values(trialSessionsPage.filters.trialLocations).map(
+                location => (
+                  <PillButton
+                    key={location}
+                    text={location}
+                    onRemove={() => {
+                      setTrialSessionsFiltersSequence({
+                        trialLocations: {
+                          action: 'remove',
+                          trialLocation: location,
+                        },
+                      });
+                    }}
+                  />
+                ),
+              )}
+            </div>
           </div>
           <div className="grid-col">
-            <label className="usa-label" htmlFor="judge-filter">
-              Judge <span className="optional-light-text">(optional)</span>
-            </label>
-            <SelectSearch
-              id="judges"
-              name="judges"
-              options={trialSessionsHelper.trialSessionJudgeOptions}
-              placeholder="- Select one or more -"
-              value="Select one or more"
-              onChange={inputValue => {
-                if (inputValue) {
+            <div>
+              <label className="usa-label" htmlFor="judge-filter">
+                Judge <span className="optional-light-text">(optional)</span>
+              </label>
+              <SelectSearch
+                id="judges"
+                name="judges"
+                options={trialSessionsHelper.trialSessionJudgeOptions}
+                placeholder="- Select one or more -"
+                value="Select one or more"
+                onChange={inputValue => {
                   setTrialSessionsFiltersSequence({
-                    judgeIds: {
+                    judges: {
                       action: 'add',
-                      judgeId: inputValue.value,
+                      judge: inputValue.value,
                     },
                   });
-                }
-              }}
-            />
+                }}
+              />
+            </div>
+            <div>
+              {Object.values(trialSessionsPage.filters.judges).map(judge => (
+                <PillButton
+                  key={judge.userId}
+                  text={judge.name}
+                  onRemove={() => {
+                    setTrialSessionsFiltersSequence({
+                      judges: {
+                        action: 'remove',
+                        judge,
+                      },
+                    });
+                  }}
+                />
+              ))}
+            </div>
           </div>
         </div>
       </>