learning flow fixes
This commit is contained in:
parent
6a201a0108
commit
3614244029
|
|
@ -217,8 +217,41 @@ export const removeSubCoursePrerequisite = (subCourseId: number, prerequisiteId:
|
|||
export const getLearningPath = (courseId: number) =>
|
||||
http.get<GetLearningPathResponse>(`/course-management/courses/${courseId}/learning-path`)
|
||||
|
||||
export const reorderSubCourses = (courseId: number, items: ReorderItem[]) =>
|
||||
http.put(`/course-management/courses/${courseId}/reorder-sub-courses`, { items })
|
||||
const buildReorderPayload = (items: ReorderItem[]) => {
|
||||
const normalized = items.map((item, idx) => ({
|
||||
id: Number(item.id),
|
||||
position: Number(item.position ?? idx),
|
||||
}))
|
||||
|
||||
const hasInvalid = normalized.some(
|
||||
(item) =>
|
||||
Number.isNaN(item.id) ||
|
||||
Number.isNaN(item.position) ||
|
||||
!Number.isFinite(item.id) ||
|
||||
!Number.isFinite(item.position),
|
||||
)
|
||||
|
||||
if (hasInvalid) {
|
||||
throw new Error("Invalid reorder payload: ids/positions must be numeric.")
|
||||
}
|
||||
|
||||
return { items: normalized }
|
||||
}
|
||||
|
||||
export const reorderCategories = (items: ReorderItem[]) =>
|
||||
http.put("/course-management/categories/reorder", buildReorderPayload(items))
|
||||
|
||||
export const reorderCourses = (items: ReorderItem[]) =>
|
||||
http.put("/course-management/courses/reorder", buildReorderPayload(items))
|
||||
|
||||
export const reorderSubCourses = (items: ReorderItem[]) =>
|
||||
http.put("/course-management/sub-courses/reorder", buildReorderPayload(items))
|
||||
|
||||
export const reorderVideos = (items: ReorderItem[]) =>
|
||||
http.put("/course-management/videos/reorder", buildReorderPayload(items))
|
||||
|
||||
export const reorderPractices = (items: ReorderItem[]) =>
|
||||
http.put("/course-management/practices/reorder", buildReorderPayload(items))
|
||||
|
||||
// Ratings
|
||||
export const getRatings = (params: GetRatingsParams) =>
|
||||
|
|
|
|||
|
|
@ -272,20 +272,34 @@ export function ProfilePage() {
|
|||
const completionPct = profile.profile_completion_percentage ?? 0;
|
||||
|
||||
return (
|
||||
<div className="w-full space-y-6">
|
||||
<div className="mx-auto w-full max-w-7xl space-y-6 pb-8">
|
||||
{/* ─── Hero Card ─── */}
|
||||
<div className="relative overflow-hidden rounded-2xl border border-grayScale-100 bg-white shadow-sm">
|
||||
<div className="relative overflow-hidden rounded-3xl border border-grayScale-100 bg-white shadow-sm ring-1 ring-black/5">
|
||||
{/* Tall dark gradient banner with content inside */}
|
||||
<div className="relative flex min-h-[200px] flex-col justify-between bg-gradient-to-br from-[#1a1f4e] via-[#2d2b6b] to-[#3b3480] px-6 py-8 sm:px-8">
|
||||
<div className="relative flex min-h-[220px] flex-col justify-between bg-gradient-to-br from-[#1a1f4e] via-[#2d2b6b] to-[#3b3480] px-6 py-8 sm:px-8">
|
||||
<div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top_right,rgba(255,255,255,0.08),transparent_60%)]" />
|
||||
|
||||
<div className="relative z-10 space-y-2">
|
||||
<h2 className="text-2xl font-bold tracking-tight text-white sm:text-3xl">
|
||||
Hello {profile.first_name}
|
||||
</h2>
|
||||
<p className="max-w-xl text-sm leading-relaxed text-white/70">
|
||||
This is your profile page. You can see the progress you've made with your work and manage your projects or assigned tasks
|
||||
<p className="max-w-2xl text-sm leading-relaxed text-white/70">
|
||||
Track your account status, keep profile details up to date, and manage your learning preferences from one place.
|
||||
</p>
|
||||
<div className="mt-4 flex flex-wrap items-center gap-2">
|
||||
<span className="inline-flex items-center gap-1.5 rounded-full border border-white/20 bg-white/10 px-2.5 py-1 text-xs font-medium text-white/90">
|
||||
<Shield className="h-3.5 w-3.5" />
|
||||
{profile.role}
|
||||
</span>
|
||||
<span className="inline-flex items-center gap-1.5 rounded-full border border-white/20 bg-white/10 px-2.5 py-1 text-xs font-medium text-white/90">
|
||||
<Clock className="h-3.5 w-3.5" />
|
||||
Last login {formatDate(profile.last_login)}
|
||||
</span>
|
||||
<span className="inline-flex items-center gap-1.5 rounded-full border border-white/20 bg-white/10 px-2.5 py-1 text-xs font-medium text-white/90">
|
||||
<Target className="h-3.5 w-3.5" />
|
||||
{completionPct}% complete
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="relative z-10 mt-6">
|
||||
|
|
@ -293,7 +307,7 @@ export function ProfilePage() {
|
|||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="gap-1.5 border-white/30 bg-white/10 text-xs font-medium text-white shadow-sm backdrop-blur-sm hover:bg-white/20 hover:text-white"
|
||||
className="h-8 gap-1.5 border-white/30 bg-white/10 px-3 text-xs font-medium text-white shadow-sm backdrop-blur-sm hover:bg-white/20 hover:text-white"
|
||||
onClick={startEditing}
|
||||
>
|
||||
<Pencil className="h-3.5 w-3.5" />
|
||||
|
|
@ -304,7 +318,7 @@ export function ProfilePage() {
|
|||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="h-8 gap-1.5 border-white/30 bg-white/10 text-xs text-white backdrop-blur-sm hover:bg-white/20 hover:text-white"
|
||||
className="h-8 gap-1.5 border-white/30 bg-white/10 px-3 text-xs text-white backdrop-blur-sm hover:bg-white/20 hover:text-white"
|
||||
onClick={cancelEditing}
|
||||
disabled={saving}
|
||||
>
|
||||
|
|
@ -330,7 +344,7 @@ export function ProfilePage() {
|
|||
</div>
|
||||
|
||||
{/* Identity info below banner */}
|
||||
<div className="px-6 py-5 sm:px-8">
|
||||
<div className="bg-gradient-to-b from-white to-grayScale-50/40 px-6 py-5 sm:px-8">
|
||||
{editing ? (
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<Input
|
||||
|
|
@ -405,7 +419,7 @@ export function ProfilePage() {
|
|||
{/* ─── Detail Cards Grid ─── */}
|
||||
<div className="grid gap-6 lg:grid-cols-3">
|
||||
{/* ── Contact & Personal ── */}
|
||||
<Card className="overflow-hidden border-grayScale-100 shadow-sm lg:col-span-2">
|
||||
<Card className="overflow-hidden rounded-2xl border-grayScale-100 shadow-sm transition-shadow hover:shadow-md lg:col-span-2">
|
||||
<div className="h-1 bg-gradient-to-r from-brand-500 to-brand-400" />
|
||||
<CardContent className="p-0">
|
||||
<div className="grid divide-y divide-grayScale-100 sm:grid-cols-2 sm:divide-x sm:divide-y-0">
|
||||
|
|
@ -569,9 +583,9 @@ export function ProfilePage() {
|
|||
</Card>
|
||||
|
||||
{/* ── Right Sidebar ── */}
|
||||
<div className="space-y-6">
|
||||
<div className="space-y-6 lg:sticky lg:top-24 lg:self-start">
|
||||
{/* Profile Completion */}
|
||||
<Card className="overflow-hidden border-grayScale-100 shadow-sm">
|
||||
<Card className="overflow-hidden rounded-2xl border-grayScale-100 shadow-sm transition-shadow hover:shadow-md">
|
||||
<div className="h-1 bg-gradient-to-r from-brand-400 to-mint-400" />
|
||||
<CardContent className="flex items-center gap-4 p-5">
|
||||
<ProgressRing percent={completionPct} />
|
||||
|
|
@ -585,7 +599,7 @@ export function ProfilePage() {
|
|||
</Card>
|
||||
|
||||
{/* Activity */}
|
||||
<Card className="overflow-hidden border-grayScale-100 shadow-sm">
|
||||
<Card className="overflow-hidden rounded-2xl border-grayScale-100 shadow-sm transition-shadow hover:shadow-md">
|
||||
<div className="h-1 bg-gradient-to-r from-grayScale-300 to-grayScale-200" />
|
||||
<CardContent className="space-y-4 p-5">
|
||||
<p className="text-[11px] font-bold uppercase tracking-widest text-grayScale-400">
|
||||
|
|
@ -613,7 +627,7 @@ export function ProfilePage() {
|
|||
</Card>
|
||||
|
||||
{/* Quick Account Info */}
|
||||
<Card className="overflow-hidden border-grayScale-100 shadow-sm">
|
||||
<Card className="overflow-hidden rounded-2xl border-grayScale-100 shadow-sm transition-shadow hover:shadow-md">
|
||||
<div className="h-1 bg-gradient-to-r from-brand-500 to-brand-600" />
|
||||
<CardContent className="space-y-3 p-5">
|
||||
<p className="text-[11px] font-bold uppercase tracking-widest text-grayScale-400">
|
||||
|
|
@ -675,8 +689,13 @@ export function ProfilePage() {
|
|||
</div>
|
||||
|
||||
{/* ─── Learning & Goals Card ─── */}
|
||||
<Card className="overflow-hidden border-grayScale-100 shadow-sm">
|
||||
<Card className="overflow-hidden rounded-2xl border-grayScale-100 shadow-sm transition-shadow hover:shadow-md">
|
||||
<div className="h-1 bg-gradient-to-r from-brand-600 via-brand-500 to-brand-400" />
|
||||
<div className="border-b border-grayScale-100 px-5 py-3">
|
||||
<p className="text-[11px] font-bold uppercase tracking-widest text-grayScale-400">
|
||||
Learning & Preferences
|
||||
</p>
|
||||
</div>
|
||||
<CardContent className="p-0">
|
||||
<div className="grid divide-y divide-grayScale-100 sm:grid-cols-2 sm:divide-x sm:divide-y-0 lg:grid-cols-4 lg:divide-x lg:divide-y-0">
|
||||
<div className="p-5">
|
||||
|
|
|
|||
|
|
@ -889,7 +889,7 @@ export function AddNewPracticePage() {
|
|||
className="w-full bg-brand-500 hover:bg-brand-600"
|
||||
onClick={() => navigate(`/content/category/${categoryId}/courses/${courseId}/sub-courses/${subCourseId}`)}
|
||||
>
|
||||
Go back to Sub-course
|
||||
Go back to Course
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
|
|
|
|||
|
|
@ -76,7 +76,7 @@ export function AllCoursesPage() {
|
|||
setCourses(allCourses)
|
||||
} catch (err) {
|
||||
console.error("Failed to load courses:", err)
|
||||
setError("Failed to load courses")
|
||||
setError("Failed to load sub-categories")
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
|
|
@ -116,7 +116,7 @@ export function AllCoursesPage() {
|
|||
description: createDescription.trim(),
|
||||
})
|
||||
|
||||
toast.success("Course created", {
|
||||
toast.success("Sub-category created", {
|
||||
description: `"${createTitle.trim()}" has been created.`,
|
||||
})
|
||||
|
||||
|
|
@ -130,7 +130,7 @@ export function AllCoursesPage() {
|
|||
await fetchAllCourses()
|
||||
} catch (err: any) {
|
||||
console.error("Failed to create course:", err)
|
||||
toast.error("Failed to create course", {
|
||||
toast.error("Failed to create sub-category", {
|
||||
description: err?.response?.data?.message || "Please try again.",
|
||||
})
|
||||
} finally {
|
||||
|
|
@ -145,7 +145,7 @@ export function AllCoursesPage() {
|
|||
await fetchAllCourses()
|
||||
} catch (err) {
|
||||
console.error("Failed to update course status:", err)
|
||||
toast.error("Failed to update course status")
|
||||
toast.error("Failed to update sub-category status")
|
||||
} finally {
|
||||
setTogglingId(null)
|
||||
}
|
||||
|
|
@ -173,13 +173,13 @@ export function AllCoursesPage() {
|
|||
title: editTitle.trim(),
|
||||
description: editDescription.trim(),
|
||||
})
|
||||
toast.success("Course updated")
|
||||
toast.success("Sub-category updated")
|
||||
setEditOpen(false)
|
||||
setCourseToEdit(null)
|
||||
await fetchAllCourses()
|
||||
} catch (err: any) {
|
||||
console.error("Failed to update course:", err)
|
||||
toast.error("Failed to update course", {
|
||||
toast.error("Failed to update sub-category", {
|
||||
description: err?.response?.data?.message || "Please try again.",
|
||||
})
|
||||
} finally {
|
||||
|
|
@ -193,7 +193,7 @@ export function AllCoursesPage() {
|
|||
<div className="rounded-2xl bg-white shadow-sm p-6">
|
||||
<RefreshCw className="h-10 w-10 animate-spin text-brand-600" />
|
||||
</div>
|
||||
<p className="mt-4 text-sm font-medium text-grayScale-400">Loading all courses…</p>
|
||||
<p className="mt-4 text-sm font-medium text-grayScale-400">Loading all sub-categories…</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -216,9 +216,9 @@ export function AllCoursesPage() {
|
|||
{/* Header */}
|
||||
<div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold tracking-tight text-grayScale-700">All Courses</h1>
|
||||
<h1 className="text-2xl font-bold tracking-tight text-grayScale-700">All Sub-categories</h1>
|
||||
<p className="mt-1 text-sm text-grayScale-400">
|
||||
View and manage courses across all categories.
|
||||
View and manage sub-categories across all categories.
|
||||
</p>
|
||||
</div>
|
||||
<Button
|
||||
|
|
@ -226,14 +226,14 @@ export function AllCoursesPage() {
|
|||
onClick={() => setCreateOpen(true)}
|
||||
>
|
||||
<Plus className="h-4 w-4" />
|
||||
Create Course
|
||||
Create Sub-category
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<Card className="shadow-soft">
|
||||
<CardHeader className="border-b border-grayScale-200 pb-4">
|
||||
<CardTitle className="text-base font-semibold text-grayScale-600">
|
||||
Course Management
|
||||
Sub-category Management
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-5 pt-5">
|
||||
|
|
@ -375,9 +375,9 @@ export function AllCoursesPage() {
|
|||
<div className="mb-4 grid h-16 w-16 place-items-center rounded-full bg-gradient-to-br from-grayScale-100 to-grayScale-200">
|
||||
<BookOpen className="h-8 w-8 text-grayScale-400" />
|
||||
</div>
|
||||
<p className="text-base font-semibold text-grayScale-600">No courses found</p>
|
||||
<p className="text-base font-semibold text-grayScale-600">No sub-categories found</p>
|
||||
<p className="mt-1.5 max-w-sm text-sm leading-relaxed text-grayScale-400">
|
||||
Try adjusting your search or category filter, or create a new course.
|
||||
Try adjusting your search or category filter, or create a new sub-category.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
|
@ -388,7 +388,7 @@ export function AllCoursesPage() {
|
|||
<Dialog open={createOpen} onOpenChange={setCreateOpen}>
|
||||
<DialogContent className="max-w-2xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Create course</DialogTitle>
|
||||
<DialogTitle>Create sub-category</DialogTitle>
|
||||
<DialogDescription>
|
||||
Choose a category, add basic details, and optionally attach a thumbnail and intro
|
||||
video.
|
||||
|
|
@ -439,7 +439,7 @@ export function AllCoursesPage() {
|
|||
</div>
|
||||
<div className="sm:col-span-1">
|
||||
<label className="mb-1.5 block text-sm font-medium text-grayScale-600">
|
||||
Course title
|
||||
Sub-category title
|
||||
</label>
|
||||
<Input
|
||||
placeholder="e.g. Beginner English A1"
|
||||
|
|
@ -455,7 +455,7 @@ export function AllCoursesPage() {
|
|||
</label>
|
||||
<Textarea
|
||||
rows={3}
|
||||
placeholder="Short summary of what this course covers."
|
||||
placeholder="Short summary of what this sub-category covers."
|
||||
value={createDescription}
|
||||
onChange={(e) => setCreateDescription(e.target.value)}
|
||||
/>
|
||||
|
|
@ -514,7 +514,7 @@ export function AllCoursesPage() {
|
|||
disabled={creating}
|
||||
onClick={handleCreateCourse}
|
||||
>
|
||||
{creating ? "Creating…" : "Create course"}
|
||||
{creating ? "Creating…" : "Create sub-category"}
|
||||
</Button>
|
||||
</div>
|
||||
</DialogContent>
|
||||
|
|
@ -524,9 +524,9 @@ export function AllCoursesPage() {
|
|||
<Dialog open={editOpen} onOpenChange={setEditOpen}>
|
||||
<DialogContent className="max-w-lg">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Edit course</DialogTitle>
|
||||
<DialogTitle>Edit sub-category</DialogTitle>
|
||||
<DialogDescription>
|
||||
Update the title and description for this course. Status can be toggled from the
|
||||
Update the title and description for this sub-category. Status can be toggled from the
|
||||
table.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
|
@ -534,12 +534,12 @@ export function AllCoursesPage() {
|
|||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="mb-1.5 block text-sm font-medium text-grayScale-600">
|
||||
Course title
|
||||
Sub-category title
|
||||
</label>
|
||||
<Input
|
||||
value={editTitle}
|
||||
onChange={(e) => setEditTitle(e.target.value)}
|
||||
placeholder="Enter course title"
|
||||
placeholder="Enter sub-category title"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
|
|
@ -550,7 +550,7 @@ export function AllCoursesPage() {
|
|||
rows={3}
|
||||
value={editDescription}
|
||||
onChange={(e) => setEditDescription(e.target.value)}
|
||||
placeholder="Short summary of this course."
|
||||
placeholder="Short summary of this sub-category."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ const contentSections = [
|
|||
pathFn: (categoryId: string | undefined) => `/content/category/${categoryId}/courses`,
|
||||
icon: BookOpen,
|
||||
title: "Courses",
|
||||
description: "Manage course videos and educational content",
|
||||
description: "Manage sub-categories, course videos and educational content",
|
||||
action: "Manage Courses",
|
||||
count: 12,
|
||||
countLabel: "courses",
|
||||
|
|
|
|||
|
|
@ -139,7 +139,7 @@ export function CourseCategoryPage() {
|
|||
|
||||
<CardContent>
|
||||
<span className="inline-flex items-center gap-1.5 text-sm font-medium text-brand-500 transition-colors group-hover:text-brand-600">
|
||||
View Courses
|
||||
View Sub-categories
|
||||
<span className="inline-block transition-transform duration-300 group-hover:translate-x-1">
|
||||
→
|
||||
</span>
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -77,7 +77,7 @@ export function CoursesPage() {
|
|||
setCategory(foundCategory ?? null)
|
||||
} catch (err) {
|
||||
console.error("Failed to fetch courses:", err)
|
||||
setError("Failed to load courses")
|
||||
setError("Failed to load sub-categories")
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
|
|
@ -123,7 +123,7 @@ export function CoursesPage() {
|
|||
await fetchCourses()
|
||||
} catch (err: any) {
|
||||
console.error("Failed to create course:", err)
|
||||
setSaveError(err.response?.data?.message || "Failed to create course")
|
||||
setSaveError(err.response?.data?.message || "Failed to create sub-category")
|
||||
} finally {
|
||||
setSaving(false)
|
||||
}
|
||||
|
|
@ -206,7 +206,7 @@ export function CoursesPage() {
|
|||
await fetchCourses()
|
||||
} catch (err: any) {
|
||||
console.error("Failed to update course:", err)
|
||||
setUpdateError(err.response?.data?.message || "Failed to update course")
|
||||
setUpdateError(err.response?.data?.message || "Failed to update sub-category")
|
||||
} finally {
|
||||
setUpdating(false)
|
||||
}
|
||||
|
|
@ -267,16 +267,16 @@ export function CoursesPage() {
|
|||
</Link>
|
||||
<div>
|
||||
<h1 className="text-xl font-bold text-grayScale-700 sm:text-2xl">
|
||||
{category?.name} Courses
|
||||
{category?.name} Sub-categories
|
||||
</h1>
|
||||
<p className="mt-0.5 text-sm text-grayScale-400">
|
||||
<span className="font-medium text-grayScale-500">{courses.length}</span> courses available
|
||||
<span className="font-medium text-grayScale-500">{courses.length}</span> sub-categories available
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<Button className="w-full bg-brand-500 shadow-sm transition-all hover:bg-brand-600 hover:shadow-md sm:w-auto" onClick={handleOpenModal}>
|
||||
<Plus className="mr-2 h-4 w-4" />
|
||||
Add New Course
|
||||
Add New Sub-category
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -285,16 +285,16 @@ export function CoursesPage() {
|
|||
<Card className="shadow-soft">
|
||||
<CardHeader className="border-b border-grayScale-200 pb-3">
|
||||
<CardTitle className="text-base font-semibold text-grayScale-600">
|
||||
Course Management
|
||||
Sub-category Management
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="pt-4">
|
||||
{courses.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center rounded-lg border-2 border-dashed border-grayScale-200 py-16 text-center">
|
||||
<img src={practiceSrc} alt="" className="h-16 w-16" />
|
||||
<h3 className="mt-4 text-base font-semibold text-grayScale-600">No courses yet</h3>
|
||||
<h3 className="mt-4 text-base font-semibold text-grayScale-600">No sub-categories yet</h3>
|
||||
<p className="mt-1.5 text-sm text-grayScale-400">
|
||||
No courses found in this category.
|
||||
No sub-categories found in this category.
|
||||
</p>
|
||||
<Button
|
||||
variant="outline"
|
||||
|
|
@ -302,7 +302,7 @@ export function CoursesPage() {
|
|||
onClick={handleOpenModal}
|
||||
>
|
||||
<Plus className="mr-2 h-4 w-4" />
|
||||
Add your first course
|
||||
Add your first sub-category
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
|
|
@ -311,7 +311,7 @@ export function CoursesPage() {
|
|||
<TableHeader>
|
||||
<TableRow className="bg-grayScale-100 hover:bg-grayScale-100">
|
||||
<TableHead className="py-3 text-xs font-semibold uppercase tracking-wider text-grayScale-500">
|
||||
Course
|
||||
Sub-category
|
||||
</TableHead>
|
||||
<TableHead className="hidden py-3 text-xs font-semibold uppercase tracking-wider text-grayScale-500 md:table-cell">
|
||||
Status
|
||||
|
|
@ -415,7 +415,7 @@ export function CoursesPage() {
|
|||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm">
|
||||
<div className="mx-4 w-full max-w-2xl animate-in fade-in zoom-in-95 rounded-2xl bg-white shadow-2xl">
|
||||
<div className="flex items-center justify-between border-b border-grayScale-100 px-6 py-5">
|
||||
<h2 className="text-lg font-bold text-grayScale-700">Add New Course</h2>
|
||||
<h2 className="text-lg font-bold text-grayScale-700">Add New Sub-category</h2>
|
||||
<button
|
||||
onClick={handleCloseModal}
|
||||
className="grid h-8 w-8 place-items-center rounded-lg text-grayScale-400 transition-colors hover:bg-grayScale-100 hover:text-grayScale-600"
|
||||
|
|
@ -441,7 +441,7 @@ export function CoursesPage() {
|
|||
</label>
|
||||
<Input
|
||||
id="course-title"
|
||||
placeholder="Enter course title"
|
||||
placeholder="Enter sub-category title"
|
||||
value={title}
|
||||
onChange={(e) => setTitle(e.target.value)}
|
||||
/>
|
||||
|
|
@ -456,7 +456,7 @@ export function CoursesPage() {
|
|||
</label>
|
||||
<textarea
|
||||
id="course-description"
|
||||
placeholder="Enter course description"
|
||||
placeholder="Enter sub-category description"
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
rows={4}
|
||||
|
|
@ -478,7 +478,7 @@ export function CoursesPage() {
|
|||
onClick={handleSave}
|
||||
disabled={saving}
|
||||
>
|
||||
{saving ? "Saving..." : "Save Course"}
|
||||
{saving ? "Saving..." : "Save Sub-category"}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -490,7 +490,7 @@ export function CoursesPage() {
|
|||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm">
|
||||
<div className="mx-4 w-full max-w-md animate-in fade-in zoom-in-95 rounded-2xl bg-white shadow-2xl">
|
||||
<div className="flex items-center justify-between border-b border-grayScale-100 px-6 py-5">
|
||||
<h2 className="text-lg font-bold text-grayScale-700">Edit Course</h2>
|
||||
<h2 className="text-lg font-bold text-grayScale-700">Edit Sub-category</h2>
|
||||
<button
|
||||
onClick={handleCloseEditModal}
|
||||
className="grid h-8 w-8 place-items-center rounded-lg text-grayScale-400 transition-colors hover:bg-grayScale-100 hover:text-grayScale-600"
|
||||
|
|
@ -516,7 +516,7 @@ export function CoursesPage() {
|
|||
</label>
|
||||
<Input
|
||||
id="edit-course-title"
|
||||
placeholder="Enter course title"
|
||||
placeholder="Enter sub-category title"
|
||||
value={editTitle}
|
||||
onChange={(e) => setEditTitle(e.target.value)}
|
||||
/>
|
||||
|
|
@ -531,7 +531,7 @@ export function CoursesPage() {
|
|||
</label>
|
||||
<textarea
|
||||
id="edit-course-description"
|
||||
placeholder="Enter course description"
|
||||
placeholder="Enter sub-category description"
|
||||
value={editDescription}
|
||||
onChange={(e) => setEditDescription(e.target.value)}
|
||||
rows={4}
|
||||
|
|
@ -564,7 +564,7 @@ export function CoursesPage() {
|
|||
onClick={handleUpdate}
|
||||
disabled={updating}
|
||||
>
|
||||
{updating ? "Updating..." : "Update Course"}
|
||||
{updating ? "Updating..." : "Update Sub-category"}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -576,7 +576,7 @@ export function CoursesPage() {
|
|||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm">
|
||||
<div className="mx-4 w-full max-w-lg animate-in fade-in zoom-in-95 rounded-2xl bg-white shadow-2xl">
|
||||
<div className="flex items-center justify-between border-b border-grayScale-100 px-6 py-5">
|
||||
<h2 className="text-lg font-bold text-grayScale-700">Course Ratings</h2>
|
||||
<h2 className="text-lg font-bold text-grayScale-700">Sub-category Ratings</h2>
|
||||
<button
|
||||
onClick={() => {
|
||||
setShowRatingsModal(false)
|
||||
|
|
@ -602,7 +602,7 @@ export function CoursesPage() {
|
|||
</div>
|
||||
<p className="mt-4 text-sm font-semibold text-grayScale-700">No ratings yet</p>
|
||||
<p className="mt-1 text-sm text-grayScale-400">
|
||||
Ratings will appear here once learners start reviewing this course.
|
||||
Ratings will appear here once learners start reviewing this sub-category.
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
|
|
@ -690,7 +690,7 @@ export function CoursesPage() {
|
|||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm">
|
||||
<div className="mx-4 w-full max-w-sm animate-in fade-in zoom-in-95 rounded-2xl bg-white shadow-2xl">
|
||||
<div className="flex items-center justify-between border-b border-grayScale-100 px-6 py-5">
|
||||
<h2 className="text-lg font-bold text-grayScale-700">Delete Course</h2>
|
||||
<h2 className="text-lg font-bold text-grayScale-700">Delete Sub-category</h2>
|
||||
<button
|
||||
onClick={() => setShowDeleteModal(false)}
|
||||
className="grid h-8 w-8 place-items-center rounded-lg text-grayScale-400 transition-colors hover:bg-grayScale-100 hover:text-grayScale-600"
|
||||
|
|
|
|||
|
|
@ -97,8 +97,8 @@ export function SubCourseContentPage() {
|
|||
)
|
||||
setSubCourse(foundSubCourse ?? null)
|
||||
} catch (err) {
|
||||
console.error("Failed to fetch sub-course data:", err)
|
||||
setError("Failed to load sub-course")
|
||||
console.error("Failed to fetch course data:", err)
|
||||
setError("Failed to load course")
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
|
|
@ -374,7 +374,7 @@ export function SubCourseContentPage() {
|
|||
return (
|
||||
<div className="flex flex-col items-center justify-center py-20">
|
||||
<img src={spinnerSrc} alt="" className="h-8 w-8 animate-spin" />
|
||||
<p className="mt-4 text-sm font-medium text-grayScale-500">Loading sub-course…</p>
|
||||
<p className="mt-4 text-sm font-medium text-grayScale-500">Loading course…</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -396,7 +396,7 @@ export function SubCourseContentPage() {
|
|||
className="group inline-flex items-center gap-2 rounded-lg px-2 py-1.5 text-sm font-medium text-grayScale-500 transition-all hover:bg-grayScale-50 hover:text-grayScale-900"
|
||||
>
|
||||
<ArrowLeft className="h-4 w-4 transition-transform group-hover:-translate-x-0.5" />
|
||||
Back to Sub-courses
|
||||
Back to Courses
|
||||
</Link>
|
||||
|
||||
{/* SubCourse Header */}
|
||||
|
|
@ -721,7 +721,7 @@ export function SubCourseContentPage() {
|
|||
</div>
|
||||
<p className="mt-4 text-sm font-semibold text-grayScale-700">No ratings yet</p>
|
||||
<p className="mt-1 text-sm text-grayScale-400">
|
||||
Ratings will appear here once learners start reviewing this sub-course.
|
||||
Ratings will appear here once learners start reviewing this course.
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
|
|
|
|||
|
|
@ -1,350 +1,403 @@
|
|||
import { useEffect, useState, useRef } from "react"
|
||||
import { Link, useParams, useNavigate } from "react-router-dom"
|
||||
import { ArrowLeft, ToggleLeft, ToggleRight, MoreVertical, X, Trash2, AlertCircle, Edit, Link2, Plus, Loader2, LayoutGrid, GitBranch, ChevronDown, Lock, ArrowRight } from "lucide-react"
|
||||
import practiceSrc from "../../assets/Practice.svg"
|
||||
import spinnerSrc from "../../assets/Circular-indeterminate progress indicator.svg"
|
||||
import { Card, CardContent } from "../../components/ui/card"
|
||||
import alertSrc from "../../assets/Alert.svg"
|
||||
import { Badge } from "../../components/ui/badge"
|
||||
import { Button } from "../../components/ui/button"
|
||||
import { getSubCoursesByCourse, getCoursesByCategory, getCourseCategories, createSubCourse, updateSubCourse, updateSubCourseStatus, deleteSubCourse, getSubCoursePrerequisites, addSubCoursePrerequisite, removeSubCoursePrerequisite } from "../../api/courses.api"
|
||||
import { Input } from "../../components/ui/input"
|
||||
import type { SubCourse, Course, CourseCategory, SubCoursePrerequisite } from "../../types/course.types"
|
||||
import { useEffect, useState, useRef } from "react";
|
||||
import { Link, useParams, useNavigate } from "react-router-dom";
|
||||
import {
|
||||
ArrowLeft,
|
||||
ToggleLeft,
|
||||
ToggleRight,
|
||||
MoreVertical,
|
||||
X,
|
||||
Trash2,
|
||||
AlertCircle,
|
||||
Edit,
|
||||
Link2,
|
||||
Plus,
|
||||
Loader2,
|
||||
LayoutGrid,
|
||||
GitBranch,
|
||||
ChevronDown,
|
||||
Lock,
|
||||
ArrowRight,
|
||||
} from "lucide-react";
|
||||
import practiceSrc from "../../assets/Practice.svg";
|
||||
import spinnerSrc from "../../assets/Circular-indeterminate progress indicator.svg";
|
||||
import { Card, CardContent } from "../../components/ui/card";
|
||||
import alertSrc from "../../assets/Alert.svg";
|
||||
import { Badge } from "../../components/ui/badge";
|
||||
import { Button } from "../../components/ui/button";
|
||||
import {
|
||||
getSubCoursesByCourse,
|
||||
getCoursesByCategory,
|
||||
getCourseCategories,
|
||||
createSubCourse,
|
||||
updateSubCourse,
|
||||
updateSubCourseStatus,
|
||||
deleteSubCourse,
|
||||
getSubCoursePrerequisites,
|
||||
addSubCoursePrerequisite,
|
||||
removeSubCoursePrerequisite,
|
||||
} from "../../api/courses.api";
|
||||
import { Input } from "../../components/ui/input";
|
||||
import type {
|
||||
SubCourse,
|
||||
Course,
|
||||
CourseCategory,
|
||||
SubCoursePrerequisite,
|
||||
} from "../../types/course.types";
|
||||
|
||||
export function SubCoursesPage() {
|
||||
const { categoryId, courseId } = useParams<{ categoryId: string; courseId: string }>()
|
||||
const navigate = useNavigate()
|
||||
const [subCourses, setSubCourses] = useState<SubCourse[]>([])
|
||||
const [course, setCourse] = useState<Course | null>(null)
|
||||
const [category, setCategory] = useState<CourseCategory | null>(null)
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
const { categoryId, courseId } = useParams<{
|
||||
categoryId: string;
|
||||
courseId: string;
|
||||
}>();
|
||||
const navigate = useNavigate();
|
||||
const [subCourses, setSubCourses] = useState<SubCourse[]>([]);
|
||||
const [course, setCourse] = useState<Course | null>(null);
|
||||
const [category, setCategory] = useState<CourseCategory | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const [openMenuId, setOpenMenuId] = useState<number | null>(null)
|
||||
const [togglingId, setTogglingId] = useState<number | null>(null)
|
||||
const [showDeleteModal, setShowDeleteModal] = useState(false)
|
||||
const [subCourseToDelete, setSubCourseToDelete] = useState<SubCourse | null>(null)
|
||||
const [deleting, setDeleting] = useState(false)
|
||||
const menuRef = useRef<HTMLDivElement>(null)
|
||||
const [openMenuId, setOpenMenuId] = useState<number | null>(null);
|
||||
const [togglingId, setTogglingId] = useState<number | null>(null);
|
||||
const [showDeleteModal, setShowDeleteModal] = useState(false);
|
||||
const [subCourseToDelete, setSubCourseToDelete] = useState<SubCourse | null>(
|
||||
null,
|
||||
);
|
||||
const [deleting, setDeleting] = useState(false);
|
||||
const menuRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const [showAddModal, setShowAddModal] = useState(false)
|
||||
const [showEditModal, setShowEditModal] = useState(false)
|
||||
const [subCourseToEdit, setSubCourseToEdit] = useState<SubCourse | null>(null)
|
||||
const [title, setTitle] = useState("")
|
||||
const [description, setDescription] = useState("")
|
||||
const [level, setLevel] = useState("")
|
||||
const [saving, setSaving] = useState(false)
|
||||
const [saveError, setSaveError] = useState<string | null>(null)
|
||||
const [showAddModal, setShowAddModal] = useState(false);
|
||||
const [showEditModal, setShowEditModal] = useState(false);
|
||||
const [subCourseToEdit, setSubCourseToEdit] = useState<SubCourse | null>(
|
||||
null,
|
||||
);
|
||||
const [title, setTitle] = useState("");
|
||||
const [description, setDescription] = useState("");
|
||||
const [level, setLevel] = useState("");
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [saveError, setSaveError] = useState<string | null>(null);
|
||||
|
||||
// View mode
|
||||
const [viewMode, setViewMode] = useState<"grid" | "flow">("grid")
|
||||
const [viewMode, setViewMode] = useState<"grid" | "flow">("grid");
|
||||
|
||||
// All prerequisites map: subCourseId -> prerequisites[]
|
||||
const [allPrereqMap, setAllPrereqMap] = useState<Record<number, SubCoursePrerequisite[]>>({})
|
||||
const [allPrereqLoading, setAllPrereqLoading] = useState(false)
|
||||
const [allPrereqMap, setAllPrereqMap] = useState<
|
||||
Record<number, SubCoursePrerequisite[]>
|
||||
>({});
|
||||
const [allPrereqLoading, setAllPrereqLoading] = useState(false);
|
||||
|
||||
// Prerequisites state
|
||||
const [showPrereqModal, setShowPrereqModal] = useState(false)
|
||||
const [prereqSubCourse, setPrereqSubCourse] = useState<SubCourse | null>(null)
|
||||
const [prerequisites, setPrerequisites] = useState<SubCoursePrerequisite[]>([])
|
||||
const [prereqLoading, setPrereqLoading] = useState(false)
|
||||
const [prereqAdding, setPrereqAdding] = useState(false)
|
||||
const [prereqRemoving, setPrereqRemoving] = useState<number | null>(null)
|
||||
const [selectedPrereqId, setSelectedPrereqId] = useState<number | 0>(0)
|
||||
const [showPrereqModal, setShowPrereqModal] = useState(false);
|
||||
const [prereqSubCourse, setPrereqSubCourse] = useState<SubCourse | null>(
|
||||
null,
|
||||
);
|
||||
const [prerequisites, setPrerequisites] = useState<SubCoursePrerequisite[]>(
|
||||
[],
|
||||
);
|
||||
const [prereqLoading, setPrereqLoading] = useState(false);
|
||||
const [prereqAdding, setPrereqAdding] = useState(false);
|
||||
const [prereqRemoving, setPrereqRemoving] = useState<number | null>(null);
|
||||
const [selectedPrereqId, setSelectedPrereqId] = useState<number | 0>(0);
|
||||
|
||||
useEffect(() => {
|
||||
const handleClickOutside = (event: MouseEvent) => {
|
||||
if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
|
||||
setOpenMenuId(null)
|
||||
setOpenMenuId(null);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
if (openMenuId !== null) {
|
||||
document.addEventListener("mousedown", handleClickOutside)
|
||||
document.addEventListener("mousedown", handleClickOutside);
|
||||
}
|
||||
return () => document.removeEventListener("mousedown", handleClickOutside)
|
||||
}, [openMenuId])
|
||||
return () => document.removeEventListener("mousedown", handleClickOutside);
|
||||
}, [openMenuId]);
|
||||
|
||||
const fetchSubCourses = async () => {
|
||||
if (!courseId) return
|
||||
if (!courseId) return;
|
||||
|
||||
try {
|
||||
const subCoursesRes = await getSubCoursesByCourse(Number(courseId))
|
||||
setSubCourses(subCoursesRes.data.data.sub_courses ?? [])
|
||||
const subCoursesRes = await getSubCoursesByCourse(Number(courseId));
|
||||
setSubCourses(subCoursesRes.data.data.sub_courses ?? []);
|
||||
} catch (err) {
|
||||
console.error("Failed to fetch sub-courses:", err)
|
||||
console.error("Failed to fetch sub-courses:", err);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const fetchAllPrerequisites = async (scs: SubCourse[]) => {
|
||||
if (scs.length === 0) return
|
||||
setAllPrereqLoading(true)
|
||||
if (scs.length === 0) return;
|
||||
setAllPrereqLoading(true);
|
||||
try {
|
||||
const results = await Promise.all(
|
||||
scs.map((sc) => getSubCoursePrerequisites(sc.id).then((res) => ({ id: sc.id, data: res.data.data ?? [] })))
|
||||
)
|
||||
const map: Record<number, SubCoursePrerequisite[]> = {}
|
||||
scs.map((sc) =>
|
||||
getSubCoursePrerequisites(sc.id).then((res) => ({
|
||||
id: sc.id,
|
||||
data: res.data.data ?? [],
|
||||
})),
|
||||
),
|
||||
);
|
||||
const map: Record<number, SubCoursePrerequisite[]> = {};
|
||||
for (const r of results) {
|
||||
map[r.id] = r.data
|
||||
map[r.id] = r.data;
|
||||
}
|
||||
setAllPrereqMap(map)
|
||||
setAllPrereqMap(map);
|
||||
} catch (err) {
|
||||
console.error("Failed to fetch all prerequisites:", err)
|
||||
console.error("Failed to fetch all prerequisites:", err);
|
||||
} finally {
|
||||
setAllPrereqLoading(false)
|
||||
setAllPrereqLoading(false);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
if (!courseId || !categoryId) return
|
||||
if (!courseId || !categoryId) return;
|
||||
|
||||
try {
|
||||
const [subCoursesRes, coursesRes, categoriesRes] = await Promise.all([
|
||||
getSubCoursesByCourse(Number(courseId)),
|
||||
getCoursesByCategory(Number(categoryId)),
|
||||
getCourseCategories(),
|
||||
])
|
||||
]);
|
||||
|
||||
setSubCourses(subCoursesRes.data.data.sub_courses ?? [])
|
||||
setSubCourses(subCoursesRes.data.data.sub_courses ?? []);
|
||||
|
||||
const foundCourse = coursesRes.data.data.courses?.find(
|
||||
(c) => c.id === Number(courseId)
|
||||
)
|
||||
setCourse(foundCourse ?? null)
|
||||
(c) => c.id === Number(courseId),
|
||||
);
|
||||
setCourse(foundCourse ?? null);
|
||||
|
||||
const foundCategory = categoriesRes.data.data.categories?.find(
|
||||
(c) => c.id === Number(categoryId)
|
||||
)
|
||||
setCategory(foundCategory ?? null)
|
||||
(c) => c.id === Number(categoryId),
|
||||
);
|
||||
setCategory(foundCategory ?? null);
|
||||
} catch (err) {
|
||||
console.error("Failed to fetch sub-courses:", err)
|
||||
setError("Failed to load sub-courses")
|
||||
console.error("Failed to fetch sub-courses:", err);
|
||||
setError("Failed to load courses");
|
||||
} finally {
|
||||
setLoading(false)
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
fetchData()
|
||||
}, [courseId, categoryId])
|
||||
fetchData();
|
||||
}, [courseId, categoryId]);
|
||||
|
||||
useEffect(() => {
|
||||
if (subCourses.length > 0) {
|
||||
fetchAllPrerequisites(subCourses)
|
||||
fetchAllPrerequisites(subCourses);
|
||||
}
|
||||
}, [subCourses])
|
||||
}, [subCourses]);
|
||||
|
||||
const handleToggleStatus = async (subCourse: SubCourse) => {
|
||||
setTogglingId(subCourse.id)
|
||||
setTogglingId(subCourse.id);
|
||||
try {
|
||||
await updateSubCourseStatus(subCourse.id, {
|
||||
is_active: !subCourse.is_active,
|
||||
level: subCourse.level,
|
||||
title: subCourse.title,
|
||||
})
|
||||
await fetchSubCourses()
|
||||
});
|
||||
await fetchSubCourses();
|
||||
} catch (err) {
|
||||
console.error("Failed to update sub-course status:", err)
|
||||
console.error("Failed to update sub-course status:", err);
|
||||
} finally {
|
||||
setTogglingId(null)
|
||||
setTogglingId(null);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeleteClick = (subCourse: SubCourse) => {
|
||||
setSubCourseToDelete(subCourse)
|
||||
setShowDeleteModal(true)
|
||||
}
|
||||
setSubCourseToDelete(subCourse);
|
||||
setShowDeleteModal(true);
|
||||
};
|
||||
|
||||
const handleConfirmDelete = async () => {
|
||||
if (!subCourseToDelete) return
|
||||
if (!subCourseToDelete) return;
|
||||
|
||||
setDeleting(true)
|
||||
setDeleting(true);
|
||||
try {
|
||||
await deleteSubCourse(subCourseToDelete.id)
|
||||
setShowDeleteModal(false)
|
||||
setSubCourseToDelete(null)
|
||||
await fetchSubCourses()
|
||||
await deleteSubCourse(subCourseToDelete.id);
|
||||
setShowDeleteModal(false);
|
||||
setSubCourseToDelete(null);
|
||||
await fetchSubCourses();
|
||||
} catch (err) {
|
||||
console.error("Failed to delete sub-course:", err)
|
||||
console.error("Failed to delete sub-course:", err);
|
||||
} finally {
|
||||
setDeleting(false)
|
||||
setDeleting(false);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleAddSubCourse = () => {
|
||||
setTitle("")
|
||||
setDescription("")
|
||||
setLevel("")
|
||||
setSaveError(null)
|
||||
setShowAddModal(true)
|
||||
}
|
||||
setTitle("");
|
||||
setDescription("");
|
||||
setLevel("");
|
||||
setSaveError(null);
|
||||
setShowAddModal(true);
|
||||
};
|
||||
|
||||
const handleSaveNewSubCourse = async () => {
|
||||
if (!courseId) return
|
||||
setSaving(true)
|
||||
setSaveError(null)
|
||||
if (!courseId) return;
|
||||
setSaving(true);
|
||||
setSaveError(null);
|
||||
try {
|
||||
await createSubCourse({
|
||||
course_id: Number(courseId),
|
||||
title,
|
||||
description,
|
||||
level,
|
||||
})
|
||||
setShowAddModal(false)
|
||||
setTitle("")
|
||||
setDescription("")
|
||||
setLevel("")
|
||||
await fetchSubCourses()
|
||||
});
|
||||
setShowAddModal(false);
|
||||
setTitle("");
|
||||
setDescription("");
|
||||
setLevel("");
|
||||
await fetchSubCourses();
|
||||
} catch (err) {
|
||||
console.error("Failed to create sub-course:", err)
|
||||
setSaveError("Failed to create sub-course")
|
||||
console.error("Failed to create sub-course:", err);
|
||||
setSaveError("Failed to create course");
|
||||
} finally {
|
||||
setSaving(false)
|
||||
setSaving(false);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleEditClick = (subCourse: SubCourse) => {
|
||||
setSubCourseToEdit(subCourse)
|
||||
setTitle(subCourse.title)
|
||||
setDescription(subCourse.description)
|
||||
setLevel(subCourse.level)
|
||||
setSaveError(null)
|
||||
setShowEditModal(true)
|
||||
}
|
||||
setSubCourseToEdit(subCourse);
|
||||
setTitle(subCourse.title);
|
||||
setDescription(subCourse.description);
|
||||
setLevel(subCourse.level);
|
||||
setSaveError(null);
|
||||
setShowEditModal(true);
|
||||
};
|
||||
|
||||
const handleSaveEditSubCourse = async () => {
|
||||
if (!subCourseToEdit) return
|
||||
setSaving(true)
|
||||
setSaveError(null)
|
||||
if (!subCourseToEdit) return;
|
||||
setSaving(true);
|
||||
setSaveError(null);
|
||||
try {
|
||||
await updateSubCourse(subCourseToEdit.id, {
|
||||
title,
|
||||
description,
|
||||
level,
|
||||
})
|
||||
setShowEditModal(false)
|
||||
setSubCourseToEdit(null)
|
||||
setTitle("")
|
||||
setDescription("")
|
||||
setLevel("")
|
||||
await fetchSubCourses()
|
||||
});
|
||||
setShowEditModal(false);
|
||||
setSubCourseToEdit(null);
|
||||
setTitle("");
|
||||
setDescription("");
|
||||
setLevel("");
|
||||
await fetchSubCourses();
|
||||
} catch (err) {
|
||||
console.error("Failed to update sub-course:", err)
|
||||
setSaveError("Failed to update sub-course")
|
||||
console.error("Failed to update sub-course:", err);
|
||||
setSaveError("Failed to update course");
|
||||
} finally {
|
||||
setSaving(false)
|
||||
setSaving(false);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubCourseClick = (subCourseId: number) => {
|
||||
navigate(`/content/category/${categoryId}/courses/${courseId}/sub-courses/${subCourseId}`)
|
||||
}
|
||||
navigate(
|
||||
`/content/category/${categoryId}/courses/${courseId}/sub-courses/${subCourseId}`,
|
||||
);
|
||||
};
|
||||
|
||||
const handlePrereqClick = async (subCourse: SubCourse) => {
|
||||
setPrereqSubCourse(subCourse)
|
||||
setShowPrereqModal(true)
|
||||
setPrereqLoading(true)
|
||||
setSelectedPrereqId(0)
|
||||
setPrereqSubCourse(subCourse);
|
||||
setShowPrereqModal(true);
|
||||
setPrereqLoading(true);
|
||||
setSelectedPrereqId(0);
|
||||
try {
|
||||
const res = await getSubCoursePrerequisites(subCourse.id)
|
||||
setPrerequisites(res.data.data ?? [])
|
||||
const res = await getSubCoursePrerequisites(subCourse.id);
|
||||
setPrerequisites(res.data.data ?? []);
|
||||
} catch (err) {
|
||||
console.error("Failed to fetch prerequisites:", err)
|
||||
setPrerequisites([])
|
||||
console.error("Failed to fetch prerequisites:", err);
|
||||
setPrerequisites([]);
|
||||
} finally {
|
||||
setPrereqLoading(false)
|
||||
setPrereqLoading(false);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleAddPrerequisite = async () => {
|
||||
if (!prereqSubCourse || !selectedPrereqId) return
|
||||
setPrereqAdding(true)
|
||||
if (!prereqSubCourse || !selectedPrereqId) return;
|
||||
setPrereqAdding(true);
|
||||
try {
|
||||
await addSubCoursePrerequisite(prereqSubCourse.id, {
|
||||
prerequisite_sub_course_id: selectedPrereqId,
|
||||
})
|
||||
const res = await getSubCoursePrerequisites(prereqSubCourse.id)
|
||||
setPrerequisites(res.data.data ?? [])
|
||||
setSelectedPrereqId(0)
|
||||
});
|
||||
const res = await getSubCoursePrerequisites(prereqSubCourse.id);
|
||||
setPrerequisites(res.data.data ?? []);
|
||||
setSelectedPrereqId(0);
|
||||
} catch (err) {
|
||||
console.error("Failed to add prerequisite:", err)
|
||||
console.error("Failed to add prerequisite:", err);
|
||||
} finally {
|
||||
setPrereqAdding(false)
|
||||
setPrereqAdding(false);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleRemovePrerequisite = async (prereqId: number) => {
|
||||
if (!prereqSubCourse) return
|
||||
setPrereqRemoving(prereqId)
|
||||
if (!prereqSubCourse) return;
|
||||
setPrereqRemoving(prereqId);
|
||||
try {
|
||||
await removeSubCoursePrerequisite(prereqSubCourse.id, prereqId)
|
||||
const res = await getSubCoursePrerequisites(prereqSubCourse.id)
|
||||
setPrerequisites(res.data.data ?? [])
|
||||
await removeSubCoursePrerequisite(prereqSubCourse.id, prereqId);
|
||||
const res = await getSubCoursePrerequisites(prereqSubCourse.id);
|
||||
setPrerequisites(res.data.data ?? []);
|
||||
} catch (err) {
|
||||
console.error("Failed to remove prerequisite:", err)
|
||||
console.error("Failed to remove prerequisite:", err);
|
||||
} finally {
|
||||
setPrereqRemoving(null)
|
||||
setPrereqRemoving(null);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Build flow layers using topological sort
|
||||
const flowLayers = (() => {
|
||||
if (subCourses.length === 0) return []
|
||||
if (subCourses.length === 0) return [];
|
||||
|
||||
// Find sub-courses with no prerequisites (roots)
|
||||
const hasPrereqs = new Set<number>()
|
||||
const isPrereqOf = new Map<number, number[]>() // prereqId -> [subCourseIds that depend on it]
|
||||
const hasPrereqs = new Set<number>();
|
||||
const isPrereqOf = new Map<number, number[]>(); // prereqId -> [subCourseIds that depend on it]
|
||||
|
||||
for (const sc of subCourses) {
|
||||
const prereqs = allPrereqMap[sc.id] ?? []
|
||||
const prereqs = allPrereqMap[sc.id] ?? [];
|
||||
if (prereqs.length > 0) {
|
||||
hasPrereqs.add(sc.id)
|
||||
hasPrereqs.add(sc.id);
|
||||
}
|
||||
for (const p of prereqs) {
|
||||
const dependents = isPrereqOf.get(p.prerequisite_sub_course_id) ?? []
|
||||
dependents.push(sc.id)
|
||||
isPrereqOf.set(p.prerequisite_sub_course_id, dependents)
|
||||
const dependents = isPrereqOf.get(p.prerequisite_sub_course_id) ?? [];
|
||||
dependents.push(sc.id);
|
||||
isPrereqOf.set(p.prerequisite_sub_course_id, dependents);
|
||||
}
|
||||
}
|
||||
|
||||
// BFS-based layering
|
||||
const layers: SubCourse[][] = []
|
||||
const placed = new Set<number>()
|
||||
const layers: SubCourse[][] = [];
|
||||
const placed = new Set<number>();
|
||||
|
||||
// Layer 0: no prerequisites
|
||||
const roots = subCourses.filter((sc) => !hasPrereqs.has(sc.id))
|
||||
const roots = subCourses.filter((sc) => !hasPrereqs.has(sc.id));
|
||||
if (roots.length > 0) {
|
||||
layers.push(roots)
|
||||
roots.forEach((sc) => placed.add(sc.id))
|
||||
layers.push(roots);
|
||||
roots.forEach((sc) => placed.add(sc.id));
|
||||
}
|
||||
|
||||
// Subsequent layers: all prereqs already placed
|
||||
let maxIterations = subCourses.length
|
||||
let maxIterations = subCourses.length;
|
||||
while (placed.size < subCourses.length && maxIterations-- > 0) {
|
||||
const nextLayer = subCourses.filter((sc) => {
|
||||
if (placed.has(sc.id)) return false
|
||||
const prereqs = allPrereqMap[sc.id] ?? []
|
||||
return prereqs.every((p) => placed.has(p.prerequisite_sub_course_id))
|
||||
})
|
||||
if (placed.has(sc.id)) return false;
|
||||
const prereqs = allPrereqMap[sc.id] ?? [];
|
||||
return prereqs.every((p) => placed.has(p.prerequisite_sub_course_id));
|
||||
});
|
||||
if (nextLayer.length === 0) {
|
||||
// Remaining have circular deps or missing prereqs — just add them
|
||||
const remaining = subCourses.filter((sc) => !placed.has(sc.id))
|
||||
if (remaining.length > 0) layers.push(remaining)
|
||||
break
|
||||
const remaining = subCourses.filter((sc) => !placed.has(sc.id));
|
||||
if (remaining.length > 0) layers.push(remaining);
|
||||
break;
|
||||
}
|
||||
layers.push(nextLayer)
|
||||
nextLayer.forEach((sc) => placed.add(sc.id))
|
||||
layers.push(nextLayer);
|
||||
nextLayer.forEach((sc) => placed.add(sc.id));
|
||||
}
|
||||
|
||||
return layers
|
||||
})()
|
||||
return layers;
|
||||
})();
|
||||
|
||||
const availablePrerequisites = subCourses.filter(
|
||||
(sc) =>
|
||||
prereqSubCourse &&
|
||||
sc.id !== prereqSubCourse.id &&
|
||||
!prerequisites.some((p) => p.prerequisite_sub_course_id === sc.id)
|
||||
)
|
||||
!prerequisites.some((p) => p.prerequisite_sub_course_id === sc.id),
|
||||
);
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
|
|
@ -355,7 +408,7 @@ export function SubCoursesPage() {
|
|||
</div>
|
||||
<p className="mt-4 text-sm font-medium text-grayScale-400">Loading sub-courses...</p> */}
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
if (error) {
|
||||
|
|
@ -366,7 +419,7 @@ export function SubCoursesPage() {
|
|||
<p className="text-sm font-medium text-red-600">{error}</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
|
|
@ -382,12 +435,21 @@ export function SubCoursesPage() {
|
|||
</Link>
|
||||
<div className="min-w-0">
|
||||
<div className="mb-1 flex items-center gap-1.5 text-xs font-medium text-grayScale-400">
|
||||
<span className="truncate max-w-[100px] rounded bg-grayScale-50 px-1.5 py-0.5 sm:max-w-none">{category?.name}</span>
|
||||
<span className="truncate max-w-[100px] rounded bg-grayScale-50 px-1.5 py-0.5 sm:max-w-none">
|
||||
{category?.name}
|
||||
</span>
|
||||
<span className="shrink-0 text-grayScale-300">→</span>
|
||||
<span className="truncate max-w-[100px] rounded bg-grayScale-50 px-1.5 py-0.5 sm:max-w-none">{course?.title}</span>
|
||||
<span className="truncate max-w-[100px] rounded bg-grayScale-50 px-1.5 py-0.5 sm:max-w-none">
|
||||
{course?.title}
|
||||
</span>
|
||||
</div>
|
||||
<h1 className="text-2xl font-bold tracking-tight text-grayScale-700">Sub-courses</h1>
|
||||
<p className="mt-0.5 text-sm text-grayScale-400">{subCourses.length} sub-course{subCourses.length !== 1 ? "s" : ""} available</p>
|
||||
<h1 className="text-2xl font-bold tracking-tight text-grayScale-700">
|
||||
Courses
|
||||
</h1>
|
||||
<p className="mt-0.5 text-sm text-grayScale-400">
|
||||
{subCourses.length} course{subCourses.length !== 1 ? "s" : ""}{" "}
|
||||
available
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
|
|
@ -417,8 +479,11 @@ export function SubCoursesPage() {
|
|||
</button>
|
||||
</div>
|
||||
)}
|
||||
<Button className="w-full rounded-xl bg-brand-500 px-5 shadow-sm transition-all hover:bg-brand-600 hover:shadow-md sm:w-auto" onClick={handleAddSubCourse}>
|
||||
Add New Sub-course
|
||||
<Button
|
||||
className="w-full rounded-xl bg-brand-500 px-5 shadow-sm transition-all hover:bg-brand-600 hover:shadow-md sm:w-auto"
|
||||
onClick={handleAddSubCourse}
|
||||
>
|
||||
Add New Course
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -428,10 +493,17 @@ export function SubCoursesPage() {
|
|||
<Card className="border border-dashed border-grayScale-200 shadow-none">
|
||||
<CardContent className="flex flex-col items-center justify-center py-16">
|
||||
<img src={practiceSrc} alt="" className="h-20 w-20" />
|
||||
<h3 className="mt-5 text-base font-semibold text-grayScale-600">No sub-courses yet</h3>
|
||||
<p className="mt-1.5 max-w-xs text-center text-sm text-grayScale-400">Get started by adding your first sub-course to this course</p>
|
||||
<Button className="mt-5 rounded-xl bg-brand-500 px-5 shadow-sm hover:bg-brand-600 hover:shadow-md" onClick={handleAddSubCourse}>
|
||||
Add your first sub-course
|
||||
<h3 className="mt-5 text-base font-semibold text-grayScale-600">
|
||||
No courses yet
|
||||
</h3>
|
||||
<p className="mt-1.5 max-w-xs text-center text-sm text-grayScale-400">
|
||||
Get started by adding your first course to this sub-category
|
||||
</p>
|
||||
<Button
|
||||
className="mt-5 rounded-xl bg-brand-500 px-5 shadow-sm hover:bg-brand-600 hover:shadow-md"
|
||||
onClick={handleAddSubCourse}
|
||||
>
|
||||
Add your first course
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
|
@ -443,7 +515,7 @@ export function SubCoursesPage() {
|
|||
"bg-gradient-to-br from-purple-100 to-purple-200",
|
||||
"bg-gradient-to-br from-green-100 to-green-200",
|
||||
"bg-gradient-to-br from-yellow-100 to-yellow-200",
|
||||
]
|
||||
];
|
||||
return (
|
||||
<Card
|
||||
key={subCourse.id}
|
||||
|
|
@ -459,7 +531,9 @@ export function SubCoursesPage() {
|
|||
className="h-full w-full object-cover rounded-t-lg transition-transform duration-300 group-hover:scale-105"
|
||||
/>
|
||||
) : (
|
||||
<div className={`h-full w-full rounded-t-lg transition-transform duration-300 group-hover:scale-105 ${gradients[index % gradients.length]}`} />
|
||||
<div
|
||||
className={`h-full w-full rounded-t-lg transition-transform duration-300 group-hover:scale-105 ${gradients[index % gradients.length]}`}
|
||||
/>
|
||||
)}
|
||||
{subCourse.level && (
|
||||
<div className="absolute bottom-2.5 right-2.5 rounded-md bg-brand-600/90 px-2.5 py-1 text-xs font-semibold tracking-wide text-white shadow-sm backdrop-blur-sm">
|
||||
|
|
@ -479,7 +553,9 @@ export function SubCoursesPage() {
|
|||
: "border border-grayScale-200 bg-grayScale-50 text-grayScale-500"
|
||||
}`}
|
||||
>
|
||||
<span className={`mr-1.5 inline-block h-1.5 w-1.5 rounded-full ${subCourse.is_active ? "bg-green-500" : "bg-grayScale-400"}`} />
|
||||
<span
|
||||
className={`mr-1.5 inline-block h-1.5 w-1.5 rounded-full ${subCourse.is_active ? "bg-green-500" : "bg-grayScale-400"}`}
|
||||
/>
|
||||
{subCourse.is_active ? "Active" : "Inactive"}
|
||||
</Badge>
|
||||
<div
|
||||
|
|
@ -488,7 +564,11 @@ export function SubCoursesPage() {
|
|||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<button
|
||||
onClick={() => setOpenMenuId(openMenuId === subCourse.id ? null : subCourse.id)}
|
||||
onClick={() =>
|
||||
setOpenMenuId(
|
||||
openMenuId === subCourse.id ? null : subCourse.id,
|
||||
)
|
||||
}
|
||||
className="grid h-7 w-7 place-items-center rounded-lg text-grayScale-400 transition-colors hover:bg-grayScale-100 hover:text-grayScale-600"
|
||||
>
|
||||
<MoreVertical className="h-4 w-4" />
|
||||
|
|
@ -497,8 +577,8 @@ export function SubCoursesPage() {
|
|||
<div className="absolute right-0 top-full z-10 mt-1.5 w-44 overflow-hidden rounded-xl border border-grayScale-100 bg-white py-1 shadow-lg">
|
||||
<button
|
||||
onClick={() => {
|
||||
handlePrereqClick(subCourse)
|
||||
setOpenMenuId(null)
|
||||
handlePrereqClick(subCourse);
|
||||
setOpenMenuId(null);
|
||||
}}
|
||||
className="flex w-full items-center gap-2.5 px-4 py-2.5 text-sm text-grayScale-600 transition-colors hover:bg-grayScale-50"
|
||||
>
|
||||
|
|
@ -508,8 +588,8 @@ export function SubCoursesPage() {
|
|||
<div className="mx-3 border-t border-grayScale-100" />
|
||||
<button
|
||||
onClick={() => {
|
||||
handleToggleStatus(subCourse)
|
||||
setOpenMenuId(null)
|
||||
handleToggleStatus(subCourse);
|
||||
setOpenMenuId(null);
|
||||
}}
|
||||
disabled={togglingId === subCourse.id}
|
||||
className="flex w-full items-center gap-2.5 px-4 py-2.5 text-sm text-grayScale-600 transition-colors hover:bg-grayScale-50 disabled:opacity-50"
|
||||
|
|
@ -529,8 +609,8 @@ export function SubCoursesPage() {
|
|||
<div className="mx-3 border-t border-grayScale-100" />
|
||||
<button
|
||||
onClick={() => {
|
||||
handleDeleteClick(subCourse)
|
||||
setOpenMenuId(null)
|
||||
handleDeleteClick(subCourse);
|
||||
setOpenMenuId(null);
|
||||
}}
|
||||
className="flex w-full items-center gap-2.5 px-4 py-2.5 text-sm text-red-500 transition-colors hover:bg-red-50"
|
||||
>
|
||||
|
|
@ -544,7 +624,9 @@ export function SubCoursesPage() {
|
|||
|
||||
{/* Title */}
|
||||
<div>
|
||||
<h3 className="font-semibold text-grayScale-700 group-hover:text-brand-600 transition-colors">{subCourse.title}</h3>
|
||||
<h3 className="font-semibold text-grayScale-700 group-hover:text-brand-600 transition-colors">
|
||||
{subCourse.title}
|
||||
</h3>
|
||||
<p className="mt-1 text-sm leading-relaxed text-grayScale-400 line-clamp-2">
|
||||
{subCourse.description || "No description available"}
|
||||
</p>
|
||||
|
|
@ -555,8 +637,8 @@ export function SubCoursesPage() {
|
|||
variant="outline"
|
||||
className="mt-auto w-full rounded-lg border-grayScale-200 text-grayScale-500 transition-all hover:border-brand-200 hover:bg-brand-50 hover:text-brand-600"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
handleEditClick(subCourse)
|
||||
e.stopPropagation();
|
||||
handleEditClick(subCourse);
|
||||
}}
|
||||
>
|
||||
<Edit className="mr-2 h-3.5 w-3.5" />
|
||||
|
|
@ -564,7 +646,7 @@ export function SubCoursesPage() {
|
|||
</Button>
|
||||
</div>
|
||||
</Card>
|
||||
)
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
|
@ -574,7 +656,9 @@ export function SubCoursesPage() {
|
|||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm">
|
||||
<div className="mx-4 w-full max-w-sm rounded-2xl bg-white shadow-2xl">
|
||||
<div className="flex items-center justify-between border-b border-grayScale-100 px-6 py-4">
|
||||
<h2 className="text-lg font-semibold text-grayScale-700">Delete Sub-course</h2>
|
||||
<h2 className="text-lg font-semibold text-grayScale-700">
|
||||
Delete Course
|
||||
</h2>
|
||||
<button
|
||||
onClick={() => setShowDeleteModal(false)}
|
||||
className="grid h-8 w-8 place-items-center rounded-lg text-grayScale-400 transition-colors hover:bg-grayScale-100 hover:text-grayScale-600"
|
||||
|
|
@ -589,8 +673,10 @@ export function SubCoursesPage() {
|
|||
</div>
|
||||
<p className="text-center text-sm leading-relaxed text-grayScale-600">
|
||||
Are you sure you want to delete{" "}
|
||||
<span className="font-semibold text-grayScale-700">{subCourseToDelete.title}</span>? This action cannot
|
||||
be undone.
|
||||
<span className="font-semibold text-grayScale-700">
|
||||
{subCourseToDelete.title}
|
||||
</span>
|
||||
? This action cannot be undone.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
|
@ -620,7 +706,9 @@ export function SubCoursesPage() {
|
|||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm">
|
||||
<div className="mx-4 w-full max-w-md rounded-2xl bg-white shadow-2xl">
|
||||
<div className="flex items-center justify-between border-b border-grayScale-100 px-6 py-4">
|
||||
<h2 className="text-lg font-semibold text-grayScale-700">Add New Sub-course</h2>
|
||||
<h2 className="text-lg font-semibold text-grayScale-700">
|
||||
Add New Course
|
||||
</h2>
|
||||
<button
|
||||
onClick={() => setShowAddModal(false)}
|
||||
className="grid h-8 w-8 place-items-center rounded-lg text-grayScale-400 transition-colors hover:bg-grayScale-100 hover:text-grayScale-600"
|
||||
|
|
@ -631,25 +719,31 @@ export function SubCoursesPage() {
|
|||
|
||||
<div className="space-y-5 px-6 py-6">
|
||||
<div className="space-y-1.5">
|
||||
<label className="text-sm font-semibold text-grayScale-600">Title</label>
|
||||
<label className="text-sm font-semibold text-grayScale-600">
|
||||
Title
|
||||
</label>
|
||||
<Input
|
||||
value={title}
|
||||
onChange={(e) => setTitle(e.target.value)}
|
||||
placeholder="Enter sub-course title"
|
||||
placeholder="Enter course title"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<label className="text-sm font-semibold text-grayScale-600">Description</label>
|
||||
<label className="text-sm font-semibold text-grayScale-600">
|
||||
Description
|
||||
</label>
|
||||
<textarea
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
placeholder="Enter sub-course description"
|
||||
placeholder="Enter course description"
|
||||
className="w-full rounded-lg border border-grayScale-200 px-3 py-2.5 text-sm transition-colors focus:border-brand-500 focus:outline-none focus:ring-2 focus:ring-brand-500/20"
|
||||
rows={3}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<label className="text-sm font-semibold text-grayScale-600">Level</label>
|
||||
<label className="text-sm font-semibold text-grayScale-600">
|
||||
Level
|
||||
</label>
|
||||
<Input
|
||||
value={level}
|
||||
onChange={(e) => setLevel(e.target.value)}
|
||||
|
|
@ -691,9 +785,14 @@ export function SubCoursesPage() {
|
|||
<div className="mx-4 w-full max-w-lg rounded-2xl bg-white shadow-2xl">
|
||||
<div className="flex items-center justify-between border-b border-grayScale-100 px-6 py-4">
|
||||
<div>
|
||||
<h2 className="text-lg font-semibold text-grayScale-700">Prerequisites</h2>
|
||||
<h2 className="text-lg font-semibold text-grayScale-700">
|
||||
Prerequisites
|
||||
</h2>
|
||||
<p className="mt-0.5 text-sm text-grayScale-400">
|
||||
Manage prerequisites for <span className="font-medium text-grayScale-600">{prereqSubCourse.title}</span>
|
||||
Manage prerequisites for{" "}
|
||||
<span className="font-medium text-grayScale-600">
|
||||
{prereqSubCourse.title}
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
|
|
@ -708,14 +807,18 @@ export function SubCoursesPage() {
|
|||
{/* Add prerequisite */}
|
||||
{availablePrerequisites.length > 0 && (
|
||||
<div className="mb-5">
|
||||
<label className="mb-1.5 block text-sm font-semibold text-grayScale-600">Add Prerequisite</label>
|
||||
<label className="mb-1.5 block text-sm font-semibold text-grayScale-600">
|
||||
Add Prerequisite
|
||||
</label>
|
||||
<div className="flex gap-2">
|
||||
<select
|
||||
value={selectedPrereqId}
|
||||
onChange={(e) => setSelectedPrereqId(Number(e.target.value))}
|
||||
onChange={(e) =>
|
||||
setSelectedPrereqId(Number(e.target.value))
|
||||
}
|
||||
className="flex-1 rounded-lg border border-grayScale-200 bg-white px-3 py-2.5 text-sm transition-colors focus:border-brand-500 focus:outline-none focus:ring-2 focus:ring-brand-500/20"
|
||||
>
|
||||
<option value={0}>Select a sub-course...</option>
|
||||
<option value={0}>Select a course...</option>
|
||||
{availablePrerequisites.map((sc) => (
|
||||
<option key={sc.id} value={sc.id}>
|
||||
{sc.title} {sc.level ? `(${sc.level})` : ""}
|
||||
|
|
@ -727,7 +830,11 @@ export function SubCoursesPage() {
|
|||
onClick={handleAddPrerequisite}
|
||||
disabled={prereqAdding || !selectedPrereqId}
|
||||
>
|
||||
{prereqAdding ? <Loader2 className="h-4 w-4 animate-spin" /> : <Plus className="h-4 w-4" />}
|
||||
{prereqAdding ? (
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
) : (
|
||||
<Plus className="h-4 w-4" />
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -736,13 +843,21 @@ export function SubCoursesPage() {
|
|||
{/* Current prerequisites list */}
|
||||
{prereqLoading ? (
|
||||
<div className="flex items-center justify-center py-8">
|
||||
<img src={spinnerSrc} alt="" className="h-8 w-8 animate-spin" />
|
||||
<img
|
||||
src={spinnerSrc}
|
||||
alt=""
|
||||
className="h-8 w-8 animate-spin"
|
||||
/>
|
||||
</div>
|
||||
) : prerequisites.length === 0 ? (
|
||||
<div className="rounded-xl border border-dashed border-grayScale-200 px-4 py-8 text-center">
|
||||
<Link2 className="mx-auto h-8 w-8 text-grayScale-300" />
|
||||
<p className="mt-2 text-sm font-medium text-grayScale-500">No prerequisites</p>
|
||||
<p className="mt-0.5 text-xs text-grayScale-400">This sub-course is accessible without completing others first</p>
|
||||
<p className="mt-2 text-sm font-medium text-grayScale-500">
|
||||
No prerequisites
|
||||
</p>
|
||||
<p className="mt-0.5 text-xs text-grayScale-400">
|
||||
This course is accessible without completing others first
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
|
|
@ -755,7 +870,9 @@ export function SubCoursesPage() {
|
|||
className="flex items-center justify-between rounded-xl border border-grayScale-100 bg-grayScale-25 px-4 py-3 transition-colors hover:border-grayScale-200"
|
||||
>
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="text-sm font-medium text-grayScale-700 truncate">{prereq.prerequisite_title}</p>
|
||||
<p className="text-sm font-medium text-grayScale-700 truncate">
|
||||
{prereq.prerequisite_title}
|
||||
</p>
|
||||
<div className="mt-0.5 flex items-center gap-2">
|
||||
{prereq.prerequisite_level && (
|
||||
<span className="rounded bg-brand-50 px-1.5 py-0.5 text-[11px] font-medium text-brand-600">
|
||||
|
|
@ -802,7 +919,9 @@ export function SubCoursesPage() {
|
|||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm">
|
||||
<div className="mx-4 w-full max-w-md rounded-2xl bg-white shadow-2xl">
|
||||
<div className="flex items-center justify-between border-b border-grayScale-100 px-6 py-4">
|
||||
<h2 className="text-lg font-semibold text-grayScale-700">Edit Sub-course</h2>
|
||||
<h2 className="text-lg font-semibold text-grayScale-700">
|
||||
Edit Course
|
||||
</h2>
|
||||
<button
|
||||
onClick={() => setShowEditModal(false)}
|
||||
className="grid h-8 w-8 place-items-center rounded-lg text-grayScale-400 transition-colors hover:bg-grayScale-100 hover:text-grayScale-600"
|
||||
|
|
@ -813,25 +932,31 @@ export function SubCoursesPage() {
|
|||
|
||||
<div className="space-y-5 px-6 py-6">
|
||||
<div className="space-y-1.5">
|
||||
<label className="text-sm font-semibold text-grayScale-600">Title</label>
|
||||
<label className="text-sm font-semibold text-grayScale-600">
|
||||
Title
|
||||
</label>
|
||||
<Input
|
||||
value={title}
|
||||
onChange={(e) => setTitle(e.target.value)}
|
||||
placeholder="Enter sub-course title"
|
||||
placeholder="Enter course title"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<label className="text-sm font-semibold text-grayScale-600">Description</label>
|
||||
<label className="text-sm font-semibold text-grayScale-600">
|
||||
Description
|
||||
</label>
|
||||
<textarea
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
placeholder="Enter sub-course description"
|
||||
placeholder="Enter course description"
|
||||
className="w-full rounded-lg border border-grayScale-200 px-3 py-2.5 text-sm transition-colors focus:border-brand-500 focus:outline-none focus:ring-2 focus:ring-brand-500/20"
|
||||
rows={3}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<label className="text-sm font-semibold text-grayScale-600">Level</label>
|
||||
<label className="text-sm font-semibold text-grayScale-600">
|
||||
Level
|
||||
</label>
|
||||
<Input
|
||||
value={level}
|
||||
onChange={(e) => setLevel(e.target.value)}
|
||||
|
|
@ -867,5 +992,5 @@ export function SubCoursesPage() {
|
|||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -498,8 +498,8 @@ export interface GetLearningPathResponse {
|
|||
}
|
||||
|
||||
export interface ReorderItem {
|
||||
sub_course_id: number
|
||||
display_order: number
|
||||
id: number
|
||||
position: number
|
||||
}
|
||||
|
||||
// Ratings
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user