Merge pull request #5430 from flexion/10261-story-to-test-ux-updates

10261 Story: Practitioner Case List (Updates based on UX feedback)
ustaxcourt · Oct 14, 2024 · 9cb405b · 9cb405b
2 parents 093f66a + 5e768c4
commit 9cb405b
Show file tree

Hide file tree

Showing 7 changed files with 57 additions and 30 deletions.
diff --git a/shared/src/business/useCases/getPractitionerCasesInteractor.ts b/shared/src/business/useCases/getPractitionerCasesInteractor.ts
@@ -1,11 +1,13 @@
 import { Case, isClosed } from '../entities/cases/Case';
+import { PractitionerCaseDetail } from '@web-client/presenter/state';
 import {
   ROLE_PERMISSIONS,
   isAuthorized,
 } from '../../authorization/authorizationClientService';
 import { ServerApplicationContext } from '@web-api/applicationContext';
 import { UnauthorizedError } from '@web-api/errors/errors';
 import { UnknownAuthUser } from '@shared/business/entities/authUser/AuthUser';
+import { formatCase } from '@shared/business/utilities/getFormattedCaseDetail';
 import { partition } from 'lodash';
 
 export const getPractitionerCasesInteractor = async (
@@ -30,12 +32,34 @@ export const getPractitionerCasesInteractor = async (
     .getPersistenceGateway()
     .getCasesByDocketNumbers({ applicationContext, docketNumbers });
 
-  cases.forEach(
-    aCase => (aCase.caseTitle = Case.getCaseTitle(aCase.caseCaption)),
-  );
+  const caseDetails: PractitionerCaseDetail[] = cases.map(c => {
+    const formattedCase = formatCase(applicationContext, c, authorizedUser);
+
+    const {
+      caseTitle,
+      consolidatedIconTooltipText,
+      docketNumber,
+      docketNumberWithSuffix,
+      inConsolidatedGroup,
+      isLeadCase,
+      isSealed,
+      status,
+    } = formattedCase;
+
+    return {
+      caseTitle,
+      consolidatedIconTooltipText,
+      docketNumber,
+      docketNumberWithSuffix,
+      inConsolidatedGroup,
+      isLeadCase,
+      isSealed,
+      status,
+    };
+  });
 
   const [closedCases, openCases] = partition(
-    Case.sortByDocketNumber(cases).reverse(),
+    Case.sortByDocketNumber(caseDetails).reverse(),
     theCase => isClosed(theCase),
   );
 

diff --git a/web-client/src/presenter/actions/getPractitionerDetailAction.ts b/web-client/src/presenter/actions/getPractitionerDetailAction.ts
@@ -7,7 +7,7 @@
  */
 
 import {
-  PractitionerCaseInfo,
+  PractitionerAllCasesInfo,
   PractitionerDetail,
 } from '@web-client/presenter/state';
 import { state } from '@web-client/presenter/app.cerebral';
@@ -36,11 +36,11 @@ export const getPractitionerDetailAction = async ({
         userId: practitionerDetail.userId,
       });
 
-    const openCaseInfo: PractitionerCaseInfo = {
+    const openCaseInfo: PractitionerAllCasesInfo = {
       allCases: openCases,
       currentPage: 0,
     };
-    const closedCaseInfo: PractitionerCaseInfo = {
+    const closedCaseInfo: PractitionerAllCasesInfo = {
       allCases: closedCases,
       currentPage: 0,
     };

diff --git a/web-client/src/presenter/computeds/practitionerInformationHelper.ts b/web-client/src/presenter/computeds/practitionerInformationHelper.ts
@@ -1,10 +1,8 @@
 /* eslint-disable complexity */
 
 import { ClientApplicationContext } from '@web-client/applicationContext';
-import { formatCase } from '@shared/business/utilities/getFormattedCaseDetail';
 import { state } from '@web-client/presenter/app.cerebral';
 
-import { AuthUser } from '@shared/business/entities/authUser/AuthUser';
 import { Get } from 'cerebral';
 import { PractitionerCaseDetail } from '@web-client/presenter/state';
 import { getSealedDocketEntryTooltip } from '@shared/business/utilities/getSealedDocketEntryTooltip';
@@ -15,17 +13,14 @@ const getPagesToDisplay = ({
   applicationContext,
   cases,
   pageNumber,
-  user,
 }: {
   pageNumber: number;
   cases: PractitionerCaseDetail[];
   applicationContext: ClientApplicationContext;
-  user: AuthUser;
 }) => {
   return cases
     .slice(pageNumber * PAGE_SIZE, (pageNumber + 1) * PAGE_SIZE)
     .map(c => {
-      c = formatCase(applicationContext, c, user);
       c.sealedToTooltip = getSealedDocketEntryTooltip(applicationContext, c);
       return c;
     });
@@ -72,14 +67,12 @@ export const practitionerInformationHelper = (
     applicationContext,
     cases: practitionerDetail.openCaseInfo?.allCases || [],
     pageNumber: practitionerDetail.openCaseInfo?.currentPage || 0,
-    user,
   });
 
   const closedCasesToDisplay = getPagesToDisplay({
     applicationContext,
     cases: practitionerDetail.closedCaseInfo?.allCases || [],
     pageNumber: practitionerDetail.closedCaseInfo?.currentPage || 0,
-    user,
   });
 
   return {

diff --git a/web-client/src/presenter/state.ts b/web-client/src/presenter/state.ts
@@ -911,21 +911,22 @@ export type PractitionerDetail = {
   practitionerType?: string;
   middleName?: string;
   contact?: Partial<UserContact>;
-  openCaseInfo?: PractitionerCaseInfo; // Only for internal users
-  closedCaseInfo?: PractitionerCaseInfo; // Only for internal users
+  openCaseInfo?: PractitionerAllCasesInfo; // Only for internal users
+  closedCaseInfo?: PractitionerAllCasesInfo; // Only for internal users
   email?: string;
   pendingEmail?: string;
   additionalPhone?: string;
   firmName?: string;
   hasEAccess?: boolean;
 };
 
-export type PractitionerCaseInfo = {
+export type PractitionerAllCasesInfo = {
   allCases: PractitionerCaseDetail[];
   currentPage: number;
 };
 
 export type PractitionerCaseDetail = {
+  docketNumber: string;
   docketNumberWithSuffix: string;
   caseTitle: string;
   inConsolidatedGroup: boolean;

diff --git a/web-client/src/styles/tabs.scss b/web-client/src/styles/tabs.scss
@@ -239,3 +239,7 @@
     }
   }
 }
+
+.tab-content-with-top-margin {
+  margin-top: 2.5rem;
+}
diff --git a/web-client/src/views/Practitioners/PractitionerCaseList.tsx b/web-client/src/views/Practitioners/PractitionerCaseList.tsx
@@ -32,7 +32,7 @@ export function PractitionerCaseList({
             <thead>
               <tr>
                 <th aria-hidden="true" className="icon-column" />
-                <th>Docket No.</th>
+                <th className="no-wrap">Docket No.</th>
                 <th>Case Title</th>
                 {showStatus && <th>Case Status</th>}
               </tr>

diff --git a/web-client/src/views/Practitioners/PractitionerInformation.tsx b/web-client/src/views/Practitioners/PractitionerInformation.tsx
@@ -91,6 +91,7 @@ export const PractitionerInformation = connect(
             bind="currentViewMetadata.tab"
             className="classic-horizontal-header3 tab-border"
             defaultActiveTab="practitioner-details"
+            marginBottom={false}
             onSelect={tabName => {
               onPractitionerInformationTabSelectSequence({
                 tabName,
@@ -127,23 +128,27 @@ export const PractitionerInformation = connect(
               tabName="practitioner-open-cases"
               title={`Open Cases (${numOpenCases})`}
             >
-              {openPagesPaginator()}
-              <PractitionerCaseList
-                caseType={'open'}
-                cases={practitionerInformationHelper.openCasesToDisplay}
-              />
-              {openPagesPaginator()}
+              <div className="tab-content-with-top-margin">
+                {openPagesPaginator()}
+                <PractitionerCaseList
+                  caseType={'open'}
+                  cases={practitionerInformationHelper.openCasesToDisplay}
+                />
+                {openPagesPaginator()}
+              </div>
             </Tab>
             <Tab
               tabName="practitioner-closed-cases"
               title={`Closed Cases (${numClosedCases})`}
             >
-              {closedPagesPaginator()}
-              <PractitionerCaseList
-                caseType={'closed'}
-                cases={practitionerInformationHelper.closedCasesToDisplay}
-              />
-              {closedPagesPaginator()}
+              <div className="tab-content-with-top-margin">
+                {closedPagesPaginator()}
+                <PractitionerCaseList
+                  caseType={'closed'}
+                  cases={practitionerInformationHelper.closedCasesToDisplay}
+                />
+                {closedPagesPaginator()}
+              </div>
             </Tab>
           </Tabs>
         </section>