integrasi role

src/pages/role/component/ListRole.jsx

@@ -7,56 +7,11 @@ import {
     EyeOutlined,
     SearchOutlined,
 } from '@ant-design/icons';
-import { NotifAlert, NotifConfirmDialog } from '../../../components/Global/ToastNotif';
+import { NotifAlert, NotifOk, NotifConfirmDialog } from '../../../components/Global/ToastNotif';
 import { useNavigate } from 'react-router-dom';
+import { getAllRole, deleteRole } from '../../../api/role';
 import TableList from '../../../components/Global/TableList';
 
-// Dummy data
-const initialRolesData = [
-    {
-        role_id: 1,
-        role_name: 'Administrator',
-        role_level: 1,
-        role_description: 'tes administrator',
-    },
-    {
-        role_id: 2,
-        role_name: 'Operator',
-        role_level: 2,
-        role_description: 'tes operator',
-    },
-    {
-        role_id: 3,
-        role_name: 'Engineer',
-        role_level: 2,
-        role_description: 'tes engineer',
-    },
-    {
-        role_id: 4,
-        role_name: 'Operator',
-        role_level: 3,
-        role_description: 'tes operator',
-    },
-    {
-        role_id: 5,
-        role_name: 'Administrator',
-        role_level: 1,
-        role_description: 'tes administrator',
-    },
-    {
-        role_id: 6,
-        role_name: 'Guest',
-        role_level: 3,
-        role_description: 'tes guest',
-    },
-    {
-        role_id: 7,
-        role_name: 'Engineering',
-        role_level: 2,
-        role_description: 'tes engineering',
-    },
-];
-
 const columns = (showPreviewModal, showEditModal, showDeleteDialog) => [
     {
         title: 'No',
@@ -123,7 +78,6 @@ const columns = (showPreviewModal, showEditModal, showDeleteDialog) => [
 const ListRole = memo(function ListRole(props) {
     const [showFilter, setShowFilter] = useState(false);
     const [trigerFilter, setTrigerFilter] = useState(false);
-    const [rolesData, setRolesData] = useState(initialRolesData);
 
     const defaultFilter = { search: '' };
     const [formDataFilter, setFormDataFilter] = useState(defaultFilter);
@@ -131,53 +85,6 @@ const ListRole = memo(function ListRole(props) {
 
     const navigate = useNavigate();
 
-    // Dummy data function to simulate API call
-    const getAllRole = async (params) => {
-        // Simulate API delay
-        await new Promise((resolve) => setTimeout(resolve, 300));
-
-        // Extract URLSearchParams
-        const searchParam = params.get('search') || '';
-        const page = parseInt(params.get('page')) || 1;
-        const limit = parseInt(params.get('limit')) || 10;
-
-        console.log('getAllRole called with:', { searchParam, page, limit });
-
-        // Filter by search
-        let filteredRoles = rolesData;
-        if (searchParam) {
-            const searchLower = searchParam.toLowerCase();
-            filteredRoles = rolesData.filter(
-                (role) =>
-                    role.role_name.toLowerCase().includes(searchLower) ||
-                    role.role_description.toLowerCase().includes(searchLower) ||
-                    role.role_level.toString().includes(searchLower)
-            );
-        }
-
-        // Pagination logic
-        const totalData = filteredRoles.length;
-        const totalPages = Math.ceil(totalData / limit);
-        const startIndex = (page - 1) * limit;
-        const endIndex = startIndex + limit;
-        const paginatedData = filteredRoles.slice(startIndex, endIndex);
-
-        return {
-            status: 200,
-            statusCode: 200,
-            data: {
-                data: paginatedData,
-                total: totalData,
-                paging: {
-                    page: page,
-                    limit: limit,
-                    total: totalData,
-                    page_total: totalPages,
-                },
-            },
-        };
-    };
-
     useEffect(() => {
         const token = localStorage.getItem('token');
         if (token) {
@@ -188,7 +95,7 @@ const ListRole = memo(function ListRole(props) {
         } else {
             navigate('/signin');
         }
-    }, [props.actionMode, rolesData]);
+    }, [props.actionMode]);
 
     const toggleFilter = () => {
         setFormDataFilter(defaultFilter);
@@ -236,21 +143,23 @@ const ListRole = memo(function ListRole(props) {
     };
 
     const handleDelete = async (role_id) => {
-        // Find role name before deleting
-        const roleToDelete = rolesData.find((role) => role.role_id === role_id);
+        const response = await deleteRole(role_id);
+        console.log('Delete Role Response:', response);
 
-        // Simulate delete API call
-        await new Promise((resolve) => setTimeout(resolve, 300));
-
-        // Remove from state
-        const updatedRoles = rolesData.filter((role) => role.role_id !== role_id);
-        setRolesData(updatedRoles);
-
-        NotifAlert({
-            icon: 'success',
-            title: 'Berhasil',
-            message: `Data Role "${roleToDelete?.role_name || ''}" berhasil dihapus.`,
-        });
+        if (response.statusCode == 200) {
+            NotifAlert({
+                icon: 'success',
+                title: 'Berhasil',
+                message: 'Data Role "' + (response.data?.role_name || '') + '" berhasil dihapus.',
+            });
+            doFilter();
+        } else {
+            NotifOk({
+                icon: 'error',
+                title: 'Gagal',
+                message: response.message || 'Gagal Menghapus Data Role',
+            });
+        }
     };
 
     return (