astral/erika
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

refactor: move AdminSidebar component to client file and update form layout and submission date formatting

Browse Source
This commit is contained in:
gunshiz
2026-06-20 19:53:51 +07:00 Unverified
parent 1b56937109
commit c7e431d99e
6 changed files with 136 additions and 188 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/form/client.tsx
+46 -94
View File
@@ -16,7 +16,7 @@ import { Dialog, DialogContent, DialogTrigger, DialogTitle } from "@/components/
import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from "@/components/ui/alert-dialog";
import { toast } from "sonner";
import { submitForm, deleteOwnSubmission } from "@/app/actions/submissions";
import { Loader2, LogOut, ChevronRight, ChevronLeft } from "lucide-react";
import { Loader2, LogOut } from "lucide-react";
import { signOut } from "next-auth/react";
import Image from "next/image";
import { z } from "zod";
@@ -87,7 +87,6 @@ interface FormFillerClientProps {
}
const LS_KEY = (formId: string) => `form-draft-${formId}`;
const QUESTIONS_PER_STEP = 3;
const buildSchema = (questions: Question[]) => {
const shape: Record<string, z.ZodTypeAny> = {};
@@ -177,27 +176,7 @@ export function FormFillerClient({ form, questions, initialAnswers = {} }: FormF
return () => subscription.unsubscribe();
}, [watch, form.id]);
const [currentStep, setCurrentStep] = useState(0);
const totalSteps = Math.ceil(questions.length / QUESTIONS_PER_STEP);
const currentQuestions = questions.slice(
currentStep * QUESTIONS_PER_STEP,
(currentStep + 1) * QUESTIONS_PER_STEP
);
const nextStep = async () => {
const fieldsToValidate = currentQuestions.map(q => q.id);
const isStepValid = await trigger(fieldsToValidate);
if (isStepValid) {
setCurrentStep(prev => Math.min(prev + 1, totalSteps - 1));
window.scrollTo(0, 0);
}
};
const prevStep = () => {
setCurrentStep(prev => Math.max(prev - 1, 0));
window.scrollTo(0, 0);
};
const onSubmit = async (values: z.infer<typeof formSchema>) => {
if (!form.isOpen) return;
@@ -276,7 +255,7 @@ export function FormFillerClient({ form, questions, initialAnswers = {} }: FormF
<Form {...methods}>
<form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
<div className="space-y-4">
{currentQuestions.map((q) => (
{questions.map((q) => (
<Card key={q.id} className="shadow-sm">
<CardHeader className="pb-3">
<div className="flex items-start justify-between gap-4">
@@ -453,82 +432,55 @@ export function FormFillerClient({ form, questions, initialAnswers = {} }: FormF
))}
</div>
<div className="flex flex-col sm:flex-row items-center justify-between gap-4 pt-4">
<div className="flex items-center gap-2 text-sm text-muted-foreground font-medium w-full sm:w-auto justify-center sm:justify-start">
หน้า {currentStep + 1} จาก {totalSteps || 1}
</div>
<div className="flex justify-between sm:justify-end items-center gap-3 w-full sm:w-auto">
{currentStep > 0 && (
<Button
type="button"
variant="outline"
onClick={prevStep}
disabled={isSubmitting || !form.isOpen}
>
<ChevronLeft className="w-4 h-4 mr-1" /> ย้อนกลับ
</Button>
)}
{currentStep < totalSteps - 1 ? (
<Button
type="button"
onClick={nextStep}
disabled={isSubmitting || !form.isOpen}
>
ถัดไป <ChevronRight className="w-4 h-4 ml-1" />
</Button>
) : (
<div className="flex gap-3">
{isUpdating && (
<AlertDialog>
<AlertDialogTrigger asChild>
<Button
type="button"
variant="destructive"
disabled={isSubmitting || !form.isOpen}
>
ลบ
</Button>
</AlertDialogTrigger>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>ยืนยันการลบข้อมูล?</AlertDialogTitle>
<AlertDialogDescription>
คุณแน่ใจหรือไม่ว่าต้องการลบข้อมูลที่ส่งไปแล้ว? การกระทำนี้ไม่สามารถย้อนกลับได้
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel disabled={isSubmitting}>ยกเลิก</AlertDialogCancel>
<AlertDialogAction
variant="destructive"
onClick={handleDelete}
disabled={isSubmitting}
>
ยืนยันการลบ
</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
)}
<Button type="submit" disabled={isSubmitting || !form.isOpen} className="min-w-28">
{isSubmitting ? (
<>
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
กำลังส่ง
</>
) : isUpdating ? (
"อัปเดตข้อมูล"
) : (
"ส่ง"
)}
<div className="flex justify-end gap-3 pt-4">
{isUpdating && (
<AlertDialog>
<AlertDialogTrigger asChild>
<Button
type="button"
variant="destructive"
disabled={isSubmitting || !form.isOpen}
>
ลบ
</Button>
</div>
</AlertDialogTrigger>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>ยืนยันการลบข้อมูล?</AlertDialogTitle>
<AlertDialogDescription>
คุณแน่ใจหรือไม่ว่าต้องการลบข้อมูลที่ส่งไปแล้ว? การกระทำนี้ไม่สามารถย้อนกลับได้
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel disabled={isSubmitting}>ยกเลิก</AlertDialogCancel>
<AlertDialogAction
variant="destructive"
onClick={handleDelete}
disabled={isSubmitting}
>
ยืนยันการลบ
</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
)}
<Button type="submit" disabled={isSubmitting || !form.isOpen} className="min-w-28">
{isSubmitting ? (
<>
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
กำลังส่ง
</>
) : isUpdating ? (
"อัปเดตข้อมูล"
) : (
"ส่ง"
)}
</div>
</Button>
</div>
</form>
</Form>
</div>
);
}