AdminRolesPermissionEdit.jsx

/* eslint-disable react/display-name */
import { Button, Checkbox, Grid, LoadingOverlay, Modal } from '@mantine/core';
import { useForm, zodResolver } from '@mantine/form';
import { showNotification } from '@mantine/notifications';
import { IconCheck, IconX } from '@tabler/icons-react';
import { useImperativeHandle, useState, forwardRef } from 'react';
import { z } from 'zod';
import Permission from '@easytool/react-permission';
import PermissionDeniedModal from '@/components/Extra/PermissionDeniedModal';
import useTranslation from 'next-translate/useTranslation';
import { RoleService } from '@/services/auth/role-service';
import { PermissionService } from '@/services/auth/permission-service';
import RolesEditTable from './RolesEditTable';
import { useEffect } from 'react';
import { useRouter } from 'next/router';

const AdminRolesPermissionEdit = forwardRef((props, ref) => {
    const router = useRouter();
    const { t } = useTranslation();
    const modelService = new RoleService();
    const permissionService = new PermissionService();
    const [permissionlist, setPermissionList] = useState([]);
    const [loadingform, setLoadingForm] = useState(false);
    const schema = z.object({
        name: z.string().min(2, { message: t('general:validation.name') }),
        display_name: z.string().min(2, { message: t('general:validation.display_name') }),
    });

    const form = useForm({
        validate: zodResolver(schema),
        initialValues: {
            id: '',
            name: '',
            display_name: '',
        },
    });

    const preferedDataStack = async () => {
        const responsepermissions = await permissionService
            .getModelsAll({ export_data: true })
            .then((res) => res.data)
            .catch((err) => err.response);

        const listpermission = responsepermissions?.data.map((item) => {
            const listed = {
                key: item.id,
                value: item.id,
                label: item.name,
            };
            return listed;
        });

        setPermissionList(listpermission);
    };

    useEffect(() => {
        preferedDataStack();
    }, []);
    useImperativeHandle(ref, () => ({
        LoadFirstData(value) {
            setLoadingForm(true);

            // console.log(value);
            form.setValues({
                id: value.id,
                name: value.name,
                display_name: value.display_name,
            });

            setTimeout(() => {
                setLoadingForm(false);
            }, 1000);
        },
    }));

    const handleCLoseDialog = () => {
        props.onchangeSelected([]);
        props.closeDialog();
    };
    const handleSubmit = async () => {
        const realData = {
            ...form.values,
            permissions_list: props.selected,
        };
        const { status } = await modelService
            .updateModel(realData)
            .then((d) => d)
            .catch((e) => e);
        if (status == 200) {
            showNotification({
                title: t('common:notification.edit_title_success'),
                message:
                    t('general:model_role') + ' ' + t('common:notification.edit_message_success'),
                icon: <IconCheck />,
                color: 'green',
            });
            setLoadingForm(true);
            setTimeout(() => {
                setLoadingForm(false);
                props.service();
                props.closeDialog();
            }, 500);
            window.location.pathname = router.pathname;
        } else {
            showNotification({
                title: t('common:notification.edit_title_failed'),
                message:
                    t('general:model_role') + ' ' + t('common:notification.edit_message_failed'),
                icon: <IconX />,
                color: 'red',
            });
            setLoadingForm(true);
            setTimeout(() => {
                setLoadingForm(false);
                props.service();
                props.closeDialog();
            }, 500);
        }
    };

    const changeSelectedPermissions = (e) => {
        props.onchangeSelected(e);
    };

    return (
        <Modal
            zIndex={100}
            size="xl"
            opened={props.opened}
            onClose={handleCLoseDialog}
            title={props.title}
        >
            <Permission hasPermission={props.permissions} onDeny={<PermissionDeniedModal />}>
                <div permission={'permission_update'}>
                    <form onSubmit={form.onSubmit(handleSubmit)}>
                        <LoadingOverlay visible={loadingform} />
                        <Grid gutter="xl">
                            <Grid.Col span={12} xl={12} lg={12}>
                                <Checkbox.Group
                                    defaultValue={props.selected}
                                    label="Pilih Permission"
                                    withAsterisk
                                    onChange={(e) => changeSelectedPermissions(e)}
                                    spacing="md"
                                    mb={10}
                                >
                                    <Grid mt={10}>
                                        <Grid.Col span={12} xl={12} lg={12}>
                                            <RolesEditTable permissionlist={permissionlist} />
                                        </Grid.Col>
                                    </Grid>
                                </Checkbox.Group>
                            </Grid.Col>
                        </Grid>

                        <Button type="submit" mt={20} fullWidth>
                            {t('common:button.update')}
                        </Button>
                    </form>
                </div>
            </Permission>
        </Modal>
    );
});

export default AdminRolesPermissionEdit;

DataMasterPermission.jsx

