From de39fa26e5abe8e9cf335aaed52b1ef492809616 Mon Sep 17 00:00:00 2001
From: Jake Turner <turnerj804@gmail.com>
Date: Mon, 10 Jul 2023 22:07:19 -0700
Subject: [PATCH 1/2] feat(Projects): collapse team list if larger than five
 members

---
 .../src/components/projects/ProjectView.jsx   | 80 +++++++++++++++----
 1 file changed, 63 insertions(+), 17 deletions(-)

diff --git a/client/src/components/projects/ProjectView.jsx b/client/src/components/projects/ProjectView.jsx
index 1594dcde..8f7288ee 100644
--- a/client/src/components/projects/ProjectView.jsx
+++ b/client/src/components/projects/ProjectView.jsx
@@ -104,6 +104,7 @@ const ProjectView = (props) => {
   const [showFiles, setShowFiles] = useState(true);
   const [showReviewerCrumb, setShowReviewerCrumb] = useState(false);
   const [showJoinComingSoon, setShowJoinComingSoon] = useState(false);
+  const [showAllTeamMembers, setShowAllTeamMembers] = useState(false);
 
   // Project Data
   const [project, setProject] = useState({});
@@ -1718,31 +1719,76 @@ const ProjectView = (props) => {
     }
   };
 
