102 lines
3.0 KiB
TypeScript
102 lines
3.0 KiB
TypeScript
import {withIronSessionSsr} from "iron-session/next";
|
|
import {sessionOptions} from "@/lib/session";
|
|
import {Type, User} from "@/interfaces/user";
|
|
import Head from "next/head";
|
|
import {Avatar} from "primereact/avatar";
|
|
import {useEffect, useState} from "react";
|
|
import {FilterMatchMode, FilterOperator} from "primereact/api";
|
|
import useUsers from "@/hooks/useUsers";
|
|
import {DataTable} from "primereact/datatable";
|
|
import {Column} from "primereact/column";
|
|
import {capitalize} from "lodash";
|
|
import {levelCalculator} from "@/resources/level";
|
|
import {Dropdown} from "primereact/dropdown";
|
|
|
|
export const getServerSideProps = withIronSessionSsr(({req, res}) => {
|
|
const user = req.session.user;
|
|
|
|
if (!user || !user.isVerified) {
|
|
res.setHeader("location", "/login");
|
|
res.statusCode = 302;
|
|
res.end();
|
|
return {
|
|
props: {
|
|
user: null,
|
|
},
|
|
};
|
|
}
|
|
|
|
return {
|
|
props: {user: req.session.user},
|
|
};
|
|
}, sessionOptions);
|
|
|
|
export default function Users({user}: {user: User}) {
|
|
const {users, isLoading} = useUsers();
|
|
const [filters] = useState({
|
|
name: {value: null, matchMode: FilterMatchMode.CONTAINS},
|
|
type: {value: null, matchMode: FilterMatchMode.EQUALS},
|
|
});
|
|
|
|
const userTypes: Type[] = ["admin", "developer", "owner", "student", "teacher"];
|
|
|
|
const typeRowFilterTemplate = (options: any) => {
|
|
return (
|
|
<Dropdown
|
|
value={options.value}
|
|
options={userTypes.map(capitalize)}
|
|
onChange={(e) => options.filterApplyCallback(e.value)}
|
|
placeholder="Select One"
|
|
className="p-column-filter"
|
|
showClear
|
|
style={{minWidth: "12rem"}}
|
|
/>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<Head>
|
|
<title>EnCoach | Users</title>
|
|
<meta
|
|
name="description"
|
|
content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
|
|
/>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<link rel="icon" href="/favicon.ico" />
|
|
</Head>
|
|
<main className="w-full h-full min-h-[100vh] flex flex-col items-center bg-neutral-100">
|
|
<div className="w-full h-full flex flex-col items-center justify-center p-4 relative">
|
|
<DataTable
|
|
dataKey="id"
|
|
filters={filters}
|
|
filterDisplay="row"
|
|
className="w-full h-full"
|
|
loading={isLoading}
|
|
value={users}
|
|
removableSort
|
|
stripedRows
|
|
paginator
|
|
rows={5}
|
|
rowsPerPageOptions={[5, 10, 25, 50]}
|
|
tableStyle={{minWidth: "50rem"}}>
|
|
<Column field="id" sortable header="ID" />
|
|
<Column field="name" sortable header="Name" filter filterPlaceholder="Search by name" />
|
|
<Column field="experience" sortable header="Experience" />
|
|
<Column field="experience" sortable header="Level" body={(data: User) => levelCalculator(data.experience).currentLevel} />
|
|
<Column
|
|
field="type"
|
|
showFilterMenu={false}
|
|
filter
|
|
filterElement={typeRowFilterTemplate}
|
|
sortable
|
|
header="Type"
|
|
body={(data: User) => capitalize(data.type)}
|
|
/>
|
|
</DataTable>
|
|
</div>
|
|
</main>
|
|
</>
|
|
);
|
|
}
|