From 103b7bb750f767b9d5a4343fbc158a229f58bb7e Mon Sep 17 00:00:00 2001 From: Raja Oktafrianto Date: Mon, 21 Apr 2025 18:24:56 +0700 Subject: [PATCH] fixing refresh & sorting manage groups --- src/pages/groups/Column.tsx | 69 ++++++++++++++++++++++++++--- src/pages/groups/ListToolbar.tsx | 44 +++++++++++-------- src/pages/groups/ManageGroups.tsx | 72 +++++++++++++++++++++++-------- 3 files changed, 143 insertions(+), 42 deletions(-) diff --git a/src/pages/groups/Column.tsx b/src/pages/groups/Column.tsx index 2f6fe7f..3d1a1e0 100644 --- a/src/pages/groups/Column.tsx +++ b/src/pages/groups/Column.tsx @@ -1,5 +1,8 @@ import { KeenIcon } from '@/components'; +import { Button } from '@/components/ui/button'; import { ColumnDef } from '@tanstack/react-table'; +import { ArrowUpDown } from 'lucide-react'; +import moment from 'moment'; export type Group = { no: number; @@ -12,27 +15,81 @@ export type Group = { export const getColumns = (handleUpdate: (data: any) => void): ColumnDef[] => [ { accessorKey: 'no', - header: 'ID' + header: ({ column }) => { + return ( + + ); + } }, { accessorKey: 'created_at', - header: 'Created Date', - cell: ({ row }) => new Date(row.original.created_at).toLocaleDateString() + header: ({ column }) => { + return ( + + ); + }, + cell: ({ row }) => moment(row.original.created_at).format('YYYY-MM-DD HH:mm:ss') }, { accessorKey: 'name', - header: 'Name' + header: ({ column }) => { + return ( + + ); + } }, { accessorKey: 'status', - header: 'Status' + header: 'Status', + cell: ({ row }) => { + const isActive = row.original.status === 'Y'; + + return ( + + {isActive ? 'Active' : 'inactive'} + + ); + } }, { accessorKey: 'description', - header: 'Description' + header: ({ column }) => { + return ( + + ); + } }, { id: 'actions', + header: 'Actions', cell: ({ row }) => { const dataMembers = row.original; diff --git a/src/pages/groups/ListToolbar.tsx b/src/pages/groups/ListToolbar.tsx index 793f4c9..9d3dd1a 100644 --- a/src/pages/groups/ListToolbar.tsx +++ b/src/pages/groups/ListToolbar.tsx @@ -1,8 +1,20 @@ import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components'; import { Button } from '@/components/ui/button'; +import React, { useState } from 'react'; -const ListToolBar = ({ createGroup }: { createGroup: () => void }) => { - const { table, reload } = useDataGrid(); +interface ListToolBarProps { + createGroup: () => void; + onReload: () => void; + isReloading: boolean; +} + +const ListToolBar = ({ createGroup, onReload, isReloading }: ListToolBarProps) => { + const { table } = useDataGrid(); + const [usernameFilter, setUsernameFilter] = useState(''); + const handleUsernameChange = (e: React.ChangeEvent) => { + setUsernameFilter(e.target.value); + table.getColumn('name')?.setFilterValue(e.target.value); + }; return (
@@ -14,29 +26,25 @@ const ListToolBar = ({ createGroup }: { createGroup: () => void }) => { table.getColumn('name')?.setFilterValue(event.target.value)} + value={usernameFilter} + onChange={handleUsernameChange} + className="input input-sm w-40" /> - {/* - - */}
- -
diff --git a/src/pages/groups/ManageGroups.tsx b/src/pages/groups/ManageGroups.tsx index d03966f..32841c2 100644 --- a/src/pages/groups/ManageGroups.tsx +++ b/src/pages/groups/ManageGroups.tsx @@ -24,8 +24,10 @@ 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 { Container, 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; @@ -42,37 +44,52 @@ let initGroup = { 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(() => { + setLoading(true); fetchGroups(); + setLoading(false); }, []); - async function fetchGroups() { + async function fetchGroups(): Promise { try { let groups = await axios.get(`${BASE_URL}/groups/list`, { params: { - limit: pageSize, - page: pageIndex, + limit: 20, + page: 1, with_deleted: false, - order_field: 'name', - order_direction: 'ASC' + 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); } } @@ -127,6 +144,11 @@ const ManageGroups = () => { setDialogOpen(true); }; + const handleReload = () => { + setIsReloading(true); + fetchGroups(); + }; + const handleYes = async () => { try { if (dialogType === 'create') { @@ -153,12 +175,19 @@ const ManageGroups = () => { console.log(error); toast.error(error.message); } finally { - await fetchGroups(); setDialogOpen(false); closeDialog(); + await fetchGroups(); + setLoading(false); } }; + function setShowAddDialog(el: any) { + setIsDialogOpen(el); + } + + if (loading) return ; + return ( <> @@ -191,21 +220,28 @@ const ManageGroups = () => { {/*
*/} -
- {/* */} + +
+ {isReloading && ( +
+
+ + Refreshing data... +
+
+ )} } + toolbar={ + + } layout={{ card: true }} - sorting={[{ id: 'created_at', desc: true }]} serverSide={false} onRowSelectionChange={(selected, table: any) => { const selectedRow = table.getSelectedRowModel().rows[0];