diff --git a/src/app/(main)/settings/users/[userId]/UserWebsites.tsx b/src/app/(main)/settings/users/[userId]/UserWebsites.tsx
index 15521b17b..538d074c1 100644
--- a/src/app/(main)/settings/users/[userId]/UserWebsites.tsx
+++ b/src/app/(main)/settings/users/[userId]/UserWebsites.tsx
@@ -1,14 +1,22 @@
import WebsitesTable from '@/app/(main)/settings/websites/WebsitesTable';
import DataTable from '@/components/common/DataTable';
-import { useWebsites } from '@/components/hooks';
+import { useWebsites, useModified } from '@/components/hooks';
export function UserWebsites({ userId }) {
const queryResult = useWebsites({ userId });
-
+ const { touch } = useModified('websites');
return (
{({ data }) => (
-
+ {
+ touch();
+ }}
+ />
)}
);
diff --git a/src/app/(main)/settings/websites/WebsitesDataTable.tsx b/src/app/(main)/settings/websites/WebsitesDataTable.tsx
index 023df8573..4f8e062f4 100644
--- a/src/app/(main)/settings/websites/WebsitesDataTable.tsx
+++ b/src/app/(main)/settings/websites/WebsitesDataTable.tsx
@@ -1,8 +1,7 @@
import { ReactNode } from 'react';
import WebsitesTable from '@/app/(main)/settings/websites/WebsitesTable';
import DataTable from '@/components/common/DataTable';
-import { useWebsites } from '@/components/hooks';
-
+import { useWebsites, useModified } from '@/components/hooks';
export function WebsitesDataTable({
teamId,
allowEdit = true,
@@ -17,7 +16,7 @@ export function WebsitesDataTable({
children?: ReactNode;
}) {
const queryResult = useWebsites({ teamId });
-
+ const { touch } = useModified('websites');
return (
children}>
{({ data }) => (
@@ -27,6 +26,7 @@ export function WebsitesDataTable({
showActions={showActions}
allowEdit={allowEdit}
allowView={allowView}
+ updateChildren={() => touch()}
/>
)}
diff --git a/src/app/(main)/settings/websites/WebsitesTable.tsx b/src/app/(main)/settings/websites/WebsitesTable.tsx
index 79749b972..156e69fe4 100644
--- a/src/app/(main)/settings/websites/WebsitesTable.tsx
+++ b/src/app/(main)/settings/websites/WebsitesTable.tsx
@@ -1,8 +1,8 @@
-import { ReactNode } from 'react';
-import { Text, Icon, Icons, GridTable, GridColumn } from 'react-basics';
+import { ReactNode, useState } from 'react';
+import { Text, Icon, Icons, GridTable, GridColumn, Checkbox, Modal } from 'react-basics';
import { useMessages, useTeamUrl } from '@/components/hooks';
+import WebsiteDeleteForm from './[websiteId]/WebsiteDeleteForm';
import LinkButton from '@/components/common/LinkButton';
-
export interface WebsitesTableProps {
data: any[];
showActions?: boolean;
@@ -10,6 +10,7 @@ export interface WebsitesTableProps {
allowView?: boolean;
teamId?: string;
children?: ReactNode;
+ updateChildren?: () => void;
}
export function WebsitesTable({
@@ -18,47 +19,106 @@ export function WebsitesTable({
allowEdit,
allowView,
children,
+ updateChildren,
}: WebsitesTableProps) {
const { formatMessage, labels } = useMessages();
const { renderTeamUrl } = useTeamUrl();
+ const [deleteIds, setDeleteIds] = useState([]);
+ const [showConf, setShowConf] = useState(false);
if (!data?.length) {
return children;
}
+ const checked = (websiteId: string) => {
+ if (deleteIds.includes(websiteId)) {
+ setDeleteIds(deleteIds.filter(prev => prev != websiteId));
+ } else {
+ setDeleteIds(prev => [...prev, websiteId]);
+ }
+ };
return (
-
-
-
- {showActions && (
-
+ <>
+
+ {
+ setShowConf(true);
+ }}
+ size={'lg'}
+ >
+
+
+ ) : (
+ ''
+ )
+ }
+ >
{row => {
const { id: websiteId } = row;
-
return (
- <>
- {allowEdit && (
-
-
-
-
- {formatMessage(labels.edit)}
-
- )}
- {allowView && (
-
-
-
-
- {formatMessage(labels.view)}
-
- )}
- >
+ {
+ checked(websiteId);
+ }}
+ value={websiteId}
+ />
);
}}
+
+
+ {showActions && (
+
+ {row => {
+ const { id: websiteId } = row;
+
+ return (
+ <>
+ {allowEdit && (
+
+
+
+
+ {formatMessage(labels.edit)}
+
+ )}
+ {allowView && (
+
+
+
+
+ {formatMessage(labels.view)}
+
+ )}
+ >
+ );
+ }}
+
+ )}
+
+ {showConf && (
+
+ {
+ {
+ setShowConf(false);
+ updateChildren();
+ setDeleteIds([]);
+ }}
+ />
+ }
+
)}
-
+ >
);
}
diff --git a/src/app/(main)/settings/websites/[websiteId]/WebsiteData.tsx b/src/app/(main)/settings/websites/[websiteId]/WebsiteData.tsx
index d11f24df7..4d0210edd 100644
--- a/src/app/(main)/settings/websites/[websiteId]/WebsiteData.tsx
+++ b/src/app/(main)/settings/websites/[websiteId]/WebsiteData.tsx
@@ -78,7 +78,12 @@ export function WebsiteData({ websiteId, onSave }: { websiteId: string; onSave?:
{(close: () => void) => (
-
+
)}
diff --git a/src/app/(main)/settings/websites/[websiteId]/WebsiteDeleteForm.tsx b/src/app/(main)/settings/websites/[websiteId]/WebsiteDeleteForm.tsx
index 5eef35442..6ae804db7 100644
--- a/src/app/(main)/settings/websites/[websiteId]/WebsiteDeleteForm.tsx
+++ b/src/app/(main)/settings/websites/[websiteId]/WebsiteDeleteForm.tsx
@@ -1,21 +1,28 @@
import { useApi, useMessages } from '@/components/hooks';
import TypeConfirmationForm from '@/components/common/TypeConfirmationForm';
-const CONFIRM_VALUE = 'DELETE';
-
export function WebsiteDeleteForm({
websiteId,
+ CONFIRM_VALUE,
onSave,
onClose,
}: {
- websiteId: string;
+ websiteId: string | string[];
+ CONFIRM_VALUE: string;
onSave?: () => void;
onClose?: () => void;
}) {
const { formatMessage, labels } = useMessages();
const { del, useMutation } = useApi();
const { mutate, isPending, error } = useMutation({
- mutationFn: () => del(`/websites/${websiteId}`),
+ mutationFn: async () => {
+ if (typeof websiteId === 'string') {
+ return del(`/websites/${websiteId}`);
+ } else {
+ const ids = Array.isArray(websiteId) ? websiteId : [websiteId];
+ return Promise.all(ids.map(id => del(`/websites/${id}`)));
+ }
+ },
});
const handleConfirm = async () => {