Compare commits
1 Commits
fix/react-
...
refactor/i
| Author | SHA1 | Date | |
|---|---|---|---|
|
faf93a94bc |
@@ -29,7 +29,6 @@ import LabelSelector from "./components/LabelSelector";
|
|||||||
import ListSelector from "./components/ListSelector";
|
import ListSelector from "./components/ListSelector";
|
||||||
import MemberSelector from "./components/MemberSelector";
|
import MemberSelector from "./components/MemberSelector";
|
||||||
import { NewChecklistForm } from "./components/NewChecklistForm";
|
import { NewChecklistForm } from "./components/NewChecklistForm";
|
||||||
import NewChecklistItemForm from "./components/NewChecklistItemForm";
|
|
||||||
import NewCommentForm from "./components/NewCommentForm";
|
import NewCommentForm from "./components/NewCommentForm";
|
||||||
|
|
||||||
interface FormValues {
|
interface FormValues {
|
||||||
@@ -213,94 +212,96 @@ export default function CardPage() {
|
|||||||
<PageHead
|
<PageHead
|
||||||
title={t`${card?.title ?? "Card"} | ${board?.name ?? "Board"}`}
|
title={t`${card?.title ?? "Card"} | ${board?.name ?? "Board"}`}
|
||||||
/>
|
/>
|
||||||
<div className="flex h-full flex-1 flex-row">
|
<div className="flex h-full flex-1 flex-row overflow-hidden">
|
||||||
<div className="m-auto flex h-full w-full max-w-[800px] flex-col overflow-hidden">
|
<div className="scrollbar-thumb-rounded-[4px] scrollbar-track-rounded-[4px] w-full flex-1 overflow-y-auto scrollbar scrollbar-track-light-200 scrollbar-thumb-light-400 hover:scrollbar-thumb-light-400 dark:scrollbar-track-dark-100 dark:scrollbar-thumb-dark-300 dark:hover:scrollbar-thumb-dark-300">
|
||||||
<div className="h-full max-h-[calc(100dvh-3rem)] overflow-y-auto p-6 md:max-h-[calc(100dvh-4rem)] md:p-8">
|
<div className="p-auto mx-auto flex h-full w-full max-w-[800px] flex-col">
|
||||||
<div className="mb-8 flex w-full items-center justify-between md:mt-6">
|
<div className="p-6 md:p-8">
|
||||||
{!card && isLoading && (
|
<div className="mb-8 flex w-full items-center justify-between md:mt-6">
|
||||||
<div className="flex space-x-2">
|
{!card && isLoading && (
|
||||||
<div className="h-[2.3rem] w-[150px] animate-pulse rounded-[5px] bg-light-300 dark:bg-dark-300" />
|
<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 className="h-[2.3rem] w-[150px] animate-pulse rounded-[5px] bg-light-300 dark:bg-dark-300" />
|
||||||
</div>
|
<div className="h-[2.3rem] w-[300px] animate-pulse rounded-[5px] bg-light-300 dark:bg-dark-300" />
|
||||||
)}
|
</div>
|
||||||
|
)}
|
||||||
|
{card && (
|
||||||
|
<>
|
||||||
|
<Link
|
||||||
|
className="whitespace-nowrap font-bold leading-[2.3rem] tracking-tight text-light-900 dark:text-dark-900 sm:text-[1.2rem]"
|
||||||
|
href={`/boards/${board?.publicId}`}
|
||||||
|
>
|
||||||
|
{board?.name}
|
||||||
|
</Link>
|
||||||
|
<IoChevronForwardSharp
|
||||||
|
size={18}
|
||||||
|
className="mx-2 text-light-900 dark:text-dark-900"
|
||||||
|
/>
|
||||||
|
<form
|
||||||
|
onSubmit={handleSubmit(onSubmit)}
|
||||||
|
className="w-full space-y-6"
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="title"
|
||||||
|
{...register("title")}
|
||||||
|
onBlur={handleSubmit(onSubmit)}
|
||||||
|
className="block w-full border-0 bg-transparent p-0 py-0 font-bold tracking-tight text-neutral-900 focus:ring-0 dark:text-dark-1000 sm:text-[1.2rem]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
<div className="flex">
|
||||||
|
<Dropdown />
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
{!card && !isLoading && (
|
||||||
|
<p className="block p-0 py-0 font-bold leading-[2.3rem] tracking-tight text-neutral-900 dark:text-dark-1000 sm:text-[1.2rem]">
|
||||||
|
{t`Card not found`}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
{card && (
|
{card && (
|
||||||
<>
|
<>
|
||||||
<Link
|
<div className="mb-10 flex w-full max-w-2xl flex-col justify-between">
|
||||||
className="whitespace-nowrap font-bold leading-[2.3rem] tracking-tight text-light-900 dark:text-dark-900 sm:text-[1.2rem]"
|
<form
|
||||||
href={`/boards/${board?.publicId}`}
|
onSubmit={handleSubmit(onSubmit)}
|
||||||
>
|
className="w-full space-y-6"
|
||||||
{board?.name}
|
>
|
||||||
</Link>
|
<div className="mt-2">
|
||||||
<IoChevronForwardSharp
|
<Editor
|
||||||
size={18}
|
content={card.description}
|
||||||
className="mx-2 text-light-900 dark:text-dark-900"
|
onChange={(e) => setValue("description", e)}
|
||||||
|
onBlur={() => handleSubmit(onSubmit)()}
|
||||||
|
workspaceMembers={board?.workspace.members ?? []}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<Checklists
|
||||||
|
checklists={card.checklists}
|
||||||
|
cardPublicId={cardId}
|
||||||
|
activeChecklistForm={activeChecklistForm}
|
||||||
|
setActiveChecklistForm={setActiveChecklistForm}
|
||||||
/>
|
/>
|
||||||
<form
|
<div className="border-t-[1px] border-light-300 pt-12 dark:border-dark-300">
|
||||||
onSubmit={handleSubmit(onSubmit)}
|
<h2 className="text-md pb-4 font-medium text-light-1000 dark:text-dark-1000">
|
||||||
className="w-full space-y-6"
|
{t`Activity`}
|
||||||
>
|
</h2>
|
||||||
<div>
|
<div>
|
||||||
<input
|
<ActivityList
|
||||||
type="text"
|
cardPublicId={cardId}
|
||||||
id="title"
|
activities={activities ?? []}
|
||||||
{...register("title")}
|
isLoading={!card}
|
||||||
onBlur={handleSubmit(onSubmit)}
|
isAdmin={workspace.role === "admin"}
|
||||||
className="block w-full border-0 bg-transparent p-0 py-0 font-bold tracking-tight text-neutral-900 focus:ring-0 dark:text-dark-1000 sm:text-[1.2rem]"
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
<div className="mt-6">
|
||||||
<div className="flex">
|
<NewCommentForm cardPublicId={cardId} />
|
||||||
<Dropdown />
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
{!card && !isLoading && (
|
|
||||||
<p className="block p-0 py-0 font-bold leading-[2.3rem] tracking-tight text-neutral-900 dark:text-dark-1000 sm:text-[1.2rem]">
|
|
||||||
{t`Card not found`}
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
{card && (
|
|
||||||
<>
|
|
||||||
<div className="mb-10 flex w-full max-w-2xl flex-col justify-between">
|
|
||||||
<form
|
|
||||||
onSubmit={handleSubmit(onSubmit)}
|
|
||||||
className="w-full space-y-6"
|
|
||||||
>
|
|
||||||
<div className="mt-2">
|
|
||||||
<Editor
|
|
||||||
content={card.description}
|
|
||||||
onChange={(e) => setValue("description", e)}
|
|
||||||
onBlur={() => handleSubmit(onSubmit)()}
|
|
||||||
workspaceMembers={board?.workspace?.members ?? []}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
<Checklists
|
|
||||||
checklists={card.checklists}
|
|
||||||
cardPublicId={cardId}
|
|
||||||
activeChecklistForm={activeChecklistForm}
|
|
||||||
setActiveChecklistForm={setActiveChecklistForm}
|
|
||||||
/>
|
|
||||||
<div className="border-t-[1px] border-light-300 pt-12 dark:border-dark-300">
|
|
||||||
<h2 className="text-md pb-4 font-medium text-light-1000 dark:text-dark-1000">
|
|
||||||
{t`Activity`}
|
|
||||||
</h2>
|
|
||||||
<div>
|
|
||||||
<ActivityList
|
|
||||||
cardPublicId={cardId}
|
|
||||||
activities={activities ?? []}
|
|
||||||
isLoading={!card}
|
|
||||||
isAdmin={workspace.role === "admin"}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="mt-6">
|
|
||||||
<NewCommentForm cardPublicId={cardId} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user