- {"This action can't be undone."} + {t`This action can't be undone.`}
- {t`Board not found`} + {t`${isTemplate ? "Template" : "Board"} not found`}
)} -- {t`No boards`} + {t`No ${isTemplate ? "templates" : "boards"}`}
- {t`Get started by creating a new board`} + {t`Get started by creating a new ${isTemplate ? "template" : "board"}`}
diff --git a/apps/web/src/views/boards/components/NewBoardForm.tsx b/apps/web/src/views/boards/components/NewBoardForm.tsx index 80383641..648cb00f 100644 --- a/apps/web/src/views/boards/components/NewBoardForm.tsx +++ b/apps/web/src/views/boards/components/NewBoardForm.tsx @@ -1,3 +1,4 @@ +import { useRouter } from "next/navigation"; import { zodResolver } from "@hookform/resolvers/zod"; import { t } from "@lingui/core/macro"; import { useEffect, useState } from "react"; @@ -10,9 +11,10 @@ import Button from "~/components/Button"; import Input from "~/components/Input"; import Toggle from "~/components/Toggle"; import { useModal } from "~/providers/modal"; +import { usePopup } from "~/providers/popup"; import { useWorkspace } from "~/providers/workspace"; import { api } from "~/utils/api"; -import TemplateBoards, { getTemplates } from "./TemplateBoards"; +import TemplateBoards from "./TemplateBoards"; const schema = z.object({ name: z @@ -29,13 +31,25 @@ interface NewBoardInputWithTemplate { template: Template | null; } -export function NewBoardForm() { +export function NewBoardForm({ isTemplate }: { isTemplate?: boolean }) { const utils = api.useUtils(); const { closeModal } = useModal(); + const router = useRouter(); + const { showPopup } = usePopup(); const { workspace } = useWorkspace(); const [showTemplates, setShowTemplates] = useState(false); + const { data: templates } = api.board.all.useQuery( + { workspacePublicId: workspace.publicId ?? "", type: "template" }, + { enabled: !!workspace.publicId }, + ); - const templates = getTemplates(); + const formattedTemplates = templates?.map((template) => ({ + id: template.publicId, + sourceBoardPublicId: template.publicId, + name: template.name, + lists: template.lists.map((list) => list.name), + labels: template.labels.map((label) => label.name), + })); const { register, @@ -57,18 +71,39 @@ export function NewBoardForm() { const refetchBoards = () => utils.board.all.refetch(); const createBoard = api.board.create.useMutation({ - onSuccess: async () => { + onSuccess: async (board) => { + if (!board) { + showPopup({ + header: t`Error`, + message: t`Failed to create board`, + icon: "error", + }); + } else { + router.push( + `${isTemplate ? "/templates" : "/boards"}/${board.publicId}`, + ); + } closeModal(); + await refetchBoards(); }, + onError: () => { + showPopup({ + header: t`Error`, + message: t`Failed to create board`, + icon: "error", + }); + }, }); const onSubmit = (data: NewBoardInputWithTemplate) => { createBoard.mutate({ name: data.name, workspacePublicId: data.workspacePublicId, + sourceBoardPublicId: data.template?.sourceBoardPublicId ?? undefined, lists: data.template?.lists ?? [], labels: data.template?.labels ?? [], + type: isTemplate ? "template" : "regular", }); }; @@ -82,7 +117,7 @@ export function NewBoardForm() {