332 lines
10 KiB
TypeScript
332 lines
10 KiB
TypeScript
import { DataTable } from '@/components/ui/DataTable';
|
|
import { getColumns, Group } from './Column';
|
|
import { apiConfig } from '@/config/api.config';
|
|
import axios, { AxiosResponse } from 'axios';
|
|
import { Helmet } from 'react-helmet';
|
|
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';
|
|
import Divider from '@mui/material/Divider';
|
|
import ConfirmDialog from '@/components/confirm';
|
|
import { toast } from 'sonner';
|
|
import { Container, DataGridLoader, DataGridProvider, LoaderTransparant } from '@/components';
|
|
import { ListToolBar } from './ListToolbar';
|
|
import { RefreshCw } from 'lucide-react';
|
|
import { setgroups } from 'process';
|
|
// import { DialogHeader } from '@/components/ui/dialog';
|
|
// import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
|
const BASE_URL = apiConfig.service_customer;
|
|
|
|
let initGroup = {
|
|
id: '',
|
|
groupName: '',
|
|
status: '',
|
|
description: '',
|
|
pin_length: '',
|
|
max_pin_attempts: '',
|
|
default_notification: ''
|
|
};
|
|
|
|
const ManageGroups = () => {
|
|
const [isDialogOpen, setIsDialogOpen] = useState(false);
|
|
const [loading, setLoading] = useState(false);
|
|
const [dataGroup, setDataGroup] = useState([]);
|
|
const [formData, setFormData] = useState(initGroup);
|
|
const [pageIndex, setPageIndex] = useState(1);
|
|
const [pageSize, setPageSize] = useState(10);
|
|
const [dialogType, setDialogType] = useState('');
|
|
const [dialogOpen, setDialogOpen] = useState(false);
|
|
const [isReloading, setIsReloading] = useState(false);
|
|
// const closeDialog = () => {
|
|
// setIsDialogOpen(false);
|
|
// setgroups(initGroup);
|
|
// };
|
|
|
|
useEffect(() => {
|
|
fetchGroups();
|
|
}, []);
|
|
|
|
async function fetchGroups(): Promise<void> {
|
|
setIsReloading(true);
|
|
try {
|
|
let groups = await axios.get(`${BASE_URL}/groups/list`, {
|
|
params: {
|
|
limit: 20,
|
|
page: 1,
|
|
with_deleted: false,
|
|
order_field: 'created_at',
|
|
order_direction: 'DESC'
|
|
}
|
|
});
|
|
let temp = 1;
|
|
let resGroups = groups.data.data.list.map((el: any) => {
|
|
el.no = temp++;
|
|
if (el.date_birth) {
|
|
const d = new Date(el.date_birth);
|
|
el.date_birth = d.toLocaleString('sv-SE');
|
|
}
|
|
return el;
|
|
});
|
|
setDataGroup(resGroups);
|
|
} catch (error: any) {
|
|
alert(error.message);
|
|
console.log(error);
|
|
} finally {
|
|
// setLoading(false);
|
|
setIsReloading(false);
|
|
}
|
|
}
|
|
|
|
const openDialog = () => setIsDialogOpen(true);
|
|
const closeDialog = () => {
|
|
setIsDialogOpen(false);
|
|
setFormData(initGroup);
|
|
};
|
|
|
|
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
setFormData({
|
|
...formData,
|
|
[e.target.name]: e.target.value
|
|
});
|
|
};
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
if (!formData.groupName) return toast.warning(`Group name can not be empty!`);
|
|
if (!formData.status) return toast.warning(`Status can not be empty!`);
|
|
if (!formData.description) return toast.warning(`Description can not be empty!`);
|
|
setIsDialogOpen(false);
|
|
setDialogOpen(true);
|
|
};
|
|
|
|
function createGroup() {
|
|
setDialogType('create');
|
|
openDialog();
|
|
}
|
|
|
|
const handleUpdate = (group: any) => {
|
|
setFormData({
|
|
...formData,
|
|
id: group.id,
|
|
groupName: group.name,
|
|
status: group.status,
|
|
description: group.description
|
|
});
|
|
setDialogType('update');
|
|
setIsDialogOpen(true);
|
|
};
|
|
|
|
const handleDelete = (group: any) => {
|
|
setFormData({
|
|
...formData,
|
|
id: group.id,
|
|
groupName: group.name,
|
|
status: group.status,
|
|
description: group.description
|
|
});
|
|
setDialogType('delete');
|
|
setDialogOpen(true);
|
|
};
|
|
|
|
const handleReload = () => {
|
|
setIsReloading(true);
|
|
fetchGroups();
|
|
};
|
|
|
|
const handleYes = async () => {
|
|
setIsReloading(true);
|
|
try {
|
|
if (dialogType === 'create') {
|
|
await axios.post(`${BASE_URL}/groups/create`, {
|
|
name: formData.groupName,
|
|
status: formData.status,
|
|
description: formData.description,
|
|
created_at: new Date()
|
|
});
|
|
toast.success(`Success create group`);
|
|
} else if (dialogType === 'update') {
|
|
await axios.put(`${BASE_URL}/groups/update/${formData.id}`, {
|
|
name: formData.groupName,
|
|
status: formData.status,
|
|
description: formData.description,
|
|
updated_at: new Date()
|
|
});
|
|
toast.success(`Success update group`);
|
|
} else if (dialogType === 'delete') {
|
|
await axios.delete(`${BASE_URL}/groups/delete/${formData.id}/true`);
|
|
toast.success(`Success delete group`);
|
|
}
|
|
} catch (error: any) {
|
|
console.log(error);
|
|
toast.error(error.message);
|
|
} finally {
|
|
setDialogOpen(false);
|
|
closeDialog();
|
|
await fetchGroups();
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
function setShowAddDialog(el: any) {
|
|
setIsDialogOpen(el);
|
|
}
|
|
|
|
if (loading) return <LoaderTransparant />;
|
|
|
|
return (
|
|
<>
|
|
<Helmet>
|
|
<title>TPAY | Manage Group</title>
|
|
</Helmet>
|
|
<Container>
|
|
<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-5">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>
|
|
{/* <div className="w-full overflow-x-auto px-4"> */}
|
|
|
|
<div className="grid gap-5 lg:gap-7.5 mt-5 relative">
|
|
{isReloading && (
|
|
<DataGridLoader />
|
|
// <div className="fixed inset-0 bg-white/25 flex items-center justify-center z-50 text-muted-foreground px-4 py-2">
|
|
// <div className="bg-card flex items-center border shadow-sm rounded-md">
|
|
// <div className="flex flex-col items-center">
|
|
// <RefreshCw className="animate-spin h-8 w-8 text-slate-500 mb-2" />
|
|
// <span className="text-slate-500 font-medium">Refreshing data...</span>
|
|
// </div>
|
|
// </div>
|
|
// </div>
|
|
)}
|
|
<DataGridProvider
|
|
data={dataGroup}
|
|
columns={getColumns(handleUpdate)}
|
|
pagination={{ size: 10 }}
|
|
toolbar={
|
|
<ListToolBar
|
|
createGroup={createGroup}
|
|
onReload={handleReload}
|
|
isReloading={isReloading}
|
|
/>
|
|
}
|
|
layout={{ card: true }}
|
|
serverSide={false}
|
|
onRowSelectionChange={(selected, table: any) => {
|
|
const selectedRow = table.getSelectedRowModel().rows[0];
|
|
if (selectedRow) handleUpdate(selectedRow.original);
|
|
}}
|
|
/>
|
|
</div>
|
|
{/* </div> */}
|
|
|
|
<Dialog open={isDialogOpen} onClose={closeDialog}>
|
|
<DialogContent className="w-full">
|
|
<div className="flex justify-between">
|
|
<DialogTitle>
|
|
{dialogType === 'create' ? 'Create New Group' : 'Update Group'}
|
|
</DialogTitle>
|
|
<Box display="flex" justifyContent="flex-end">
|
|
<Button
|
|
variant="outlined"
|
|
sx={{ borderColor: 'white', color: 'grey' }}
|
|
onClick={closeDialog}
|
|
>
|
|
<CloseIcon />
|
|
</Button>
|
|
</Box>
|
|
</div>
|
|
<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">
|
|
<label className="form-label text-sm">
|
|
<span className="text-red-500">*</span>Group Name:
|
|
</label>
|
|
<input
|
|
type="text"
|
|
name="groupName"
|
|
className="input w-full col-span-3"
|
|
value={formData.groupName}
|
|
onChange={handleChange}
|
|
/>
|
|
</div>
|
|
<div className="grid grid-cols-4 items-center gap-4 w-full">
|
|
<label className="form-label text-sm">
|
|
<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>
|
|
</FormControl>
|
|
</div>
|
|
<div className="grid grid-cols-4 items-center gap-4 w-full">
|
|
<label className="form-label text-sm">
|
|
<span className="text-red-500">*</span>Description:
|
|
</label>
|
|
<input
|
|
type="text"
|
|
name="description"
|
|
className="input w-full col-span-3"
|
|
value={formData.description}
|
|
onChange={handleChange}
|
|
/>
|
|
</div>
|
|
<Button type="submit">Submit</Button>
|
|
</form>
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</Container>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default ManageGroups;
|