7f5a1ab513
* feat: setup schema for workspace roles * chore: regen migration * feat: add publicId to workspace roles * feat: setup default permissions * feat: add repo funcs * feat: setup basic router interactions * feat: add card permissions * feat: assert permissions for lists * feat: assert board permissions * feat: assert permission for remaining routes * feat: add permissions page to settings * feat: enable updating member roles * feat: order members by role and createdAt * feat: allow editing individual permissions * feat: reset role defaults * feat: clear all permission overrides * feat: allow users to delete entities they have created * feat: set roleId when inviting new members * feat: disable UI elements if user does not have permissions * feat: allow admins to assign the admin role to other users * feat: allow delete:list as default * refactor: centre permissions modal * chore: translations
82 lines
3.2 KiB
TypeScript
82 lines
3.2 KiB
TypeScript
import Link from "next/link";
|
|
import { t } from "@lingui/core/macro";
|
|
import { HiOutlineRectangleStack } from "react-icons/hi2";
|
|
|
|
import Button from "~/components/Button";
|
|
import PatternedBackground from "~/components/PatternedBackground";
|
|
import { Tooltip } from "~/components/Tooltip";
|
|
import { usePermissions } from "~/hooks/usePermissions";
|
|
import { useModal } from "~/providers/modal";
|
|
import { useWorkspace } from "~/providers/workspace";
|
|
import { api } from "~/utils/api";
|
|
|
|
export function BoardsList({ isTemplate }: { isTemplate?: boolean }) {
|
|
const { workspace } = useWorkspace();
|
|
const { openModal } = useModal();
|
|
const { canCreateBoard } = usePermissions();
|
|
|
|
const { data, isLoading } = api.board.all.useQuery(
|
|
{
|
|
workspacePublicId: workspace.publicId,
|
|
type: isTemplate ? "template" : "regular",
|
|
},
|
|
{ enabled: workspace.publicId ? true : false },
|
|
);
|
|
|
|
if (isLoading)
|
|
return (
|
|
<div className="3xl:grid-cols-4 grid h-fit w-full grid-cols-1 gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-3">
|
|
<div className="mr-5 flex h-[150px] w-full animate-pulse rounded-md bg-light-200 dark:bg-dark-100" />
|
|
<div className="mr-5 flex h-[150px] w-full animate-pulse rounded-md bg-light-200 dark:bg-dark-100" />
|
|
<div className="mr-5 flex h-[150px] w-full animate-pulse rounded-md bg-light-200 dark:bg-dark-100" />
|
|
</div>
|
|
);
|
|
|
|
if (data?.length === 0)
|
|
return (
|
|
<div className="z-10 flex h-full w-full flex-col items-center justify-center space-y-8 pb-[150px]">
|
|
<div className="flex flex-col items-center">
|
|
<HiOutlineRectangleStack className="h-10 w-10 text-light-800 dark:text-dark-800" />
|
|
<p className="mb-2 mt-4 text-[14px] font-bold text-light-1000 dark:text-dark-950">
|
|
{t`No ${isTemplate ? "templates" : "boards"}`}
|
|
</p>
|
|
<p className="text-[14px] text-light-900 dark:text-dark-900">
|
|
{t`Get started by creating a new ${isTemplate ? "template" : "board"}`}
|
|
</p>
|
|
</div>
|
|
<Tooltip
|
|
content={
|
|
!canCreateBoard ? t`You don't have permission` : undefined
|
|
}
|
|
>
|
|
<Button
|
|
onClick={() => {
|
|
if (canCreateBoard) openModal("NEW_BOARD");
|
|
}}
|
|
disabled={!canCreateBoard}
|
|
>
|
|
{t`Create new ${isTemplate ? "template" : "board"}`}
|
|
</Button>
|
|
</Tooltip>
|
|
</div>
|
|
);
|
|
|
|
return (
|
|
<div className="3xl:grid-cols-4 grid h-fit w-full grid-cols-1 gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-3">
|
|
{data?.map((board) => (
|
|
<Link
|
|
key={board.publicId}
|
|
href={`${isTemplate ? "templates" : "boards"}/${board.publicId}`}
|
|
>
|
|
<div className="align-center relative mr-5 flex h-[150px] w-full items-center justify-center rounded-md border border-dashed border-light-400 bg-light-50 shadow-sm hover:bg-light-200 dark:border-dark-600 dark:bg-dark-50 dark:hover:bg-dark-100">
|
|
<PatternedBackground />
|
|
<p className="px-4 text-[14px] font-bold text-neutral-700 dark:text-dark-1000">
|
|
{board.name}
|
|
</p>
|
|
</div>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|