468 lines
22 KiB
TypeScript
468 lines
22 KiB
TypeScript
import React, { useEffect, useState } from "react";
|
|
import { useForm } from "@inertiajs/react";
|
|
import { PageProps } from "@/types";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
import {
|
|
Table,
|
|
TableHeader,
|
|
TableRow,
|
|
TableHead,
|
|
TableBody,
|
|
TableCell,
|
|
} from "@/components/ui/table";
|
|
// import { toast } from "react-toastify";
|
|
import { useToast } from "@/hooks/use-toast";
|
|
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
|
|
import {
|
|
Dialog,
|
|
DialogTrigger,
|
|
DialogContent,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
DialogFooter,
|
|
} from "@/components/ui/dialog";
|
|
import {
|
|
Search,
|
|
Plus,
|
|
Pencil,
|
|
Trash2,
|
|
ChevronLeft,
|
|
ChevronRight,
|
|
} from "lucide-react";
|
|
import AuthenticatedLayout from "@/layouts/authenticated-layout";
|
|
import { Head } from "@inertiajs/react";
|
|
import { Toaster } from "@/components/ui/toaster";
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from "@/components/ui/select";
|
|
|
|
interface JenisSanksi {
|
|
JenisSanksiId: number | null;
|
|
NamaJenisSanksi: string;
|
|
}
|
|
|
|
const ITEMS_PER_PAGE = 5;
|
|
|
|
export default function JenisSanksiIndex({
|
|
jenissanksi,
|
|
}: PageProps<{ jenissanksi: JenisSanksi[] }>) {
|
|
const {
|
|
data,
|
|
setData,
|
|
post,
|
|
put,
|
|
delete: destroy,
|
|
reset,
|
|
} = useForm<JenisSanksi>({
|
|
JenisSanksiId: null,
|
|
NamaJenisSanksi: "",
|
|
});
|
|
|
|
const { toast } = useToast();
|
|
|
|
const [editing, setEditing] = useState(false);
|
|
const [isModalOpen, setIsModalOpen] = useState(false);
|
|
const [deleteConfirm, setDeleteConfirm] = useState<JenisSanksi | null>(
|
|
null
|
|
);
|
|
const [search, setSearch] = useState("");
|
|
|
|
const [filteredJenisSanksi, setFilteredJenisSanksi] = useState(jenissanksi);
|
|
const [currentPage, setCurrentPage] = useState(1);
|
|
|
|
useEffect(() => {
|
|
let filtered = jenissanksi;
|
|
|
|
if (search) {
|
|
filtered = filtered.filter((jenissanksi) =>
|
|
jenissanksi.NamaJenisSanksi.toLowerCase().includes(
|
|
search.toLowerCase()
|
|
)
|
|
);
|
|
}
|
|
|
|
setFilteredJenisSanksi(filtered);
|
|
setCurrentPage(1);
|
|
}, [jenissanksi, search]);
|
|
|
|
const totalPages = Math.ceil(filteredJenisSanksi.length / ITEMS_PER_PAGE);
|
|
const startIndex = (currentPage - 1) * ITEMS_PER_PAGE;
|
|
const endIndex = startIndex + ITEMS_PER_PAGE;
|
|
const currentItems = filteredJenisSanksi.slice(startIndex, endIndex);
|
|
|
|
const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
setSearch(e.target.value);
|
|
};
|
|
|
|
const handlePageChange = (page: number) => {
|
|
setCurrentPage(page);
|
|
};
|
|
|
|
const handleSubmit = (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
|
|
if (editing) {
|
|
put(`/admin/jenissanksi/${data.JenisSanksiId}`, {
|
|
onSuccess: () => {
|
|
toast({
|
|
title: "Berhasil",
|
|
description: "Jenis Sanksi berhasil diperbarui",
|
|
variant: "default",
|
|
});
|
|
setIsModalOpen(false);
|
|
reset();
|
|
setEditing(false);
|
|
},
|
|
onError: () => {
|
|
toast({
|
|
title: "Gagal",
|
|
description:
|
|
"Terjadi kesalahan saat memperbarui Jenis Sanksi",
|
|
variant: "destructive",
|
|
});
|
|
},
|
|
});
|
|
} else {
|
|
post("/admin/jenissanksi", {
|
|
onSuccess: () => {
|
|
toast({
|
|
title: "Berhasil",
|
|
description: "Jenis Sanksi berhasil dibuat",
|
|
variant: "default",
|
|
});
|
|
setIsModalOpen(false);
|
|
reset();
|
|
},
|
|
onError: () => {
|
|
toast({
|
|
title: "Gagal",
|
|
description:
|
|
"Terjadi kesalahan saat membuat Jenis Sanksi",
|
|
variant: "destructive",
|
|
});
|
|
},
|
|
});
|
|
}
|
|
};
|
|
|
|
const handleEdit = (jenissanksi: JenisSanksi) => {
|
|
setData({ ...jenissanksi });
|
|
setEditing(true);
|
|
setIsModalOpen(true);
|
|
};
|
|
|
|
const handleDelete = () => {
|
|
if (deleteConfirm) {
|
|
destroy(`/admin/jenissanksi/${deleteConfirm.JenisSanksiId}`, {
|
|
onSuccess: () => {
|
|
toast({
|
|
title: "Berhasil",
|
|
description: "Jenis Sanksi berhasil dihapus",
|
|
variant: "default",
|
|
});
|
|
setDeleteConfirm(null);
|
|
},
|
|
onError: () => {
|
|
toast({
|
|
title: "Gagal",
|
|
description:
|
|
"Terjadi kesalahan saat menghapus Jenis Sanksi",
|
|
variant: "destructive",
|
|
});
|
|
setDeleteConfirm(null);
|
|
},
|
|
});
|
|
}
|
|
};
|
|
return (
|
|
<AuthenticatedLayout header={"Jenis Sanksi"}>
|
|
<Head title="Jenis Sanksi" />
|
|
<div className="container mx-auto p-4">
|
|
<Card className="shadow-lg">
|
|
<CardHeader>
|
|
<div className="flex flex-col space-y-4">
|
|
<div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
|
|
<div className="relative w-full md:w-96">
|
|
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500 h-4 w-4" />
|
|
<Input
|
|
type="text"
|
|
placeholder="Cari Jenis Sanksi..."
|
|
value={search}
|
|
onChange={handleSearch}
|
|
className="pl-10 pr-4 w-full border-gray-200 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 rounded-lg"
|
|
/>
|
|
</div>
|
|
<Dialog
|
|
open={isModalOpen}
|
|
onOpenChange={setIsModalOpen}
|
|
>
|
|
<DialogTrigger asChild>
|
|
<Button
|
|
onClick={() => {
|
|
setEditing(false);
|
|
setIsModalOpen(true);
|
|
}}
|
|
className="bg-blue-600 hover:bg-blue-700 text-white font-medium px-4 py-2 rounded-lg flex items-center gap-2 transition-colors duration-200"
|
|
>
|
|
<Plus className="h-4 w-4" />
|
|
Buat Jenis Sanksi
|
|
</Button>
|
|
</DialogTrigger>
|
|
|
|
<DialogContent className="sm:max-w-md">
|
|
<DialogHeader>
|
|
<DialogTitle className="text-xl font-semibold">
|
|
{editing
|
|
? "Ubah JenisSanksi"
|
|
: "Buat JenisSanksi"}
|
|
</DialogTitle>
|
|
</DialogHeader>
|
|
<form
|
|
onSubmit={handleSubmit}
|
|
className="flex flex-col gap-4 mt-4"
|
|
>
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-medium text-gray-700">
|
|
Name
|
|
</label>
|
|
<Input
|
|
type="text"
|
|
placeholder="Masukkan nama JenisSanksi"
|
|
value={data.NamaJenisSanksi}
|
|
onChange={(e) =>
|
|
setData(
|
|
"NamaJenisSanksi",
|
|
e.target.value
|
|
)
|
|
}
|
|
className="w-full"
|
|
/>
|
|
{/* <div className="space-y-2">
|
|
<label className="text-sm font-medium text-gray-700">
|
|
Publish
|
|
</label>
|
|
<Select
|
|
value={
|
|
data.is_publish
|
|
? "true"
|
|
: "false"
|
|
}
|
|
onValueChange={(
|
|
value
|
|
) =>
|
|
setData(
|
|
"is_publish",
|
|
value === "true"
|
|
)
|
|
}
|
|
>
|
|
<SelectTrigger className="w-full">
|
|
<SelectValue placeholder="Select status" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="true">
|
|
Published
|
|
</SelectItem>
|
|
<SelectItem value="false">
|
|
Unpublished
|
|
</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div> */}
|
|
</div>
|
|
<DialogFooter className="mt-6">
|
|
<Button
|
|
type="submit"
|
|
className="w-full bg-blue-600 hover:bg-blue-700 text-white"
|
|
>
|
|
{editing ? "Ubah" : "Buat"}
|
|
</Button>
|
|
</DialogFooter>
|
|
</form>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</div>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="rounded-lg border border-gray-200 overflow-hidden">
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow className="bg-gray-50 dark:bg-black/50">
|
|
{/* <TableHead className="font-semibold">
|
|
ID
|
|
</TableHead> */}
|
|
<TableHead className="font-semibold">
|
|
No
|
|
</TableHead>
|
|
<TableHead className="font-semibold">
|
|
Name
|
|
</TableHead>
|
|
<TableHead className="font-semibold">
|
|
Actions
|
|
</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{currentItems.map((jenissanksi, index) => (
|
|
<TableRow
|
|
key={
|
|
jenissanksi.JenisSanksiId ||
|
|
"new"
|
|
}
|
|
className="hover:bg-gray-50 transition-colors duration-150"
|
|
>
|
|
{/* <TableCell>{category.id}</TableCell> */}
|
|
<TableCell>
|
|
{startIndex + index + 1}
|
|
</TableCell>
|
|
<TableCell>
|
|
{jenissanksi.NamaJenisSanksi}
|
|
</TableCell>
|
|
<TableCell className="flex gap-2">
|
|
<Button
|
|
onClick={() =>
|
|
handleEdit(jenissanksi)
|
|
}
|
|
variant="outline"
|
|
className="flex items-center gap-2"
|
|
>
|
|
<Pencil className="h-4 w-4" />
|
|
Edit
|
|
</Button>
|
|
<Button
|
|
onClick={() =>
|
|
setDeleteConfirm(
|
|
jenissanksi
|
|
)
|
|
}
|
|
variant="destructive"
|
|
className="flex items-center gap-2"
|
|
>
|
|
<Trash2 className="h-4 w-4" />
|
|
Delete
|
|
</Button>
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
{currentItems.length === 0 && (
|
|
<TableRow>
|
|
<TableCell
|
|
colSpan={4}
|
|
className="text-center py-4 text-gray-500"
|
|
>
|
|
Tidak ada data
|
|
</TableCell>
|
|
</TableRow>
|
|
)}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
{/* <div className="flex flex-row mt-3">
|
|
<div className="text-sm w-1/2">
|
|
1 : Pengumuman <br /> 2 : Undangan
|
|
</div>
|
|
<div className="text-sm w-1/2">
|
|
3 : Peraturan <br /> 4 : Popup Home
|
|
</div>
|
|
</div> */}
|
|
<div className="flex items-center justify-between mt-4">
|
|
<div className="text-sm text-gray-500">
|
|
Showing {startIndex + 1} to{" "}
|
|
{Math.min(endIndex, filteredJenisSanksi.length)}{" "}
|
|
of {filteredJenisSanksi.length} entries
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() =>
|
|
handlePageChange(currentPage - 1)
|
|
}
|
|
disabled={currentPage === 1}
|
|
>
|
|
<ChevronLeft className="h-4 w-4" />
|
|
</Button>
|
|
{Array.from(
|
|
{ length: totalPages },
|
|
(_, i) => i + 1
|
|
).map((page) => (
|
|
<Button
|
|
key={page}
|
|
variant={
|
|
currentPage === page
|
|
? "default"
|
|
: "outline"
|
|
}
|
|
size="sm"
|
|
onClick={() => handlePageChange(page)}
|
|
>
|
|
{page}
|
|
</Button>
|
|
))}
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() =>
|
|
handlePageChange(currentPage + 1)
|
|
}
|
|
disabled={currentPage === totalPages}
|
|
>
|
|
<ChevronRight className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
{deleteConfirm && (
|
|
<Dialog open={true} onOpenChange={() => setDeleteConfirm(null)}>
|
|
<DialogContent className="sm:max-w-md">
|
|
<DialogHeader>
|
|
<DialogTitle className="text-xl font-semibold">
|
|
Konfirmasi Penghapusan
|
|
</DialogTitle>
|
|
</DialogHeader>
|
|
<div className="py-4">
|
|
<p className="text-gray-600">
|
|
Apakah Anda yakin ingin menghapus "
|
|
<span className="font-medium">
|
|
{deleteConfirm.NamaJenisSanksi}
|
|
</span>
|
|
"?
|
|
<br />
|
|
<span className="text-red-500">
|
|
Tindakan ini tidak dapat dibatalkan.
|
|
</span>
|
|
</p>
|
|
</div>
|
|
<DialogFooter className="gap-2">
|
|
<Button
|
|
onClick={() => setDeleteConfirm(null)}
|
|
variant="outline"
|
|
>
|
|
Batal
|
|
</Button>
|
|
<Button
|
|
onClick={handleDelete}
|
|
variant="destructive"
|
|
className="flex items-center gap-2"
|
|
>
|
|
<Trash2 className="h-4 w-4" />
|
|
Ya, hapus
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
)}
|
|
<Toaster />
|
|
</AuthenticatedLayout>
|
|
);
|
|
}
|