Add contacts table and improve code

EyeSeeTea · Nov 7, 2024 · 3ab4619 · 3ab4619
1 parent eb378dc
commit 3ab4619
Show file tree

Hide file tree

Showing 10 changed files with 448 additions and 205 deletions.
diff --git a/src/webapp/components/im-team-hierarchy/IMTeamHierarchyItem.tsx b/src/webapp/components/im-team-hierarchy/IMTeamHierarchyItem.tsx
@@ -15,10 +15,11 @@ type IMTeamHierarchyItemProps = {
     teamRole: string;
     member: Maybe<TeamMember>;
     disabled?: boolean;
-    onSelectedChange: (nodeId: string, selected: boolean) => void;
+    onSelectedChange?: (nodeId: string, selected: boolean) => void;
     subChildren: IMTeamHierarchyOption[];
     diseaseOutbreakEventName: string;
-    selectedItemIds: Id[];
+    selectedItemIds?: Id[];
+    isSelectable?: boolean;
 };
 
 export const IMTeamHierarchyItem: React.FC<IMTeamHierarchyItemProps> = React.memo(props => {
@@ -31,23 +32,28 @@ export const IMTeamHierarchyItem: React.FC<IMTeamHierarchyItemProps> = React.mem
         subChildren,
         diseaseOutbreakEventName,
         selectedItemIds,
+        isSelectable = false,
     } = props;
 
     const [openMemberProfile, setOpenMemberProfile] = React.useState(false);
 
     const onCheckboxChange = React.useCallback(
         (isChecked: boolean) => {
-            !disabled && onSelectedChange(nodeId, isChecked);
+            if (onSelectedChange && isSelectable && !disabled) {
+                onSelectedChange(nodeId, isChecked);
+            }
         },
-        [disabled, nodeId, onSelectedChange]
+        [disabled, nodeId, onSelectedChange, isSelectable]
     );
 
     const onTeamRoleClick = React.useCallback(
         (event: React.MouseEvent<Element, MouseEvent>) => {
-            event.preventDefault();
-            !disabled && onSelectedChange(nodeId, !selectedItemIds.includes(nodeId));
+            if (isSelectable && onSelectedChange && selectedItemIds) {
+                event.preventDefault();
+                !disabled && onSelectedChange(nodeId, !selectedItemIds.includes(nodeId));
+            }
         },
-        [disabled, nodeId, onSelectedChange, selectedItemIds]
+        [disabled, nodeId, onSelectedChange, selectedItemIds, isSelectable]
     );
 
     const onMemberClick = React.useCallback(
@@ -61,28 +67,22 @@ export const IMTeamHierarchyItem: React.FC<IMTeamHierarchyItemProps> = React.mem
         [member]
     );
 
-    const onLabelClick = React.useCallback(
-        (event: React.MouseEvent<Element, MouseEvent>) => {
-            event.preventDefault();
-            !disabled && onSelectedChange(nodeId, !selectedItemIds.includes(nodeId));
-        },
-        [disabled, nodeId, onSelectedChange, selectedItemIds]
-    );
-
     return (
         <>
             <StyledIMTeamHierarchyItem
                 nodeId={nodeId}
                 aria-disabled={disabled}
-                onLabelClick={onLabelClick}
+                onLabelClick={onTeamRoleClick}
                 label={
                     <LabelWrapper>
-                        <Checkbox
-                            id={`team-role-hierarchy-checkbox-${nodeId}`}
-                            checked={selectedItemIds.includes(nodeId)}
-                            onChange={onCheckboxChange}
-                            disabled={disabled}
-                        />
+                        {isSelectable && selectedItemIds && (
+                            <Checkbox
+                                id={`team-role-hierarchy-checkbox-${nodeId}`}
+                                checked={selectedItemIds.includes(nodeId)}
+                                onChange={onCheckboxChange}
+                                disabled={disabled}
+                            />
+                        )}
 
                         <RoleAndMemberWrapper>
                             <IconUser24 color="#4A5768" />
@@ -106,6 +106,7 @@ export const IMTeamHierarchyItem: React.FC<IMTeamHierarchyItemProps> = React.mem
                         onSelectedChange={onSelectedChange}
                         diseaseOutbreakEventName={diseaseOutbreakEventName}
                         subChildren={child.children}
+                        isSelectable={isSelectable}
                     />
                 ))}
             </StyledIMTeamHierarchyItem>

