mirror of
https://github.com/rgrgogu/new_starr.git
synced 2026-09-27 00:12:54 +08:00
290 lines
12 KiB
React
290 lines
12 KiB
React
import { useEffect, useState } from "react";
|
|
import { useNavigate, useParams, Link } from "react-router-dom";
|
|
import {
|
|
ArrowLeft, House, Plus, Link2, Unlink, Pencil,
|
|
ChevronUp, ChevronDown, Clock, ClipboardList, PlusCircle,
|
|
LayoutTemplate, BookOpen,
|
|
} from "lucide-react";
|
|
|
|
import { useLibrary } from "@/contexts/AdminLibraryContext";
|
|
import { PageMeta } from "@/contexts/MetadataContext";
|
|
import AppBreadcrumb from "@/components/generic/Breadcrumb/AppBreadcrumb";
|
|
import AttachLessonsDialog from "../../../components/library/AttachLessonsDialog";
|
|
import AttachCoursesDialog from "../../../components/library/AttachCoursesDialog";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Spinner } from "@/components/ui/spinner";
|
|
import { formatDuration } from "@/utils/timestamp.util";
|
|
|
|
export default function ViewLibraryUnit() {
|
|
const navigate = useNavigate();
|
|
const { unitId } = useParams();
|
|
const {
|
|
fetchUnit, unit, loading,
|
|
attachLessonsToUnit, detachLessonFromUnit, detachUnitFromCourse, attachUnitToCourses, reorderUnitLessons,
|
|
} = useLibrary();
|
|
|
|
const [initializing, setInitializing] = useState(true);
|
|
const [attachOpen, setAttachOpen] = useState(false);
|
|
const [attachCourseOpen, setAttachCourseOpen] = useState(false);
|
|
const [descExpanded, setDescExpanded] = useState(false);
|
|
|
|
useEffect(() => {
|
|
(async () => {
|
|
await fetchUnit(unitId);
|
|
setInitializing(false);
|
|
})();
|
|
}, [unitId]);
|
|
|
|
const items = [
|
|
{ label: "Home", icon: <House className="size-4" />, to: "/admin" },
|
|
{ label: "Units", to: "/admin/units" },
|
|
{ label: unit?.title ?? "..." },
|
|
];
|
|
|
|
const lessons = unit?.lessons ?? [];
|
|
const courses = unit?.courses ?? [];
|
|
|
|
const moveLesson = async (index, direction) => {
|
|
const target = index + direction;
|
|
if (target < 0 || target >= lessons.length) return;
|
|
const reordered = [...lessons];
|
|
[reordered[index], reordered[target]] = [reordered[target], reordered[index]];
|
|
await reorderUnitLessons(unitId, reordered.map((l) => l.lesson_id));
|
|
fetchUnit(unitId);
|
|
};
|
|
|
|
const handleDetach = async (lessonId) => {
|
|
await detachLessonFromUnit(unitId, lessonId);
|
|
fetchUnit(unitId);
|
|
};
|
|
|
|
const handleDetachCourse = async (courseId) => {
|
|
await detachUnitFromCourse(unitId, courseId);
|
|
fetchUnit(unitId);
|
|
};
|
|
|
|
const handleAttachCourses = async (courseIds) => {
|
|
await attachUnitToCourses(unitId, courseIds);
|
|
fetchUnit(unitId);
|
|
};
|
|
|
|
const handleAttach = async (lessonIds) => {
|
|
await attachLessonsToUnit(unitId, lessonIds);
|
|
fetchUnit(unitId);
|
|
};
|
|
|
|
if (initializing) {
|
|
return (
|
|
<div className="flex items-center justify-center h-64">
|
|
<Spinner className="h-6 w-6" />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<section className="bg-muted h-full">
|
|
<PageMeta title={unit ? `${unit.title} - Units - STARR` : undefined} />
|
|
<div className="lg:container lg:mx-auto lg:px-0 flex flex-col items-start px-4">
|
|
<div className="flex flex-col gap-2 my-6">
|
|
<AppBreadcrumb items={items} />
|
|
</div>
|
|
|
|
<div className="w-full space-y-6 pb-10">
|
|
|
|
{/* ── Unit header ── */}
|
|
<div className="bg-card rounded-xl border p-6 space-y-4">
|
|
<div className="flex items-start justify-between gap-4">
|
|
<div className="max-w-2xl">
|
|
<h1 className="text-xl font-semibold">{unit?.title}</h1>
|
|
{unit?.description && (
|
|
<div className="mt-0.5">
|
|
<p className={`text-sm text-muted-foreground ${descExpanded ? '' : 'line-clamp-2'}`}>
|
|
{unit.description}
|
|
</p>
|
|
<button
|
|
type="button"
|
|
onClick={() => setDescExpanded((v) => !v)}
|
|
className="text-xs font-medium text-primary hover:underline mt-0.5"
|
|
>
|
|
{descExpanded ? 'See less' : 'See more'}
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="flex gap-2 shrink-0">
|
|
<Button size="sm" variant="outline" onClick={() => setAttachCourseOpen(true)}>
|
|
<Link2 className="h-3.5 w-3.5 mr-1.5" /> Attach to Course
|
|
</Button>
|
|
{courses.map((c) => (
|
|
<Button
|
|
key={c.course_id}
|
|
size="sm"
|
|
variant="destructive"
|
|
onClick={() => handleDetachCourse(c.course_id)}
|
|
disabled={loading}
|
|
title={`Detach from ${c.title} (unit stays in library)`}
|
|
>
|
|
<Unlink className="h-3.5 w-3.5 mr-1.5" /> Detach from Course
|
|
</Button>
|
|
))}
|
|
<Button size="sm" variant="outline" onClick={() => navigate(`/admin/units/${unitId}/edit`)}>
|
|
<Pencil className="h-3.5 w-3.5 mr-1.5" /> Edit
|
|
</Button>
|
|
{unit?.quiz ? (
|
|
<Button size="sm" variant="outline" onClick={() => navigate(`/admin/units/${unitId}/quiz/view`)}>
|
|
<ClipboardList className="h-3.5 w-3.5 mr-1.5" /> View Quiz
|
|
</Button>
|
|
) : (
|
|
<Button size="sm" variant="outline" onClick={() => navigate(`/admin/units/${unitId}/quiz/edit`)}>
|
|
<PlusCircle className="h-3.5 w-3.5 mr-1.5" /> Create Quiz
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Stats row */}
|
|
<div className="grid grid-cols-2 lg:grid-cols-5 gap-3">
|
|
<div className="bg-muted/60 rounded-lg p-3 space-y-1">
|
|
<p className="text-xs text-muted-foreground uppercase tracking-wide font-medium">Lessons</p>
|
|
<p className="font-semibold text-sm">{lessons.length}</p>
|
|
</div>
|
|
<div className="bg-muted/60 rounded-lg p-3 space-y-1">
|
|
<p className="text-xs text-muted-foreground uppercase tracking-wide font-medium">Duration</p>
|
|
<p className="font-semibold text-sm">{formatDuration(unit?.duration_seconds ?? 0)}</p>
|
|
</div>
|
|
<div className="bg-muted/60 rounded-lg p-3 space-y-1">
|
|
<p className="text-xs text-muted-foreground uppercase tracking-wide font-medium">Quiz</p>
|
|
<p className="font-semibold text-sm">{unit?.quiz ? unit.quiz.title || "Unit Quiz" : "None"}</p>
|
|
</div>
|
|
<div className="bg-muted/60 rounded-lg p-3 space-y-1">
|
|
<p className="text-xs text-muted-foreground uppercase tracking-wide font-medium">Used In</p>
|
|
<p className="font-semibold text-sm">
|
|
{courses.length > 0 ? `${courses.length} course${courses.length === 1 ? "" : "s"}` : "Standalone"}
|
|
</p>
|
|
</div>
|
|
<div className="bg-muted/60 rounded-lg p-3 space-y-1">
|
|
<p className="text-xs text-muted-foreground uppercase tracking-wide font-medium">Subscription</p>
|
|
<Badge variant={unit?.subscription ? "outline" : "secondary"} className="capitalize">
|
|
{unit?.subscription ?? "No subscription gate"}
|
|
</Badge>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Attached courses */}
|
|
{courses.length > 0 && (
|
|
<div className="flex flex-wrap items-center gap-2 pt-1">
|
|
<span className="text-xs text-muted-foreground uppercase tracking-wide font-medium">Courses:</span>
|
|
{courses.map((c) => (
|
|
<Link key={c.course_id} to={`/admin/courses/${c.course_id}/view`}>
|
|
<Badge variant="secondary" className="hover:bg-muted cursor-pointer">
|
|
<BookOpen className="h-3 w-3 mr-1" /> {c.title}
|
|
</Badge>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* ── Lessons manager ── */}
|
|
<div className="bg-card rounded-xl border">
|
|
<div className="flex items-center justify-between p-4 border-b">
|
|
<div>
|
|
<h2 className="font-semibold">Lessons</h2>
|
|
<p className="text-xs text-muted-foreground">
|
|
It can be standalone too attach existing ones or create new.
|
|
</p>
|
|
</div>
|
|
<div className="flex gap-2">
|
|
<Button size="sm" variant="outline" onClick={() => setAttachOpen(true)}>
|
|
<Link2 className="h-3.5 w-3.5 mr-1.5" /> Select
|
|
</Button>
|
|
<Button size="sm" onClick={() => navigate(`/admin/lessons/add?unit_id=${unitId}`)}>
|
|
<Plus className="h-3.5 w-3.5 mr-1.5" /> Create
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{lessons.length === 0 ? (
|
|
<p className="text-sm text-muted-foreground text-center py-10">
|
|
No lessons attached yet — attach one from the library or create a new one.
|
|
</p>
|
|
) : (
|
|
<div className="divide-y">
|
|
{lessons.map((l, i) => (
|
|
<div key={l.lesson_id} className="flex items-center gap-3 px-4 py-3">
|
|
<span className="text-xs font-mono text-muted-foreground w-6 text-right shrink-0">
|
|
{i + 1}.
|
|
</span>
|
|
<div className="flex flex-col gap-0.5 shrink-0">
|
|
<button
|
|
type="button"
|
|
className="text-muted-foreground hover:text-foreground disabled:opacity-30"
|
|
disabled={i === 0 || loading}
|
|
onClick={() => moveLesson(i, -1)}
|
|
aria-label="Move up"
|
|
>
|
|
<ChevronUp className="h-3.5 w-3.5" />
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className="text-muted-foreground hover:text-foreground disabled:opacity-30"
|
|
disabled={i === lessons.length - 1 || loading}
|
|
onClick={() => moveLesson(i, 1)}
|
|
aria-label="Move down"
|
|
>
|
|
<ChevronDown className="h-3.5 w-3.5" />
|
|
</button>
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<p className="text-sm font-medium truncate">{l.title}</p>
|
|
{l.description && (
|
|
<p className="text-xs w-64 text-muted-foreground truncate">{l.description}</p>
|
|
)}
|
|
</div>
|
|
<Badge variant="secondary" className="text-xs shrink-0 tabular-nums">
|
|
<Clock className="h-3 w-3 mr-1" /> {formatDuration(l.duration_seconds ?? 0)}
|
|
</Badge>
|
|
<Button
|
|
size="sm" variant="outline"
|
|
onClick={() => navigate(`/admin/lessons/${l.lesson_id}/page`)}
|
|
|
|
>
|
|
<LayoutTemplate /> Page Builder
|
|
</Button>
|
|
<Button
|
|
size="sm"
|
|
variant="destructive"
|
|
onClick={() => handleDetach(l.lesson_id)}
|
|
disabled={loading}
|
|
title="Detach from unit (lesson stays in library)"
|
|
>
|
|
<Unlink className="h-3.5 w-3.5" /> Detach
|
|
</Button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<AttachLessonsDialog
|
|
open={attachOpen}
|
|
onOpenChange={setAttachOpen}
|
|
attachedLessonIds={lessons.map((l) => l.lesson_id)}
|
|
onAttach={handleAttach}
|
|
loading={loading}
|
|
/>
|
|
|
|
<AttachCoursesDialog
|
|
open={attachCourseOpen}
|
|
onOpenChange={setAttachCourseOpen}
|
|
attachedCourseIds={courses.map((c) => c.course_id)}
|
|
onAttach={handleAttachCourses}
|
|
loading={loading}
|
|
/>
|
|
</section>
|
|
);
|
|
}
|