858 lines
32 KiB
TypeScript
858 lines
32 KiB
TypeScript
import { useCallback, useEffect, useMemo, useState } from "react";
|
|
import {
|
|
ArrowLeft,
|
|
Plus,
|
|
Calendar,
|
|
Layers,
|
|
Pencil,
|
|
Trash2,
|
|
X,
|
|
} from "lucide-react";
|
|
import { Link, useNavigate, useParams } from "react-router-dom";
|
|
import { toast } from "sonner";
|
|
import { Button } from "../../components/ui/button";
|
|
import { Card } from "../../components/ui/card";
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from "../../components/ui/dialog";
|
|
import { Input } from "../../components/ui/input";
|
|
import { cn } from "../../lib/utils";
|
|
import spinnerSrc from "../../assets/Circular-indeterminate progress indicator.svg";
|
|
import alertSrc from "../../assets/Alert.svg";
|
|
import {
|
|
deleteTopLevelCourseModule,
|
|
getPracticesByParentCourse,
|
|
getProgramCourses,
|
|
getTopLevelCourseModules,
|
|
publishParentLinkedPractice,
|
|
updateParentLinkedPractice,
|
|
updateTopLevelCourseModule,
|
|
} from "../../api/courses.api";
|
|
import { refreshFileUrl, resolveFileUrl } from "../../api/files.api";
|
|
import type {
|
|
ParentContextPractice,
|
|
ProgramCourseListItem,
|
|
TopLevelCourseModuleItem,
|
|
} from "../../types/course.types";
|
|
import {
|
|
isPracticeDraft,
|
|
isPracticePublished,
|
|
unwrapPracticesList,
|
|
} from "../../lib/parentContextPractice";
|
|
import { AddModuleModal } from "./components/AddModuleModal";
|
|
import { ModuleIconUploadField } from "./components/ModuleIconUploadField";
|
|
import { ModulePracticeCard } from "./components/ModulePracticeCard";
|
|
import { PublishPracticeButton } from "./components/PublishPracticeButton";
|
|
|
|
const MODULE_CARD_GRADIENT = "from-[#8E44AD] to-[#C39BD3]" as const;
|
|
|
|
function isLikelyImageUrl(src: string): boolean {
|
|
const t = src.trim();
|
|
return (
|
|
t.startsWith("http://") ||
|
|
t.startsWith("https://") ||
|
|
t.startsWith("/") ||
|
|
t.startsWith("data:")
|
|
);
|
|
}
|
|
|
|
function isSignedMinioUrl(src: string): boolean {
|
|
const value = src.trim();
|
|
if (!value.startsWith("http://") && !value.startsWith("https://"))
|
|
return false;
|
|
try {
|
|
const url = new URL(value);
|
|
return url.searchParams.has("X-Amz-Signature");
|
|
} catch {
|
|
return false;
|
|
}
|
|
}
|
|
|
|
/** Default purple gradient with optional cover image; gradient stays if URL missing or image errors. */
|
|
function ModuleCardTopMedia({ iconSrc }: { iconSrc: string }) {
|
|
const [coverFailed, setCoverFailed] = useState(false);
|
|
const tryCover =
|
|
Boolean(iconSrc.trim()) && isLikelyImageUrl(iconSrc) && !coverFailed;
|
|
|
|
return (
|
|
<div className="relative h-36 w-full overflow-hidden">
|
|
<div
|
|
className={cn(
|
|
"absolute inset-0 bg-gradient-to-b opacity-90 transition-transform duration-700",
|
|
MODULE_CARD_GRADIENT,
|
|
)}
|
|
/>
|
|
{tryCover ? (
|
|
<img
|
|
src={iconSrc.trim()}
|
|
alt=""
|
|
className="absolute inset-0 h-full w-full object-cover"
|
|
onError={() => setCoverFailed(true)}
|
|
/>
|
|
) : null}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/** Circular module icon: image when load succeeds, otherwise default Layers icon. */
|
|
function ModuleIconCircle({
|
|
iconSrc,
|
|
index,
|
|
}: {
|
|
iconSrc: string;
|
|
index: number;
|
|
}) {
|
|
const [imgFailed, setImgFailed] = useState(false);
|
|
const showImg =
|
|
Boolean(iconSrc.trim()) && isLikelyImageUrl(iconSrc) && !imgFailed;
|
|
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"flex h-12 w-12 flex-shrink-0 items-center justify-center overflow-hidden rounded-full border border-purple-100/50 p-2",
|
|
index % 2 === 1 ? "bg-[#F8FAFC]" : "bg-[#f3e8ff]",
|
|
)}
|
|
>
|
|
{showImg ? (
|
|
<img
|
|
src={iconSrc.trim()}
|
|
alt=""
|
|
className="h-full w-full object-contain"
|
|
onError={() => setImgFailed(true)}
|
|
/>
|
|
) : (
|
|
<Layers
|
|
className={cn(
|
|
"h-6 w-6",
|
|
index % 2 === 1 ? "text-[#64748B]" : "text-brand-500",
|
|
)}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function CourseDetailPage() {
|
|
const navigate = useNavigate();
|
|
const { level: programIdParam, courseId: courseIdParam } = useParams<{
|
|
level: string;
|
|
courseId: string;
|
|
}>();
|
|
const programId = Number(programIdParam);
|
|
const courseIdNum = Number(courseIdParam);
|
|
|
|
const [course, setCourse] = useState<ProgramCourseListItem | null>(null);
|
|
const [modules, setModules] = useState<TopLevelCourseModuleItem[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [isAddModuleOpen, setIsAddModuleOpen] = useState(false);
|
|
|
|
const [editingModule, setEditingModule] =
|
|
useState<TopLevelCourseModuleItem | null>(null);
|
|
const [editModuleName, setEditModuleName] = useState("");
|
|
const [editModuleSortOrder, setEditModuleSortOrder] = useState("");
|
|
const [editModuleIcon, setEditModuleIcon] = useState("");
|
|
const [editModuleIconUploadBusy, setEditModuleIconUploadBusy] =
|
|
useState(false);
|
|
const [savingModuleEdit, setSavingModuleEdit] = useState(false);
|
|
|
|
const [deletingModule, setDeletingModule] =
|
|
useState<TopLevelCourseModuleItem | null>(null);
|
|
const [deletingModuleInFlight, setDeletingModuleInFlight] = useState(false);
|
|
|
|
const [activeTab, setActiveTab] = useState<"modules" | "practice">("modules");
|
|
const [practiceFilter, setPracticeFilter] = useState("All");
|
|
const [practices, setPractices] = useState<ParentContextPractice[]>([]);
|
|
const [practicesLoading, setPracticesLoading] = useState(false);
|
|
const [practicesLoadError, setPracticesLoadError] = useState<string | null>(
|
|
null,
|
|
);
|
|
const [publishStatusPracticeId, setPublishStatusPracticeId] = useState<
|
|
number | null
|
|
>(null);
|
|
|
|
const openEditModule = (module: TopLevelCourseModuleItem) => {
|
|
setEditingModule(module);
|
|
setEditModuleName(module.name ?? "");
|
|
setEditModuleSortOrder(String(module.sort_order ?? 0));
|
|
setEditModuleIcon(module.icon?.trim() ?? "");
|
|
setEditModuleIconUploadBusy(false);
|
|
};
|
|
|
|
const closeEditModule = () => {
|
|
if (savingModuleEdit || editModuleIconUploadBusy) return;
|
|
setEditingModule(null);
|
|
setEditModuleIconUploadBusy(false);
|
|
};
|
|
|
|
const loadPage = useCallback(async () => {
|
|
if (!Number.isFinite(programId) || programId < 1) {
|
|
setError("Invalid program");
|
|
setCourse(null);
|
|
setModules([]);
|
|
setLoading(false);
|
|
return;
|
|
}
|
|
if (!Number.isFinite(courseIdNum) || courseIdNum < 1) {
|
|
setError("Invalid course");
|
|
setCourse(null);
|
|
setModules([]);
|
|
setLoading(false);
|
|
return;
|
|
}
|
|
setLoading(true);
|
|
setError(null);
|
|
try {
|
|
const [courseOutcome, modulesOutcome] = await Promise.allSettled([
|
|
getProgramCourses(programId, { limit: 200, offset: 0 }),
|
|
getTopLevelCourseModules(courseIdNum, { limit: 100, offset: 0 }),
|
|
]);
|
|
|
|
if (courseOutcome.status === "fulfilled") {
|
|
const raw = courseOutcome.value.data?.data?.courses;
|
|
const list = Array.isArray(raw) ? raw : [];
|
|
const found = list.find((c) => c.id === courseIdNum) ?? null;
|
|
setCourse(found);
|
|
if (!found) {
|
|
setError("Course not found in this program");
|
|
}
|
|
} else {
|
|
console.error(courseOutcome.reason);
|
|
setCourse(null);
|
|
setError("Failed to load course");
|
|
}
|
|
|
|
if (modulesOutcome.status === "fulfilled") {
|
|
const raw = modulesOutcome.value.data?.data?.modules;
|
|
const list = Array.isArray(raw) ? raw : [];
|
|
const refreshed = await Promise.all(
|
|
list.map(async (module) => {
|
|
const icon = module.icon?.trim() ?? "";
|
|
if (!icon) return module;
|
|
try {
|
|
if (isSignedMinioUrl(icon)) {
|
|
const refreshedRes = await refreshFileUrl(icon);
|
|
const refreshedUrl = refreshedRes.data?.data?.url?.trim();
|
|
if (refreshedUrl) {
|
|
return { ...module, icon: refreshedUrl };
|
|
}
|
|
return module;
|
|
}
|
|
if (isLikelyImageUrl(icon)) return module;
|
|
const resolved = await resolveFileUrl(icon);
|
|
const freshUrl = resolved.data?.data?.url?.trim();
|
|
if (!freshUrl) return module;
|
|
return { ...module, icon: freshUrl };
|
|
} catch {
|
|
return module;
|
|
}
|
|
}),
|
|
);
|
|
const sorted = [...refreshed].sort(
|
|
(a, b) => (a.sort_order ?? 0) - (b.sort_order ?? 0),
|
|
);
|
|
setModules(sorted);
|
|
} else {
|
|
console.error(modulesOutcome.reason);
|
|
setModules([]);
|
|
toast.error("Could not load modules", {
|
|
description: "Check your connection or try again.",
|
|
});
|
|
}
|
|
} catch (e) {
|
|
console.error(e);
|
|
setError("Failed to load course");
|
|
setCourse(null);
|
|
setModules([]);
|
|
toast.error("Could not load course", {
|
|
description: "Check your connection or try again.",
|
|
});
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}, [programId, courseIdNum]);
|
|
|
|
useEffect(() => {
|
|
void loadPage();
|
|
}, [loadPage]);
|
|
|
|
const loadCoursePractices = useCallback(async () => {
|
|
if (!Number.isFinite(courseIdNum) || courseIdNum < 1) {
|
|
setPractices([]);
|
|
setPracticesLoadError(null);
|
|
setPracticesLoading(false);
|
|
return;
|
|
}
|
|
setPracticesLoading(true);
|
|
setPracticesLoadError(null);
|
|
try {
|
|
const res = await getPracticesByParentCourse(courseIdNum, {
|
|
limit: 100,
|
|
offset: 0,
|
|
});
|
|
setPractices(unwrapPracticesList(res));
|
|
} catch {
|
|
setPractices([]);
|
|
setPracticesLoadError("Failed to load practices. Please try again.");
|
|
} finally {
|
|
setPracticesLoading(false);
|
|
}
|
|
}, [courseIdNum]);
|
|
|
|
useEffect(() => {
|
|
if (activeTab !== "practice") return;
|
|
void loadCoursePractices();
|
|
}, [activeTab, loadCoursePractices]);
|
|
|
|
const filteredPractices = useMemo(() => {
|
|
if (practiceFilter === "Published") {
|
|
return practices.filter(isPracticePublished);
|
|
}
|
|
if (practiceFilter === "Draft") {
|
|
return practices.filter(isPracticeDraft);
|
|
}
|
|
if (practiceFilter === "Archived") {
|
|
return [];
|
|
}
|
|
return practices;
|
|
}, [practices, practiceFilter]);
|
|
|
|
const handlePublishPractice = async (practiceId: number) => {
|
|
setPublishStatusPracticeId(practiceId);
|
|
try {
|
|
await publishParentLinkedPractice(practiceId);
|
|
setPractices((prev) =>
|
|
prev.map((p) =>
|
|
p.id === practiceId ? { ...p, publish_status: "PUBLISHED" } : p,
|
|
),
|
|
);
|
|
toast.success("Practice published");
|
|
} catch (e: unknown) {
|
|
console.error(e);
|
|
const msg =
|
|
(e as { response?: { data?: { message?: string } } })?.response?.data
|
|
?.message ?? "Failed to publish practice";
|
|
toast.error(msg);
|
|
} finally {
|
|
setPublishStatusPracticeId(null);
|
|
}
|
|
};
|
|
|
|
const handleSavePracticeAsDraft = async (practiceId: number) => {
|
|
setPublishStatusPracticeId(practiceId);
|
|
try {
|
|
await updateParentLinkedPractice(practiceId, {
|
|
publish_status: "DRAFT",
|
|
});
|
|
setPractices((prev) =>
|
|
prev.map((p) =>
|
|
p.id === practiceId ? { ...p, publish_status: "DRAFT" } : p,
|
|
),
|
|
);
|
|
toast.success("Practice saved as draft");
|
|
} catch (e: unknown) {
|
|
console.error(e);
|
|
const msg =
|
|
(e as { response?: { data?: { message?: string } } })?.response?.data
|
|
?.message ?? "Failed to save practice as draft";
|
|
toast.error(msg);
|
|
} finally {
|
|
setPublishStatusPracticeId(null);
|
|
}
|
|
};
|
|
|
|
const handleSaveModuleEdit = async () => {
|
|
if (!editingModule) return;
|
|
const name = editModuleName.trim();
|
|
if (!name) {
|
|
toast.error("Module name is required");
|
|
return;
|
|
}
|
|
const sortOrderRaw = editModuleSortOrder.trim();
|
|
if (!sortOrderRaw) {
|
|
toast.error("Sort order is required");
|
|
return;
|
|
}
|
|
const sort_order = Number(sortOrderRaw);
|
|
if (!Number.isInteger(sort_order) || sort_order < 0) {
|
|
toast.error("Sort order must be a whole number of 0 or greater");
|
|
return;
|
|
}
|
|
setSavingModuleEdit(true);
|
|
try {
|
|
await updateTopLevelCourseModule(editingModule.id, {
|
|
name,
|
|
description: editingModule.description?.trim() ?? "",
|
|
icon: editModuleIcon.trim(),
|
|
sort_order,
|
|
});
|
|
toast.success("Module updated");
|
|
setEditModuleIconUploadBusy(false);
|
|
setEditingModule(null);
|
|
await loadPage();
|
|
} catch (e: unknown) {
|
|
console.error(e);
|
|
const msg =
|
|
(e as { response?: { data?: { message?: string } } })?.response?.data
|
|
?.message ?? "Failed to update module";
|
|
toast.error(msg);
|
|
} finally {
|
|
setSavingModuleEdit(false);
|
|
}
|
|
};
|
|
|
|
const handleConfirmDeleteModule = async () => {
|
|
if (!deletingModule) return;
|
|
setDeletingModuleInFlight(true);
|
|
try {
|
|
await deleteTopLevelCourseModule(deletingModule.id);
|
|
toast.success("Module deleted");
|
|
setDeletingModule(null);
|
|
await loadPage();
|
|
} catch (e: unknown) {
|
|
console.error(e);
|
|
const msg =
|
|
(e as { response?: { data?: { message?: string } } })?.response?.data
|
|
?.message ?? "Failed to delete module";
|
|
toast.error(msg);
|
|
} finally {
|
|
setDeletingModuleInFlight(false);
|
|
}
|
|
};
|
|
|
|
const displayTitle = course?.name?.trim() || courseIdParam || "Course";
|
|
const displayDescription =
|
|
course?.description?.trim() ||
|
|
(!loading && !course
|
|
? "This course could not be loaded."
|
|
: !course?.description?.trim() && course
|
|
? "—"
|
|
: "");
|
|
|
|
return (
|
|
<div className="space-y-10 pb-20 pt-10">
|
|
{/* Header Navigation */}
|
|
<div className="flex items-center gap-2">
|
|
<Link
|
|
to={`/new-content/learn-english/${programIdParam}/courses`}
|
|
className="flex items-center gap-2 text-sm font-medium text-grayScale-600 transition-colors hover:text-brand-500"
|
|
>
|
|
<ArrowLeft className="h-5 w-5" />
|
|
Back to Courses
|
|
</Link>
|
|
</div>
|
|
|
|
{loading ? (
|
|
<div className="flex flex-col items-center justify-center py-16">
|
|
<img src={spinnerSrc} alt="" className="h-10 w-10 animate-spin" />
|
|
</div>
|
|
) : error && !course ? (
|
|
<div className="flex flex-col items-center justify-center rounded-xl border border-red-100 bg-red-50/60 px-6 py-14 text-center">
|
|
<img src={alertSrc} alt="" className="h-10 w-10" />
|
|
<p className="mt-3 text-sm font-medium text-red-700">{error}</p>
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
className="mt-4"
|
|
onClick={() => void loadPage()}
|
|
>
|
|
Try again
|
|
</Button>
|
|
</div>
|
|
) : (
|
|
<>
|
|
<div className="flex flex-col justify-between gap-6 md:flex-row md:items-end">
|
|
<div className="min-w-0 flex-1">
|
|
<h1 className="text-2xl font-medium tracking-tight text-grayScale-900">
|
|
{displayTitle}
|
|
</h1>
|
|
<p className="mt-1 max-w-2xl text-sm font-medium text-grayScale-500">
|
|
{displayDescription}
|
|
</p>
|
|
</div>
|
|
<div className="flex items-center gap-4">
|
|
<Button
|
|
variant="outline"
|
|
className="rounded-[6px] border-brand-500 text-brand-500 "
|
|
onClick={() =>
|
|
navigate(
|
|
`/new-content/learn-english/${programIdParam}/courses/add-practice?backTo=modules&courseId=${courseIdParam}`,
|
|
)
|
|
}
|
|
>
|
|
<Calendar className="h-4 w-4" />
|
|
Add Practice
|
|
</Button>
|
|
<Button
|
|
className="rounded-[6px] bg-brand-500 font-semibold hover:bg-brand-600"
|
|
onClick={() => setIsAddModuleOpen(true)}
|
|
>
|
|
<Plus className="h-4 w-4" />
|
|
Add Module
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
<div className="border-b border-grayScale-200">
|
|
<div className="flex gap-10">
|
|
<button
|
|
type="button"
|
|
onClick={() => setActiveTab("modules")}
|
|
className={cn(
|
|
"pb-4 text-[16px] font-medium transition-all relative",
|
|
activeTab === "modules"
|
|
? "text-brand-500 after:absolute after:bottom-0 after:left-0 after:right-0 after:h-[3px] after:bg-brand-500 after:rounded-t-full"
|
|
: "text-grayScale-400 hover:text-grayScale-600",
|
|
)}
|
|
>
|
|
Modules
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => setActiveTab("practice")}
|
|
className={cn(
|
|
"pb-4 text-[16px] font-medium transition-all relative",
|
|
activeTab === "practice"
|
|
? "text-brand-500 after:absolute after:bottom-0 after:left-0 after:right-0 after:h-[3px] after:bg-brand-500 after:rounded-t-full"
|
|
: "text-grayScale-400 hover:text-grayScale-600",
|
|
)}
|
|
>
|
|
Practice
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<AddModuleModal
|
|
isOpen={isAddModuleOpen}
|
|
onClose={() => setIsAddModuleOpen(false)}
|
|
courseId={courseIdNum}
|
|
onCreated={() => loadPage()}
|
|
/>
|
|
|
|
<Dialog
|
|
open={editingModule !== null}
|
|
onOpenChange={(open) => {
|
|
if (!open && savingModuleEdit) return;
|
|
if (!open && editModuleIconUploadBusy) return;
|
|
if (!open) closeEditModule();
|
|
}}
|
|
>
|
|
<DialogContent className="flex max-h-[min(90vh,calc(100dvh-2rem))] max-w-lg flex-col gap-0 overflow-hidden p-0">
|
|
<DialogHeader className="shrink-0 space-y-1.5 border-b border-grayScale-100 px-6 pb-4 pt-6 pr-12">
|
|
<DialogTitle>Edit module</DialogTitle>
|
|
<DialogDescription>
|
|
Update name, sort order, and icon (upload or URL).
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
<div className="min-h-0 flex-1 overflow-y-auto overscroll-contain px-6 py-4">
|
|
<div className="grid gap-4">
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-medium text-grayScale-700">
|
|
Name
|
|
</label>
|
|
<Input
|
|
value={editModuleName}
|
|
onChange={(e) => setEditModuleName(e.target.value)}
|
|
className="rounded-xl"
|
|
placeholder="e.g. Grammar basics"
|
|
disabled={savingModuleEdit}
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<label
|
|
htmlFor="edit-module-sort-order"
|
|
className="text-sm font-medium text-grayScale-700"
|
|
>
|
|
Sort Order
|
|
</label>
|
|
<Input
|
|
id="edit-module-sort-order"
|
|
type="number"
|
|
min={0}
|
|
step={1}
|
|
inputMode="numeric"
|
|
value={editModuleSortOrder}
|
|
onChange={(e) => setEditModuleSortOrder(e.target.value)}
|
|
className="rounded-xl"
|
|
placeholder="e.g. 5"
|
|
disabled={savingModuleEdit || editModuleIconUploadBusy}
|
|
/>
|
|
<p className="text-xs text-grayScale-500">
|
|
Lower numbers appear first when modules are listed.
|
|
</p>
|
|
</div>
|
|
<ModuleIconUploadField
|
|
value={editModuleIcon}
|
|
onChange={setEditModuleIcon}
|
|
disabled={savingModuleEdit}
|
|
onUploadBusyChange={setEditModuleIconUploadBusy}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<DialogFooter className="shrink-0 gap-2 border-t border-grayScale-100 bg-white px-6 py-4 sm:gap-0">
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
onClick={closeEditModule}
|
|
disabled={savingModuleEdit || editModuleIconUploadBusy}
|
|
>
|
|
Cancel
|
|
</Button>
|
|
<Button
|
|
type="button"
|
|
className="bg-brand-500 hover:bg-brand-600"
|
|
disabled={savingModuleEdit || editModuleIconUploadBusy}
|
|
onClick={() => void handleSaveModuleEdit()}
|
|
>
|
|
{savingModuleEdit ? "Saving…" : "Save changes"}
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
|
|
{activeTab === "modules" ? (
|
|
modules.length === 0 ? (
|
|
<div className="rounded-xl border border-dashed border-grayScale-200 bg-grayScale-50/50 px-6 py-14 text-center">
|
|
<p className="text-sm font-medium text-grayScale-600">
|
|
No modules in this course yet
|
|
</p>
|
|
<p className="mt-1 text-sm text-grayScale-400">
|
|
Add a module to organize lessons and practices for this course.
|
|
</p>
|
|
</div>
|
|
) : (
|
|
<div
|
|
className="grid justify-start gap-10"
|
|
style={{
|
|
gridTemplateColumns: "repeat(auto-fill, minmax(330px, 330px))",
|
|
}}
|
|
>
|
|
{modules.map((module, index) => {
|
|
const iconSrc = module.icon?.trim() ?? "";
|
|
return (
|
|
<Card
|
|
key={module.id}
|
|
className="group relative flex h-full min-h-0 w-full flex-col overflow-hidden rounded-[16px] border border-grayScale-50 bg-white shadow-sm transition-all duration-300 hover:shadow-lg"
|
|
>
|
|
<div className="absolute right-2 top-2 z-10 flex translate-y-1 gap-1 opacity-0 pointer-events-none transition-all duration-300 ease-out group-hover:translate-y-0 group-hover:opacity-100 group-hover:pointer-events-auto">
|
|
<Button
|
|
type="button"
|
|
variant="secondary"
|
|
size="icon"
|
|
className="h-8 w-8 rounded-md bg-white/95 text-grayScale-600 shadow-sm transition-colors hover:bg-white"
|
|
aria-label={`Edit ${module.name}`}
|
|
onClick={() => openEditModule(module)}
|
|
>
|
|
<Pencil className="h-3.5 w-3.5" />
|
|
</Button>
|
|
<Button
|
|
type="button"
|
|
variant="secondary"
|
|
size="icon"
|
|
className="h-8 w-8 rounded-md bg-white/95 text-red-600 shadow-sm transition-colors hover:bg-red-50"
|
|
aria-label={`Delete ${module.name}`}
|
|
onClick={() => setDeletingModule(module)}
|
|
>
|
|
<Trash2 className="h-3.5 w-3.5" />
|
|
</Button>
|
|
</div>
|
|
<ModuleCardTopMedia iconSrc={iconSrc} />
|
|
|
|
<div className="flex min-h-0 flex-1 flex-col gap-6 p-2 pb-4 pt-4">
|
|
<div className="flex min-h-0 flex-1 gap-4">
|
|
<ModuleIconCircle iconSrc={iconSrc} index={index} />
|
|
|
|
<div className="min-w-0 flex-1 space-y-1">
|
|
<h3 className="text-lg font-bold tracking-tight text-[#0F172A]">
|
|
{module.name}
|
|
</h3>
|
|
<p className="text-[12px] font-medium leading-snug text-grayScale-400 line-clamp-3">
|
|
{module.description?.trim()
|
|
? module.description
|
|
: "—"}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-auto flex shrink-0 items-center gap-3">
|
|
<Button
|
|
variant="outline"
|
|
className="h-10 flex-1 rounded-[6px] border-[#9E2891] text-sm text-[#9E2891] transition-all"
|
|
onClick={() =>
|
|
navigate(
|
|
`/new-content/learn-english/${programIdParam}/courses/${courseIdParam}/modules/${module.id}`,
|
|
{
|
|
state: {
|
|
moduleName: module.name,
|
|
moduleDescription:
|
|
module.description?.trim() ?? "",
|
|
},
|
|
},
|
|
)
|
|
}
|
|
>
|
|
View Detail
|
|
</Button>
|
|
<PublishPracticeButton
|
|
parentKind="MODULE"
|
|
parentId={module.id}
|
|
className="h-10 flex-1 rounded-[6px] bg-brand-500 text-sm text-white shadow-md shadow-brand-500/10 hover:bg-brand-600 disabled:opacity-60"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
);
|
|
})}
|
|
</div>
|
|
)
|
|
) : (
|
|
<div className="space-y-8">
|
|
<div className="flex items-center gap-10 overflow-x-auto whitespace-nowrap rounded-2xl border border-grayScale-100 bg-white px-8 py-4 shadow-sm">
|
|
<div className="mr-2 flex items-center gap-2 text-[12px] font-bold uppercase tracking-widest text-grayScale-300">
|
|
STATUS:
|
|
</div>
|
|
<div className="flex items-center gap-3">
|
|
{["All", "Published", "Draft", "Archived"].map((label) => (
|
|
<button
|
|
key={label}
|
|
type="button"
|
|
onClick={() => setPracticeFilter(label)}
|
|
className={cn(
|
|
"h-9 rounded-full px-5 text-[13px] font-bold transition-all",
|
|
practiceFilter === label
|
|
? "bg-brand-500 text-white shadow-md shadow-brand-500/20"
|
|
: "bg-[#F1F5F9] text-grayScale-500 hover:bg-grayScale-100",
|
|
)}
|
|
>
|
|
{label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{practicesLoading ? (
|
|
<div className="flex flex-col items-center justify-center py-24 text-[15px] font-medium text-grayScale-500">
|
|
Loading practices…
|
|
</div>
|
|
) : practicesLoadError ? (
|
|
<div className="mx-auto max-w-lg rounded-2xl border border-amber-100 bg-amber-50/80 px-6 py-8 text-center text-sm text-amber-900">
|
|
{practicesLoadError}
|
|
</div>
|
|
) : filteredPractices.length > 0 ? (
|
|
<div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-4">
|
|
{filteredPractices.map((practice) => (
|
|
<ModulePracticeCard
|
|
key={practice.id}
|
|
practice={practice}
|
|
statusUpdating={publishStatusPracticeId === practice.id}
|
|
onEdit={() =>
|
|
navigate(`/content/practices?type=course&id=${courseIdNum}`)
|
|
}
|
|
onPublish={() => void handlePublishPractice(practice.id)}
|
|
onSaveAsDraft={() =>
|
|
void handleSavePracticeAsDraft(practice.id)
|
|
}
|
|
/>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<div className="mx-auto flex max-w-4xl flex-col items-center justify-center rounded-[40px] border-2 border-dashed border-[#F1F5F9] bg-white px-4 py-32 shadow-sm">
|
|
<div className="mb-6 flex h-20 w-20 items-center justify-center rounded-full bg-[#FAF5FF]">
|
|
<div className="flex h-14 w-14 items-center justify-center rounded-full bg-[#F5EBFF]">
|
|
<Calendar className="h-7 w-7 text-brand-500" />
|
|
</div>
|
|
</div>
|
|
<h2 className="mb-3 text-2xl font-extrabold text-grayScale-900">
|
|
{practices.length === 0
|
|
? "No practices for this course yet"
|
|
: "No practices match this filter"}
|
|
</h2>
|
|
<p className="mb-10 max-w-sm text-center text-[15px] font-medium leading-relaxed text-grayScale-400">
|
|
{practices.length === 0
|
|
? "Add a course-level practice to give learners exercises attached to this course."
|
|
: "Try another status filter or add a new practice."}
|
|
</p>
|
|
{practices.length === 0 ? (
|
|
<Button
|
|
variant="outline"
|
|
className="flex h-12 items-center gap-2 rounded-xl border-brand-500 px-8 font-bold text-brand-500 transition-all hover:bg-brand-50"
|
|
onClick={() =>
|
|
navigate(
|
|
`/new-content/learn-english/${programIdParam}/courses/add-practice?backTo=modules&courseId=${courseIdParam}`,
|
|
)
|
|
}
|
|
>
|
|
<Calendar className="h-5 w-5" />
|
|
Add Practice
|
|
</Button>
|
|
) : null}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{deletingModule && (
|
|
<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 module
|
|
</h2>
|
|
<button
|
|
type="button"
|
|
onClick={() =>
|
|
!deletingModuleInFlight && setDeletingModule(null)
|
|
}
|
|
disabled={deletingModuleInFlight}
|
|
className="grid h-8 w-8 place-items-center rounded-lg text-grayScale-400 transition-colors hover:bg-grayScale-100 hover:text-grayScale-600 disabled:pointer-events-none disabled:opacity-50"
|
|
>
|
|
<X className="h-5 w-5" />
|
|
</button>
|
|
</div>
|
|
|
|
<div className="px-6 py-6">
|
|
<div className="mx-auto mb-4 grid h-12 w-12 place-items-center rounded-full bg-red-50">
|
|
<Trash2 className="h-5 w-5 text-red-500" />
|
|
</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">
|
|
{deletingModule.name}
|
|
</span>
|
|
? This cannot be undone. Related content may be affected
|
|
depending on your backend.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="flex flex-col-reverse gap-3 border-t border-grayScale-100 px-6 py-4 sm:flex-row sm:justify-end">
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
onClick={() => setDeletingModule(null)}
|
|
disabled={deletingModuleInFlight}
|
|
className="w-full sm:w-auto"
|
|
>
|
|
Cancel
|
|
</Button>
|
|
<Button
|
|
type="button"
|
|
className="w-full bg-red-500 shadow-sm transition-all hover:bg-red-600 hover:shadow-md sm:w-auto"
|
|
disabled={deletingModuleInFlight}
|
|
onClick={() => void handleConfirmDeleteModule()}
|
|
>
|
|
{deletingModuleInFlight ? "Deleting…" : "Delete"}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|