wip: course layout and func to context

Signed-off-by: Kenneth Obsequio <k80308392@gmail.com>
2026-09-27 00:12:54 +08:00 · 2026-05-16 11:05:04 +08:00
parent dcf5f43fd5
commit 2b1955608d
38 changed files with 3086 additions and 9 deletions
@@ -0,0 +1,119 @@
+import { useMemo, useRef, useState } from "react";
+import { useNavigate } from "react-router-dom";
+
+import { useCourses } from "@/contexts/AdminCoursesContext";
+import { useAuth } from "@/contexts/AuthContext";
+
+import DataTable from "@/components/generic/Table/DataTable";
+import { FilterSheet } from "@/components/generic/Sheet/FilterSheet";
+import { ArchiveDialog } from "@/components/generic/Dialogs/ArchiveDialog";
+
+import { buildDataColumns, columnPinning } from "../../config/courses/columns.config";
+import { buildToolbarActions } from "../../config/courses/toolbar.config";
+import { buildSelectionActions } from "../../config/courses/selection.config";
+import { buildRowActions } from "../../config/courses/rowActions.config";
+
+import { getTimestamp } from "@/utils/timestamp.util";
+
+export default function CoursesTable() {
+  const [archiveTarget, setArchiveTarget] = useState(null);
+
+  const tableRefsRef = useRef({
+    getFilters: () => [],
+    getSort: () => [],
+    resetSelection: () => { },
+    setFilters: () => { },
+  });
+
+  const navigate = useNavigate();
+  const { user } = useAuth();
+
+  const { courses, attributes, pagination, setPagination, loading, fetchCourses, deleteCourse, } = useCourses();
+
+  const handleRefsReady = (refs) => {
+    tableRefsRef.current = refs;
+  };
+
+  const exportConfig = {
+    allData: courses,
+    attributes,
+    filename: `${getTimestamp()}_Courses`,
+    sheetName: "Courses",
+  };
+
+  const rowActions = useMemo(() => buildRowActions({
+    onView: (row) => navigate(`/admin/courses/${row.course_id}`),
+    onEdit: (row) => navigate(`/admin/courses/${row.course_id}/edit`),
+    onArchive: (row) => setArchiveTarget(row),
+  }), []);
+
+  const toolbarActions = buildToolbarActions({
+    fetchCourses,
+    pagination,
+    exportConfig,
+    navigate,
+    getFilters: () => tableRefsRef.current.getFilters(),
+    getSort: () => tableRefsRef.current.getSort(),
+    getTableInstance: () => tableRefsRef.current.tableInstance,
+  });
+
+  const selectionActions = buildSelectionActions({
+    exportConfig,
+    onArchive: (row) => setArchiveTarget(row),
+    getTableInstance: () => tableRefsRef.current.tableInstance,
+  });
+
+  const columns = useMemo(
+    () => buildDataColumns(attributes, rowActions),
+    [attributes, rowActions]
+  );
+
+  const handleArchiveSuccess = () => {
+    setArchiveTarget(null);
+    tableRefsRef.current.resetSelection?.();
+    fetchCourses({ page: 1, limit: pagination?.limit ?? 10 });
+  };
+
+  return (
+    <>
+      <DataTable
+        title="Courses"
+        data={courses}
+        columns={columns}
+        attributes={attributes}
+        pagination={pagination}
+        setPagination={setPagination}
+        loading={loading}
+        onFetch={fetchCourses}
+        onFetchFilterData={() => []}
+        onRefsReady={handleRefsReady}
+        renderFilterSheet={({ open, onOpenChange, column, attr, data, loading }) => (
+          <FilterSheet
+            open={open}
+            onOpenChange={onOpenChange}
+            column={column}
+            attr={attr}
+            data={data}
+            loading={loading}
+          />
+        )}
+        columnPinning={columnPinning}
+        toolbarActions={toolbarActions}
+        selectionActions={selectionActions}
+        recordLabel="course"
+        emptyMessage="No courses found."
+      />
+
+      <ArchiveDialog
+        open={!!archiveTarget}
+        onOpenChange={(v) => !v && setArchiveTarget(null)}
+        entity={archiveTarget}
+        entityLabel="Course"
+        getName={(c) => c?.title}
+        onArchive={(c) => deleteCourse(c?.course_id)}
+        loading={loading}
+        onSuccess={handleArchiveSuccess}
+      />
+    </>
+  );
+}