119 lines
3.9 KiB
TypeScript
119 lines
3.9 KiB
TypeScript
import { authClient } from "@kan/auth/client";
|
|
import { useRouter } from "next/router";
|
|
import { HiXMark } from "react-icons/hi2";
|
|
import Editor from "~/components/Editor";
|
|
|
|
import { useModal } from "~/providers/modal";
|
|
import { api } from "~/utils/api";
|
|
import ActivityList from "~/views/card/components/ActivityList";
|
|
|
|
export function CardModal({
|
|
cardPublicId,
|
|
workspaceSlug,
|
|
boardSlug,
|
|
}: {
|
|
cardPublicId: string | null | undefined;
|
|
workspaceSlug: string | null | undefined;
|
|
boardSlug: string | null | undefined;
|
|
}) {
|
|
const router = useRouter();
|
|
const { closeModal, isOpen } = useModal();
|
|
const { data: session } = authClient.useSession();
|
|
|
|
const { data, isLoading } = api.card.byId.useQuery(
|
|
{
|
|
cardPublicId: cardPublicId ?? "",
|
|
},
|
|
{
|
|
enabled: isOpen && !!cardPublicId,
|
|
},
|
|
);
|
|
|
|
const labels = data?.labels ?? [];
|
|
|
|
return (
|
|
<div className="flex h-full flex-1 flex-row">
|
|
<div className="flex h-full w-full flex-col overflow-hidden">
|
|
<div className="h-full max-h-[calc(100vh-4rem)] overflow-y-auto p-8">
|
|
<div className="flex w-full items-center justify-between">
|
|
<button
|
|
className="absolute right-[2rem] top-[2rem] rounded p-1 hover:bg-light-300 focus:outline-none dark:hover:bg-dark-300"
|
|
onClick={async (e) => {
|
|
e.preventDefault();
|
|
closeModal();
|
|
try {
|
|
await router.replace(
|
|
`/${workspaceSlug}/${boardSlug}`,
|
|
undefined,
|
|
{
|
|
shallow: true,
|
|
},
|
|
);
|
|
} catch (error) {
|
|
console.error(error);
|
|
}
|
|
}}
|
|
>
|
|
<HiXMark
|
|
size={18}
|
|
className="dark:text-dark-9000 text-light-900"
|
|
/>
|
|
</button>
|
|
{isLoading ? (
|
|
<div className="flex space-x-2">
|
|
<div className="h-[2.3rem] w-[300px] animate-pulse rounded-[5px] bg-light-300 dark:bg-dark-300" />
|
|
</div>
|
|
) : (
|
|
<>
|
|
<h1 className="font-medium leading-[2.3rem] tracking-tight text-neutral-900 dark:text-dark-1000 sm:text-[1.2rem]">
|
|
{data?.title}
|
|
</h1>
|
|
</>
|
|
)}
|
|
</div>
|
|
<div className="mb-6">
|
|
{labels.map((label) => (
|
|
<div
|
|
key={label.publicId}
|
|
className="my-1 mr-1 inline-flex w-fit items-center gap-x-1.5 rounded-full px-2 py-1 text-[12px] font-medium text-light-800 ring-1 ring-inset ring-light-600 dark:text-dark-1000 dark:ring-dark-800"
|
|
>
|
|
<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>
|
|
<div>{label.name}</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{data?.description && (
|
|
<div className="mb-10 flex w-full max-w-2xl justify-between">
|
|
<div className="mt-2">
|
|
<Editor content={data.description} readOnly />
|
|
</div>
|
|
</div>
|
|
)}
|
|
<div className="border-t-[1px] border-light-600 pb-4 pt-12 dark:border-dark-400">
|
|
<h2 className="text-md pb-4 font-medium text-light-900 dark:text-dark-1000">
|
|
Activity
|
|
</h2>
|
|
<div>
|
|
{cardPublicId && (
|
|
<ActivityList
|
|
cardPublicId={cardPublicId}
|
|
activities={data?.activities ?? []}
|
|
isLoading={isLoading}
|
|
/>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|