refresh button in clients page

This commit is contained in:
Pallavi Kumari
2025-10-04 12:20:46 +05:30
parent e7828a43fa
commit cfa82b51fb
2 changed files with 55 additions and 27 deletions

View File

@@ -8,13 +8,17 @@ import { DataTable } from "@app/components/ui/data-table";
interface DataTableProps<TData, TValue> { interface DataTableProps<TData, TValue> {
columns: ColumnDef<TData, TValue>[]; columns: ColumnDef<TData, TValue>[];
data: TData[]; data: TData[];
onRefresh?: () => void;
isRefreshing?: boolean;
addClient?: () => void; addClient?: () => void;
} }
export function ClientsDataTable<TData, TValue>({ export function ClientsDataTable<TData, TValue>({
columns, columns,
data, data,
addClient addClient,
onRefresh,
isRefreshing
}: DataTableProps<TData, TValue>) { }: DataTableProps<TData, TValue>) {
return ( return (
<DataTable <DataTable
@@ -25,6 +29,8 @@ export function ClientsDataTable<TData, TValue>({
searchPlaceholder="Search clients..." searchPlaceholder="Search clients..."
searchColumn="name" searchColumn="name"
onAdd={addClient} onAdd={addClient}
onRefresh={onRefresh}
isRefreshing={isRefreshing}
addButtonText="Add Client" addButtonText="Add Client"
/> />
); );

View File

@@ -25,6 +25,7 @@ import { toast } from "@app/hooks/useToast";
import { formatAxiosError } from "@app/lib/api"; import { formatAxiosError } from "@app/lib/api";
import { createApiClient } from "@app/lib/api"; import { createApiClient } from "@app/lib/api";
import { useEnvContext } from "@app/hooks/useEnvContext"; import { useEnvContext } from "@app/hooks/useEnvContext";
import { useTranslations } from "next-intl";
export type ClientRow = { export type ClientRow = {
id: number; id: number;
@@ -53,6 +54,25 @@ export default function ClientsTable({ clients, orgId }: ClientTableProps) {
const [rows, setRows] = useState<ClientRow[]>(clients); const [rows, setRows] = useState<ClientRow[]>(clients);
const api = createApiClient(useEnvContext()); const api = createApiClient(useEnvContext());
const [isRefreshing, setIsRefreshing] = useState(false);
const t = useTranslations();
const refreshData = async () => {
console.log("Data refreshed");
setIsRefreshing(true);
try {
await new Promise((resolve) => setTimeout(resolve, 200));
router.refresh();
} catch (error) {
toast({
title: t("error"),
description: t("refreshError"),
variant: "destructive"
});
} finally {
setIsRefreshing(false);
}
};
const deleteClient = (clientId: number) => { const deleteClient = (clientId: number) => {
api.delete(`/client/${clientId}`) api.delete(`/client/${clientId}`)
@@ -207,32 +227,32 @@ export default function ClientsTable({ clients, orgId }: ClientTableProps) {
return ( return (
<div className="flex items-center justify-end"> <div className="flex items-center justify-end">
<DropdownMenu> <DropdownMenu>
<DropdownMenuTrigger asChild> <DropdownMenuTrigger asChild>
<Button variant="ghost" className="h-8 w-8 p-0"> <Button variant="ghost" className="h-8 w-8 p-0">
<span className="sr-only">Open menu</span> <span className="sr-only">Open menu</span>
<MoreHorizontal className="h-4 w-4" /> <MoreHorizontal className="h-4 w-4" />
</Button> </Button>
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent align="end"> <DropdownMenuContent align="end">
{/* <Link */} {/* <Link */}
{/* className="block w-full" */} {/* className="block w-full" */}
{/* href={`/${clientRow.orgId}/settings/sites/${clientRow.nice}`} */} {/* href={`/${clientRow.orgId}/settings/sites/${clientRow.nice}`} */}
{/* > */} {/* > */}
{/* <DropdownMenuItem> */} {/* <DropdownMenuItem> */}
{/* View settings */} {/* View settings */}
{/* </DropdownMenuItem> */} {/* </DropdownMenuItem> */}
{/* </Link> */} {/* </Link> */}
<DropdownMenuItem <DropdownMenuItem
onClick={() => { onClick={() => {
setSelectedClient(clientRow); setSelectedClient(clientRow);
setIsDeleteModalOpen(true); setIsDeleteModalOpen(true);
}} }}
> >
<span className="text-red-500">Delete</span> <span className="text-red-500">Delete</span>
</DropdownMenuItem> </DropdownMenuItem>
</DropdownMenuContent> </DropdownMenuContent>
</DropdownMenu> </DropdownMenu>
<Link <Link
href={`/${clientRow.orgId}/settings/clients/${clientRow.id}`} href={`/${clientRow.orgId}/settings/clients/${clientRow.id}`}
> >
@@ -292,6 +312,8 @@ export default function ClientsTable({ clients, orgId }: ClientTableProps) {
addClient={() => { addClient={() => {
router.push(`/${orgId}/settings/clients/create`); router.push(`/${orgId}/settings/clients/create`);
}} }}
onRefresh={refreshData}
isRefreshing={isRefreshing}
/> />
</> </>
); );