diff --git a/src/app/(main)/boards/BoardDeleteButton.tsx b/src/app/(main)/boards/BoardDeleteButton.tsx new file mode 100644 index 000000000..e8ae8d3fd --- /dev/null +++ b/src/app/(main)/boards/BoardDeleteButton.tsx @@ -0,0 +1,46 @@ +import { ConfirmationForm } from '@/components/common/ConfirmationForm'; +import { useDeleteQuery, useMessages } from '@/components/hooks'; +import { Trash } from '@/components/icons'; +import { DialogButton } from '@/components/input/DialogButton'; + +export function BoardDeleteButton({ + boardId, + name, + onSave, +}: { + boardId: string; + name: string; + onSave?: () => void; +}) { + const { t, labels, messages, getErrorMessage } = useMessages(); + const { mutateAsync, isPending, error, touch } = useDeleteQuery(`/boards/${boardId}`); + + const handleConfirm = async (close: () => void) => { + await mutateAsync(null, { + onSuccess: () => { + touch('boards'); + onSave?.(); + close(); + }, + }); + }; + + return ( + } title={t(labels.confirm)} variant="quiet" width="400px"> + {({ close }) => ( + {chunks}, + })} + isLoading={isPending} + error={getErrorMessage(error)} + onConfirm={handleConfirm.bind(null, close)} + onClose={close} + buttonLabel={t(labels.delete)} + buttonVariant="danger" + /> + )} + + ); +} diff --git a/src/app/(main)/boards/BoardEditButton.tsx b/src/app/(main)/boards/BoardEditButton.tsx new file mode 100644 index 000000000..a4bdd2863 --- /dev/null +++ b/src/app/(main)/boards/BoardEditButton.tsx @@ -0,0 +1,22 @@ +import { Icon } from '@umami/react-zen'; +import { LinkButton } from '@/components/common/LinkButton'; +import { useMessages, useNavigation } from '@/components/hooks'; +import { Edit } from '@/components/icons'; + +export function BoardEditButton({ boardId }: { boardId: string }) { + const { t, labels } = useMessages(); + const { renderUrl } = useNavigation(); + + return ( + + + + + + ); +} diff --git a/src/app/(main)/boards/BoardsTable.tsx b/src/app/(main)/boards/BoardsTable.tsx index d750db9e5..c68aab544 100644 --- a/src/app/(main)/boards/BoardsTable.tsx +++ b/src/app/(main)/boards/BoardsTable.tsx @@ -1,18 +1,19 @@ import { DataColumn, DataTable, type DataTableProps, Row } from '@umami/react-zen'; -import Board from 'next/link'; +import Link from 'next/link'; import { DateDistance } from '@/components/common/DateDistance'; -import { useMessages, useNavigation, useSlug } from '@/components/hooks'; +import { useMessages, useNavigation } from '@/components/hooks'; +import { BoardDeleteButton } from './BoardDeleteButton'; +import { BoardEditButton } from './BoardEditButton'; export function BoardsTable(props: DataTableProps) { const { t, labels } = useMessages(); - const { websiteId, renderUrl } = useNavigation(); - const { getSlugUrl } = useSlug('link'); + const { renderUrl } = useNavigation(); return ( {({ id, name }: any) => { - return {name}; + return {name}; }} @@ -21,7 +22,12 @@ export function BoardsTable(props: DataTableProps) { {({ id, name }: any) => { - return ; + return ( + + + + + ); }}