- Created a package list for student packages;
- Updated the group creation wizard to work as a modal;
This commit is contained in:
Tiago Ribeiro
@@ -16,6 +16,7 @@ import {toast} from "react-toastify";
|
||||
import Select from "react-select";
|
||||
import {uuidv4} from "@firebase/util";
|
||||
import {useFilePicker} from "use-file-picker";
|
||||
import Modal from "@/components/Modal";
|
||||
|
||||
const columnHelper = createColumnHelper<Group>();
|
||||
|
||||
@@ -23,10 +24,10 @@ interface CreateDialogProps {
|
||||
user: User;
|
||||
users: User[];
|
||||
group?: Group;
|
||||
onCreate: (group: Group) => void;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
const CreatePanel = ({user, users, group, onCreate}: CreateDialogProps) => {
|
||||
const CreatePanel = ({user, users, group, onClose}: CreateDialogProps) => {
|
||||
const [name, setName] = useState<string | undefined>(group?.name || undefined);
|
||||
const [admin, setAdmin] = useState<string>(group?.admin || user.id);
|
||||
const [participants, setParticipants] = useState<string[]>(group?.participants || []);
|
||||
@@ -66,6 +67,24 @@ const CreatePanel = ({user, users, group, onCreate}: CreateDialogProps) => {
|
||||
}
|
||||
}, [filesContent, user.type, users]);
|
||||
|
||||
const submit = () => {
|
||||
if (name !== group?.name && (name === "Students" || name === "Teachers")) {
|
||||
toast.error("That group name is reserved and cannot be used, please enter another one.");
|
||||
return;
|
||||
}
|
||||
|
||||
(group ? axios.patch : axios.post)(group ? `/api/groups/${group.id}` : "/api/groups", {name, admin, participants})
|
||||
.then(() => {
|
||||
toast.success(`Group "${name}" ${group ? "edited" : "created"} successfully`);
|
||||
return true;
|
||||
})
|
||||
.catch(() => {
|
||||
toast.error("Something went wrong, please try again later!");
|
||||
return false;
|
||||
})
|
||||
.finally(onClose);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-12 mt-4 w-full px-4 py-2">
|
||||
<div className="flex flex-col gap-8">
|
||||
@@ -106,18 +125,14 @@ const CreatePanel = ({user, users, group, onCreate}: CreateDialogProps) => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
className="w-full max-w-[200px] self-end"
|
||||
disabled={!name}
|
||||
onClick={() => {
|
||||
if (name !== group?.name && (name === "Students" || name === "Teachers")) {
|
||||
toast.error("That group name is reserved and cannot be used, please enter another one.");
|
||||
return;
|
||||
}
|
||||
onCreate({name: name!, admin, participants, id: group?.id || uuidv4()});
|
||||
}}>
|
||||
{!group ? "Create" : "Update"}
|
||||
</Button>
|
||||
<div className="flex w-full justify-end items-center gap-8 mt-8">
|
||||
<Button variant="outline" color="red" className="w-full max-w-[200px]" onClick={onClose}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button className="w-full max-w-[200px]" onClick={submit} disabled={!name}>
|
||||
Submit
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -125,56 +140,19 @@ const CreatePanel = ({user, users, group, onCreate}: CreateDialogProps) => {
|
||||
const filterTypes = ["corporate", "teacher"];
|
||||
|
||||
export default function GroupList({user}: {user: User}) {
|
||||
const [editingID, setEditingID] = useState<string>();
|
||||
const [showDisclosure, setShowDisclosure] = useState(false);
|
||||
const [isCreating, setIsCreating] = useState(false);
|
||||
const [editingGroup, setEditingGroup] = useState<Group>();
|
||||
const [filterByUser, setFilterByUser] = useState(false);
|
||||
|
||||
const {users} = useUsers();
|
||||
const {groups, reload} = useGroups(user && filterTypes.includes(user?.type) ? user.id : undefined);
|
||||
|
||||
useEffect(() => {
|
||||
if (editingID) setShowDisclosure(true);
|
||||
}, [editingID]);
|
||||
|
||||
useEffect(() => {
|
||||
if (showDisclosure) document.getElementById("disclosure")?.scrollTo();
|
||||
if (!showDisclosure) setEditingID(undefined);
|
||||
}, [showDisclosure]);
|
||||
|
||||
useEffect(() => {
|
||||
if (user && (user.type === "corporate" || user.type === "teacher")) {
|
||||
setFilterByUser(true);
|
||||
}
|
||||
}, [user]);
|
||||
|
||||
const createGroup = (group: Group) => {
|
||||
return axios
|
||||
.post<{ok: boolean}>("/api/groups", group)
|
||||
.then(() => {
|
||||
toast.success(`Group "${group.name}" created successfully`);
|
||||
return true;
|
||||
})
|
||||
.catch(() => {
|
||||
toast.error("Something went wrong, please try again later!");
|
||||
return false;
|
||||
})
|
||||
.finally(reload);
|
||||
};
|
||||
|
||||
const updateGroup = (group: Group) => {
|
||||
return axios
|
||||
.patch<{ok: boolean}>(`/api/groups/${group.id}`, group)
|
||||
.then(() => {
|
||||
toast.success(`Group "${group.name}" created successfully`);
|
||||
return true;
|
||||
})
|
||||
.catch(() => {
|
||||
toast.error("Something went wrong, please try again later!");
|
||||
return false;
|
||||
})
|
||||
.finally(reload);
|
||||
};
|
||||
|
||||
const deleteGroup = (group: Group) => {
|
||||
if (!confirm(`Are you sure you want to delete "${group.name}"?`)) return;
|
||||
|
||||
@@ -216,10 +194,10 @@ export default function GroupList({user}: {user: User}) {
|
||||
cell: ({row}: {row: {original: Group}}) => {
|
||||
return (
|
||||
<>
|
||||
{(user?.type === "developer" || user?.type === "admin" || user.id === row.original.admin) && (
|
||||
{user && (user.type === "developer" || user.type === "admin" || user.id === row.original.admin) && (
|
||||
<div className="flex gap-2">
|
||||
{editingID !== row.original.id && (
|
||||
<div data-tip="Edit" className="cursor-pointer tooltip" onClick={() => setEditingID(row.original.id)}>
|
||||
{!row.original.disableEditing && (
|
||||
<div data-tip="Edit" className="cursor-pointer tooltip" onClick={() => setEditingGroup(row.original)}>
|
||||
<BsPencil className="hover:text-mti-purple-light transition ease-in-out duration-300" />
|
||||
</div>
|
||||
)}
|
||||
@@ -242,8 +220,32 @@ export default function GroupList({user}: {user: User}) {
|
||||
getCoreRowModel: getCoreRowModel(),
|
||||
});
|
||||
|
||||
const closeModal = () => {
|
||||
setIsCreating(false);
|
||||
setEditingGroup(undefined);
|
||||
reload();
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="w-full h-full rounded-xl">
|
||||
<Modal isOpen={isCreating || !!editingGroup} onClose={closeModal} title={editingGroup ? `Editing ${editingGroup.name}` : "New Group"}>
|
||||
<CreatePanel
|
||||
group={editingGroup}
|
||||
user={user}
|
||||
onClose={closeModal}
|
||||
users={
|
||||
user?.type === "corporate" || user?.type === "teacher"
|
||||
? users.filter(
|
||||
(u) =>
|
||||
groups
|
||||
.filter((g) => g.admin === user.id)
|
||||
.flatMap((g) => g.participants)
|
||||
.includes(u.id) || groups.flatMap((g) => g.participants).includes(u.id),
|
||||
)
|
||||
: users
|
||||
}
|
||||
/>
|
||||
</Modal>
|
||||
<table className="rounded-xl bg-mti-purple-ultralight/40 w-full">
|
||||
<thead>
|
||||
{table.getHeaderGroups().map((headerGroup) => (
|
||||
@@ -268,54 +270,12 @@ export default function GroupList({user}: {user: User}) {
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
<>
|
||||
<div
|
||||
className={clsx(
|
||||
"w-full px-4 py-2 bg-mti-purple-ultralight/40 flex gap-2 items-center justify-center rounded-lg",
|
||||
"transition duration-300 ease-in-out",
|
||||
"hover:bg-mti-purple-ultralight cursor-pointer",
|
||||
)}
|
||||
onClick={() => setShowDisclosure((prev) => !prev)}>
|
||||
{!showDisclosure ? <BsPlus className="w-6 h-6" /> : <BsDash className="w-6 h-6" />}
|
||||
|
||||
<span>{!showDisclosure ? "Create group" : "Cancel"}</span>
|
||||
</div>
|
||||
<Transition
|
||||
show={showDisclosure}
|
||||
enter="transition duration-100 ease-out"
|
||||
enterFrom="transform scale-95 opacity-0"
|
||||
enterTo="transform scale-100 opacity-100"
|
||||
leave="transition duration-75 ease-out"
|
||||
leaveFrom="transform scale-100 opacity-100"
|
||||
leaveTo="transform scale-95 opacity-0">
|
||||
<div id="#disclosure">
|
||||
<CreatePanel
|
||||
group={editingID ? groups.find((x) => x.id === editingID) : undefined}
|
||||
user={user}
|
||||
users={
|
||||
user?.type === "corporate" || user?.type === "teacher"
|
||||
? users.filter(
|
||||
(u) =>
|
||||
groups
|
||||
.filter((g) => g.admin === user.id)
|
||||
.flatMap((g) => g.participants)
|
||||
.includes(u.id) || groups.flatMap((g) => g.participants).includes(u.id),
|
||||
)
|
||||
: users
|
||||
}
|
||||
onCreate={(group) => {
|
||||
(!editingID ? createGroup : updateGroup)(group).then((result) => {
|
||||
if (result) {
|
||||
setShowDisclosure(false);
|
||||
setEditingID(undefined);
|
||||
reload();
|
||||
}
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</Transition>
|
||||
</>
|
||||
</>
|
||||
<button
|
||||
onClick={() => setIsCreating(true)}
|
||||
className="w-full py-2 bg-mti-purple-light hover:bg-mti-purple transition ease-in-out duration-300 text-white">
|
||||
New Group
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user