Participants loading data, table label setup

bcgov · Sep 29, 2023 · 78a0ba6 · 78a0ba6
1 parent 3aef9d8
commit 78a0ba6
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 11 deletions.
diff --git a/frontend/site-search-frontend/src/features/site-details/notations.tsx b/frontend/site-search-frontend/src/features/site-details/notations.tsx
@@ -117,6 +117,7 @@ function NotationItem({ notation, index, onClickAddParticipant }: { notation: No
 
 
             <SiteDetailsTable 
+                label='Notation Participants'
                 headers={[
                     {label: 'Name', accessor: 'name'},
                     {label: 'Role', accessor: 'role'},

diff --git a/frontend/site-search-frontend/src/features/site-details/participants.tsx b/frontend/site-search-frontend/src/features/site-details/participants.tsx
@@ -3,28 +3,30 @@ import SubSearch from "./sub-search/SubSearch";
 import { RootState } from "@/store";
 import { useSelector } from "react-redux";
 import SiteDetailsTable from "./table/SiteDetailsTable";
+import { useParams } from "react-router-dom";
+import { Site } from "@/api/sites";
 
 export default function Participants() {
-    const editMode = useSelector((state: RootState) => state.edit.editMode);
+    const { siteID } = useParams();
+    const siteIDNum = parseInt(siteID);
+    const site: Site = useSelector((state: RootState) => state.site.value.find(searchedSite => searchedSite.siteID === siteIDNum));
+    // const dispatch = useDispatch();
 
     return (
         <div>
-            <h4>Site Participants go here</h4>
-
             <SubSearch label="Participants" showResultsDropdown={true}/>
 
 
             <SiteDetailsTable 
+                label='Site Participants'
                 headers={[
-                    {label: 'Participant', accessor: 'participant'},
+                    {label: 'Participant', accessor: 'name'},
                     {label: 'Role(s)', accessor: 'roles'},
                     {label: 'Start Date', accessor: 'startDate'},
                     {label: 'End Date', accessor: 'endDate'},
                     {label: 'Notes', accessor: 'notes'},
                 ]}
-                data={[
-                    {participant: 'SHELL CANADA', roles: ['ORGANIZATION'], startDate: 'today', endDate: 'yesterday', notes: '', siteRegistry: false}
-                ]}
+                data={site.participants}
 
             />
 

diff --git a/frontend/site-search-frontend/src/features/site-details/table/SiteDetailsTable.tsx b/frontend/site-search-frontend/src/features/site-details/table/SiteDetailsTable.tsx
@@ -7,6 +7,7 @@ import { SiteRegistryIconButton } from '@/components/SiteRegistryIcon';
 
 interface SiteDetailsTableProps {
     onClickAdd?
+    label: string;
     headers: { label: string, accessor: string}[]
     // rows: any[];
     data: {
@@ -21,7 +22,7 @@ interface SiteDetailsTableProps {
 // Site Registry togglez    
 // editMode
 
-export default function SiteDetailsTable({ onClickAdd, headers, data }: SiteDetailsTableProps) {
+export default function SiteDetailsTable({ onClickAdd, headers, data, label }: SiteDetailsTableProps) {
     // const isMinistry = useSelector((state: RootState) => state.user.isMinistry);
     const editMode = useSelector((state: RootState) => state.edit.editMode);
 
@@ -39,11 +40,11 @@ export default function SiteDetailsTable({ onClickAdd, headers, data }: SiteDeta
 
             {/* TODO - Rip this out and make its own component, but how handle differing columns and fields elegantly? children props / slots most likely. */}
             {/* SiteDetailsTable */}
-            <div className={`${siteDetailsStyles.metadataGridItem} ${siteDetailsStyles.formLabel} mt-4 px-2`}>Notation Participants</div>
+            <div className={`${siteDetailsStyles.metadataGridItem} ${siteDetailsStyles.formLabel} mt-4 px-2`}>{label}</div>
             <Table bordered hover>
                 <thead>
                     <tr>
-                        {editMode && <th><Form.Check aria-label="Select all Notation Participants" /></th>}
+                        {editMode && <th><Form.Check aria-label="Select all {label}" /></th>}
                         {headers?.map((header, index) => <th key={index}>{header.label}</th>)}
                         {editMode && <th>SR</th>}
                     </tr>
@@ -53,7 +54,7 @@ export default function SiteDetailsTable({ onClickAdd, headers, data }: SiteDeta
                     {data?.map((row, index) => {
                         return (
                             <tr key={index}>
-                                {editMode && <td><Form.Check aria-label="Select this notation participant" /></td>}
+                                {editMode && <td><Form.Check aria-label="Select this {label}" /></td>}
                                 {headers?.map((header, index) => <td key={index}><TableEditItem value={row[header.accessor]} /></td>)}
                                 {editMode && <td> <SiteRegistryIconButton siteRegistry={row.siteRegistry} /></td>}
                             </tr>