import { Checkbox } from '@mantine/core';
import useTranslation from 'next-translate/useTranslation';

const DataMasterPermission = ({ items }) => {
    const { t } = useTranslation();
    return (
        <>
            <tr>
                <td>{t('business:model_branch')}</td>
                {items
                    .filter((item) => item.label.split('_')[0] == 'branch')
                    .map((item, index) => {
                        const labelName = item.label.split('_')[1];
                        return (
                            <td key={index}>
                                <Checkbox key={index} value={item.value} label={labelName} />
                            </td>
                        );
                    })}
            </tr>
            <tr>
                <td>{t('business:model_typemcu')}</td>
                {items
                    .filter((item) => item.label.split('_')[0] == 'typemcu')
                    .map((item, index) => {
                        const labelName = item.label.split('_')[1];
                        return (
                            <td key={index}>
                                <Checkbox key={index} value={item.value} label={labelName} />
                            </td>
                        );
                    })}
            </tr>
            <tr>
                <td>{t('general:model_year')}</td>
                {items
                    .filter((item) => item.label.split('_')[0] == 'yearlist')
                    .map((item, index) => {
                        const labelName = item.label.split('_')[1];
                        return (
                            <td key={index}>
                                <Checkbox key={index} value={item.value} label={labelName} />
                            </td>
                        );
                    })}
            </tr>

            <tr>
                <td>{t('general:model_group')}</td>
                {items
                    .filter((item) => item.label.split('_')[0] == 'group')
                    .map((item, index) => {
                        const labelName = item.label.split('_')[1];
                        return (
                            <td key={index}>
                                <Checkbox key={index} value={item.value} label={labelName} />
                            </td>
                        );
                    })}
            </tr>
            <tr>
                <td>{t('general:model_test')}</td>
                {items
                    .filter((item) => item.label.split('_')[0] == 'test')
                    .map((item, index) => {
                        const labelName = item.label.split('_')[1];
                        return (
                            <td key={index}>
                                <Checkbox key={index} value={item.value} label={labelName} />
                            </td>
                        );
                    })}
            </tr>
        </>
    );
};

export default DataMasterPermission;

roleindex.jsx

import LayoutApp from '@/layouts/LayoutApp';
import { ActionIcon, Group, Text, Tooltip } from '@mantine/core';
import { useEffect, useRef, useState } from 'react';
import { createColumnHelper } from '@tanstack/react-table';
import { IconCheck, IconLock, IconTrash, IconX } from '@tabler/icons-react';
import { useHover } from '@mantine/hooks';
import Permission from '@easytool/react-permission';
import { openConfirmModal } from '@mantine/modals';
import { showNotification } from '@mantine/notifications';
import { useAuth } from '@/hooks/auth';
import PermissionDenied from '@/components/Extra/PermissionDenied';
import useTranslation from 'next-translate/useTranslation';
import { RoleService } from '@/services/auth/role-service';
import AdminRolesTable from '@/components/App/Roles/AdminRolesTable';
import AdminRolesCreate from '@/components/App/Roles/AdminRolesCreate';
import AdminRolesEdit from '@/components/App/Roles/AdminRolesEdit';
import dayjs from 'dayjs';
import AdminRolesPermissionEdit from '@/components/App/Roles/AdminRolesPermissionEdit';
import { PermissionService } from '@/services/auth/permission-service';
// import { useRouter } from 'next/router';

