diff --git a/src/app/boards/[...boardId]/components/NewCardForm.tsx b/src/app/boards/[...boardId]/components/NewCardForm.tsx index 96ffbfd3..ebedfa9b 100644 --- a/src/app/boards/[...boardId]/components/NewCardForm.tsx +++ b/src/app/boards/[...boardId]/components/NewCardForm.tsx @@ -14,7 +14,9 @@ import { useModal } from "~/app/providers/modal"; interface FormData { title: string; listPublicId: string; + labelPublicIds: string[]; memberPublicIds: string[]; + isCreateAnotherEnabled: boolean; } interface NewCardFormProps { @@ -29,17 +31,20 @@ export function NewCardForm({ listPublicId }: NewCardFormProps) { const utils = api.useUtils(); const { boardData } = useBoard(); const { closeModal } = useModal(); - const [isCreateAnotherEnabled, setIsCreateAnotherEnabled] = useState(false); const { register, handleSubmit, reset, setValue, watch } = useForm({ defaultValues: { title: "", listPublicId, + labelPublicIds: [], memberPublicIds: [], + isCreateAnotherEnabled: false, }, }); + const labelPublicIds = watch("labelPublicIds") || []; const memberPublicIds = watch("memberPublicIds") || []; + const isCreateAnotherEnabled = watch("isCreateAnotherEnabled"); const refetchBoard = () => utils.board.byId.refetch({ id: boardData.publicId }); @@ -49,6 +54,13 @@ export function NewCardForm({ listPublicId }: NewCardFormProps) { try { await refetchBoard(); if (!isCreateAnotherEnabled) closeModal(); + reset({ + title: "", + listPublicId: watch("listPublicId"), + labelPublicIds: [], + memberPublicIds: [], + isCreateAnotherEnabled: watch("isCreateAnotherEnabled"), + }); } catch (e) { console.log(e); } @@ -61,6 +73,13 @@ export function NewCardForm({ listPublicId }: NewCardFormProps) { if (titleElement) titleElement.focus(); }, []); + const formattedLabels = + boardData?.labels.map((label) => ({ + key: label.publicId, + value: label.name, + selected: labelPublicIds.includes(label.publicId), + })) ?? []; + const formattedLists = boardData?.lists.map((list) => ({ key: list.publicId, @@ -79,9 +98,13 @@ export function NewCardForm({ listPublicId }: NewCardFormProps) { createCard.mutate({ title: data.title, listPublicId: data.listPublicId, + labelsPublicIds: data.labelPublicIds, memberPublicIds: data.memberPublicIds, }); - reset(); + }; + + const handleToggleCreateAnother = (): void => { + setValue("isCreateAnotherEnabled", !isCreateAnotherEnabled); }; const handleSelectList = (listPublicId: string): void => { @@ -99,6 +122,17 @@ export function NewCardForm({ listPublicId }: NewCardFormProps) { } }; + const handleSelectLabels = (labelPublicId: string): void => { + const currentIndex = labelPublicIds.indexOf(labelPublicId); + if (currentIndex === -1) { + setValue("labelPublicIds", [...labelPublicIds, labelPublicId]); + } else { + const newLabelPublicIds = [...labelPublicIds]; + newLabelPublicIds.splice(currentIndex, 1); + setValue("labelPublicIds", newLabelPublicIds); + } + }; + const selectedList = formattedLists.find((item) => item.selected); return ( @@ -152,7 +186,7 @@ export function NewCardForm({ listPublicId }: NewCardFormProps) { {!memberPublicIds.length ? ( "Members" ) : ( - <> +
{memberPublicIds.map((memberPublicId) => { const member = formattedMembers.find( (member) => member.key === memberPublicId, @@ -174,6 +208,55 @@ export function NewCardForm({ listPublicId }: NewCardFormProps) { ); })} +
+ )} + + + +
+ + handleSelectLabels(list.key) + } + > +
+ {!labelPublicIds.length ? ( + "Labels" + ) : ( + <> +
1 + ? "flex -space-x-[2px] overflow-hidden" + : "flex items-center" + } + > + {labelPublicIds.map((labelPublicId) => { + const label = boardData?.labels.find( + (label) => label.publicId === labelPublicId, + ); + + return ( + <> + + {labelPublicIds.length === 1 && ( +
{label?.name}
+ )} + + ); + })} +
+ {labelPublicIds.length > 1 && ( +
{`${labelPublicIds.length} labels`}
+ )} )}
@@ -185,7 +268,7 @@ export function NewCardForm({ listPublicId }: NewCardFormProps) { Create more ({ cardId: Number(newCard.insertId), labelId: label.id })) + + await tx.insert(cardsToLabels).values(labelsInsert); + } + if (newCard.insertId && input.memberPublicIds.length) { const members = await tx.query.workspaceMembers.findMany({ where: inArray(workspaceMembers.publicId, input.memberPublicIds),