feat: CE-1029 - UI Updates to Complaints Tables (#614)

bcgov · Sep 5, 2024 · 8a4bd67 · 8a4bd67
1 parent b072e01
commit 8a4bd67
Show file tree

Hide file tree

Showing 10 changed files with 176 additions and 293 deletions.
diff --git a/frontend/src/app/components/containers/complaints/complaint-list.tsx b/frontend/src/app/components/containers/complaints/complaint-list.tsx
@@ -205,7 +205,10 @@ export const ComplaintList: FC<Props> = ({ type, searchQuery }) => {
         className="comp-table-scroll-container"
         ref={divRef}
       >
-        <Table id="complaint-list">
+        <Table
+          className="comp-table"
+          id="complaint-list"
+        >
           {renderComplaintListHeader(type)}
           <tbody>
             {complaints.map((item) => {

diff --git a/...end/src/app/components/containers/complaints/headers/allegation-complaint-list-header.tsx b/...end/src/app/components/containers/complaints/headers/allegation-complaint-list-header.tsx
@@ -19,7 +19,7 @@ export const AllegationComplaintListHeader: FC<Props> = ({ handleSort, sortKey,
           sortKey="complaint_identifier"
           currentSort={sortKey}
           sortDirection={sortDirection}
-          className="comp-cell-width-110 sticky-col sticky-col--left"
+          className="comp-cell-width-110 comp-cell-min-width-110 sticky-col sticky-col--left"
         />
 
         <SortableHeader
@@ -29,6 +29,7 @@ export const AllegationComplaintListHeader: FC<Props> = ({ handleSort, sortKey,
           sortKey="incident_reported_utc_timestmp"
           currentSort={sortKey}
           sortDirection={sortDirection}
+          className="comp-cell-width-160 comp-cell-min-width-160"
         />
 
         <SortableHeader
@@ -84,9 +85,10 @@ export const AllegationComplaintListHeader: FC<Props> = ({ handleSort, sortKey,
           currentSort={sortKey}
           sortDirection={sortDirection}
           id="update-date-column"
+          className="comp-cell-width-160 comp-cell-min-width-160"
         />
 
-        <th className="comp-cell-width-100 unsortable sticky-col sticky-col--right actions-col">
+        <th className="unsortable sticky-col sticky-col--right comp-cell-width-90 comp-cell-min-width-90 actions-col ac-table-actions-cell">
           <div className="header-label">Actions</div>
         </th>
       </tr>

diff --git a/frontend/src/app/components/containers/complaints/headers/general-complaint-list-header.tsx b/frontend/src/app/components/containers/complaints/headers/general-complaint-list-header.tsx
@@ -17,7 +17,7 @@ export const GeneralComplaintListHeader: FC<Props> = ({ handleSort, sortKey, sor
           sortKey="complaint_identifier"
           currentSort={sortKey}
           sortDirection={sortDirection}
-          className="comp-cell-width-110 sticky-col sticky-col--left"
+          className="comp-cell-width-110 comp-cell-min-width-110 sticky-col sticky-col--left"
         />
         <SortableHeader
           id="incident-date-column"
@@ -26,6 +26,7 @@ export const GeneralComplaintListHeader: FC<Props> = ({ handleSort, sortKey, sor
           sortKey="incident_reported_utc_timestmp"
           currentSort={sortKey}
           sortDirection={sortDirection}
+          className="comp-cell-width-160 comp-cell-min-width-160"
         />
         <SortableHeader
           title="GIR Type"
@@ -70,9 +71,10 @@ export const GeneralComplaintListHeader: FC<Props> = ({ handleSort, sortKey, sor
           sortKey="update_utc_timestamp"
           currentSort={sortKey}
           sortDirection={sortDirection}
+          className="comp-cell-width-160 comp-cell-min-width-160"
         />
 
-        <th className="comp-cell-width-100 unsortable sticky-col sticky-col--right actions-col">
+        <th className="unsortable sticky-col sticky-col--right comp-cell-width-90 comp-cell-min-width-90 actions-col gc-table-actions-cell">
           <div className="header-label">Actions</div>
         </th>
       </tr>

diff --git a/frontend/src/app/components/containers/complaints/headers/wildlife-complaint-list-header.tsx b/frontend/src/app/components/containers/complaints/headers/wildlife-complaint-list-header.tsx
@@ -17,7 +17,7 @@ export const WildlifeComplaintListHeader: FC<Props> = ({ handleSort, sortKey, so
           sortKey="complaint_identifier"
           currentSort={sortKey}
           sortDirection={sortDirection}
-          className="comp-cell-width-110 sticky-col sticky-col--left"
+          className="comp-cell-width-110 comp-cell-min-width-110 sticky-col sticky-col--left"
         />
         <SortableHeader
           id="incident-date-column"
@@ -26,6 +26,7 @@ export const WildlifeComplaintListHeader: FC<Props> = ({ handleSort, sortKey, so
           sortKey="incident_reported_utc_timestmp"
           currentSort={sortKey}
           sortDirection={sortDirection}
+          className="comp-cell-width-160 comp-cell-min-width-160"
         />
         <SortableHeader
           title="Nature of Complaint"
@@ -51,8 +52,8 @@ export const WildlifeComplaintListHeader: FC<Props> = ({ handleSort, sortKey, so
           sortDirection={sortDirection}
         />
 
-        <th className="unsortable">
-          <div className="comp-header-label">Location/Address</div>
+        <th className="unsortable-header">
+          <div className="header-label">Location/Address</div>
         </th>
 
         <SortableHeader
@@ -61,6 +62,7 @@ export const WildlifeComplaintListHeader: FC<Props> = ({ handleSort, sortKey, so
           sortKey="complaint_status_code"
           currentSort={sortKey}
           sortDirection={sortDirection}
+          className="comp-cell-width-110"
         />
 
         <SortableHeader
@@ -78,9 +80,10 @@ export const WildlifeComplaintListHeader: FC<Props> = ({ handleSort, sortKey, so
           sortKey="update_utc_timestamp"
           currentSort={sortKey}
           sortDirection={sortDirection}
+          className="comp-cell-width-160 comp-cell-min-width-160"
         />
 
-        <th className="comp-cell-width-100 unsortable sticky-col sticky-col--right actions-col">
+        <th className="unsortable sticky-col sticky-col--right comp-cell-width-90 comp-cell-min-width-90 actions-col hwc-table-actions-cell">
           <div className="header-label">Actions</div>
         </th>
       </tr>

diff --git a/...nd/src/app/components/containers/complaints/list-items/allegation-complaint-list-item.tsx b/...nd/src/app/components/containers/complaints/list-items/allegation-complaint-list-item.tsx
@@ -114,7 +114,7 @@ export const AllegationComplaintListItem: FC<Props> = ({ type, complaint }) => {
         className={`${isExpandedClass} ${isRowHovered ? "comp-table-row-hover-style" : ""}`}
       >
         <td
-          className={`comp-cell-width-100 sticky-col sticky-col--left incident-col ${isExpandedClass}`}
+          className={`comp-cell-width-110 sticky-col sticky-col--left text-center ${isExpandedClass}`}
           onClick={toggleExpand}
         >
           <Link
@@ -125,7 +125,7 @@ export const AllegationComplaintListItem: FC<Props> = ({ type, complaint }) => {
           </Link>
         </td>
         <td
-          className={`${isExpandedClass}`}
+          className={`comp-cell-width-160 comp-cell-min-width-160 ac-table-date-cell ${isExpandedClass}`}
           onClick={toggleExpand}
         >
           {reportedOnDateTime}
@@ -179,14 +179,14 @@ export const AllegationComplaintListItem: FC<Props> = ({ type, complaint }) => {
           className={`${isExpandedClass}`}
           onClick={toggleExpand}
         >
-          <div
-            data-initials-listview={getOfficerAssignedInitials()}
-            className="comp-profile-avatar"
-          ></div>
           {getOfficerAssigned()}
         </td>
-        <td className={`${isExpandedClass}`}>{updatedOnDateTime}</td>
-        <td className={`comp-cell-width-110 sticky-col sticky-col--right actions-col ${isExpandedClass}`}>
+        <td className={`comp-cell-width-160 comp-cell-min-width-160 ac-table-date-cell ${isExpandedClass}`}>
+          {updatedOnDateTime}
+        </td>
+        <td
+          className={`comp-cell-width-90 comp-cell-min-width-90 sticky-col sticky-col--right actions-col ac-table-actions-cell ${isExpandedClass}`}
+        >
           <ComplaintActionItems
             complaint_identifier={id}
             complaint_type={type}
@@ -225,7 +225,9 @@ export const AllegationComplaintListItem: FC<Props> = ({ type, complaint }) => {
               </div>
             </dl>
           </td>
-          <td className={`comp-cell-width-110 comp-cell-child-expanded sticky-col sticky-col--right actions-col`}></td>
+          <td
+            className={`comp-cell-width-90 comp-cell-min-width-90 sticky-col sticky-col--right actions-col ac-table-actions-cell`}
+          ></td>
         </tr>
       )}
     </>

diff --git a/frontend/src/app/components/containers/complaints/list-items/general-complaint-list-item.tsx b/frontend/src/app/components/containers/complaints/list-items/general-complaint-list-item.tsx
@@ -115,7 +115,7 @@ export const GeneralInformationComplaintListItem: FC<Props> = ({ type, complaint
         className={`${isExpandedClass} ${isRowHovered ? "comp-table-row-hover-style" : ""}`}
       >
         <td
-          className={`comp-cell-width-100 sticky-col sticky-col--left incident-col ${isExpandedClass}`}
+          className={`comp-cell-width-100 sticky-col sticky-col--left text-center ${isExpandedClass}`}
           onClick={toggleExpand}
         >
           <Link
@@ -126,7 +126,7 @@ export const GeneralInformationComplaintListItem: FC<Props> = ({ type, complaint
           </Link>
         </td>
         <td
-          className={`${isExpandedClass}`}
+          className={`comp-cell-width-160 comp-cell-min-width-160 gc-table-date-cell ${isExpandedClass}`}
           onClick={toggleExpand}
         >
           {reportedOnDateTime}
@@ -165,8 +165,12 @@ export const GeneralInformationComplaintListItem: FC<Props> = ({ type, complaint
           ></div>
           {getOfficerAssigned()}
         </td>
-        <td className={`${isExpandedClass}`}>{updatedOnDateTime}</td>
-        <td className={`comp-cell-width-110 sticky-col sticky-col--right actions-col ${isExpandedClass}`}>
+        <td className={`comp-cell-width-160 comp-cell-min-width-160 gc-table-date-cell ${isExpandedClass}`}>
+          {updatedOnDateTime}
+        </td>
+        <td
+          className={`comp-cell-width-90 comp-cell-min-width-90 sticky-col sticky-col--right actions-col gc-table-actions-cell ${isExpandedClass}`}
+        >
           <ComplaintActionItems
             complaint_identifier={id}
             complaint_type={type}
@@ -205,7 +209,9 @@ export const GeneralInformationComplaintListItem: FC<Props> = ({ type, complaint
               </div>
             </dl>
           </td>
-          <td className={`comp-cell-width-110 comp-cell-child-expanded sticky-col sticky-col--right actions-col`}></td>
+          <td
+            className={`comp-cell-width-90 comp-cell-min-width-90 sticky-col sticky-col--right actions-col gc-table-actions-cell`}
+          ></td>
         </tr>
       )}
     </>

diff --git a/...tend/src/app/components/containers/complaints/list-items/wildlife-complaint-list-item.tsx b/...tend/src/app/components/containers/complaints/list-items/wildlife-complaint-list-item.tsx
@@ -115,7 +115,7 @@ export const WildlifeComplaintListItem: FC<Props> = ({ type, complaint }) => {
         className={`${isExpandedClass} ${isRowHovered ? "comp-table-row-hover-style" : ""}`}
       >
         <td
-          className={`comp-cell-width-95 sticky-col sticky-col--left incident-col ${isExpandedClass}`}
+          className={`comp-cell-width-110 sticky-col sticky-col--left text-center ${isExpandedClass}`}
           onClick={toggleExpand}
         >
           <Link
@@ -126,13 +126,13 @@ export const WildlifeComplaintListItem: FC<Props> = ({ type, complaint }) => {
           </Link>
         </td>
         <td
-          className={`comp-cell-width-95 ${isExpandedClass}`}
+          className={`comp-cell-width-160 comp-cell-min-width-160 hwc-table-date-cell ${isExpandedClass}`}
           onClick={toggleExpand}
         >
           {reportedOnDateTime}
         </td>
         <td
-          className={`comp-cell-width-330 ${isExpandedClass}`}
+          className={`hwc-nature-of-complaint-cell ${isExpandedClass}`}
           onClick={toggleExpand}
         >
           {natureCode}
@@ -150,7 +150,7 @@ export const WildlifeComplaintListItem: FC<Props> = ({ type, complaint }) => {
           {location}
         </td>
         <td
-          className={`comp-cell-width-170 ${isExpandedClass}`}
+          className={`${isExpandedClass}`}
           onClick={toggleExpand}
         >
           {locationSummary}
@@ -162,17 +162,17 @@ export const WildlifeComplaintListItem: FC<Props> = ({ type, complaint }) => {
           <div className={statusButtonClass}>{getStatusDescription(status)}</div>
         </td>
         <td
-          className={`comp-cell-width-130 ${isExpandedClass}`}
+          className={`${isExpandedClass}`}
           onClick={toggleExpand}
         >
-          <div
-            data-initials-listview={getOfficerAssignedInitials()}
-            className="comp-profile-avatar"
-          ></div>
           {getOfficerAssigned()}
         </td>
-        <td className={`comp-cell-width-110 ${isExpandedClass}`}>{updatedOnDateTime}</td>
-        <td className={`comp-cell-width-110 sticky-col sticky-col--right actions-col ${isExpandedClass}`}>
+        <td className={`comp-cell-width-160 comp-cell-min-width-160 hwc-table-date-cell ${isExpandedClass}`}>
+          {updatedOnDateTime}
+        </td>
+        <td
+          className={`comp-cell-width-90 comp-cell-min-width-90 sticky-col sticky-col--right actions-col hwc-table-actions-cell ${isExpandedClass}`}
+        >
           <ComplaintActionItems
             complaint_identifier={id}
             complaint_type={type}
@@ -211,7 +211,9 @@ export const WildlifeComplaintListItem: FC<Props> = ({ type, complaint }) => {
               </div>
             </dl>
           </td>
-          <td className={`comp-cell-width-110 comp-cell-child-expanded sticky-col sticky-col--right actions-col`}></td>
+          <td
+            className={`comp-cell-width-90 comp-cell-min-width-90 comp-cell-child-expanded sticky-col sticky-col--right actions-col`}
+          ></td>
         </tr>
       )}
     </>