Filtered out the fields from the UserCard in the list wouldn't have anything to display
This commit is contained in:
Joao Ramos
@@ -787,144 +787,156 @@ export default function UserList({
|
|||||||
document.body.removeChild(element);
|
document.body.removeChild(element);
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
const viewStudentFilter = (x: User) => x.type === "student";
|
||||||
<>
|
const viewTeacherFilter = (x: User) => x.type === "teacher";
|
||||||
{renderHeader && renderHeader(displayUsers.length)}
|
const belongsToAdminFilter = (x: User) => {
|
||||||
<div className="w-full">
|
if (!selectedUser) return false;
|
||||||
<Modal isOpen={!!selectedUser} onClose={() => setSelectedUser(undefined)}>
|
return groups
|
||||||
<>
|
.filter(
|
||||||
{selectedUser && (
|
(g) =>
|
||||||
<div className="w-full flex flex-col gap-8">
|
g.admin === selectedUser.id ||
|
||||||
<UserCard
|
g.participants.includes(selectedUser.id)
|
||||||
loggedInUser={user}
|
)
|
||||||
onViewStudents={
|
.flatMap((g) => g.participants)
|
||||||
selectedUser.type === "corporate" ||
|
.includes(x.id);
|
||||||
selectedUser.type === "teacher"
|
};
|
||||||
? () => {
|
|
||||||
appendUserFilters({
|
|
||||||
id: "view-students",
|
|
||||||
filter: (x: User) => x.type === "student",
|
|
||||||
});
|
|
||||||
appendUserFilters({
|
|
||||||
id: "belongs-to-admin",
|
|
||||||
filter: (x: User) =>
|
|
||||||
groups
|
|
||||||
.filter(
|
|
||||||
(g) =>
|
|
||||||
g.admin === selectedUser.id ||
|
|
||||||
g.participants.includes(selectedUser.id)
|
|
||||||
)
|
|
||||||
.flatMap((g) => g.participants)
|
|
||||||
.includes(x.id),
|
|
||||||
});
|
|
||||||
|
|
||||||
router.push("/list/users");
|
const viewStudentFilterBelongsToAdmin = (x: User) =>
|
||||||
}
|
x.type === "student" && belongsToAdminFilter(x);
|
||||||
: undefined
|
const viewTeacherFilterBelongsToAdmin = (x: User) =>
|
||||||
}
|
x.type === "teacher" && belongsToAdminFilter(x);
|
||||||
onViewTeachers={
|
|
||||||
selectedUser.type === "corporate" ||
|
|
||||||
selectedUser.type === "student"
|
|
||||||
? () => {
|
|
||||||
appendUserFilters({
|
|
||||||
id: "view-teachers",
|
|
||||||
filter: (x: User) => x.type === "teacher",
|
|
||||||
});
|
|
||||||
appendUserFilters({
|
|
||||||
id: "belongs-to-admin",
|
|
||||||
filter: (x: User) =>
|
|
||||||
groups
|
|
||||||
.filter(
|
|
||||||
(g) =>
|
|
||||||
g.admin === selectedUser.id ||
|
|
||||||
g.participants.includes(selectedUser.id)
|
|
||||||
)
|
|
||||||
.flatMap((g) => g.participants)
|
|
||||||
.includes(x.id),
|
|
||||||
});
|
|
||||||
|
|
||||||
router.push("/list/users");
|
const renderUserCard = (selectedUser: User) => {
|
||||||
}
|
const studentsFromAdmin = users.filter(viewStudentFilterBelongsToAdmin);
|
||||||
: undefined
|
const teachersFromAdmin = users.filter(viewTeacherFilterBelongsToAdmin);
|
||||||
}
|
return (
|
||||||
onViewCorporate={
|
<div className="w-full flex flex-col gap-8">
|
||||||
selectedUser.type === "teacher" ||
|
<UserCard
|
||||||
selectedUser.type === "student"
|
loggedInUser={user}
|
||||||
? () => {
|
onViewStudents={
|
||||||
appendUserFilters({
|
(selectedUser.type === "corporate" ||
|
||||||
id: "view-corporate",
|
selectedUser.type === "teacher") &&
|
||||||
filter: (x: User) => x.type === "corporate",
|
studentsFromAdmin.length > 0
|
||||||
});
|
? () => {
|
||||||
appendUserFilters({
|
appendUserFilters({
|
||||||
id: "belongs-to-admin",
|
id: "view-students",
|
||||||
filter: (x: User) =>
|
filter: viewStudentFilter,
|
||||||
groups
|
});
|
||||||
.filter((g) =>
|
appendUserFilters({
|
||||||
g.participants.includes(selectedUser.id)
|
id: "belongs-to-admin",
|
||||||
)
|
filter: belongsToAdminFilter,
|
||||||
.flatMap((g) => [g.admin, ...g.participants])
|
});
|
||||||
.includes(x.id),
|
|
||||||
});
|
|
||||||
|
|
||||||
router.push("/list/users");
|
router.push("/list/users");
|
||||||
}
|
|
||||||
: undefined
|
|
||||||
}
|
}
|
||||||
onClose={(shouldReload) => {
|
: undefined
|
||||||
setSelectedUser(undefined);
|
}
|
||||||
if (shouldReload) reload();
|
onViewTeachers={
|
||||||
}}
|
(selectedUser.type === "corporate" ||
|
||||||
user={selectedUser}
|
selectedUser.type === "student") &&
|
||||||
/>
|
teachersFromAdmin.length > 0
|
||||||
</div>
|
? () => {
|
||||||
)}
|
appendUserFilters({
|
||||||
</>
|
id: "view-teachers",
|
||||||
</Modal>
|
filter: viewTeacherFilter,
|
||||||
<div className="w-full flex flex-col gap-2">
|
});
|
||||||
<div className="w-full flex gap-2 items-end">
|
appendUserFilters({
|
||||||
{renderSearch()}
|
id: "belongs-to-admin",
|
||||||
<Button
|
filter: belongsToAdminFilter,
|
||||||
className="w-full max-w-[200px] mb-1"
|
});
|
||||||
variant="outline"
|
|
||||||
onClick={downloadExcel}
|
router.push("/list/users");
|
||||||
>
|
}
|
||||||
Download List
|
: undefined
|
||||||
</Button>
|
}
|
||||||
</div>
|
onViewCorporate={
|
||||||
<table className="rounded-xl bg-mti-purple-ultralight/40 w-full">
|
selectedUser.type === "teacher" || selectedUser.type === "student"
|
||||||
<thead>
|
? () => {
|
||||||
{table.getHeaderGroups().map((headerGroup) => (
|
appendUserFilters({
|
||||||
<tr key={headerGroup.id}>
|
id: "view-corporate",
|
||||||
{headerGroup.headers.map((header) => (
|
filter: (x: User) => x.type === "corporate",
|
||||||
<th className="py-4 px-4 text-left" key={header.id}>
|
});
|
||||||
{header.isPlaceholder
|
appendUserFilters({
|
||||||
? null
|
id: "belongs-to-admin",
|
||||||
: flexRender(
|
filter: (x: User) =>
|
||||||
header.column.columnDef.header,
|
groups
|
||||||
header.getContext()
|
.filter((g) => g.participants.includes(selectedUser.id))
|
||||||
)}
|
.flatMap((g) => [g.admin, ...g.participants])
|
||||||
</th>
|
.includes(x.id),
|
||||||
))}
|
});
|
||||||
</tr>
|
|
||||||
))}
|
router.push("/list/users");
|
||||||
</thead>
|
}
|
||||||
<tbody className="px-2">
|
: undefined
|
||||||
{table.getRowModel().rows.map((row) => (
|
}
|
||||||
<tr
|
onClose={(shouldReload) => {
|
||||||
className="odd:bg-white even:bg-mti-purple-ultralight/40 rounded-lg py-2"
|
setSelectedUser(undefined);
|
||||||
key={row.id}
|
if (shouldReload) reload();
|
||||||
>
|
}}
|
||||||
{row.getVisibleCells().map((cell) => (
|
user={selectedUser}
|
||||||
<td className="px-4 py-2 items-center w-fit" key={cell.id}>
|
/>
|
||||||
{flexRender(cell.column.columnDef.cell, cell.getContext())}
|
|
||||||
</td>
|
|
||||||
))}
|
|
||||||
</tr>
|
|
||||||
))}
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
);
|
||||||
</>
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{renderHeader && renderHeader(displayUsers.length)}
|
||||||
|
<div className="w-full">
|
||||||
|
<Modal
|
||||||
|
isOpen={!!selectedUser}
|
||||||
|
onClose={() => setSelectedUser(undefined)}
|
||||||
|
>
|
||||||
|
{selectedUser && renderUserCard(selectedUser)}
|
||||||
|
</Modal>
|
||||||
|
<div className="w-full flex flex-col gap-2">
|
||||||
|
<div className="w-full flex gap-2 items-end">
|
||||||
|
{renderSearch()}
|
||||||
|
<Button
|
||||||
|
className="w-full max-w-[200px] mb-1"
|
||||||
|
variant="outline"
|
||||||
|
onClick={downloadExcel}
|
||||||
|
>
|
||||||
|
Download List
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
<table className="rounded-xl bg-mti-purple-ultralight/40 w-full">
|
||||||
|
<thead>
|
||||||
|
{table.getHeaderGroups().map((headerGroup) => (
|
||||||
|
<tr key={headerGroup.id}>
|
||||||
|
{headerGroup.headers.map((header) => (
|
||||||
|
<th className="py-4 px-4 text-left" key={header.id}>
|
||||||
|
{header.isPlaceholder
|
||||||
|
? null
|
||||||
|
: flexRender(
|
||||||
|
header.column.columnDef.header,
|
||||||
|
header.getContext()
|
||||||
|
)}
|
||||||
|
</th>
|
||||||
|
))}
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
</thead>
|
||||||
|
<tbody className="px-2">
|
||||||
|
{table.getRowModel().rows.map((row) => (
|
||||||
|
<tr
|
||||||
|
className="odd:bg-white even:bg-mti-purple-ultralight/40 rounded-lg py-2"
|
||||||
|
key={row.id}
|
||||||
|
>
|
||||||
|
{row.getVisibleCells().map((cell) => (
|
||||||
|
<td className="px-4 py-2 items-center w-fit" key={cell.id}>
|
||||||
|
{flexRender(
|
||||||
|
cell.column.columnDef.cell,
|
||||||
|
cell.getContext()
|
||||||
|
)}
|
||||||
|
</td>
|
||||||
|
))}
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user