96 lines
2.8 KiB
TypeScript
96 lines
2.8 KiB
TypeScript
"use client";
|
|
|
|
import { useParams } from "next/navigation";
|
|
import { useFormik } from "formik";
|
|
import ContentEditable from "react-contenteditable";
|
|
|
|
import Dropdown from "./components/Dropdown";
|
|
import { DeleteCardConfirmation } from "./components/DeleteCardConfirmation";
|
|
|
|
import Modal from "~/app/_components/modal";
|
|
import { useModal } from "~/app/providers/modal";
|
|
|
|
import { api } from "~/trpc/react";
|
|
interface FormValues {
|
|
cardId: string;
|
|
title: string;
|
|
description: string;
|
|
}
|
|
|
|
export default function CardPage() {
|
|
const params = useParams();
|
|
const { modalContentType } = useModal();
|
|
|
|
const cardId = params?.id?.length ? params.id[0] : null;
|
|
|
|
const { data } = api.card.byId.useQuery({ id: cardId ?? "" });
|
|
|
|
const boardId = data?.list?.board?.publicId;
|
|
|
|
const updateCard = api.card.update.useMutation();
|
|
|
|
const formik = useFormik({
|
|
initialValues: {
|
|
cardId: cardId ?? "",
|
|
title: data?.title ? data.title : "",
|
|
description: data?.description ? data.description : "",
|
|
},
|
|
onSubmit: (values: FormValues) => {
|
|
updateCard.mutate({
|
|
cardId: values.cardId,
|
|
title: values.title,
|
|
description: values.description,
|
|
});
|
|
},
|
|
enableReinitialize: true,
|
|
});
|
|
|
|
if (!cardId) return <></>;
|
|
|
|
return (
|
|
<div className="p-8">
|
|
<div className="mb-8 flex w-full justify-between">
|
|
<form onSubmit={formik.handleSubmit} className="w-full space-y-6">
|
|
<div>
|
|
<input
|
|
type="text"
|
|
id="title"
|
|
name="title"
|
|
value={formik.values.title}
|
|
onChange={formik.handleChange}
|
|
onBlur={formik.submitForm}
|
|
className="block w-full border-0 bg-transparent p-0 py-1.5 font-medium tracking-tight text-dark-1000 focus:ring-0 sm:text-[1.2rem] sm:leading-6"
|
|
/>
|
|
</div>
|
|
</form>
|
|
<div className="flex">
|
|
<Dropdown />
|
|
</div>
|
|
</div>
|
|
<div className="mb-8 flex w-full max-w-2xl justify-between">
|
|
<form onSubmit={formik.handleSubmit} className="w-full space-y-6">
|
|
<div className="mt-2">
|
|
<ContentEditable
|
|
html={formik.values.description || "Add description..."}
|
|
disabled={false}
|
|
onChange={(e) =>
|
|
formik.setFieldValue("description", e.target.value)
|
|
}
|
|
onBlur={formik.submitForm}
|
|
className="block w-full border-0 bg-transparent py-1.5 text-dark-1000 focus-visible:outline-none sm:text-sm sm:leading-6"
|
|
/>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<Modal>
|
|
{modalContentType === "DELETE_CARD" && (
|
|
<DeleteCardConfirmation
|
|
boardPublicId={boardId ?? ""}
|
|
cardPublicId={cardId}
|
|
/>
|
|
)}
|
|
</Modal>
|
|
</div>
|
|
);
|
|
}
|