gitea/amati
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update: component modal shadcn from dialog to alert-dialog

Browse Source
This commit is contained in:
abiyasa05 2024-11-01 08:33:23 +07:00
parent de5d7a7b77
commit 65198c0ece
3 changed files with 76 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
apps/frontend/src/modules/assessmentManagement/modals/ConfirmModal.tsx
View File

@ -1,12 +1,14 @@
import { Button } from "@/shadcn/components/ui/button"; import { Button } from "@/shadcn/components/ui/button";
import { import {
Dialog, AlertDialog,
DialogContent, AlertDialogAction,
DialogDescription, AlertDialogCancel,
DialogFooter, AlertDialogContent,
DialogHeader, AlertDialogDescription,
DialogTitle, AlertDialogFooter,
} from "@/shadcn/components/ui/dialog"; AlertDialogHeader,
AlertDialogTitle,
} from "@/shadcn/components/ui/alert-dialog";
interface FinishAssessmentModalProps { interface FinishAssessmentModalProps {
assessmentId: string; assessmentId: string;
@ -22,21 +24,25 @@ export default function FinishAssessmentModal({
onConfirm, onConfirm,
}: FinishAssessmentModalProps) { }: FinishAssessmentModalProps) {
return ( return (
<Dialog open={opened} onOpenChange={onClose}> <AlertDialog open={opened} onOpenChange={onClose}>
<DialogContent className="max-w-md"> <AlertDialogContent className="max-w-md">
<DialogHeader> <AlertDialogHeader>
<DialogTitle>Konfirmasi Selesai Asesmen</DialogTitle> <AlertDialogTitle>Konfirmasi Selesai Asesmen</AlertDialogTitle>
<DialogDescription> <AlertDialogDescription>
Apakah Anda yakin ingin mengakhiri assessment ini? Pastikan semua jawaban sudah lengkap sebelum melanjutkan. Jika Anda sudah siap, klik 'Ya' untuk menyelesaikan. Apakah Anda yakin ingin mengakhiri assessment ini? Pastikan semua jawaban sudah lengkap sebelum melanjutkan. Jika Anda sudah siap, klik 'Ya' untuk menyelesaikan.
</DialogDescription> </AlertDialogDescription>
</DialogHeader> </AlertDialogHeader>
<DialogFooter className="flex justify-end gap-2"> <AlertDialogFooter className="flex justify-end gap-2">
<AlertDialogCancel asChild>
<Button variant="outline" onClick={onClose}> <Button variant="outline" onClick={onClose}>
Tidak Tidak
</Button> </Button>
</AlertDialogCancel>
<AlertDialogAction asChild>
<Button onClick={() => onConfirm(assessmentId)}>Ya</Button> <Button onClick={() => onConfirm(assessmentId)}>Ya</Button>
</DialogFooter> </AlertDialogAction>
</DialogContent> </AlertDialogFooter>
</Dialog> </AlertDialogContent>
</AlertDialog>
); );
} }

39
apps/frontend/src/modules/assessmentManagement/modals/FileSizeValidationModal.tsx
View File

@ -1,12 +1,13 @@
import { Button } from "@/shadcn/components/ui/button"; import { Button } from "@/shadcn/components/ui/button";
import { import {
Dialog, AlertDialog,
DialogContent, AlertDialogCancel,
DialogDescription, AlertDialogContent,
DialogFooter, AlertDialogDescription,
DialogHeader, AlertDialogFooter,
DialogTitle, AlertDialogHeader,
} from "@/shadcn/components/ui/dialog"; AlertDialogTitle,
} from "@/shadcn/components/ui/alert-dialog";
interface FileSizeValidationModalProps { interface FileSizeValidationModalProps {
opened: boolean; opened: boolean;
@ -20,20 +21,22 @@ export default function FileSizeValidationModal({
fileName, fileName,
}: FileSizeValidationModalProps) { }: FileSizeValidationModalProps) {
return ( return (
<Dialog open={opened} onOpenChange={onClose}> <AlertDialog open={opened} onOpenChange={onClose}>
<DialogContent className="max-w-md"> <AlertDialogContent className="max-w-md">
<DialogHeader> <AlertDialogHeader>
<DialogTitle>Peringatan Ukuran File</DialogTitle> <AlertDialogTitle>Peringatan Ukuran File</AlertDialogTitle>
<DialogDescription> <AlertDialogDescription>
Ukuran file {fileName} melebihi batas maksimum 25 MB! Silakan pilih file yang lebih kecil. Ukuran file {fileName} melebihi batas maksimum 25 MB! Silakan pilih file yang lebih kecil.
</DialogDescription> </AlertDialogDescription>
</DialogHeader> </AlertDialogHeader>
<DialogFooter className="flex justify-end gap-2"> <AlertDialogFooter className="flex justify-end gap-2">
<AlertDialogCancel asChild>
<Button variant="outline" onClick={onClose}> <Button variant="outline" onClick={onClose}>
Tutup Tutup
</Button> </Button>
</DialogFooter> </AlertDialogCancel>
</DialogContent> </AlertDialogFooter>
</Dialog> </AlertDialogContent>
</AlertDialog>
); );
} }

39
apps/frontend/src/modules/assessmentManagement/modals/ValidationModal.tsx
View File

@ -1,12 +1,13 @@
import { Button } from "@/shadcn/components/ui/button"; import { Button } from "@/shadcn/components/ui/button";
import { import {
Dialog, AlertDialog,
DialogContent, AlertDialogCancel,
DialogDescription, AlertDialogContent,
DialogFooter, AlertDialogDescription,
DialogHeader, AlertDialogFooter,
DialogTitle, AlertDialogHeader,
} from "@/shadcn/components/ui/dialog"; AlertDialogTitle,
} from "@/shadcn/components/ui/alert-dialog";
interface ValidationModalProps { interface ValidationModalProps {
opened: boolean; opened: boolean;
@ -20,20 +21,22 @@ export default function ValidationModal({
unansweredQuestions, unansweredQuestions,
}: ValidationModalProps) { }: ValidationModalProps) {
return ( return (
<Dialog open={opened} onOpenChange={onClose}> <AlertDialog open={opened} onOpenChange={onClose}>
<DialogContent className="max-w-md"> <AlertDialogContent className="max-w-md">
<DialogHeader> <AlertDialogHeader>
<DialogTitle>Peringatan</DialogTitle> <AlertDialogTitle>Peringatan</AlertDialogTitle>
<DialogDescription> <AlertDialogDescription>
Anda mempunyai {unansweredQuestions} pertanyaan yang belum terjawab! Pastikan semua jawaban sudah lengkap sebelum melanjutkan. Anda mempunyai {unansweredQuestions} pertanyaan yang belum terjawab! Pastikan semua jawaban sudah lengkap sebelum melanjutkan.
</DialogDescription> </AlertDialogDescription>
</DialogHeader> </AlertDialogHeader>
<DialogFooter className="flex justify-end gap-2"> <AlertDialogFooter className="flex justify-end gap-2">
<AlertDialogCancel asChild>
<Button variant="outline" onClick={onClose}> <Button variant="outline" onClick={onClose}>
Tutup Tutup
</Button> </Button>
</DialogFooter> </AlertDialogCancel>
</DialogContent> </AlertDialogFooter>
</Dialog> </AlertDialogContent>
</AlertDialog>
); );
} }