refresh button for role, user, share-link, invitation table

This commit is contained in:
Pallavi Kumari
2025-10-04 13:31:48 +05:30
parent ccd2773331
commit b1e212721e
9 changed files with 127 additions and 17 deletions

View File

@@ -9,11 +9,15 @@ import { useTranslations } from 'next-intl';
interface DataTableProps<TData, TValue> {
columns: ColumnDef<TData, TValue>[];
data: TData[];
onRefresh?: () => void;
isRefreshing?: boolean;
}
export function InvitationsDataTable<TData, TValue>({
columns,
data
data,
onRefresh,
isRefreshing
}: DataTableProps<TData, TValue>) {
const t = useTranslations();
@@ -26,6 +30,8 @@ export function InvitationsDataTable<TData, TValue>({
title={t('invite')}
searchPlaceholder={t('inviteSearch')}
searchColumn="email"
onRefresh={onRefresh}
isRefreshing={isRefreshing}
/>
);
}

View File

@@ -19,6 +19,7 @@ import { createApiClient } from "@app/lib/api";
import { useEnvContext } from "@app/hooks/useEnvContext";
import { useTranslations } from "next-intl";
import moment from "moment";
import { useRouter } from "next/navigation";
export type InvitationRow = {
id: string;
@@ -45,6 +46,25 @@ export default function InvitationsTable({
const api = createApiClient(useEnvContext());
const { org } = useOrgContext();
const router = useRouter();
const [isRefreshing, setIsRefreshing] = useState(false);
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 columns: ColumnDef<InvitationRow>[] = [
{
@@ -185,7 +205,12 @@ export default function InvitationsTable({
}}
/>
<InvitationsDataTable columns={columns} data={invitations} />
<InvitationsDataTable
columns={columns}
data={invitations}
onRefresh={refreshData}
isRefreshing={isRefreshing}
/>
</>
);
}

View File

@@ -773,18 +773,16 @@ export default function ResourcesTable({
</div>
<div className="flex items-center gap-2 sm:justify-end">
<div>
{refreshData && (
<Button
variant="outline"
onClick={refreshData}
disabled={isRefreshing}
>
<RefreshCw
className={`mr-2 h-4 w-4 ${isRefreshing ? "animate-spin" : ""}`}
/>
{t("refresh")}
</Button>
)}
<Button
variant="outline"
onClick={refreshData}
disabled={isRefreshing}
>
<RefreshCw
className={`mr-2 h-4 w-4 ${isRefreshing ? "animate-spin" : ""}`}
/>
{t("refresh")}
</Button>
</div>
<div>
{getActionButton()}

View File

@@ -10,12 +10,16 @@ interface DataTableProps<TData, TValue> {
columns: ColumnDef<TData, TValue>[];
data: TData[];
createRole?: () => void;
onRefresh?: () => void;
isRefreshing?: boolean;
}
export function RolesDataTable<TData, TValue>({
columns,
data,
createRole
createRole,
onRefresh,
isRefreshing
}: DataTableProps<TData, TValue>) {
const t = useTranslations();
@@ -29,6 +33,8 @@ export function RolesDataTable<TData, TValue>({
searchPlaceholder={t('accessRolesSearch')}
searchColumn="name"
onAdd={createRole}
onRefresh={onRefresh}
isRefreshing={isRefreshing}
addButtonText={t('accessRolesAdd')}
/>
);

View File

@@ -20,6 +20,7 @@ import DeleteRoleForm from "@app/components/DeleteRoleForm";
import { createApiClient } from "@app/lib/api";
import { useEnvContext } from "@app/hooks/useEnvContext";
import { useTranslations } from "next-intl";
import { useRouter } from "next/navigation";
export type RoleRow = Role;
@@ -30,6 +31,7 @@ type RolesTableProps = {
export default function UsersTable({ roles: r }: RolesTableProps) {
const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
const router = useRouter();
const [roles, setRoles] = useState<RoleRow[]>(r);
@@ -40,6 +42,24 @@ export default function UsersTable({ roles: r }: RolesTableProps) {
const { org } = useOrgContext();
const t = useTranslations();
const [isRefreshing, setIsRefreshing] = useState(false);
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 columns: ColumnDef<RoleRow>[] = [
{
@@ -116,6 +136,8 @@ export default function UsersTable({ roles: r }: RolesTableProps) {
createRole={() => {
setIsCreateModalOpen(true);
}}
onRefresh={refreshData}
isRefreshing={isRefreshing}
/>
</>
);

View File

@@ -10,12 +10,16 @@ interface DataTableProps<TData, TValue> {
columns: ColumnDef<TData, TValue>[];
data: TData[];
createShareLink?: () => void;
onRefresh?: () => void;
isRefreshing?: boolean;
}
export function ShareLinksDataTable<TData, TValue>({
columns,
data,
createShareLink
createShareLink,
onRefresh,
isRefreshing
}: DataTableProps<TData, TValue>) {
const t = useTranslations();
@@ -29,6 +33,8 @@ export function ShareLinksDataTable<TData, TValue>({
searchPlaceholder={t('shareSearch')}
searchColumn="name"
onAdd={createShareLink}
onRefresh={onRefresh}
isRefreshing={isRefreshing}
addButtonText={t('shareCreate')}
/>
);

View File

@@ -61,6 +61,25 @@ export default function ShareLinksTable({
const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
const [rows, setRows] = useState<ShareLinkRow[]>(shareLinks);
const [isRefreshing, setIsRefreshing] = useState(false);
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);
}
};
function formatLink(link: string) {
return link.substring(0, 20) + "..." + link.substring(link.length - 20);
}
@@ -292,6 +311,8 @@ export default function ShareLinksTable({
createShareLink={() => {
setIsCreateModalOpen(true);
}}
onRefresh={refreshData}
isRefreshing={isRefreshing}
/>
</>
);

View File

@@ -10,12 +10,16 @@ interface DataTableProps<TData, TValue> {
columns: ColumnDef<TData, TValue>[];
data: TData[];
inviteUser?: () => void;
onRefresh?: () => void;
isRefreshing?: boolean;
}
export function UsersDataTable<TData, TValue>({
columns,
data,
inviteUser
inviteUser,
onRefresh,
isRefreshing
}: DataTableProps<TData, TValue>) {
const t = useTranslations();
@@ -29,6 +33,8 @@ export function UsersDataTable<TData, TValue>({
searchPlaceholder={t('accessUsersSearch')}
searchColumn="email"
onAdd={inviteUser}
onRefresh={onRefresh}
isRefreshing={isRefreshing}
addButtonText={t('accessUserCreate')}
/>
);

View File

@@ -51,6 +51,24 @@ export default function UsersTable({ users: u }: UsersTableProps) {
const { user, updateUser } = useUserContext();
const { org } = useOrgContext();
const t = useTranslations();
const [isRefreshing, setIsRefreshing] = useState(false);
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 columns: ColumnDef<UserRow>[] = [
{
@@ -290,6 +308,8 @@ export default function UsersTable({ users: u }: UsersTableProps) {
`/${org?.org.orgId}/settings/access/users/create`
);
}}
onRefresh={refreshData}
isRefreshing={isRefreshing}
/>
</>
);