const AdminRolesIndex = () => {
    // const router = useRouter();
    const { t } = useTranslation();
    const { permissions } = useAuth();
    const modelService = new RoleService();
    const permissionService = new PermissionService();

    const columnHelper = createColumnHelper();
    const [loadtable, setLoadTable] = useState(true);
    const { refbutton } = useHover();
    const [database, setDatabase] = useState([]);
    const [paginate, setPaginate] = useState([]);
    const [filter, setFilter] = useState('');
    const [sort, setSort] = useState('');
    const [page, setPage] = useState(0);
    const [pageSize, setPageSize] = useState(12);
    const [create, setCreate] = useState(false);
    const [edit, setEdit] = useState(false);
    const [title, setTitleDialog] = useState('');
    const childRef = useRef();
    // eslint-disable-next-line no-unused-vars
    const [idselected, setId] = useState({});
    const childRefPermission = useRef();
    const [editpermission, setEditPermission] = useState(false);
    const [idrolepermission, setIdRolePermission] = useState({});
    const [selected, setSelected] = useState([]);

    const getRequestParams = (filter, sort, page, pageSize) => {
        let params = {};
        if (filter) {
            params['search'] = filter;
            setPage(0);
        }
        if (sort) {
            params['sort_by'] = sort.sort_by;
            params['order_by'] = sort.order_by;
        }
        if (page) {
            params['page'] = page || 0;
        }
        if (pageSize) {
            params['size'] = pageSize;
        }
        return params;
    };
    const serviceStack = async () => {
        const params = getRequestParams(filter, sort, page, pageSize);
        const response = await modelService
            .getModels(params)
            .then((res) => res)
            .finally(() => setLoadTable(false))
            .catch((err) => err.response);

        if (response.status == 401 || response.status == 403) {
            window.location.pathname = '/dashboard';
            return null;
        }

        setPaginate(response.data.pagination);
        setDatabase(response.data.data);
    };

    useEffect(() => {
        setPageSize(12);
        serviceStack();
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [filter, sort, page, pageSize]);

    const handleFilters = (value) => {
        setFilter(value);
    };

    const handleDelete = (row) =>
        openConfirmModal({
            title: t('common:title.delete_data') + ' ' + row.cell.row.original.name,
            centered: true,
            children: (
                <Text size="sm">
                    {t('common:helper_text.delete_text') + ' ' + row.cell.row.original.name}
                </Text>
            ),
            labels: {
                confirm: t('common:button.delete'),
                cancel: t('common:button.cancel'),
            },
            confirmProps: { color: 'red' },
            onCancel: () => '',
            onConfirm: async () => {
                const { status } = await modelService
                    .deleteModel(row.cell.row.original.id)
                    .then((d) => d)
                    .catch((err) => err.response);
                if (status == 200) {
                    showNotification({
                        title: t('common:notification.deleted_title_success'),
                        message:
                            t('general:model_role') +
                            ' ' +
                            t('common:notification.deleted_message_success'),
                        icon: <IconCheck />,
                        color: 'green',
                    });
                    setLoadTable(true);
                    setTimeout(() => {
                        serviceStack();
                        setLoadTable(false);
                    }, 500);
                } else {
                    showNotification({
                        title: t('common:notification.deleted_title_failed'),
                        message:
                            t('general:model_role') +
                            ' ' +
                            t('common:notification.deleted_message_failed'),
                        icon: <IconX />,
                        color: 'red',
                    });
                    setLoadTable(true);
                    setTimeout(() => {
                        serviceStack();
                        setLoadTable(false);
                    }, 500);
                }
            },
        });
    // eslint-disable-next-line no-unused-vars
    const handleEdit = async (row) => {
        window.location.pathname = `/admin/roles/edit/${row.cell.row.original.id}`;
        // setId(row.cell.row.original);
        // setEdit(true);
        // setTitleDialog(`${t('common:title.edit_data')} ` + row.cell.row.original.name);
        // childRef.current.LoadFirstData(row.cell.row.original);
    };

    const createDialogModal = () => {
        setCreate(true);
        setTitleDialog(`${t('common:title.create_data') + ' ' + t('general:model_role')} `);
    };

    const handleChangePage = (value) => {
        setPage(value - Number(1));
    };

    const handleChangeSort = (value) => {
        setSort(value);
    };

    const preferedStackPermissions = async (value) => {
        const selectedPermission = await permissionService
            .getModelsByRole(value.id)
            .then((res) => res)
            .catch((err) => err.response);

        if (selectedPermission.status == 200 && selectedPermission.data.length > 0) {
            const mappers = selectedPermission?.data.map((item) => item.permission_id);
            setSelected(mappers);
        }
    };

    const handleEditPermission = async (row) => {
        preferedStackPermissions(row.cell.row.original).then(() => {
            setIdRolePermission(row.cell.row.original);
            setEditPermission(true);
            setTitleDialog(`${t('common:title.edit_data')} ` + row.cell.row.original.name);
            childRefPermission.current.LoadFirstData(row.cell.row.original);
        });
    };

    const columns = [
        columnHelper.accessor('id', {
            header: () => t('general:table.id'),
            cell: (row) => row.renderValue(),
            footer: (row) => row.column.id,
            enableResizing: true,
            size: 180,
            maxSize: 200,
        }),
        columnHelper.accessor('name', {
            header: () => t('general:table.name'),
            cell: (row) => row.renderValue(),
            footer: (row) => row.column.name,
        }),

        columnHelper.accessor('display_name', {
            header: () => t('general:table.display_name'),
            cell: (row) => row.renderValue(),
            footer: (row) => row.column.display_name,
        }),

        columnHelper.accessor('created_at', {
            header: () => t('general:table.created'),
            cell: (row) => dayjs(row.renderValue()).format('DD-MM-YYYY'),
            footer: (row) => row.column.created_at,
            sortingFn: 'datetime',
        }),

        columnHelper.accessor('action', {
            header: () => t('general:table.action'),
            cell: (row) => {
                return (
                    <Group position="left" spacing="xs">
                        <Permission hasPermission={permissions}>
                            {/* <Tooltip
                                ref={refbutton}
                                label={t('common:button.edit')}
                                color="blue"
                                permission={'role_update'}
                                withArrow
                            >
                                <ActionIcon
                                    variant="light"
                                    radius="md"
                                    size="md"
                                    permission={'role_update'}
                                    color="blue"
                                    onClick={() => handleEdit(row)}
                                >
                                    <IconEdit size={17} />
                                </ActionIcon>
                            </Tooltip> */}
                            <Tooltip
                                ref={refbutton}
                                label={`Edit Permissions`}
                                color="orange"
                                permission={'role_update'}
                                withArrow
                            >
                                <ActionIcon
                                    variant="light"
                                    radius="md"
                                    size="md"
                                    permission={'role_update'}
                                    color="orange"
                                    onClick={() => handleEditPermission(row)}
                                >
                                    <IconLock size={17} />
                                </ActionIcon>
                            </Tooltip>
                            <Tooltip
                                permission={'role_delete'}
                                ref={refbutton}
                                label={t('common:button.delete')}
                                color="red"
                                withArrow
                            >
                                <ActionIcon
                                    permission={'role_delete'}
                                    variant="light"
                                    radius="md"
                                    size="md"
                                    color="red"
                                    onClick={() => handleDelete(row)}
                                >
                                    <IconTrash size={17} />
                                </ActionIcon>
                            </Tooltip>
                        </Permission>
                    </Group>
                );
            },
            footer: (row) => row.column.action,
            enableSorting: false,
        }),
    ];

    return (
        <LayoutApp>
            <Permission hasPermission={permissions} onDeny={<PermissionDenied />}>
                <AdminRolesTable
                    permission={'role_list'}
                    data={database}
                    createDialog={createDialogModal}
                    pagination={paginate}
                    columns={columns}
                    load={loadtable}
                    onFilters={(e) => handleFilters(e)}
                    onchangePage={(e) => handleChangePage(e)}
                    onChangeSort={(e) => handleChangeSort(e)}
                />
                <AdminRolesCreate
                    opened={create}
                    title={title}
                    permissions={permissions}
                    closeDialog={() => setCreate(false)}
                    service={() => {
                        setLoadTable(true),
                            setTimeout(() => {
                                serviceStack(), setLoadTable(false);
                            }, 500);
                    }}
                    loadingstart={() => setLoadTable(true)}
                    loadingdone={() => setLoadTable(false)}
                />
                <AdminRolesEdit
                    ref={childRef}
                    opened={edit}
                    permissions={permissions}
                    idselect={idselected}
                    title={title}
                    closeDialog={() => setEdit(false)}
                    service={() => {
                        setLoadTable(true);
                        setTimeout(() => {
                            serviceStack();
                            setLoadTable(false);
                        }, 500);
                    }}
                    loadingstart={() => setLoadTable(true)}
                    loadingdone={() => setLoadTable(false)}
                />

                <AdminRolesPermissionEdit
                    ref={childRefPermission}
                    opened={editpermission}
                    permissions={permissions}
                    idselect={idrolepermission}
                    title={title}
                    selected={selected}
                    closeDialog={() => setEditPermission(false)}
                    onchangeSelected={(e) => setSelected(e)}
                    service={() => {
                        setLoadTable(true);
                        setTimeout(() => {
                            serviceStack();
                            setLoadTable(false);
                        }, 500);
                    }}
                    loadingstart={() => setLoadTable(true)}
                    loadingdone={() => setLoadTable(false)}
                />
            </Permission>
        </LayoutApp>
    );
};

export default AdminRolesIndex;

RolesEditTable.jsx

import { Card, Table, Text } from '@mantine/core';
import UserPermission from './UserPermission';
import RolesTableStyles from './styles/RolesTableStyles';
import BusinessPermissions from './BusinessPermissions';
import DataMasterPermission from './DataMasterPermission';
// import BusinessPermissions from './BusinessPermissions';

const RolesEditTable = ({ permissionlist }) => {
    const { classes } = RolesTableStyles();

    return (
        <Card p={0} withBorder>
            <Table className={classes.table}>
                <thead>
                    <tr>
                        <th>Nama Permission</th>
                        <th>List</th>
                        <th>Create</th>
                        <th>Read</th>
                        <th>Update </th>
                        <th>Delete</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td colSpan={7}>
                            <Text weight={600} size="xs">
                                User
                            </Text>
                        </td>
                    </tr>
                    <UserPermission items={permissionlist} />
                    <tr>
                        <td colSpan={7}>
                            <Text weight={600} size="xs">
                                Business
                            </Text>
                        </td>
                    </tr>
                    <BusinessPermissions items={permissionlist} />
                    <tr>
                        <td colSpan={7}>
                            <Text weight={600} size="xs">
                                Data Master
                            </Text>
                        </td>
                    </tr>
                    <DataMasterPermission items={permissionlist} />
                </tbody>
            </Table>
        </Card>
    );
};

export default RolesEditTable;