View history of roles in teams-committees-councils page (#9122)

* View history of roles in teams-committees-councils page

* Removed metadata file

app/models/team_member.rb

@@ -80,6 +80,7 @@ def role
     {
       id: team.group_type + "_" + self.id.to_s,
       start_date: start_date,
+      end_date: end_date,
       is_active: current_member?,
       group: team.group || {
         id: team.group_type + "_" + team.id.to_s,

app/models/user_group.rb

@@ -41,7 +41,7 @@ def roles
       role_list.concat(Team.board.reload.current_members.map(&:board_role))
     end
     if self.councils?
-      TeamMember.where(team_id: self.team.id, end_date: nil).each do |team_member|
+      TeamMember.where(team_id: self.team.id).each do |team_member|
         role_list << team_member.role
       end
     end

app/views/static_pages/teams_committees_councils.html.erb

@@ -1,3 +1,5 @@
 <% provide(:title, t("page.teams_committees_councils.title")) %>
 
-<%= react_component('TeamsCommitteesCouncils') %>
+<%= react_component('TeamsCommitteesCouncils', {
+  canViewPastRoles: current_user&.staff?
+}) %>

app/webpacker/components/TeamsCommitteesCouncils/GroupPage.jsx

@@ -1,56 +1,39 @@
 import React from 'react';
-import { Table } from 'semantic-ui-react';
+import { Header } from 'semantic-ui-react';
 import EmailButton from '../EmailButton';
 import { apiV0Urls } from '../../lib/requests/routes.js.erb';
 import I18n from '../../lib/i18n';
 import useLoadedData from '../../lib/hooks/useLoadedData';
 import Loading from '../Requests/Loading';
 import Errored from '../Requests/Errored';
-import UserBadge from '../UserBadge';
+import RolesTable from './RolesTable';
 
-export default function GroupPage({ group }) {
+export default function GroupPage({ group, canViewPastRoles }) {
   const {
-    data: groupMembers,
-    loading: groupMembersLoading,
-    error: groupMembersError,
+    data: activeRoles,
+    loading: activeRolesLoading,
+    error: activeRolesError,
   } = useLoadedData(apiV0Urls.userRoles.listOfGroup(group.id, 'status,name', { isActive: true }));
+  const {
+    data: pastRoles,
+    loading: pastRolesLoading,
+    error: pastRolesError,
+  } = useLoadedData(apiV0Urls.userRoles.listOfGroup(group.id, 'status,name', { isActive: false }));
 
-  if (groupMembersLoading) return <Loading />;
-  if (groupMembersError) return <Errored />;
+  if (activeRolesLoading || pastRolesLoading) return <Loading />;
+  if (activeRolesError || pastRolesError) return <Errored />;
 
   return (
     <>
       <p>{I18n.t(`page.teams_committees_councils.groups_description.${group.metadata.friendly_id}`)}</p>
       <EmailButton email={group.metadata.email} />
-      <Table unstackable>
-        <Table.Header>
-          <Table.Row>
-            <Table.HeaderCell>
-              {I18n.t('delegates_page.table.name')}
-            </Table.HeaderCell>
-            <Table.HeaderCell>
-              {I18n.t('delegates_page.table.role')}
-            </Table.HeaderCell>
-          </Table.Row>
-        </Table.Header>
-
-        <Table.Body>
-          {groupMembers.map((groupMember) => (
-            <Table.Row key={groupMember.user.id}>
-              <Table.Cell>
-                <UserBadge
-                  user={groupMember.user}
-                  hideBorder
-                  leftAlign
-                />
-              </Table.Cell>
-              <Table.Cell>
-                {I18n.t(`enums.user_roles.status.${groupMember.group.group_type}.${groupMember.metadata.status}`)}
-              </Table.Cell>
-            </Table.Row>
-          ))}
-        </Table.Body>
-      </Table>
+      <RolesTable roleList={activeRoles} />
+      {canViewPastRoles && (
+        <>
+          <Header>Past Roles</Header>
+          <RolesTable roleList={pastRoles} />
+        </>
+      )}
     </>
   );
 }

app/webpacker/components/TeamsCommitteesCouncils/RolesTable.jsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Table } from 'semantic-ui-react';
+import I18n from '../../lib/i18n';
+import UserBadge from '../UserBadge';
+
+export default function RolesTable({ roleList }) {
+  return (
+    <Table unstackable>
+      <Table.Header>
+        <Table.Row>
+          <Table.HeaderCell>
+            {I18n.t('delegates_page.table.name')}
+          </Table.HeaderCell>
+          <Table.HeaderCell>
+            {I18n.t('delegates_page.table.role')}
+          </Table.HeaderCell>
+        </Table.Row>
+      </Table.Header>
+
+      <Table.Body>
+        {roleList.map((role) => (
+          <Table.Row key={role.user.id}>
+            <Table.Cell>
+              <UserBadge
+                user={role.user}
+                hideBorder
+                leftAlign
+                subtexts={[role.end_date ? `${role.start_date} - ${role.end_date}` : '']}
+              />
+            </Table.Cell>
+            <Table.Cell>
+              {I18n.t(`enums.user_roles.status.${role.group.group_type}.${role.metadata.status}`)}
+            </Table.Cell>
+          </Table.Row>
+        ))}
+      </Table.Body>
+    </Table>
+  );
+}

app/webpacker/components/TeamsCommitteesCouncils/index.jsx

@@ -11,7 +11,7 @@ import Errored from '../Requests/Errored';
 import useHash from '../../lib/hooks/useHash';
 import GroupPage from './GroupPage';
 
-export default function TeamsCommitteesCouncils() {
+export default function TeamsCommitteesCouncils({ canViewPastRoles }) {
   const {
     data: teamsCommittees,
     loading: teamsCommitteesLoading,
@@ -94,7 +94,7 @@ export default function TeamsCommitteesCouncils() {
                 </Grid.Row>
                 <Grid.Row>
                   <Grid.Column>
-                    <GroupPage group={activeGroup} />
+                    <GroupPage group={activeGroup} canViewPastRoles={canViewPastRoles} />
                   </Grid.Column>
                 </Grid.Row>
               </Grid>