diff --git a/src/webapp/components/im-team-hierarchy/IMTeamHierarchyView.tsx b/src/webapp/components/im-team-hierarchy/IMTeamHierarchyView.tsx
@@ -20,12 +20,13 @@ export type IMTeamHierarchyOption = {
 
 type IMTeamHierarchyViewProps = {
     items: IMTeamHierarchyOption[];
-    selectedItemIds: Id[];
-    onSelectedItemChange: (nodeId: Id, selected: boolean) => void;
+    selectedItemIds?: Id[];
+    onSelectedItemChange?: (nodeId: Id, selected: boolean) => void;
     diseaseOutbreakEventName: string;
     onSearchChange: (term: string) => void;
     searchTerm: string;
     defaultTeamRolesExpanded: Id[];
+    isSelectable?: boolean;
 };
 
 export const IMTeamHierarchyView: React.FC<IMTeamHierarchyViewProps> = React.memo(props => {
@@ -37,6 +38,7 @@ export const IMTeamHierarchyView: React.FC<IMTeamHierarchyViewProps> = React.mem
         searchTerm,
         onSearchChange,
         defaultTeamRolesExpanded,
+        isSelectable = false,
     } = props;
 
     return (
@@ -59,6 +61,7 @@ export const IMTeamHierarchyView: React.FC<IMTeamHierarchyViewProps> = React.mem
                             onSelectedChange={onSelectedItemChange}
                             diseaseOutbreakEventName={diseaseOutbreakEventName}
                             subChildren={item.children}
+                            isSelectable={isSelectable}
                         />
                     ))}
                 </StyledIMTeamHierarchyView>

diff --git a/src/webapp/components/incident-management-team/IncidentManagementTeamView.tsx b/src/webapp/components/incident-management-team/IncidentManagementTeamView.tsx
@@ -0,0 +1,61 @@
+import React from "react";
+import styled from "styled-components";
+
+import {
+    IMTeamHierarchyOption,
+    IMTeamHierarchyView,
+} from "../im-team-hierarchy/IMTeamHierarchyView";
+import { Id } from "../../../domain/entities/Ref";
+import { BasicTable, TableColumn, TableRowType } from "../table/BasicTable";
+
+type IncidentManagementTeamViewProps = {
+    selectedHierarchyItemIds?: Id[];
+    onSelectHierarchyItem?: (nodeId: string, selected: boolean) => void;
+    searchTerm: string;
+    onSearchChange: (term: string) => void;
+    incidentManagementTeamHierarchyItems: IMTeamHierarchyOption[];
+    defaultTeamRolesExpanded: Id[];
+    diseaseOutbreakEventName: string;
+    isSelectable?: boolean;
+    constactTableColumns: TableColumn[];
+    constactTableRows: TableRowType[];
+};
+
+export const IncidentManagementTeamView: React.FC<IncidentManagementTeamViewProps> = React.memo(
+    props => {
+        const {
+            selectedHierarchyItemIds,
+            onSelectHierarchyItem,
+            searchTerm,
+            onSearchChange,
+            incidentManagementTeamHierarchyItems,
+            defaultTeamRolesExpanded,
+            diseaseOutbreakEventName,
+            constactTableColumns,
+            constactTableRows,
+            isSelectable = false,
+        } = props;
+
+        return (
+            <IncidentManagementTeamViewContainer>
+                <IMTeamHierarchyView
+                    items={incidentManagementTeamHierarchyItems}
+                    selectedItemIds={selectedHierarchyItemIds}
+                    onSelectedItemChange={onSelectHierarchyItem}
+                    diseaseOutbreakEventName={diseaseOutbreakEventName}
+                    onSearchChange={onSearchChange}
+                    searchTerm={searchTerm}
+                    defaultTeamRolesExpanded={defaultTeamRolesExpanded}
+                    isSelectable={isSelectable}
+                />
+                <BasicTable columns={constactTableColumns} rows={constactTableRows} />
+            </IncidentManagementTeamViewContainer>
+        );
+    }
+);
+
+const IncidentManagementTeamViewContainer = styled.div`
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+`;