enter login & navigate all menu
This commit is contained in:
Raja Oktafrianto
@ -2,8 +2,21 @@ import { DataTable } from '@/components/ui/DataTable';
|
||||
import { columns, Group } from './Column';
|
||||
import { apiConfig } from '@/config/api.config';
|
||||
import axios, { AxiosResponse } from 'axios';
|
||||
import { DialogContent, MenuItem, Radio, RadioGroup, FormControlLabel, FormControl,
|
||||
Dialog, DialogTitle, Typography, Button, Box } from '@mui/material';
|
||||
import {
|
||||
DialogContent,
|
||||
MenuItem,
|
||||
Radio,
|
||||
RadioGroup,
|
||||
FormControlLabel,
|
||||
FormControl,
|
||||
Dialog,
|
||||
DialogTitle,
|
||||
Typography,
|
||||
Button,
|
||||
Box,
|
||||
Breadcrumbs,
|
||||
Link
|
||||
} from '@mui/material';
|
||||
import { useState, useEffect } from 'react';
|
||||
// import IconButton from '@mui/material/IconButton';
|
||||
import CloseIcon from '@mui/icons-material/Close';
|
||||
@ -21,7 +34,7 @@ let initGroup = {
|
||||
pin_length: '',
|
||||
max_pin_attempts: '',
|
||||
default_notification: ''
|
||||
}
|
||||
};
|
||||
|
||||
const ManageGroups = () => {
|
||||
const [isDialogOpen, setIsDialogOpen] = useState(false);
|
||||
@ -31,9 +44,9 @@ const ManageGroups = () => {
|
||||
const [pageSize, setPageSize] = useState(10);
|
||||
const [dialogType, setDialogType] = useState('');
|
||||
const [dialogOpen, setDialogOpen] = useState(false);
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
fetchGroups()
|
||||
fetchGroups();
|
||||
}, []);
|
||||
|
||||
async function fetchGroups() {
|
||||
@ -47,29 +60,29 @@ const ManageGroups = () => {
|
||||
order_direction: 'ASC'
|
||||
}
|
||||
});
|
||||
let temp = 1
|
||||
let temp = 1;
|
||||
let resGroups = groups.data.data.list.map((el: any) => {
|
||||
el.no = temp++
|
||||
return el
|
||||
})
|
||||
setDataGroup(resGroups)
|
||||
el.no = temp++;
|
||||
return el;
|
||||
});
|
||||
setDataGroup(resGroups);
|
||||
} catch (error: any) {
|
||||
alert(error.message)
|
||||
alert(error.message);
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
|
||||
const openDialog = () => setIsDialogOpen(true);
|
||||
const closeDialog = () => {
|
||||
setIsDialogOpen(false)
|
||||
setFormData(initGroup)
|
||||
setIsDialogOpen(false);
|
||||
setFormData(initGroup);
|
||||
};
|
||||
|
||||
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setFormData({
|
||||
...formData,
|
||||
[e.target.name]: e.target.value
|
||||
})
|
||||
});
|
||||
};
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
@ -89,9 +102,9 @@ const ManageGroups = () => {
|
||||
groupName: group.name,
|
||||
status: group.status,
|
||||
description: group.description
|
||||
})
|
||||
});
|
||||
setDialogType('update');
|
||||
setIsDialogOpen(true)
|
||||
setIsDialogOpen(true);
|
||||
};
|
||||
|
||||
const handleDelete = (group: any) => {
|
||||
@ -101,27 +114,27 @@ const ManageGroups = () => {
|
||||
groupName: group.name,
|
||||
status: group.status,
|
||||
description: group.description
|
||||
})
|
||||
});
|
||||
setDialogType('delete');
|
||||
setDialogOpen(true)
|
||||
setDialogOpen(true);
|
||||
};
|
||||
|
||||
const handleYes = async () => {
|
||||
try {
|
||||
if (dialogType === 'create') {
|
||||
await axios.post(`${BASE_URL}/groups/create`, {
|
||||
"name": formData.groupName,
|
||||
"status": formData.status,
|
||||
"created_at": new Date()
|
||||
})
|
||||
name: formData.groupName,
|
||||
status: formData.status,
|
||||
created_at: new Date()
|
||||
});
|
||||
} else if (dialogType === 'update') {
|
||||
await axios.put(`${BASE_URL}/groups/update/${formData.id}`, {
|
||||
"name": formData.groupName,
|
||||
"status": formData.status,
|
||||
"updated_at": new Date()
|
||||
})
|
||||
name: formData.groupName,
|
||||
status: formData.status,
|
||||
updated_at: new Date()
|
||||
});
|
||||
} else if (dialogType === 'delete') {
|
||||
await axios.delete(`${BASE_URL}/groups/delete/${formData.id}/true`)
|
||||
await axios.delete(`${BASE_URL}/groups/delete/${formData.id}/true`);
|
||||
}
|
||||
await fetchGroups();
|
||||
closeDialog();
|
||||
@ -136,25 +149,53 @@ const ManageGroups = () => {
|
||||
return (
|
||||
<div>
|
||||
<div className="container mx-auto pt-2">
|
||||
<ConfirmDialog
|
||||
open={dialogOpen}
|
||||
onClose={() => setDialogOpen(false)}
|
||||
title="Confirm Action"
|
||||
content={`Are you sure you want to `+( dialogType === 'create' ? "create?" : ( dialogType === 'update' ? "update?" : "delete?"))}
|
||||
onYes={handleYes}
|
||||
onNo={() => setDialogOpen(false)}
|
||||
/>
|
||||
<h1 className="text-xl font-medium leading-none text-gray-900 p-5">Groups</h1>
|
||||
<DataTable data={dataGroup} columns={columns} createData={createGroup} onUpdate={handleUpdate} onDelete={handleDelete} />
|
||||
<ConfirmDialog
|
||||
open={dialogOpen}
|
||||
onClose={() => setDialogOpen(false)}
|
||||
title="Confirm Action"
|
||||
content={
|
||||
`Are you sure you want to ` +
|
||||
(dialogType === 'create' ? 'create?' : dialogType === 'update' ? 'update?' : 'delete?')
|
||||
}
|
||||
onYes={handleYes}
|
||||
onNo={() => setDialogOpen(false)}
|
||||
/>
|
||||
<h1 className="text-xl font-medium leading-none text-gray-900 mb-3">Groups</h1>
|
||||
<Breadcrumbs>
|
||||
<Link underline="none" color="inherit" href="/">
|
||||
<span className="text-sm hover:underline">Dashboard</span>
|
||||
</Link>
|
||||
|
||||
<Link underline="none" color="inherit">
|
||||
<span className="text-sm">Groups</span>
|
||||
</Link>
|
||||
|
||||
<Link underline="none" color="inherit">
|
||||
<span className="text-sm">Manage Groups</span>
|
||||
</Link>
|
||||
</Breadcrumbs>
|
||||
<DataTable
|
||||
data={dataGroup}
|
||||
columns={columns}
|
||||
createData={createGroup}
|
||||
onUpdate={handleUpdate}
|
||||
onDelete={handleDelete}
|
||||
/>
|
||||
<Dialog open={isDialogOpen} onClose={closeDialog}>
|
||||
<DialogContent className="w-[600px]">
|
||||
<div className="flex justify-between">
|
||||
<DialogTitle>Create New Group</DialogTitle>
|
||||
<Box display="flex" justifyContent="flex-end">
|
||||
<Button variant="outlined" sx={{ borderColor: "white", color: 'grey' }} onClick={closeDialog}><CloseIcon/></Button>
|
||||
<Button
|
||||
variant="outlined"
|
||||
sx={{ borderColor: 'white', color: 'grey' }}
|
||||
onClick={closeDialog}
|
||||
>
|
||||
<CloseIcon />
|
||||
</Button>
|
||||
</Box>
|
||||
</div>
|
||||
<Divider/>
|
||||
<Divider />
|
||||
<div className="p-5 mt-5">
|
||||
<form onSubmit={handleSubmit} className="flex flex-col gap-4 w-full">
|
||||
<div className="grid grid-cols-4 items-center gap-4 w-full">
|
||||
@ -174,9 +215,19 @@ const ManageGroups = () => {
|
||||
<span className="text-red-500">*</span>Active Status:
|
||||
</label>
|
||||
<FormControl>
|
||||
<RadioGroup name='status' row value={formData.status} onChange={handleChange}>
|
||||
<FormControlLabel value="Y" checked={formData.status === 'Y'} control={<Radio />} label="Yes" />
|
||||
<FormControlLabel value="N" checked={formData.status === 'N'} control={<Radio />} label="No" />
|
||||
<RadioGroup name="status" row value={formData.status} onChange={handleChange}>
|
||||
<FormControlLabel
|
||||
value="Y"
|
||||
checked={formData.status === 'Y'}
|
||||
control={<Radio />}
|
||||
label="Yes"
|
||||
/>
|
||||
<FormControlLabel
|
||||
value="N"
|
||||
checked={formData.status === 'N'}
|
||||
control={<Radio />}
|
||||
label="No"
|
||||
/>
|
||||
</RadioGroup>
|
||||
</FormControl>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user