4658b2961c
* feat: add ticket numbers to cards with workspace prefix - Add cardNumber to cards - Add cardPrefix/cardCounter to workspace - Populate initial prefixes and numbers via new migration - Introduce generateWorkspacePrefix util and export it - Include cardNumber in card-related API responses and search results - Render and display tickets as PREFIX-NUMBER in UI - Update Card component to accept ticketNumber - Update CardModal and board cards to show number when available - Add cardNumber to CommandPalette search results type * feat: regen migration * feat: enhance card and workspace schemas with cardNumber and indexing - Updated the card repository to allocate card numbers atomically per workspace. - Modified the card schema to include a cardNumber field and added an index on listId and cardNumber for improved query performance. - Enhanced the workspace schema to include an index on cardPrefix for optimized lookups. - Adjusted the migration journal to reflect the new schema changes and their timestamps. - Updated the regex in workspace repository to allow alphanumeric prefixes in ticket IDs. --------- Co-authored-by: Henry <henry_ball@hotmail.co.uk>
544 lines
19 KiB
TypeScript
544 lines
19 KiB
TypeScript
import { t } from "@lingui/core/macro";
|
|
import { Trans } from "@lingui/react/macro";
|
|
import { format } from "date-fns";
|
|
import { useEffect, useState } from "react";
|
|
import { useForm } from "react-hook-form";
|
|
import {
|
|
HiOutlineBarsArrowDown,
|
|
HiOutlineBarsArrowUp,
|
|
HiXMark,
|
|
} from "react-icons/hi2";
|
|
|
|
import type { NewCardInput } from "@kan/api/types";
|
|
import { generateUID } from "@kan/shared/utils";
|
|
|
|
import type { WorkspaceMember } from "~/components/Editor";
|
|
import Avatar from "~/components/Avatar";
|
|
import Button from "~/components/Button";
|
|
import CheckboxDropdown from "~/components/CheckboxDropdown";
|
|
import DateSelector from "~/components/DateSelector";
|
|
import Editor from "~/components/Editor";
|
|
import Input from "~/components/Input";
|
|
import LabelIcon from "~/components/LabelIcon";
|
|
import Toggle from "~/components/Toggle";
|
|
import { useModalFormState } from "~/hooks/useModalFormState";
|
|
import { useModal } from "~/providers/modal";
|
|
import { usePopup } from "~/providers/popup";
|
|
import { useWorkspace } from "~/providers/workspace";
|
|
import { api } from "~/utils/api";
|
|
import { formatMemberDisplayName, getAvatarUrl } from "~/utils/helpers";
|
|
|
|
type NewCardFormInput = NewCardInput & {
|
|
isCreateAnotherEnabled: boolean;
|
|
dueDate?: Date | null;
|
|
};
|
|
|
|
interface QueryParams {
|
|
boardPublicId: string;
|
|
members: string[];
|
|
labels: string[];
|
|
lists: string[];
|
|
}
|
|
|
|
interface NewCardFormProps {
|
|
isTemplate: boolean;
|
|
boardPublicId: string;
|
|
listPublicId: string;
|
|
queryParams: QueryParams;
|
|
}
|
|
|
|
export function NewCardForm({
|
|
isTemplate,
|
|
boardPublicId,
|
|
listPublicId,
|
|
queryParams,
|
|
}: NewCardFormProps) {
|
|
const { showPopup } = usePopup();
|
|
const { workspace } = useWorkspace();
|
|
const { closeModal, openModal, modalStates, clearModalState } = useModal();
|
|
|
|
const utils = api.useUtils();
|
|
|
|
// persists the form values
|
|
const { formState, saveFormState } = useModalFormState<NewCardFormInput>({
|
|
modalType: "NEW_CARD",
|
|
initialValues: {
|
|
title: "",
|
|
description: "",
|
|
listPublicId,
|
|
labelPublicIds: [],
|
|
memberPublicIds: [],
|
|
isCreateAnotherEnabled: false,
|
|
position: "start",
|
|
dueDate: null,
|
|
},
|
|
resetOnClose: true,
|
|
});
|
|
|
|
const { register, handleSubmit, reset, setValue, watch } =
|
|
useForm<NewCardFormInput>({
|
|
values: formState,
|
|
});
|
|
|
|
const labelPublicIds = watch("labelPublicIds") || [];
|
|
const memberPublicIds = watch("memberPublicIds") || [];
|
|
const isCreateAnotherEnabled = watch("isCreateAnotherEnabled");
|
|
const position = watch("position");
|
|
const title = watch("title");
|
|
const description = watch("description");
|
|
const dueDate = watch("dueDate");
|
|
const [isDateSelectorOpen, setIsDateSelectorOpen] = useState(false);
|
|
|
|
// saving form state whenever form values change
|
|
useEffect(() => {
|
|
const subscription = watch((data) => {
|
|
saveFormState(data as NewCardFormInput);
|
|
});
|
|
return () => subscription.unsubscribe();
|
|
}, [watch, saveFormState]);
|
|
|
|
const { data: boardData } = api.board.byId.useQuery(queryParams, {
|
|
enabled: !!boardPublicId,
|
|
});
|
|
|
|
// this adds the new created label to selected labels
|
|
useEffect(() => {
|
|
const newLabelId = modalStates.NEW_LABEL_CREATED;
|
|
if (newLabelId !== undefined && !labelPublicIds.includes(newLabelId)) {
|
|
setValue("labelPublicIds", [...labelPublicIds, newLabelId]);
|
|
}
|
|
}, [modalStates, labelPublicIds]);
|
|
|
|
// this removes the deleted label from selected labels if it is selected
|
|
useEffect(() => {
|
|
if (boardData?.labels) {
|
|
const availableLabelIds = boardData.labels.map((label) => label.publicId);
|
|
const newLabelId = modalStates.NEW_LABEL_CREATED;
|
|
|
|
if (newLabelId && availableLabelIds.includes(newLabelId)) {
|
|
clearModalState("NEW_LABEL_CREATED");
|
|
}
|
|
|
|
const validLabelIds = labelPublicIds.filter(
|
|
(id) => availableLabelIds.includes(id) || id === newLabelId,
|
|
);
|
|
|
|
if (validLabelIds.length !== labelPublicIds.length) {
|
|
setValue("labelPublicIds", validLabelIds);
|
|
}
|
|
}
|
|
}, [boardData?.labels, labelPublicIds, modalStates.NEW_LABEL_CREATED]);
|
|
|
|
const createCard = api.card.create.useMutation({
|
|
onMutate: async (args) => {
|
|
await utils.board.byId.cancel();
|
|
|
|
const currentState = utils.board.byId.getData(queryParams);
|
|
|
|
utils.board.byId.setData(queryParams, (oldBoard) => {
|
|
if (!oldBoard) return oldBoard;
|
|
|
|
const updatedLists = oldBoard.lists.map((list) => {
|
|
if (list.publicId === listPublicId) {
|
|
const newCard = {
|
|
publicId: `PLACEHOLDER_${generateUID()}`,
|
|
title: args.title,
|
|
listId: 2,
|
|
description: "",
|
|
dueDate: args.dueDate ?? null,
|
|
cardNumber: null,
|
|
comments: [],
|
|
checklists: [],
|
|
attachments: [],
|
|
labels: oldBoard.labels.filter((label) =>
|
|
args.labelPublicIds.includes(label.publicId),
|
|
),
|
|
members:
|
|
oldBoard.workspace.members
|
|
.filter((member) =>
|
|
args.memberPublicIds.includes(member.publicId),
|
|
)
|
|
.map((member) => ({
|
|
...member,
|
|
deletedAt: null,
|
|
})) ?? [],
|
|
comments: [],
|
|
checklists: [],
|
|
attachments: [],
|
|
_filteredLabels: labelPublicIds.map((id) => ({ publicId: id })),
|
|
_filteredMembers: memberPublicIds.map((id) => ({ publicId: id })),
|
|
index: position === "start" ? 0 : list.cards.length,
|
|
};
|
|
|
|
const updatedCards =
|
|
position === "start"
|
|
? [newCard, ...list.cards]
|
|
: [...list.cards, newCard];
|
|
return { ...list, cards: updatedCards };
|
|
}
|
|
return list;
|
|
});
|
|
|
|
return { ...oldBoard, lists: updatedLists };
|
|
});
|
|
|
|
return { previousState: currentState };
|
|
},
|
|
onError: (error, _newList, context) => {
|
|
utils.board.byId.setData(queryParams, context?.previousState);
|
|
showPopup({
|
|
header: t`Unable to create card`,
|
|
message: error.data?.zodError?.fieldErrors.title?.[0]
|
|
? `${error.data.zodError.fieldErrors.title[0].replace("String", "Title")}`
|
|
: t`Please try again later, or contact customer support.`,
|
|
icon: "error",
|
|
});
|
|
},
|
|
onSuccess: async () => {
|
|
const isCreateAnotherEnabled = watch("isCreateAnotherEnabled");
|
|
if (!isCreateAnotherEnabled) {
|
|
// close modal (state will auto-clear due to resetOnClose: true)
|
|
closeModal();
|
|
} else {
|
|
// reset form for creating another card
|
|
const newFormState = {
|
|
title: "",
|
|
description: "",
|
|
listPublicId: watch("listPublicId"),
|
|
labelPublicIds: [],
|
|
memberPublicIds: [],
|
|
isCreateAnotherEnabled,
|
|
position,
|
|
dueDate: null,
|
|
};
|
|
reset(newFormState);
|
|
saveFormState(newFormState);
|
|
}
|
|
await utils.board.byId.invalidate(queryParams);
|
|
},
|
|
});
|
|
|
|
useEffect(() => {
|
|
const titleElement: HTMLElement | null =
|
|
document.querySelector<HTMLElement>("#title");
|
|
if (titleElement) titleElement.focus();
|
|
}, []);
|
|
|
|
const formattedLabels =
|
|
boardData?.labels.map((label) => ({
|
|
key: label.publicId,
|
|
value: label.name,
|
|
leftIcon: <LabelIcon colourCode={label.colourCode} />,
|
|
selected: labelPublicIds.includes(label.publicId),
|
|
})) ?? [];
|
|
|
|
const formattedLists =
|
|
boardData?.lists.map((list) => ({
|
|
key: list.publicId,
|
|
value: list.name,
|
|
selected: list.publicId === watch("listPublicId"),
|
|
})) ?? [];
|
|
|
|
const formattedMembers =
|
|
boardData?.workspace.members.map((member) => ({
|
|
key: member.publicId,
|
|
value: formatMemberDisplayName(
|
|
member.user?.name ?? null,
|
|
member.user?.email ?? member.email,
|
|
),
|
|
selected: memberPublicIds.includes(member.publicId),
|
|
leftIcon: (
|
|
<Avatar
|
|
size="xs"
|
|
name={member.user?.name ?? ""}
|
|
imageUrl={
|
|
member.user?.image ? getAvatarUrl(member.user.image) : undefined
|
|
}
|
|
email={member.user?.email ?? member.email}
|
|
/>
|
|
),
|
|
})) ?? [];
|
|
|
|
const onSubmit = (data: NewCardFormInput) => {
|
|
createCard.mutate({
|
|
title: data.title,
|
|
description: data.description,
|
|
listPublicId: data.listPublicId,
|
|
labelPublicIds: data.labelPublicIds,
|
|
memberPublicIds: data.memberPublicIds,
|
|
position: data.position,
|
|
dueDate: data.dueDate ?? null,
|
|
});
|
|
};
|
|
|
|
const handleToggleCreateAnother = (): void => {
|
|
setValue("isCreateAnotherEnabled", !isCreateAnotherEnabled);
|
|
};
|
|
|
|
const handleSelectList = (listPublicId: string): void => {
|
|
setValue("listPublicId", listPublicId);
|
|
};
|
|
|
|
const handleSelectMembers = (memberPublicId: string): void => {
|
|
const currentIndex = memberPublicIds.indexOf(memberPublicId);
|
|
if (currentIndex === -1) {
|
|
setValue("memberPublicIds", [...memberPublicIds, memberPublicId]);
|
|
} else {
|
|
const newMemberPublicIds = [...memberPublicIds];
|
|
newMemberPublicIds.splice(currentIndex, 1);
|
|
setValue("memberPublicIds", newMemberPublicIds);
|
|
}
|
|
};
|
|
|
|
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 (
|
|
<form onSubmit={handleSubmit(onSubmit)}>
|
|
<div className="px-5 pt-5">
|
|
<div className="flex w-full items-center justify-between pb-5">
|
|
<h2 className="text-sm font-bold text-neutral-900 dark:text-dark-1000">
|
|
{t`New card`}
|
|
</h2>
|
|
<button
|
|
type="button"
|
|
className="rounded p-1 hover:bg-light-200 focus:outline-none dark:hover:bg-dark-300"
|
|
onClick={(e) => {
|
|
closeModal();
|
|
e.preventDefault();
|
|
}}
|
|
>
|
|
<HiXMark size={18} className="text-light-900 dark:text-dark-900" />
|
|
</button>
|
|
</div>
|
|
|
|
<div>
|
|
<Input
|
|
id="title"
|
|
placeholder={t`Card title`}
|
|
{...register("title")}
|
|
onKeyDown={async (e) => {
|
|
if (e.key === "Enter") {
|
|
e.preventDefault();
|
|
await handleSubmit(onSubmit)();
|
|
}
|
|
}}
|
|
/>
|
|
</div>
|
|
<div className="mt-2">
|
|
<div className="block max-h-48 min-h-24 w-full overflow-y-auto rounded-md border-0 bg-dark-300 bg-white/5 px-3 py-2 text-sm shadow-sm ring-1 ring-inset ring-light-600 focus-within:ring-2 focus-within:ring-inset focus-within:ring-light-700 dark:ring-dark-700 dark:focus-within:ring-dark-700 sm:leading-6">
|
|
<Editor
|
|
content={description}
|
|
onChange={(value) => {
|
|
setValue("description", value);
|
|
saveFormState({ ...formState, description: value });
|
|
}}
|
|
workspaceMembers={
|
|
boardData?.workspace.members.map(
|
|
(member): WorkspaceMember => ({
|
|
publicId: member.publicId,
|
|
email: member.email,
|
|
user: member.user
|
|
? {
|
|
id: member.publicId,
|
|
name: member.user.name,
|
|
image: member.user.image ?? null,
|
|
}
|
|
: null,
|
|
}),
|
|
) ?? []
|
|
}
|
|
enableYouTubeEmbed={false}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="mt-2 flex space-x-1">
|
|
<div className="w-fit">
|
|
<CheckboxDropdown
|
|
items={formattedLists}
|
|
handleSelect={(_groupKey, item) => handleSelectList(item.key)}
|
|
>
|
|
<div className="flex h-full w-full items-center rounded-[5px] border-[1px] border-light-600 bg-light-200 px-2 py-1 text-left text-xs text-light-800 hover:bg-light-300 dark:border-dark-600 dark:bg-dark-400 dark:text-dark-1000 dark:hover:bg-dark-500">
|
|
{selectedList?.value}
|
|
</div>
|
|
</CheckboxDropdown>
|
|
</div>
|
|
{!isTemplate && (
|
|
<div className="w-fit">
|
|
<CheckboxDropdown
|
|
items={formattedMembers}
|
|
handleSelect={(_groupKey, item) =>
|
|
handleSelectMembers(item.key)
|
|
}
|
|
>
|
|
<div className="flex h-full w-full items-center rounded-[5px] border-[1px] border-light-600 bg-light-200 px-2 py-1 text-left text-xs text-light-800 hover:bg-light-300 dark:border-dark-600 dark:bg-dark-400 dark:text-dark-1000 dark:hover:bg-dark-500">
|
|
{!memberPublicIds.length ? (
|
|
t`Members`
|
|
) : (
|
|
<div className="flex -space-x-1 overflow-hidden">
|
|
{memberPublicIds.map((memberPublicId) => {
|
|
const member = formattedMembers.find(
|
|
(member) => member.key === memberPublicId,
|
|
);
|
|
|
|
return (
|
|
<span
|
|
key={member?.key}
|
|
className="inline-flex h-4 w-4 items-center justify-center rounded-full bg-gray-400 ring-1 ring-light-200 dark:ring-dark-500"
|
|
>
|
|
<span className="text-[8px] font-medium leading-none text-white">
|
|
{member?.value
|
|
.split(" ")
|
|
.map((namePart) =>
|
|
namePart.charAt(0).toUpperCase(),
|
|
)
|
|
.join("")}
|
|
</span>
|
|
</span>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</CheckboxDropdown>
|
|
</div>
|
|
)}
|
|
<div className="w-fit">
|
|
<CheckboxDropdown
|
|
items={formattedLabels}
|
|
handleSelect={(_groupKey, item) => handleSelectLabels(item.key)}
|
|
handleEdit={(labelPublicId) =>
|
|
openModal("EDIT_LABEL", labelPublicId)
|
|
}
|
|
handleCreate={() => openModal("NEW_LABEL")}
|
|
createNewItemLabel={t`Create new label`}
|
|
>
|
|
<div className="flex h-full w-full items-center rounded-[5px] border-[1px] border-light-600 bg-light-200 px-2 py-1 text-left text-xs text-light-800 hover:bg-light-300 dark:border-dark-600 dark:bg-dark-400 dark:text-dark-1000 dark:hover:bg-dark-500">
|
|
{!labelPublicIds.length ? (
|
|
t`Labels`
|
|
) : (
|
|
<>
|
|
<div
|
|
className={
|
|
labelPublicIds.length > 1
|
|
? "flex -space-x-[2px] overflow-hidden"
|
|
: "flex items-center"
|
|
}
|
|
>
|
|
{labelPublicIds.map((labelPublicId) => {
|
|
const label = boardData?.labels.find(
|
|
(label) => label.publicId === labelPublicId,
|
|
);
|
|
|
|
return (
|
|
<>
|
|
<svg
|
|
fill={label?.colourCode ?? "#3730a3"}
|
|
className="h-2 w-2"
|
|
viewBox="0 0 6 6"
|
|
aria-hidden="true"
|
|
>
|
|
<circle cx={3} cy={3} r={3} />
|
|
</svg>
|
|
{labelPublicIds.length === 1 && (
|
|
<div className="ml-1">{label?.name}</div>
|
|
)}
|
|
</>
|
|
);
|
|
})}
|
|
</div>
|
|
{labelPublicIds.length > 1 && (
|
|
<div className="ml-1">
|
|
<Trans>{`${labelPublicIds.length} labels`}</Trans>
|
|
</div>
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
</CheckboxDropdown>
|
|
</div>
|
|
<div className="relative w-fit">
|
|
<button
|
|
type="button"
|
|
onClick={() => setIsDateSelectorOpen(!isDateSelectorOpen)}
|
|
className="flex h-full w-full items-center rounded-[5px] border-[1px] border-light-600 bg-light-200 px-2 py-1 text-left text-xs text-light-800 hover:bg-light-300 dark:border-dark-600 dark:bg-dark-400 dark:text-dark-1000 dark:hover:bg-dark-500"
|
|
>
|
|
{dueDate ? (
|
|
<span>{format(dueDate, "MMM d, yyyy")}</span>
|
|
) : (
|
|
<>{t`Due date`}</>
|
|
)}
|
|
</button>
|
|
{isDateSelectorOpen && (
|
|
<>
|
|
<div
|
|
className="fixed inset-0 z-10"
|
|
onClick={() => setIsDateSelectorOpen(false)}
|
|
/>
|
|
<div
|
|
className="absolute left-0 top-full z-20 mt-2 rounded-md border border-light-200 bg-light-50 shadow-lg dark:border-dark-200 dark:bg-dark-100"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
}}
|
|
onMouseDown={(e) => {
|
|
e.stopPropagation();
|
|
}}
|
|
>
|
|
<DateSelector
|
|
selectedDate={dueDate ?? undefined}
|
|
onDateSelect={(date) => {
|
|
setValue("dueDate", date ?? null);
|
|
setIsDateSelectorOpen(false);
|
|
}}
|
|
weekStartsOn={workspace.weekStartDay}
|
|
/>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
<button
|
|
onClick={(e) => {
|
|
e.preventDefault();
|
|
setValue("position", position === "start" ? "end" : "start");
|
|
}}
|
|
className="flex h-auto items-center rounded-[5px] border-[1px] border-light-600 bg-light-200 px-1.5 py-1 text-left text-xs text-light-800 hover:bg-light-300 focus-visible:outline-none dark:border-dark-600 dark:bg-dark-400 dark:text-dark-1000 dark:hover:bg-dark-500"
|
|
>
|
|
{position === "start" ? (
|
|
<HiOutlineBarsArrowUp size={14} />
|
|
) : (
|
|
<HiOutlineBarsArrowDown size={14} />
|
|
)}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-5 flex items-center justify-end space-x-4 border-t border-light-600 px-5 pb-5 pt-5 dark:border-dark-600">
|
|
<Toggle
|
|
label={t`Create another`}
|
|
isChecked={isCreateAnotherEnabled}
|
|
onChange={handleToggleCreateAnother}
|
|
/>
|
|
|
|
<div>
|
|
<Button
|
|
type="submit"
|
|
disabled={title.length === 0 || createCard.isPending}
|
|
>
|
|
{t`Create card`}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
);
|
|
}
|