Skip to content

Commit de90666

Browse files
ChinemeremChigboChinemeremChigbo
committed
Update UserManagementTable.tsx
1 parent 703700e commit de90666

File tree

1 file changed

+96
-59
lines changed

1 file changed

+96
-59
lines changed

‎src/components/dashboard/user_management/UserManagementTable.tsx‎

Lines changed: 96 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ import useUserFiltering from '@hooks/useUserFiltering';
2121
import { getAbsenceColor } from '@utils/getAbsenceColor';
2222
import { getSelectedYearAbsences as computeYearlyAbsences } from '@utils/getSelectedYearAbsences';
2323
import { FilterOptions, Role, SubjectAPI, UserAPI } from '@utils/types';
24-
import React, { useEffect, useState } from 'react';
24+
import { useEffect, useState } from 'react';
2525
import {
2626
FiClock,
2727
FiLock,
@@ -32,7 +32,7 @@ import {
3232
} from 'react-icons/fi';
3333
import EditableRoleCell from './EditableRoleCell';
3434
import EditableSubscriptionsCell from './EditableSubscriptionsCell';
35-
import FilterPopup from './FilterPopup';
35+
import FilterPopup, { NO_EMAIL_TAGS } from './FilterPopup';
3636

3737
type SortField = 'name' | 'email' | 'absences' | 'role';
3838

@@ -73,6 +73,26 @@ export const UserManagementTable: React.FC<UserManagementTableProps> = ({
7373
const getSelectedYearAbsences = (absences?: any[]) =>
7474
computeYearlyAbsences(absences, selectedYearRange);
7575

76+
// Clean up disabled tags when available tags change
77+
useEffect(() => {
78+
if (filters.disabledTags && filters.disabledTags.length > 0) {
79+
// Keep only valid non-archived tags and the special NO_EMAIL_TAGS tag
80+
const validDisabledTags = filters.disabledTags.filter(
81+
(tag) =>
82+
(availableTags.includes(tag) &&
83+
!allSubjects.find((s) => s.name === tag)?.archived) ||
84+
tag === NO_EMAIL_TAGS
85+
);
86+
87+
if (validDisabledTags.length !== filters.disabledTags.length) {
88+
setFilters({
89+
...filters,
90+
disabledTags: validDisabledTags,
91+
});
92+
}
93+
}
94+
}, [availableTags, filters, allSubjects]);
95+
7696
useEffect(() => {
7797
// Use subjects from props if available, otherwise fetch them
7898
if (propSubjects && propSubjects.length > 0) {
@@ -104,6 +124,9 @@ export const UserManagementTable: React.FC<UserManagementTableProps> = ({
104124

105125
users.forEach((user: UserAPI) => {
106126
user.mailingLists?.forEach((list) => {
127+
// Skip archived subjects
128+
if (list.subject.archived) return;
129+
107130
const tagName = list.subject.name;
108131
tags.add(tagName);
109132

@@ -116,7 +139,7 @@ export const UserManagementTable: React.FC<UserManagementTableProps> = ({
116139

117140
setAvailableTags(Array.from(tags));
118141
setTagColors(colors);
119-
}, [users]);
142+
}, [users, allSubjects]);
120143

121144
const handleSort = (field: SortField) => {
122145
if (sortField === field) {
@@ -294,64 +317,78 @@ export const UserManagementTable: React.FC<UserManagementTableProps> = ({
294317
</Thead>
295318

296319
<Tbody>
297-
{isLoading
298-
? null
299-
: sortedUsers.map((user, index) => (
300-
<Tr
301-
key={index}
302-
sx={{
303-
':last-child td': { borderBottom: 'none' },
304-
}}
305-
>
306-
<Td py="6px">
307-
<HStack spacing={5}>
308-
<Avatar
309-
size="sm"
310-
name={`${user.firstName} ${user.lastName}`}
311-
src={user.profilePicture || undefined}
312-
loading="eager"
313-
ignoreFallback
314-
/>
320+
{isLoading ? null : sortedUsers.length > 0 ? (
321+
sortedUsers.map((user, index) => (
322+
<Tr
323+
key={index}
324+
sx={{
325+
':last-child td': { borderBottom: 'none' },
326+
}}
327+
>
328+
<Td py="6px">
329+
<HStack spacing={5}>
330+
<Avatar
331+
size="sm"
332+
name={`${user.firstName} ${user.lastName}`}
333+
src={user.profilePicture || undefined}
334+
loading="eager"
335+
ignoreFallback
336+
/>
315337

316-
<Text textStyle="cellBold" whiteSpace="nowrap">
317-
{`${user.firstName} ${user.lastName}`}
318-
</Text>
319-
</HStack>
320-
</Td>
321-
<Td color="gray.600">
322-
<Text textStyle="cellBody">{user.email}</Text>
323-
</Td>
324-
<Td textAlign="center" py="6px">
325-
<Text
326-
textStyle="cellBold"
327-
color={getAbsenceColor(
328-
getSelectedYearAbsences(user.absences),
329-
absenceCap
330-
)}
331-
>
332-
{getSelectedYearAbsences(user.absences)}{' '}
338+
<Text textStyle="cellBold" whiteSpace="nowrap">
339+
{`${user.firstName} ${user.lastName}`}
333340
</Text>
334-
</Td>
335-
<Td py="6px">
336-
<EditableRoleCell
337-
key={`role-cell-${user.id}`}
338-
role={user.role}
339-
onRoleChange={(newRole) =>
340-
updateUserRole(user.id, newRole as Role)
341-
}
342-
/>
343-
</Td>
344-
<Td py={0}>
345-
<EditableSubscriptionsCell
346-
mailingLists={user.mailingLists || []}
347-
allSubjects={allSubjects}
348-
onSubscriptionsChange={(subjectIds) =>
349-
updateUserSubscriptions(user.id, subjectIds)
350-
}
351-
/>
352-
</Td>
353-
</Tr>
354-
))}
341+
</HStack>
342+
</Td>
343+
<Td color="gray.600">
344+
<Text textStyle="cellBody">{user.email}</Text>
345+
</Td>
346+
<Td textAlign="center" py="6px">
347+
<Text
348+
textStyle="cellBold"
349+
color={getAbsenceColor(
350+
getSelectedYearAbsences(user.absences),
351+
absenceCap
352+
)}
353+
>
354+
{getSelectedYearAbsences(user.absences)}{' '}
355+
</Text>
356+
</Td>
357+
<Td py="6px">
358+
<EditableRoleCell
359+
key={`role-cell-${user.id}`}
360+
role={user.role}
361+
onRoleChange={(newRole) =>
362+
updateUserRole(user.id, newRole as Role)
363+
}
364+
/>
365+
</Td>
366+
<Td py={0}>
367+
<EditableSubscriptionsCell
368+
mailingLists={user.mailingLists || []}
369+
allSubjects={allSubjects}
370+
onSubscriptionsChange={(subjectIds) =>
371+
updateUserSubscriptions(user.id, subjectIds)
372+
}
373+
/>
374+
</Td>
375+
</Tr>
376+
))
377+
) : (
378+
<Tr>
379+
<Td
380+
height="100%"
381+
colSpan={5}
382+
textAlign="center"
383+
py={8}
384+
border="none"
385+
>
386+
<Text textStyle="h2" fontSize="18px" color="text.subtitle">
387+
No Users Found
388+
</Text>
389+
</Td>
390+
</Tr>
391+
)}
355392
</Tbody>
356393
</Table>
357394
</Box>

0 commit comments

Comments
 (0)