Module Update
This commit is contained in:
SpecialX
66
src/app/(dashboard)/teacher/textbooks/[id]/loading.tsx
Normal file
66
src/app/(dashboard)/teacher/textbooks/[id]/loading.tsx
Normal file
@@ -0,0 +1,66 @@
|
||||
import { Skeleton } from "@/shared/components/ui/skeleton";
|
||||
import { Separator } from "@/shared/components/ui/separator";
|
||||
|
||||
export default function Loading() {
|
||||
return (
|
||||
<div className="space-y-6 max-w-5xl mx-auto">
|
||||
{/* Header Skeleton */}
|
||||
<div className="flex items-center gap-4">
|
||||
<Skeleton className="h-10 w-10 rounded-md" /> {/* Back Button */}
|
||||
<div className="flex-1 space-y-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<Skeleton className="h-5 w-16" />
|
||||
<Skeleton className="h-4 w-24" />
|
||||
</div>
|
||||
<Skeleton className="h-8 w-64" />
|
||||
</div>
|
||||
<Skeleton className="h-10 w-32" /> {/* Edit Button */}
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
{/* Main Content Skeleton */}
|
||||
<div className="md:col-span-2 space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<Skeleton className="h-6 w-40" />
|
||||
<Skeleton className="h-8 w-24" />
|
||||
</div>
|
||||
|
||||
<div className="rounded-lg border bg-card p-6 space-y-4">
|
||||
{Array.from({ length: 5 }).map((_, i) => (
|
||||
<div key={i} className="flex items-center gap-4">
|
||||
<Skeleton className="h-6 w-6 rounded-md" />
|
||||
<Skeleton className="h-6 w-full rounded-md" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Sidebar Skeleton */}
|
||||
<div className="space-y-6">
|
||||
<div className="rounded-lg border bg-card p-6 space-y-4">
|
||||
<Skeleton className="h-6 w-32 mb-4" />
|
||||
<div className="space-y-2">
|
||||
<Skeleton className="h-4 w-16" />
|
||||
<Skeleton className="h-5 w-32" />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Skeleton className="h-4 w-20" />
|
||||
<Skeleton className="h-20 w-full" />
|
||||
</div>
|
||||
<Separator />
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Skeleton className="h-3 w-12" />
|
||||
<Skeleton className="h-4 w-24" />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Skeleton className="h-3 w-12" />
|
||||
<Skeleton className="h-4 w-24" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
80
src/app/(dashboard)/teacher/textbooks/[id]/page.tsx
Normal file
80
src/app/(dashboard)/teacher/textbooks/[id]/page.tsx
Normal file
@@ -0,0 +1,80 @@
|
||||
import { notFound } from "next/navigation";
|
||||
import { ArrowLeft, Edit } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { Button } from "@/shared/components/ui/button";
|
||||
import { Badge } from "@/shared/components/ui/badge";
|
||||
import { getTextbookById, getChaptersByTextbookId, getKnowledgePointsByChapterId } from "@/modules/textbooks/data-access";
|
||||
import { TextbookContentLayout } from "@/modules/textbooks/components/textbook-content-layout";
|
||||
import { TextbookSettingsDialog } from "@/modules/textbooks/components/textbook-settings-dialog";
|
||||
|
||||
export default async function TextbookDetailPage({
|
||||
params,
|
||||
}: {
|
||||
params: Promise<{ id: string }>;
|
||||
}) {
|
||||
const { id } = await params;
|
||||
|
||||
const [textbook, chapters] = await Promise.all([
|
||||
getTextbookById(id),
|
||||
getChaptersByTextbookId(id),
|
||||
]);
|
||||
|
||||
if (!textbook) {
|
||||
notFound();
|
||||
}
|
||||
|
||||
// Fetch all KPs for these chapters. In a real app, this might be optimized to fetch only needed or use a different query strategy.
|
||||
// For now, we simulate fetching KPs for all chapters to pass down, or we could fetch on demand.
|
||||
// Given the layout loads everything client-side for interactivity, let's fetch all KPs associated with any chapter in this textbook.
|
||||
// We'll need to extend the data access for this specific query pattern or loop.
|
||||
// For simplicity in this mock, let's assume getKnowledgePointsByChapterId can handle fetching all KPs for a textbook if we had such a function,
|
||||
// or we iterate. Let's create a helper to get all KPs for the textbook's chapters.
|
||||
|
||||
// Actually, let's update data-access to support getting KPs by Textbook ID directly or just fetch all for mock.
|
||||
// Since we don't have getKnowledgePointsByTextbookId, we will map over chapters.
|
||||
|
||||
const allKnowledgePoints = (await Promise.all(
|
||||
chapters.map(c => getKnowledgePointsByChapterId(c.id))
|
||||
)).flat();
|
||||
|
||||
// Also need to get KPs for children chapters if any
|
||||
const childrenKPs = (await Promise.all(
|
||||
chapters.flatMap(c => c.children || []).map(child => getKnowledgePointsByChapterId(child.id))
|
||||
)).flat();
|
||||
|
||||
const knowledgePoints = [...allKnowledgePoints, ...childrenKPs];
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-[calc(100vh-4rem)] overflow-hidden">
|
||||
{/* Header / Nav (Fixed height) */}
|
||||
<div className="flex items-center gap-4 py-4 border-b shrink-0 bg-background z-10">
|
||||
<Button variant="ghost" size="icon" asChild>
|
||||
<Link href="/teacher/textbooks">
|
||||
<ArrowLeft className="h-4 w-4" />
|
||||
</Link>
|
||||
</Button>
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<Badge variant="outline">{textbook.subject}</Badge>
|
||||
<span className="text-xs text-muted-foreground uppercase tracking-wider font-medium">
|
||||
{textbook.grade}
|
||||
</span>
|
||||
</div>
|
||||
<h1 className="text-xl font-bold tracking-tight line-clamp-1">{textbook.title}</h1>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<TextbookSettingsDialog textbook={textbook} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Main Content Layout (Flex grow) */}
|
||||
<div className="flex-1 overflow-hidden pt-6">
|
||||
<TextbookContentLayout
|
||||
chapters={chapters}
|
||||
knowledgePoints={knowledgePoints}
|
||||
textbookId={id}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
48
src/app/(dashboard)/teacher/textbooks/loading.tsx
Normal file
48
src/app/(dashboard)/teacher/textbooks/loading.tsx
Normal file
@@ -0,0 +1,48 @@
|
||||
import { Skeleton } from "@/shared/components/ui/skeleton";
|
||||
import { Card, CardContent, CardFooter, CardHeader } from "@/shared/components/ui/card";
|
||||
|
||||
export default function Loading() {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Header Skeleton */}
|
||||
<div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
|
||||
<div className="space-y-2">
|
||||
<Skeleton className="h-8 w-48" />
|
||||
<Skeleton className="h-4 w-96" />
|
||||
</div>
|
||||
<Skeleton className="h-10 w-32" />
|
||||
</div>
|
||||
|
||||
{/* Toolbar Skeleton */}
|
||||
<div className="flex flex-col gap-4 md:flex-row md:items-center justify-between bg-card p-4 rounded-lg border shadow-sm">
|
||||
<Skeleton className="h-10 w-full md:w-96" />
|
||||
<div className="flex gap-2 w-full md:w-auto">
|
||||
<Skeleton className="h-10 w-[140px]" />
|
||||
<Skeleton className="h-10 w-[140px]" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Grid Content Skeleton */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
|
||||
{Array.from({ length: 8 }).map((_, i) => (
|
||||
<Card key={i} className="h-full overflow-hidden">
|
||||
<div className="aspect-[4/3] w-full bg-muted/30 p-6 flex items-center justify-center">
|
||||
<Skeleton className="h-24 w-20 rounded-sm" />
|
||||
</div>
|
||||
<CardHeader className="p-4 pb-2 space-y-2">
|
||||
<Skeleton className="h-5 w-16" />
|
||||
<Skeleton className="h-6 w-full" />
|
||||
</CardHeader>
|
||||
<CardContent className="p-4 pt-0 space-y-2">
|
||||
<Skeleton className="h-4 w-24" />
|
||||
<Skeleton className="h-4 w-32" />
|
||||
</CardContent>
|
||||
<CardFooter className="p-4 pt-0 mt-auto">
|
||||
<Skeleton className="h-6 w-full rounded-md" />
|
||||
</CardFooter>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
78
src/app/(dashboard)/teacher/textbooks/page.tsx
Normal file
78
src/app/(dashboard)/teacher/textbooks/page.tsx
Normal file
@@ -0,0 +1,78 @@
|
||||
import { Search, Filter } from "lucide-react";
|
||||
import { Button } from "@/shared/components/ui/button";
|
||||
import { Input } from "@/shared/components/ui/input";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/shared/components/ui/select";
|
||||
import { TextbookCard } from "@/modules/textbooks/components/textbook-card";
|
||||
import { TextbookFormDialog } from "@/modules/textbooks/components/textbook-form-dialog";
|
||||
import { getTextbooks } from "@/modules/textbooks/data-access";
|
||||
|
||||
export default async function TextbooksPage() {
|
||||
// In a real app, we would parse searchParams here
|
||||
const textbooks = await getTextbooks();
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Page Header */}
|
||||
<div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold tracking-tight">Textbooks</h1>
|
||||
<p className="text-muted-foreground">
|
||||
Manage your digital curriculum resources and chapters.
|
||||
</p>
|
||||
</div>
|
||||
<TextbookFormDialog />
|
||||
</div>
|
||||
|
||||
{/* Toolbar */}
|
||||
<div className="flex flex-col gap-4 md:flex-row md:items-center justify-between bg-card p-4 rounded-lg border shadow-sm">
|
||||
<div className="relative w-full md:w-96">
|
||||
<Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
|
||||
<Input
|
||||
placeholder="Search textbooks..."
|
||||
className="pl-9 bg-background"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex gap-2 w-full md:w-auto">
|
||||
<Select>
|
||||
<SelectTrigger className="w-[140px] bg-background">
|
||||
<Filter className="mr-2 h-4 w-4 text-muted-foreground" />
|
||||
<SelectValue placeholder="Subject" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">All Subjects</SelectItem>
|
||||
<SelectItem value="math">Mathematics</SelectItem>
|
||||
<SelectItem value="physics">Physics</SelectItem>
|
||||
<SelectItem value="history">History</SelectItem>
|
||||
<SelectItem value="english">English</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
<Select>
|
||||
<SelectTrigger className="w-[140px] bg-background">
|
||||
<SelectValue placeholder="Grade" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">All Grades</SelectItem>
|
||||
<SelectItem value="10">Grade 10</SelectItem>
|
||||
<SelectItem value="11">Grade 11</SelectItem>
|
||||
<SelectItem value="12">Grade 12</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Grid Content */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
|
||||
{textbooks.map((textbook) => (
|
||||
<TextbookCard key={textbook.id} textbook={textbook} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user