fix group menu
This commit is contained in:
unknown
37
src/pages/groups/Column.tsx
Normal file
37
src/pages/groups/Column.tsx
Normal file
@ -0,0 +1,37 @@
|
||||
import { ColumnDef } from '@tanstack/react-table';
|
||||
|
||||
export type Group = {
|
||||
id: number;
|
||||
createdDate: Date;
|
||||
name: string;
|
||||
status: string;
|
||||
description: string;
|
||||
};
|
||||
|
||||
export const columns: ColumnDef<Group>[] = [
|
||||
{
|
||||
accessorKey: 'id',
|
||||
header: 'ID'
|
||||
},
|
||||
{
|
||||
accessorKey: 'createdDate',
|
||||
header: 'Created Date',
|
||||
cell: ({ row }) => new Date(row.original.createdDate).toLocaleDateString()
|
||||
},
|
||||
{
|
||||
accessorKey: 'name',
|
||||
header: 'Name'
|
||||
},
|
||||
{
|
||||
accessorKey: 'status',
|
||||
header: 'Status'
|
||||
},
|
||||
{
|
||||
accessorKey: 'description',
|
||||
header: 'Description'
|
||||
},
|
||||
// {
|
||||
// id: 'actions',
|
||||
// header: 'Actions'
|
||||
// }
|
||||
];
|
||||
249
src/pages/groups/ManageGroups.tsx
Normal file
249
src/pages/groups/ManageGroups.tsx
Normal file
@ -0,0 +1,249 @@
|
||||
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, DialogActions, DialogTitle, Typography, Button, Box } 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 { 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 [dataGroup, setDataGroup] = useState([]);
|
||||
const [formData, setFormData] = useState(initGroup);
|
||||
const [pageIndex, setPageIndex] = useState(0);
|
||||
const [pageSize, setPageSize] = useState(10);
|
||||
const [dialogType, setDialogType] = useState('');
|
||||
const [dialogOpen, setDialogOpen] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
fetchGroups()
|
||||
}, []);
|
||||
|
||||
async function fetchGroups() {
|
||||
try {
|
||||
let groups = await axios.get(`${BASE_URL}/groups/list`, {
|
||||
params: {
|
||||
limit: 10,
|
||||
page: 1,
|
||||
with_deleted: false,
|
||||
order_field: 'name',
|
||||
order_direction: 'ASC'
|
||||
}
|
||||
});
|
||||
setDataGroup(groups.data.data.list)
|
||||
} catch (error: any) {
|
||||
alert(error.message)
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
|
||||
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();
|
||||
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 handleYes = async () => {
|
||||
try {
|
||||
if (dialogType === 'create') {
|
||||
await axios.post(`${BASE_URL}/groups/create`, {
|
||||
"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()
|
||||
})
|
||||
} else if (dialogType === 'delete') {
|
||||
await axios.delete(`${BASE_URL}/groups/delete/${formData.id}/true`)
|
||||
}
|
||||
await fetchGroups();
|
||||
closeDialog();
|
||||
setDialogOpen(false);
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
closeDialog();
|
||||
setDialogOpen(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleNo = () => {
|
||||
setDialogOpen(false);
|
||||
};
|
||||
|
||||
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={handleNo}
|
||||
/>
|
||||
<h1 className="text-xl font-medium leading-none text-gray-900 p-5">Groups</h1>
|
||||
<DataTable data={dataGroup} columns={columns} createGroup={createGroup} onUpdate={handleUpdate} onDelete={handleDelete} />
|
||||
<Dialog open={isDialogOpen} onClose={setIsDialogOpen}>
|
||||
<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>
|
||||
</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>
|
||||
{/* <div className="grid grid-cols-4 items-center gap-4 w-full">
|
||||
<label className="form-label text-sm">
|
||||
<span className="text-red-500">*</span>PIN Length:
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="pin_length"
|
||||
className="input w-full col-span-3"
|
||||
value={formData.pin_length}
|
||||
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>Max Pin Attempts:
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="max_pin_attempts"
|
||||
className="input w-full col-span-3"
|
||||
value={formData.max_pin_attempts}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</div> */}
|
||||
{/* <div className="grid grid-cols-4 items-center gap-4 w-full mb-5">
|
||||
<label className="form-label text-sm">Default Notification:</label>
|
||||
<Select
|
||||
onValueChange={(e) => setFormData({ ...formData, default_notification: e })}
|
||||
>
|
||||
<SelectTrigger className="w-full col-span-3">
|
||||
<SelectValue placeholder="Select Default Notification" />
|
||||
</SelectTrigger>
|
||||
<SelectContent className="w-full">
|
||||
<SelectItem value="1 - notifSender">1 - notifSender</SelectItem>
|
||||
<SelectItem value="2 - notifBenefeciary">2 - notifBenefeciary</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<input
|
||||
type="text"
|
||||
name="default_notification"
|
||||
className="input w-full col-span-3"
|
||||
value={formData.default_notification}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</div> */}
|
||||
<Button type="submit">Submit</Button>
|
||||
</form>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ManageGroups;
|
||||
Reference in New Issue
Block a user