-  const renderTeamList = (projData) => {
+  const renderTeamList = (projData, showAll) => {
+    const moreThanFive = [...projData.leads, ...projData.liaisons, ...projData.members, ...projData.auditors].length > 5;
+    let sliceStart;
+    let sliceEnd;
+
+    if(!showAll && moreThanFive){
+      sliceStart = 0;
+      sliceEnd = 2;
+    }
+
     const renderListItem = (item, role, idx) => {
       return (
         <List.Item key={`${role}-${idx}`}>
           <Image avatar src={item.avatar} />
-          <List.Content>{item.firstName} {item.lastName} <span className='muted-text'>({role})</span></List.Content>
+          <List.Content>
+            {item.firstName} {item.lastName}{" "}
+            <span className="muted-text">({role})</span>
+          </List.Content>
         </List.Item>
       );
     };
+
     return (
-      <List divided verticalAlign='middle'>
-        {(projData.hasOwnProperty('leads') && Array.isArray(projData.leads)) &&
-          sortUsersByName(project.leads).map((item, idx) => renderListItem(item, 'Lead', idx))
-        }
-        {(projData.hasOwnProperty('liaisons') && Array.isArray(projData.liaisons)) &&
-          sortUsersByName(project.liaisons).map((item, idx) => renderListItem(item, 'Liaison', idx))
-        }
-        {(projData.hasOwnProperty('members') && Array.isArray(projData.members)) &&
-          sortUsersByName(project.members).map((item, idx) => renderListItem(item, 'Member', idx))
-        }
-        {(projData.hasOwnProperty('auditors') && Array.isArray(projData.auditors)) &&
-          sortUsersByName(project.auditors).map((item, idx) => renderListItem(item, 'Auditor', idx))
-        }
+      <List divided verticalAlign="middle">
+        {projData.hasOwnProperty("leads") &&
+          Array.isArray(projData.leads) &&
+          sortUsersByName(project.leads)
+            .slice(sliceStart, sliceEnd)
+            .map((item, idx) => renderListItem(item, "Lead", idx))}
+        {projData.hasOwnProperty("liaisons") &&
+          Array.isArray(projData.liaisons) &&
+          sortUsersByName(project.liaisons)
+            .slice(sliceStart, sliceEnd)
+            .map((item, idx) => renderListItem(item, "Liaison", idx))}
+        {projData.hasOwnProperty("members") &&
+          Array.isArray(projData.members) &&
+          sortUsersByName(project.members)
+            .slice(sliceStart, sliceEnd)
+            .map((item, idx) => renderListItem(item, "Member", idx))}
+        {projData.hasOwnProperty("auditors") &&
+          Array.isArray(projData.auditors) &&
+          sortUsersByName(project.auditors)
+            .slice(sliceStart, sliceEnd)
+            .map((item, idx) => renderListItem(item, "Auditor", idx))}
+        {!showAll && moreThanFive && (
+          <List.Item key="collapsed-msg">
+            <List.Content className="text-center">
+              <span className="muted-text">
+                Team list collapsed for brevity.{" "}
+                <a onClick={() => setShowAllTeamMembers(!showAllTeamMembers)}>
+                  Click to show all...
+                </a>
+              </span>
+            </List.Content>
+          </List.Item>
+        )}
+        {showAll && moreThanFive && (
+          <List.Item key="showing-all-msg">
+            <List.Content className="text-center">
+              <span className="muted-text">
+                Showing all team members.{" "}
+                <a onClick={() => setShowAllTeamMembers(!showAllTeamMembers)}>
+                  Click to collapse...
+                </a>
+              </span>
+            </List.Content>
+          </List.Item>
+        )}
       </List>
-    )
+    );
   };
 
   return (
@@ -2103,7 +2149,7 @@ const ProjectView = (props) => {
                         <Grid.Column>
                           <Header as='h3' dividing>Team</Header>
                           {(Object.keys(project).length > 0) &&
-                            renderTeamList(project)
+                            renderTeamList(project, showAllTeamMembers)
                           }
                         </Grid.Column>
                       </Grid.Row>

From 4e4ed7eb37d0c6e6c7cee45bad6e692a250c5ae8 Mon Sep 17 00:00:00 2001
From: Ethan Turner <ethanaturner13@gmail.com>
Date: Tue, 11 Jul 2023 20:55:20 -0700
Subject: [PATCH 2/2] feat(Projects): collapse larger team lists

---
 .../src/components/projects/ProjectView.jsx   | 69 +++++++++----------
 client/src/components/util/ProjectHelpers.js  |  8 +++
 2 files changed, 42 insertions(+), 35 deletions(-)

diff --git a/client/src/components/projects/ProjectView.jsx b/client/src/components/projects/ProjectView.jsx
index 8f7288ee..241b061d 100644
--- a/client/src/components/projects/ProjectView.jsx
+++ b/client/src/components/projects/ProjectView.jsx
@@ -67,7 +67,8 @@ import {
   constructProjectTeam,
   checkCanViewProjectDetails,
   checkProjectAdminPermission,
-  checkProjectMemberPermission
+  checkProjectMemberPermission,
+  PROJECT_ROLE_SORT_ORDER
 } from '../util/ProjectHelpers.js';
 import {
   licenseOptions,
@@ -1720,22 +1721,39 @@ const ProjectView = (props) => {
   };
 
   const renderTeamList = (projData, showAll) => {
-    const moreThanFive = [...projData.leads, ...projData.liaisons, ...projData.members, ...projData.auditors].length > 5;
-    let sliceStart;
-    let sliceEnd;
+    const transformMembers = (role, roleDisplay) => (item) => ({
+      ...item,
+      name: `${item.firstName} ${item.lastName}`,
+      role,
+      roleDisplay,
+    });
 
-    if(!showAll && moreThanFive){
-      sliceStart = 0;
-      sliceEnd = 2;
-    }
+    const allTeamMembers = [
+      ...projData.leads.map(transformMembers('lead', 'Lead')),
+      ...projData.liaisons.map(transformMembers('liaison', 'Liaison')),
+      ...projData.members.map(transformMembers('member', 'Member')),
+      ...projData.auditors.map(transformMembers('auditor', 'Auditor')),
+    ];
+    allTeamMembers.sort((a, b) => {
+      if (PROJECT_ROLE_SORT_ORDER[a.role] < PROJECT_ROLE_SORT_ORDER[b.role]) {
+        return -1;
+      }
+      if (PROJECT_ROLE_SORT_ORDER[a.role] > PROJECT_ROLE_SORT_ORDER[b.role]) {
+        return 1;
+      }
+      return a.name.localeCompare(b.name);
+    });
+
+    const moreThanFive = allTeamMembers.length > 5;
+    const teamToDisplay = (!showAll && moreThanFive) ? allTeamMembers.slice(0, 5): allTeamMembers;
 
-    const renderListItem = (item, role, idx) => {
+    const renderListItem = (item, idx) => {
       return (
-        <List.Item key={`${role}-${idx}`}>
+        <List.Item key={`${item.role}-${idx}`}>
           <Image avatar src={item.avatar} />
           <List.Content>
             {item.firstName} {item.lastName}{" "}
-            <span className="muted-text">({role})</span>
+            <span className="muted-text">({item.roleDisplay})</span>
           </List.Content>
         </List.Item>
       );
@@ -1743,47 +1761,28 @@ const ProjectView = (props) => {
 
     return (
       <List divided verticalAlign="middle">
-        {projData.hasOwnProperty("leads") &&
-          Array.isArray(projData.leads) &&
-          sortUsersByName(project.leads)
-            .slice(sliceStart, sliceEnd)
-            .map((item, idx) => renderListItem(item, "Lead", idx))}
-        {projData.hasOwnProperty("liaisons") &&
-          Array.isArray(projData.liaisons) &&
-          sortUsersByName(project.liaisons)
-            .slice(sliceStart, sliceEnd)
-            .map((item, idx) => renderListItem(item, "Liaison", idx))}
-        {projData.hasOwnProperty("members") &&
-          Array.isArray(projData.members) &&
-          sortUsersByName(project.members)
-            .slice(sliceStart, sliceEnd)
-            .map((item, idx) => renderListItem(item, "Member", idx))}
-        {projData.hasOwnProperty("auditors") &&
-          Array.isArray(projData.auditors) &&
-          sortUsersByName(project.auditors)
-            .slice(sliceStart, sliceEnd)
-            .map((item, idx) => renderListItem(item, "Auditor", idx))}
+        {teamToDisplay.map((item, idx) => renderListItem(item, idx))}
         {!showAll && moreThanFive && (
           <List.Item key="collapsed-msg">
             <List.Content className="text-center">
-              <span className="muted-text">
+              <p className="muted-text mt-1p">
                 Team list collapsed for brevity.{" "}
                 <a onClick={() => setShowAllTeamMembers(!showAllTeamMembers)}>
                   Click to show all...
                 </a>
-              </span>
+              </p>
             </List.Content>
           </List.Item>
         )}
         {showAll && moreThanFive && (
           <List.Item key="showing-all-msg">
             <List.Content className="text-center">
-              <span className="muted-text">
+              <p className="muted-text mt-1p">
                 Showing all team members.{" "}
                 <a onClick={() => setShowAllTeamMembers(!showAllTeamMembers)}>
                   Click to collapse...
                 </a>
-              </span>
+              </p>
             </List.Content>
           </List.Item>
         )}
diff --git a/client/src/components/util/ProjectHelpers.js b/client/src/components/util/ProjectHelpers.js
index c3ca7f83..d712fc23 100644
--- a/client/src/components/util/ProjectHelpers.js
+++ b/client/src/components/util/ProjectHelpers.js
@@ -48,6 +48,13 @@ const classificationDescriptions = [
     }
 ];
 
+const PROJECT_ROLE_SORT_ORDER = {
+    lead: 1,
+    liaison: 2,
+    member: 3,
+    auditor: 4,
+};
+
 const projectRoleOptions = [
     { key: 'lead',      text: 'Team Lead',          value: 'lead' },
     { key: 'liaison',   text: 'Project Liaison',    value: 'liaison' },
@@ -376,6 +383,7 @@ const getFilesAccessText = (access) => {
 
 export {
     PROJECT_FILES_ACCESS_SETTINGS,
+    PROJECT_ROLE_SORT_ORDER,
     visibilityOptions,
     statusOptions,
     createTaskOptions,