143 lines
4.1 KiB
TypeScript
143 lines
4.1 KiB
TypeScript
import FormContainer from "@/components/FormContainer";
|
|
import Pagination from "@/components/Pagination";
|
|
import Table from "@/components/Table";
|
|
import TableSearch from "@/components/TableSearch";
|
|
import { getSupabaseClient } from "@/lib/supabase";
|
|
import { ITEM_PER_PAGE } from "@/lib/settings";
|
|
import { Tables } from "@/types/supabase";
|
|
import Image from "next/image";
|
|
import { auth } from "@clerk/nextjs/server";
|
|
|
|
type LessonList = Tables<"Lesson"> & {
|
|
subject: Tables<"Subject">;
|
|
class: Tables<"Class">;
|
|
teacher: Tables<"Teacher">;
|
|
};
|
|
|
|
|
|
const LessonListPage = async ({
|
|
searchParams,
|
|
}: {
|
|
searchParams: { [key: string]: string | undefined };
|
|
}) => {
|
|
|
|
const { sessionClaims } = auth();
|
|
const role = (sessionClaims?.metadata as { role?: string })?.role;
|
|
|
|
|
|
const columns = [
|
|
{
|
|
header: "Subject Name",
|
|
accessor: "name",
|
|
},
|
|
{
|
|
header: "Class",
|
|
accessor: "class",
|
|
},
|
|
{
|
|
header: "Teacher",
|
|
accessor: "teacher",
|
|
className: "hidden md:table-cell",
|
|
},
|
|
...(role === "admin"
|
|
? [
|
|
{
|
|
header: "Actions",
|
|
accessor: "action",
|
|
},
|
|
]
|
|
: []),
|
|
];
|
|
|
|
const renderRow = (item: LessonList) => (
|
|
<tr
|
|
key={item.id}
|
|
className="border-b border-gray-200 even:bg-slate-50 text-sm hover:bg-lamaPurpleLight"
|
|
>
|
|
<td className="flex items-center gap-4 p-4">{item.subject?.name || "-"}</td>
|
|
<td>{item.class?.name || "-"}</td>
|
|
<td className="hidden md:table-cell">
|
|
{item.teacher ? item.teacher.name + " " + item.teacher.surname : "-"}
|
|
</td>
|
|
<td>
|
|
<div className="flex items-center gap-2">
|
|
{role === "admin" && (
|
|
<>
|
|
<FormContainer table="lesson" type="update" data={item} />
|
|
<FormContainer table="lesson" type="delete" id={item.id} />
|
|
</>
|
|
)}
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
);
|
|
|
|
const { page, ...queryParams } = searchParams;
|
|
|
|
const p = page ? parseInt(page) : 1;
|
|
const supabase = await getSupabaseClient();
|
|
|
|
// URL PARAMS CONDITION
|
|
let query = supabase
|
|
.from("Lesson")
|
|
.select("*, subject:Subject(*), class:Class(*), teacher:Teacher(*)", { count: "exact" });
|
|
|
|
if (queryParams) {
|
|
for (const [key, value] of Object.entries(queryParams)) {
|
|
if (value !== undefined) {
|
|
switch (key) {
|
|
case "classId":
|
|
query = query.eq("classId", parseInt(value));
|
|
break;
|
|
case "teacherId":
|
|
query = query.eq("teacherId", value);
|
|
break;
|
|
case "search":
|
|
query = query.or(`subject.name.ilike.%${value}%,teacher.name.ilike.%${value}%,class.name.ilike.%${value}%`);
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// PAGINATION
|
|
query = query.range(ITEM_PER_PAGE * (p - 1), ITEM_PER_PAGE * p - 1);
|
|
|
|
const { data: rawData, count, error } = await query;
|
|
|
|
if (error) {
|
|
console.error("Error fetching lessons from Supabase:", error);
|
|
}
|
|
|
|
const data = (rawData || []) as unknown as LessonList[];
|
|
|
|
return (
|
|
<div className="bg-white p-4 rounded-md flex-1 m-4 mt-0">
|
|
{/* TOP */}
|
|
<div className="flex items-center justify-between">
|
|
<h1 className="hidden md:block text-lg font-semibold">All Lessons</h1>
|
|
<div className="flex flex-col md:flex-row items-center gap-4 w-full md:w-auto">
|
|
<TableSearch />
|
|
<div className="flex items-center gap-4 self-end">
|
|
<button className="w-8 h-8 flex items-center justify-center rounded-full bg-lamaYellow">
|
|
<Image src="/filter.png" alt="" width={14} height={14} />
|
|
</button>
|
|
<button className="w-8 h-8 flex items-center justify-center rounded-full bg-lamaYellow">
|
|
<Image src="/sort.png" alt="" width={14} height={14} />
|
|
</button>
|
|
{role === "admin" && <FormContainer table="lesson" type="create" />}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/* LIST */}
|
|
<Table columns={columns} renderRow={renderRow} data={data} />
|
|
{/* PAGINATION */}
|
|
<Pagination page={p} count={count || 0} />
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default LessonListPage;
|