update table on manage group
This commit is contained in:
Wikzyy
@ -1,3 +1,4 @@
|
||||
import { KeenIcon } from '@/components';
|
||||
import { ColumnDef } from '@tanstack/react-table';
|
||||
|
||||
export type Group = {
|
||||
@ -8,7 +9,7 @@ export type Group = {
|
||||
description: string;
|
||||
};
|
||||
|
||||
export const columns: ColumnDef<Group>[] = [
|
||||
export const getColumns = (handleUpdate: (data: any) => void): ColumnDef<Group>[] => [
|
||||
{
|
||||
accessorKey: 'no',
|
||||
header: 'ID'
|
||||
@ -30,8 +31,19 @@ export const columns: ColumnDef<Group>[] = [
|
||||
accessorKey: 'description',
|
||||
header: 'Description'
|
||||
},
|
||||
// {
|
||||
// id: 'actions',
|
||||
// header: 'Actions'
|
||||
// }
|
||||
{
|
||||
id: 'actions',
|
||||
cell: ({ row }) => {
|
||||
const dataMembers = row.original;
|
||||
|
||||
return (
|
||||
<button
|
||||
className="btn btn-sm btn-icon btn-clear btn-light"
|
||||
onClick={() => handleUpdate(dataMembers)}
|
||||
>
|
||||
<KeenIcon icon="notepad-edit" />
|
||||
</button>
|
||||
);
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
49
src/pages/groups/ListToolbar.tsx
Normal file
49
src/pages/groups/ListToolbar.tsx
Normal file
@ -0,0 +1,49 @@
|
||||
import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
|
||||
import { Button } from '@/components/ui/button';
|
||||
|
||||
const ListToolBar = ({ createGroup }: { createGroup: () => void }) => {
|
||||
const { table, reload } = useDataGrid();
|
||||
|
||||
return (
|
||||
<div className="card-header flex-wrap gap-2 border-b-0 px-5">
|
||||
<div className="flex flex-wrap gap-2 lg:gap-5 w-full">
|
||||
<div className="flex justify-between w-full items-center">
|
||||
<div className="flex w-[50%] gap-3 items-center">
|
||||
<label className="input input-sm w-1/3">
|
||||
<KeenIcon icon="magnifier" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search users"
|
||||
value={(table.getColumn('name')?.getFilterValue() as string) ?? ''}
|
||||
onChange={(event) => table.getColumn('name')?.setFilterValue(event.target.value)}
|
||||
/>
|
||||
</label>
|
||||
<DefaultTooltip title={'Filter'} placement={'top'}>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="h-7.5 disabled:bg-gray-400"
|
||||
// disabled={isLoading}
|
||||
// onClick={handleFilterData}
|
||||
>
|
||||
{/* {loadingButton === 'filter' ? <ContentLoader /> : <KeenIcon icon="filter" />} */}
|
||||
<KeenIcon icon="filter" />
|
||||
</Button>
|
||||
</DefaultTooltip>
|
||||
</div>
|
||||
<div className="flex gap-3 items-center">
|
||||
<Button variant="outline" className="h-7.5 text-[0.8rem]" onClick={createGroup}>
|
||||
Add Data
|
||||
</Button>
|
||||
<DefaultTooltip title={'Refresh'} placement={'top'}>
|
||||
<Button variant="outline" className="h-7.5" onClick={() => reload()}>
|
||||
<KeenIcon icon="arrows-circle" />
|
||||
</Button>
|
||||
</DefaultTooltip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export { ListToolBar };
|
||||
@ -1,5 +1,5 @@
|
||||
import { DataTable } from '@/components/ui/DataTable';
|
||||
import { columns, Group } from './Column';
|
||||
import { getColumns, Group } from './Column';
|
||||
import { apiConfig } from '@/config/api.config';
|
||||
import axios, { AxiosResponse } from 'axios';
|
||||
import { Helmet } from 'react-helmet';
|
||||
@ -24,6 +24,8 @@ import CloseIcon from '@mui/icons-material/Close';
|
||||
import Divider from '@mui/material/Divider';
|
||||
import ConfirmDialog from '@/components/confirm';
|
||||
import { toast } from 'sonner';
|
||||
import { Container, DataGridProvider } from '@/components';
|
||||
import { ListToolBar } from './ListToolbar';
|
||||
// import { DialogHeader } from '@/components/ui/dialog';
|
||||
// import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
||||
const BASE_URL = apiConfig.service_customer;
|
||||
@ -89,9 +91,9 @@ const ManageGroups = () => {
|
||||
|
||||
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!`)
|
||||
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);
|
||||
};
|
||||
@ -134,7 +136,7 @@ const ManageGroups = () => {
|
||||
description: formData.description,
|
||||
created_at: new Date()
|
||||
});
|
||||
toast.success(`Success create group`)
|
||||
toast.success(`Success create group`);
|
||||
} else if (dialogType === 'update') {
|
||||
await axios.put(`${BASE_URL}/groups/update/${formData.id}`, {
|
||||
name: formData.groupName,
|
||||
@ -142,14 +144,14 @@ const ManageGroups = () => {
|
||||
description: formData.description,
|
||||
updated_at: new Date()
|
||||
});
|
||||
toast.success(`Success update group`)
|
||||
toast.success(`Success update group`);
|
||||
} else if (dialogType === 'delete') {
|
||||
await axios.delete(`${BASE_URL}/groups/delete/${formData.id}/true`);
|
||||
toast.success(`Success delete group`)
|
||||
toast.success(`Success delete group`);
|
||||
}
|
||||
} catch (error: any) {
|
||||
console.log(error);
|
||||
toast.error(error.message)
|
||||
toast.error(error.message);
|
||||
} finally {
|
||||
await fetchGroups();
|
||||
setDialogOpen(false);
|
||||
@ -162,6 +164,7 @@ const ManageGroups = () => {
|
||||
<Helmet>
|
||||
<title>TPAY | Manage Group</title>
|
||||
</Helmet>
|
||||
<Container>
|
||||
<ConfirmDialog
|
||||
open={dialogOpen}
|
||||
onClose={() => setDialogOpen(false)}
|
||||
@ -173,8 +176,7 @@ const ManageGroups = () => {
|
||||
onYes={handleYes}
|
||||
onNo={() => setDialogOpen(false)}
|
||||
/>
|
||||
<h1 className="text-xl font-medium leading-none text-gray-900 mb-3 grid gap-5 lg:gap-7.5 mx-8 w-auto">Groups</h1>
|
||||
<div className='grid gap-5 lg:gap-7.5 mx-8 w-auto'>
|
||||
<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>
|
||||
@ -188,21 +190,37 @@ const ManageGroups = () => {
|
||||
<span className="text-sm">Manage Groups</span>
|
||||
</Link>
|
||||
</Breadcrumbs>
|
||||
</div>
|
||||
<div className="w-full overflow-x-auto px-4">
|
||||
<DataTable
|
||||
{/* <div className="w-full overflow-x-auto px-4"> */}
|
||||
<div className="grid gap-5 lg:gap-7.5 mt-5">
|
||||
{/* <DataTable
|
||||
data={dataGroup}
|
||||
columns={columns}
|
||||
createData={createGroup}
|
||||
onUpdate={handleUpdate}
|
||||
onDelete={null}
|
||||
/> */}
|
||||
<DataGridProvider
|
||||
data={dataGroup}
|
||||
columns={getColumns(handleUpdate)}
|
||||
pagination={{ size: 25 }}
|
||||
toolbar={<ListToolBar createGroup={createGroup} />}
|
||||
layout={{ card: true }}
|
||||
sorting={[{ id: 'created_at', desc: 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>
|
||||
<DialogTitle>
|
||||
{dialogType === 'create' ? 'Create New Group' : 'Update Group'}
|
||||
</DialogTitle>
|
||||
<Box display="flex" justifyContent="flex-end">
|
||||
<Button
|
||||
variant="outlined"
|
||||
@ -266,6 +284,7 @@ const ManageGroups = () => {
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</Container>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user