integrasi role
This commit is contained in:
@@ -4,8 +4,8 @@ import { useBreadcrumb } from '../../layout/LayoutBreadcrumb';
|
||||
import { Form, Typography } from 'antd';
|
||||
import ListRole from './component/ListRole';
|
||||
import DetailRole from './component/DetailRole';
|
||||
|
||||
import { NotifAlert } from '../../components/Global/ToastNotif';
|
||||
import { createRole, updateRole } from '../../api/role';
|
||||
import { NotifAlert, NotifOk } from '../../components/Global/ToastNotif';
|
||||
|
||||
const { Text } = Typography;
|
||||
|
||||
@@ -65,21 +65,56 @@ const IndexRole = memo(function IndexRole() {
|
||||
}
|
||||
|
||||
form.validateFields()
|
||||
.then((values) => {
|
||||
if (actionMode === 'edit') {
|
||||
NotifAlert({
|
||||
icon: 'success',
|
||||
title: 'Berhasil',
|
||||
message: `Data Role "${values.role_name}" berhasil diubah.`,
|
||||
});
|
||||
} else if (actionMode === 'add') {
|
||||
NotifAlert({
|
||||
icon: 'success',
|
||||
title: 'Berhasil',
|
||||
message: `Data Role "${values.role_name}" berhasil ditambahkan.`,
|
||||
.then(async (values) => {
|
||||
try {
|
||||
let response;
|
||||
if (actionMode === 'edit') {
|
||||
response = await updateRole(selectedData.role_id, values);
|
||||
console.log('Update Response:', response);
|
||||
|
||||
const isSuccess = response.statusCode === 200 || response.statusCode === 201;
|
||||
if (isSuccess) {
|
||||
NotifAlert({
|
||||
icon: 'success',
|
||||
title: 'Berhasil',
|
||||
message: `Data Role "${values.role_name}" berhasil diubah.`,
|
||||
});
|
||||
handleCancel();
|
||||
} else {
|
||||
NotifOk({
|
||||
icon: 'error',
|
||||
title: 'Gagal',
|
||||
message: response.message || 'Gagal mengubah data Role',
|
||||
});
|
||||
}
|
||||
} else if (actionMode === 'add') {
|
||||
response = await createRole(values);
|
||||
console.log('Create Response:', response);
|
||||
|
||||
const isSuccess = response.statusCode === 200 || response.statusCode === 201;
|
||||
if (isSuccess) {
|
||||
NotifAlert({
|
||||
icon: 'success',
|
||||
title: 'Berhasil',
|
||||
message: `Data Role "${values.role_name}" berhasil ditambahkan.`,
|
||||
});
|
||||
handleCancel();
|
||||
} else {
|
||||
NotifOk({
|
||||
icon: 'error',
|
||||
title: 'Gagal',
|
||||
message: response.message || 'Gagal menambahkan data Role',
|
||||
});
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error:', error);
|
||||
NotifOk({
|
||||
icon: 'error',
|
||||
title: 'Error',
|
||||
message: 'Terjadi kesalahan saat menyimpan data',
|
||||
});
|
||||
}
|
||||
handleCancel();
|
||||
})
|
||||
.catch((info) => {
|
||||
console.log('Validate Failed:', info);
|
||||
|
||||
@@ -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 (
|
||||
|
||||
Reference in New Issue
Block a user