158 lines
7.4 KiB
JavaScript
158 lines
7.4 KiB
JavaScript
import AuthenticatedLayout from "@/layouts/authenticated-layout";
|
|
import { Head, usePage, router } from "@inertiajs/react";
|
|
import React, { useState } from "react";
|
|
import hasAnyPermission from "@/utils/hasAnyPermission";
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from "@/components/ui/dialog";
|
|
import { Button } from "@/components/ui/button";
|
|
import Pagination from "@/components/pagination";
|
|
|
|
export default function RolesIndex() {
|
|
const { roles } = usePage().props;
|
|
const [dialogOpen, setDialogOpen] = useState(false);
|
|
const [roleToDelete, setRoleToDelete] = useState(null);
|
|
|
|
const handleDelete = (id) => {
|
|
setRoleToDelete(id);
|
|
setDialogOpen(true);
|
|
};
|
|
|
|
const confirmDelete = () => {
|
|
router.delete(`/admin/roles/${roleToDelete}`, {
|
|
onSuccess: () => {
|
|
setDialogOpen(false);
|
|
setRoleToDelete(null);
|
|
},
|
|
});
|
|
};
|
|
|
|
return (
|
|
<AuthenticatedLayout header="Kelompok Pengguna">
|
|
<Head title="Kelompok Pengguna" />
|
|
|
|
<div className="container mx-auto p-4">
|
|
<div className="row mb-3">
|
|
<div className="col-md-12">
|
|
<div className="d-flex justify-content-between align-items-center">
|
|
{hasAnyPermission(["Roles.index"]) && (
|
|
<Link
|
|
href="/admin/role/create"
|
|
className="btn btn-success"
|
|
>
|
|
<i className="bi bi-plus-circle-fill me-2"></i>
|
|
Add Role
|
|
</Link>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="card border rounded">
|
|
<div className="card-body p-0">
|
|
<div className="table-responsive p-4">
|
|
<table className="table align-middle">
|
|
<thead className="table-light">
|
|
<tr>
|
|
<th scope="col" className="text-center">
|
|
No.
|
|
</th>
|
|
<th scope="col">Role Name</th>
|
|
<th scope="col">Permissions</th>
|
|
<th scope="col" className="text-center">
|
|
Actions
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{roles.data.map((role, index) => (
|
|
<tr key={role.id}>
|
|
<td className="text-center">
|
|
{index +
|
|
1 +
|
|
(roles.current_page - 1) *
|
|
roles.per_page}
|
|
</td>
|
|
<td>{role.name}</td>
|
|
<td>
|
|
<div className="d-flex flex-wrap gap-1">
|
|
{role.permissions.map(
|
|
(permission, i) => (
|
|
<span
|
|
key={i}
|
|
className="badge bg-success text-white badge-lg"
|
|
>
|
|
{
|
|
permission.name
|
|
}
|
|
</span>
|
|
)
|
|
)}
|
|
</div>
|
|
</td>
|
|
<td className="text-center">
|
|
{/* {hasAnyPermission([
|
|
"roles.edit",
|
|
]) && ( */}
|
|
<Link
|
|
href={`/admin/roles/${role.id}/edit`}
|
|
className="btn btn-primary btn-md me-2"
|
|
>
|
|
<i className="bi bi-pencil"></i>{" "}
|
|
Edit
|
|
</Link>
|
|
{/* )} */}
|
|
{/* {hasAnyPermission([
|
|
"roles.delete",
|
|
]) && ( */}
|
|
<button
|
|
onClick={() =>
|
|
handleDelete(role.id)
|
|
}
|
|
className="btn btn-danger btn-md"
|
|
>
|
|
<i className="bi bi-trash"></i>{" "}
|
|
Delete
|
|
</button>
|
|
{/* )} */}
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<Pagination links={roles.links} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
|
|
<DialogContent>
|
|
<DialogHeader>
|
|
<DialogTitle>Apakah Anda yakin?</DialogTitle>
|
|
<DialogDescription>
|
|
Data ini akan dihapus secara permanen!
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
<DialogFooter>
|
|
<Button
|
|
variant="outline"
|
|
onClick={() => setDialogOpen(false)}
|
|
>
|
|
Batal
|
|
</Button>
|
|
<Button variant="destructive" onClick={confirmDelete}>
|
|
Ya, hapus!
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</AuthenticatedLayout>
|
|
);
|
|
}
|