feat: extend skeleton loaders
This commit is contained in:
Henry
@@ -15,6 +15,7 @@ import WorkspaceMenu from "~/components/WorkspaceMenu";
|
||||
|
||||
interface SideNavigationProps {
|
||||
user: UserType;
|
||||
isLoading: boolean;
|
||||
}
|
||||
|
||||
interface UserType {
|
||||
@@ -22,7 +23,10 @@ interface UserType {
|
||||
image?: string | null | undefined;
|
||||
}
|
||||
|
||||
export default function SideNavigation({ user }: SideNavigationProps) {
|
||||
export default function SideNavigation({
|
||||
user,
|
||||
isLoading,
|
||||
}: SideNavigationProps) {
|
||||
const pathname = usePathname();
|
||||
const { theme } = useTheme();
|
||||
|
||||
@@ -65,6 +69,7 @@ export default function SideNavigation({ user }: SideNavigationProps) {
|
||||
<UserMenu
|
||||
email={user?.email ?? ""}
|
||||
imageUrl={user?.image ?? undefined}
|
||||
isLoading={isLoading}
|
||||
/>
|
||||
</nav>
|
||||
</>
|
||||
|
||||
@@ -7,13 +7,18 @@ import createClient from "~/utils/supabase/client";
|
||||
interface UserMenuProps {
|
||||
imageUrl: string | undefined;
|
||||
email: string;
|
||||
isLoading: boolean;
|
||||
}
|
||||
|
||||
function classNames(...classes: string[]): string {
|
||||
return classes.filter(Boolean).join(" ");
|
||||
}
|
||||
|
||||
export default function UserMenu({ imageUrl, email }: UserMenuProps) {
|
||||
export default function UserMenu({
|
||||
imageUrl,
|
||||
email,
|
||||
isLoading,
|
||||
}: UserMenuProps) {
|
||||
const router = useRouter();
|
||||
const { theme, switchTheme } = useTheme();
|
||||
|
||||
@@ -28,28 +33,35 @@ export default function UserMenu({ imageUrl, email }: UserMenuProps) {
|
||||
return (
|
||||
<Menu as="div" className="relative inline-block w-full text-left">
|
||||
<div>
|
||||
<Menu.Button className="flex w-full items-center rounded-md p-1.5 text-neutral-900 hover:bg-light-200 dark:text-dark-900 dark:hover:bg-dark-200 dark:hover:text-dark-1000">
|
||||
{imageUrl ? (
|
||||
<Image
|
||||
src={imageUrl ?? ""}
|
||||
className="h-8 w-8 rounded-full bg-gray-50"
|
||||
width={30}
|
||||
height={30}
|
||||
alt=""
|
||||
/>
|
||||
) : (
|
||||
<span className="inline-block h-6 w-6 overflow-hidden rounded-full bg-light-400 dark:bg-dark-400">
|
||||
<svg
|
||||
className="h-full w-full text-dark-700"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M24 20.993V24H0v-2.996A14.977 14.977 0 0112.004 15c4.904 0 9.26 2.354 11.996 5.993zM16.002 8.999a4 4 0 11-8 0 4 4 0 018 0z" />
|
||||
</svg>
|
||||
</span>
|
||||
)}
|
||||
<span className="mx-2 truncate text-sm">{email}</span>
|
||||
</Menu.Button>
|
||||
{isLoading ? (
|
||||
<div className="flex">
|
||||
<div className="h-[30px] w-[30px] animate-pulse rounded-full bg-light-200 dark:bg-dark-200" />
|
||||
<div className="mx-2 h-[30px] w-[175px] animate-pulse rounded-md bg-light-200 dark:bg-dark-200" />
|
||||
</div>
|
||||
) : (
|
||||
<Menu.Button className="flex w-full items-center rounded-md p-1.5 text-neutral-900 hover:bg-light-200 dark:text-dark-900 dark:hover:bg-dark-200 dark:hover:text-dark-1000">
|
||||
{imageUrl ? (
|
||||
<Image
|
||||
src={imageUrl ?? ""}
|
||||
className="h-8 w-8 rounded-full bg-gray-50"
|
||||
width={30}
|
||||
height={30}
|
||||
alt=""
|
||||
/>
|
||||
) : (
|
||||
<span className="inline-block h-6 w-6 overflow-hidden rounded-full bg-light-400 dark:bg-dark-400">
|
||||
<svg
|
||||
className="h-full w-full text-dark-700"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M24 20.993V24H0v-2.996A14.977 14.977 0 0112.004 15c4.904 0 9.26 2.354 11.996 5.993zM16.002 8.999a4 4 0 11-8 0 4 4 0 018 0z" />
|
||||
</svg>
|
||||
</span>
|
||||
)}
|
||||
<span className="mx-2 truncate text-sm">{email}</span>
|
||||
</Menu.Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Transition
|
||||
|
||||
@@ -7,22 +7,30 @@ import { useWorkspace } from "~/providers/workspace";
|
||||
import { HiCheck } from "react-icons/hi2";
|
||||
|
||||
export default function WorkspaceMenu() {
|
||||
const { workspace, availableWorkspaces, switchWorkspace } = useWorkspace();
|
||||
const { workspace, isLoading, availableWorkspaces, switchWorkspace } =
|
||||
useWorkspace();
|
||||
const { openModal } = useModal();
|
||||
|
||||
return (
|
||||
<Menu as="div" className="relative inline-block w-full pb-3 text-left">
|
||||
<div>
|
||||
<Menu.Button className="mb-1 flex w-full items-center rounded-[5px] p-1.5 hover:bg-light-200 dark:hover:bg-dark-200">
|
||||
<span className="inline-flex h-6 w-6 items-center justify-center rounded-[5px] bg-indigo-700">
|
||||
<span className="text-xs font-bold leading-none text-white">
|
||||
{workspace?.name.charAt(0).toUpperCase()}
|
||||
{isLoading ? (
|
||||
<div className="mb-1 flex p-1.5">
|
||||
<div className="h-6 w-6 animate-pulse rounded-[5px] bg-light-200 dark:bg-dark-200" />
|
||||
<div className="ml-2 h-6 w-[150px] animate-pulse rounded-[5px] bg-light-200 dark:bg-dark-200" />
|
||||
</div>
|
||||
) : (
|
||||
<Menu.Button className="mb-1 flex w-full items-center rounded-[5px] p-1.5 hover:bg-light-200 dark:hover:bg-dark-200">
|
||||
<span className="inline-flex h-6 w-6 items-center justify-center rounded-[5px] bg-indigo-700">
|
||||
<span className="text-xs font-bold leading-none text-white">
|
||||
{workspace?.name.charAt(0).toUpperCase()}
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
<span className="ml-2 text-sm font-bold text-neutral-900 dark:text-dark-1000">
|
||||
{workspace?.name}
|
||||
</span>
|
||||
</Menu.Button>
|
||||
<span className="ml-2 text-sm font-bold text-neutral-900 dark:text-dark-1000">
|
||||
{workspace?.name}
|
||||
</span>
|
||||
</Menu.Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Transition
|
||||
|
||||
@@ -3,7 +3,7 @@ import SideNavigation from "./SideNavigation";
|
||||
import FeedbackButton from "./FeedbackButton";
|
||||
|
||||
export default function Dashboard(props: { children: React.ReactNode }) {
|
||||
const { data } = api.auth.getUser.useQuery();
|
||||
const { data, isLoading } = api.auth.getUser.useQuery();
|
||||
|
||||
return (
|
||||
<div className="flex h-screen flex-col items-center bg-light-100 dark:bg-dark-50">
|
||||
@@ -17,7 +17,7 @@ export default function Dashboard(props: { children: React.ReactNode }) {
|
||||
</div>
|
||||
|
||||
<div className="flex h-full w-full">
|
||||
<SideNavigation user={{ email: data?.email }} />
|
||||
<SideNavigation user={{ email: data?.email }} isLoading={isLoading} />
|
||||
<div className="w-full overflow-hidden">{props.children}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -12,6 +12,7 @@ import { useRouter } from "next/navigation";
|
||||
|
||||
interface WorkspaceContextProps {
|
||||
workspace: Workspace;
|
||||
isLoading: boolean;
|
||||
switchWorkspace: (_workspace: Workspace) => void;
|
||||
availableWorkspaces: Workspace[];
|
||||
}
|
||||
@@ -41,7 +42,7 @@ export const WorkspaceProvider: React.FC<{ children: ReactNode }> = ({
|
||||
initialAvailableWorkspaces,
|
||||
);
|
||||
|
||||
const { data } = api.workspace.all.useQuery();
|
||||
const { data, isLoading } = api.workspace.all.useQuery();
|
||||
|
||||
const switchWorkspace = (_workspace: Workspace) => {
|
||||
localStorage.setItem("workspacePublicId", _workspace.publicId);
|
||||
@@ -97,7 +98,7 @@ export const WorkspaceProvider: React.FC<{ children: ReactNode }> = ({
|
||||
|
||||
return (
|
||||
<WorkspaceContext.Provider
|
||||
value={{ workspace, availableWorkspaces, switchWorkspace }}
|
||||
value={{ workspace, isLoading, availableWorkspaces, switchWorkspace }}
|
||||
>
|
||||
{children}
|
||||
</WorkspaceContext.Provider>
|
||||
|
||||
@@ -14,11 +14,13 @@ interface LabelSelectorProps {
|
||||
selected: boolean;
|
||||
colourCode: string;
|
||||
}[];
|
||||
isLoading: boolean;
|
||||
}
|
||||
|
||||
export default function LabelSelector({
|
||||
cardPublicId,
|
||||
labels,
|
||||
isLoading,
|
||||
}: LabelSelectorProps) {
|
||||
const { openModal } = useModal();
|
||||
const utils = api.useUtils();
|
||||
@@ -47,104 +49,110 @@ export default function LabelSelector({
|
||||
|
||||
return (
|
||||
<>
|
||||
<Menu
|
||||
as="div"
|
||||
className="relative flex w-full flex-wrap items-center text-left"
|
||||
>
|
||||
{selectedLabels.length ? (
|
||||
<>
|
||||
{selectedLabels.map((label) => (
|
||||
<Menu.Button
|
||||
key={label.publicId}
|
||||
className="my-1 mr-2 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}
|
||||
className="h-2 w-2"
|
||||
viewBox="0 0 6 6"
|
||||
aria-hidden="true"
|
||||
{isLoading ? (
|
||||
<div className="flex w-full">
|
||||
<div className="h-full w-[175px] animate-pulse rounded-[5px] bg-light-300 dark:bg-dark-300" />
|
||||
</div>
|
||||
) : (
|
||||
<Menu
|
||||
as="div"
|
||||
className="relative flex w-full flex-wrap items-center text-left"
|
||||
>
|
||||
{selectedLabels.length ? (
|
||||
<>
|
||||
{selectedLabels.map((label) => (
|
||||
<Menu.Button
|
||||
key={label.publicId}
|
||||
className="my-1 mr-2 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"
|
||||
>
|
||||
<circle cx={3} cy={3} r={3} />
|
||||
</svg>
|
||||
<div>{label.name}</div>
|
||||
<svg
|
||||
fill={label.colourCode}
|
||||
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>
|
||||
</Menu.Button>
|
||||
))}
|
||||
<Menu.Button className="my-1 inline-flex w-fit items-center gap-x-1.5 rounded-full py-1 pl-2 pr-4 text-[12px] font-medium text-dark-800 ring-inset ring-dark-800 hover:bg-light-400 dark:hover:bg-dark-200">
|
||||
<HiMiniPlus size={16} />
|
||||
Add label
|
||||
</Menu.Button>
|
||||
))}
|
||||
<Menu.Button className="my-1 inline-flex w-fit items-center gap-x-1.5 rounded-full py-1 pl-2 pr-4 text-[12px] font-medium text-dark-800 ring-inset ring-dark-800 hover:bg-light-400 dark:hover:bg-dark-200">
|
||||
<HiMiniPlus size={16} />
|
||||
</>
|
||||
) : (
|
||||
<Menu.Button className="flex h-full w-full items-center rounded-[5px] border-[1px] border-light-200 pl-2 text-left text-sm text-neutral-900 hover:bg-light-300 dark:border-dark-100 dark:text-dark-1000 dark:hover:border-dark-300 dark:hover:bg-dark-200">
|
||||
<HiMiniPlus size={22} className="pr-2" />
|
||||
Add label
|
||||
</Menu.Button>
|
||||
</>
|
||||
) : (
|
||||
<Menu.Button className="flex h-full w-full items-center rounded-[5px] border-[1px] border-light-200 pl-2 text-left text-sm text-neutral-900 hover:bg-light-300 dark:border-dark-100 dark:text-dark-1000 dark:hover:border-dark-300 dark:hover:bg-dark-200">
|
||||
<HiMiniPlus size={22} className="pr-2" />
|
||||
Add label
|
||||
</Menu.Button>
|
||||
)}
|
||||
)}
|
||||
|
||||
<Transition
|
||||
as={Fragment}
|
||||
enter="transition ease-out duration-100"
|
||||
enterFrom="transform opacity-0 scale-95"
|
||||
enterTo="transform opacity-100 scale-100"
|
||||
leave="transition ease-in duration-75"
|
||||
leaveFrom="transform opacity-100 scale-100"
|
||||
leaveTo="transform opacity-0 scale-95"
|
||||
>
|
||||
<Menu.Items className="absolute right-[200px] top-[30px] z-10 mt-2 w-56 origin-top-right rounded-md border-[1px] border-light-600 bg-light-50 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:border-dark-500 dark:bg-dark-200">
|
||||
<div className="p-2">
|
||||
<form onSubmit={formik.handleSubmit}>
|
||||
{labels?.map((label) => (
|
||||
<Menu.Item key={label.publicId}>
|
||||
{() => (
|
||||
<div
|
||||
key={label.publicId}
|
||||
className="flex items-center rounded-[5px] p-2 hover:bg-light-200 dark:hover:bg-dark-300"
|
||||
onClick={async (e) => {
|
||||
e.preventDefault();
|
||||
await formik.setFieldValue(
|
||||
label.publicId,
|
||||
!formik.values[label.publicId],
|
||||
);
|
||||
<Transition
|
||||
as={Fragment}
|
||||
enter="transition ease-out duration-100"
|
||||
enterFrom="transform opacity-0 scale-95"
|
||||
enterTo="transform opacity-100 scale-100"
|
||||
leave="transition ease-in duration-75"
|
||||
leaveFrom="transform opacity-100 scale-100"
|
||||
leaveTo="transform opacity-0 scale-95"
|
||||
>
|
||||
<Menu.Items className="absolute right-[200px] top-[30px] z-10 mt-2 w-56 origin-top-right rounded-md border-[1px] border-light-600 bg-light-50 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:border-dark-500 dark:bg-dark-200">
|
||||
<div className="p-2">
|
||||
<form onSubmit={formik.handleSubmit}>
|
||||
{labels?.map((label) => (
|
||||
<Menu.Item key={label.publicId}>
|
||||
{() => (
|
||||
<div
|
||||
key={label.publicId}
|
||||
className="flex items-center rounded-[5px] p-2 hover:bg-light-200 dark:hover:bg-dark-300"
|
||||
onClick={async (e) => {
|
||||
e.preventDefault();
|
||||
await formik.setFieldValue(
|
||||
label.publicId,
|
||||
!formik.values[label.publicId],
|
||||
);
|
||||
|
||||
addOrRemoveLabel.mutate({
|
||||
cardPublicId,
|
||||
labelPublicId: label.publicId,
|
||||
});
|
||||
addOrRemoveLabel.mutate({
|
||||
cardPublicId,
|
||||
labelPublicId: label.publicId,
|
||||
});
|
||||
|
||||
await formik.submitForm();
|
||||
}}
|
||||
>
|
||||
<input
|
||||
id={label.publicId}
|
||||
name={label.publicId}
|
||||
type="checkbox"
|
||||
className="h-[14px] w-[14px] rounded bg-transparent"
|
||||
onClick={(event) => event.stopPropagation()}
|
||||
onChange={formik.handleChange}
|
||||
checked={formik.values[label.publicId]}
|
||||
/>
|
||||
<label
|
||||
htmlFor={label.publicId}
|
||||
className="ml-3 text-sm"
|
||||
await formik.submitForm();
|
||||
}}
|
||||
>
|
||||
{label.name}
|
||||
</label>
|
||||
</div>
|
||||
)}
|
||||
</Menu.Item>
|
||||
))}
|
||||
<button
|
||||
onClick={() => openModal("NEW_LABEL")}
|
||||
className="flex w-full items-center rounded-[5px] p-1.5 px-2 text-sm hover:bg-light-200 dark:hover:bg-dark-300"
|
||||
>
|
||||
<HiMiniPlus size={22} className="pr-2" />
|
||||
Create new label
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</Menu.Items>
|
||||
</Transition>
|
||||
</Menu>
|
||||
<input
|
||||
id={label.publicId}
|
||||
name={label.publicId}
|
||||
type="checkbox"
|
||||
className="h-[14px] w-[14px] rounded bg-transparent"
|
||||
onClick={(event) => event.stopPropagation()}
|
||||
onChange={formik.handleChange}
|
||||
checked={formik.values[label.publicId]}
|
||||
/>
|
||||
<label
|
||||
htmlFor={label.publicId}
|
||||
className="ml-3 text-sm"
|
||||
>
|
||||
{label.name}
|
||||
</label>
|
||||
</div>
|
||||
)}
|
||||
</Menu.Item>
|
||||
))}
|
||||
<button
|
||||
onClick={() => openModal("NEW_LABEL")}
|
||||
className="flex w-full items-center rounded-[5px] p-1.5 px-2 text-sm hover:bg-light-200 dark:hover:bg-dark-300"
|
||||
>
|
||||
<HiMiniPlus size={22} className="pr-2" />
|
||||
Create new label
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</Menu.Items>
|
||||
</Transition>
|
||||
</Menu>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -10,11 +10,13 @@ interface ListSelectorProps {
|
||||
name: string;
|
||||
selected: boolean;
|
||||
}[];
|
||||
isLoading: boolean;
|
||||
}
|
||||
|
||||
export default function ListSelector({
|
||||
cardPublicId,
|
||||
lists,
|
||||
isLoading,
|
||||
}: ListSelectorProps) {
|
||||
const utils = api.useUtils();
|
||||
|
||||
@@ -42,66 +44,72 @@ export default function ListSelector({
|
||||
|
||||
return (
|
||||
<>
|
||||
<Menu
|
||||
as="div"
|
||||
className="relative flex w-full flex-wrap items-center text-left"
|
||||
>
|
||||
<Menu.Button className="flex h-full w-full items-center rounded-[5px] border-[1px] border-light-200 pl-2 text-left text-sm text-neutral-900 hover:border-light-300 hover:bg-light-300 dark:border-dark-100 dark:text-dark-1000 dark:hover:border-dark-300 dark:hover:bg-dark-200">
|
||||
{selectedList?.name}
|
||||
</Menu.Button>
|
||||
|
||||
<Transition
|
||||
as={Fragment}
|
||||
enter="transition ease-out duration-100"
|
||||
enterFrom="transform opacity-0 scale-95"
|
||||
enterTo="transform opacity-100 scale-100"
|
||||
leave="transition ease-in duration-75"
|
||||
leaveFrom="transform opacity-100 scale-100"
|
||||
leaveTo="transform opacity-0 scale-95"
|
||||
{isLoading ? (
|
||||
<div className="flex w-full">
|
||||
<div className="h-full w-[150px] animate-pulse rounded-[5px] bg-light-300 dark:bg-dark-300" />
|
||||
</div>
|
||||
) : (
|
||||
<Menu
|
||||
as="div"
|
||||
className="relative flex w-full flex-wrap items-center text-left"
|
||||
>
|
||||
<Menu.Items className="absolute right-[200px] top-[30px] z-10 mt-2 w-56 origin-top-right rounded-md border-[1px] border-light-600 bg-light-50 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:border-dark-500 dark:bg-dark-200">
|
||||
<div className="p-2">
|
||||
<form onSubmit={formik.handleSubmit}>
|
||||
{lists?.map((list) => (
|
||||
<Menu.Item key={list.publicId}>
|
||||
<div
|
||||
key={list.publicId}
|
||||
className="flex items-center rounded-[5px] p-2 hover:bg-light-200 dark:hover:bg-dark-300"
|
||||
onClick={async (e) => {
|
||||
e.preventDefault();
|
||||
await formik.setFieldValue(
|
||||
list.publicId,
|
||||
!formik.values[list.publicId],
|
||||
);
|
||||
<Menu.Button className="flex h-full w-full items-center rounded-[5px] border-[1px] border-light-200 pl-2 text-left text-sm text-neutral-900 hover:border-light-300 hover:bg-light-300 dark:border-dark-100 dark:text-dark-1000 dark:hover:border-dark-300 dark:hover:bg-dark-200">
|
||||
{selectedList?.name}
|
||||
</Menu.Button>
|
||||
|
||||
updateCardList.mutate({
|
||||
cardId: cardPublicId,
|
||||
newListId: list.publicId,
|
||||
});
|
||||
<Transition
|
||||
as={Fragment}
|
||||
enter="transition ease-out duration-100"
|
||||
enterFrom="transform opacity-0 scale-95"
|
||||
enterTo="transform opacity-100 scale-100"
|
||||
leave="transition ease-in duration-75"
|
||||
leaveFrom="transform opacity-100 scale-100"
|
||||
leaveTo="transform opacity-0 scale-95"
|
||||
>
|
||||
<Menu.Items className="absolute right-[200px] top-[30px] z-10 mt-2 w-56 origin-top-right rounded-md border-[1px] border-light-600 bg-light-50 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:border-dark-500 dark:bg-dark-200">
|
||||
<div className="p-2">
|
||||
<form onSubmit={formik.handleSubmit}>
|
||||
{lists?.map((list) => (
|
||||
<Menu.Item key={list.publicId}>
|
||||
<div
|
||||
key={list.publicId}
|
||||
className="flex items-center rounded-[5px] p-2 hover:bg-light-200 dark:hover:bg-dark-300"
|
||||
onClick={async (e) => {
|
||||
e.preventDefault();
|
||||
await formik.setFieldValue(
|
||||
list.publicId,
|
||||
!formik.values[list.publicId],
|
||||
);
|
||||
|
||||
await formik.submitForm();
|
||||
}}
|
||||
>
|
||||
<input
|
||||
id={list.publicId}
|
||||
name={list.publicId}
|
||||
type="checkbox"
|
||||
className="h-[14px] w-[14px] rounded bg-transparent"
|
||||
onClick={(event) => event.stopPropagation()}
|
||||
onChange={formik.handleChange}
|
||||
checked={formik.values[list.publicId]}
|
||||
/>
|
||||
<label htmlFor={list.publicId} className="ml-3 text-sm">
|
||||
{list.name}
|
||||
</label>
|
||||
</div>
|
||||
</Menu.Item>
|
||||
))}
|
||||
</form>
|
||||
</div>
|
||||
</Menu.Items>
|
||||
</Transition>
|
||||
</Menu>
|
||||
updateCardList.mutate({
|
||||
cardId: cardPublicId,
|
||||
newListId: list.publicId,
|
||||
});
|
||||
|
||||
await formik.submitForm();
|
||||
}}
|
||||
>
|
||||
<input
|
||||
id={list.publicId}
|
||||
name={list.publicId}
|
||||
type="checkbox"
|
||||
className="h-[14px] w-[14px] rounded bg-transparent"
|
||||
onClick={(event) => event.stopPropagation()}
|
||||
onChange={formik.handleChange}
|
||||
checked={formik.values[list.publicId]}
|
||||
/>
|
||||
<label htmlFor={list.publicId} className="ml-3 text-sm">
|
||||
{list.name}
|
||||
</label>
|
||||
</div>
|
||||
</Menu.Item>
|
||||
))}
|
||||
</form>
|
||||
</div>
|
||||
</Menu.Items>
|
||||
</Transition>
|
||||
</Menu>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -14,11 +14,13 @@ interface MemberSelectorProps {
|
||||
};
|
||||
selected: boolean;
|
||||
}[];
|
||||
isLoading: boolean;
|
||||
}
|
||||
|
||||
export default function LabelSelector({
|
||||
cardPublicId,
|
||||
members,
|
||||
isLoading,
|
||||
}: MemberSelectorProps) {
|
||||
const utils = api.useUtils();
|
||||
|
||||
@@ -46,89 +48,98 @@ export default function LabelSelector({
|
||||
|
||||
return (
|
||||
<>
|
||||
<Menu
|
||||
as="div"
|
||||
className="relative flex w-full flex-wrap items-center text-left"
|
||||
>
|
||||
<Menu.Button className="flex h-full w-full items-center rounded-[5px] border-[1px] border-light-200 pl-2 text-left text-sm text-neutral-900 hover:bg-light-300 dark:border-dark-100 dark:text-dark-1000 dark:hover:border-dark-300 dark:hover:bg-dark-200">
|
||||
{selectedMembers.length ? (
|
||||
<div className="isolate flex -space-x-1 overflow-hidden">
|
||||
{selectedMembers.map((member) => (
|
||||
<span
|
||||
key={member.publicId}
|
||||
className="relative z-30 inline-flex h-6 w-6 items-center justify-center rounded-full bg-gray-500 ring-1 ring-light-200 dark:ring-dark-100"
|
||||
>
|
||||
<span className="text-[10px] font-medium leading-none text-white">
|
||||
{member.user?.name
|
||||
? member.user?.name
|
||||
.split(" ")
|
||||
.map((namePart) => namePart.charAt(0).toUpperCase())
|
||||
.join("")
|
||||
: null}
|
||||
</span>
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<HiMiniPlus size={22} className="pr-2" />
|
||||
{"Add member"}
|
||||
</>
|
||||
)}
|
||||
</Menu.Button>
|
||||
|
||||
<Transition
|
||||
as={Fragment}
|
||||
enter="transition ease-out duration-100"
|
||||
enterFrom="transform opacity-0 scale-95"
|
||||
enterTo="transform opacity-100 scale-100"
|
||||
leave="transition ease-in duration-75"
|
||||
leaveFrom="transform opacity-100 scale-100"
|
||||
leaveTo="transform opacity-0 scale-95"
|
||||
{isLoading ? (
|
||||
<div className="flex w-full">
|
||||
<div className="h-full w-[125px] animate-pulse rounded-[5px] bg-light-300 dark:bg-dark-300" />
|
||||
</div>
|
||||
) : (
|
||||
<Menu
|
||||
as="div"
|
||||
className="relative flex w-full flex-wrap items-center text-left"
|
||||
>
|
||||
<Menu.Items className="absolute right-[200px] top-[30px] z-10 mt-2 w-56 origin-top-right rounded-md border-[1px] border-light-600 bg-light-50 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:border-dark-500 dark:bg-dark-200">
|
||||
<div className="p-2">
|
||||
<form onSubmit={formik.handleSubmit}>
|
||||
{members?.map((member) => (
|
||||
<Menu.Item key={member.publicId}>
|
||||
<div
|
||||
key={member.publicId}
|
||||
className="flex items-center rounded-[5px] p-2 hover:bg-light-200 dark:hover:bg-dark-300"
|
||||
onClick={async (e) => {
|
||||
e.preventDefault();
|
||||
await formik.setFieldValue(
|
||||
member.publicId,
|
||||
!formik.values[member.publicId],
|
||||
);
|
||||
|
||||
addOrRemoveMember.mutate({
|
||||
cardPublicId,
|
||||
workspaceMemberPublicId: member.publicId,
|
||||
});
|
||||
|
||||
await formik.submitForm();
|
||||
}}
|
||||
>
|
||||
<input
|
||||
id={member.publicId}
|
||||
name={member.publicId}
|
||||
type="checkbox"
|
||||
className="h-[14px] w-[14px] rounded bg-transparent"
|
||||
onClick={(event) => event.stopPropagation()}
|
||||
onChange={formik.handleChange}
|
||||
checked={formik.values[member.publicId]}
|
||||
/>
|
||||
<label htmlFor={member.publicId} className="ml-3 text-sm">
|
||||
{member?.user?.name}
|
||||
</label>
|
||||
</div>
|
||||
</Menu.Item>
|
||||
<Menu.Button className="flex h-full w-full items-center rounded-[5px] border-[1px] border-light-200 pl-2 text-left text-sm text-neutral-900 hover:bg-light-300 dark:border-dark-100 dark:text-dark-1000 dark:hover:border-dark-300 dark:hover:bg-dark-200">
|
||||
{selectedMembers.length ? (
|
||||
<div className="isolate flex -space-x-1 overflow-hidden">
|
||||
{selectedMembers.map((member) => (
|
||||
<span
|
||||
key={member.publicId}
|
||||
className="relative z-30 inline-flex h-6 w-6 items-center justify-center rounded-full bg-gray-500 ring-1 ring-light-200 dark:ring-dark-100"
|
||||
>
|
||||
<span className="text-[10px] font-medium leading-none text-white">
|
||||
{member.user?.name
|
||||
? member.user?.name
|
||||
.split(" ")
|
||||
.map((namePart) => namePart.charAt(0).toUpperCase())
|
||||
.join("")
|
||||
: null}
|
||||
</span>
|
||||
</span>
|
||||
))}
|
||||
</form>
|
||||
</div>
|
||||
</Menu.Items>
|
||||
</Transition>
|
||||
</Menu>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<HiMiniPlus size={22} className="pr-2" />
|
||||
{"Add member"}
|
||||
</>
|
||||
)}
|
||||
</Menu.Button>
|
||||
|
||||
<Transition
|
||||
as={Fragment}
|
||||
enter="transition ease-out duration-100"
|
||||
enterFrom="transform opacity-0 scale-95"
|
||||
enterTo="transform opacity-100 scale-100"
|
||||
leave="transition ease-in duration-75"
|
||||
leaveFrom="transform opacity-100 scale-100"
|
||||
leaveTo="transform opacity-0 scale-95"
|
||||
>
|
||||
<Menu.Items className="absolute right-[200px] top-[30px] z-10 mt-2 w-56 origin-top-right rounded-md border-[1px] border-light-600 bg-light-50 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:border-dark-500 dark:bg-dark-200">
|
||||
<div className="p-2">
|
||||
<form onSubmit={formik.handleSubmit}>
|
||||
{members?.map((member) => (
|
||||
<Menu.Item key={member.publicId}>
|
||||
<div
|
||||
key={member.publicId}
|
||||
className="flex items-center rounded-[5px] p-2 hover:bg-light-200 dark:hover:bg-dark-300"
|
||||
onClick={async (e) => {
|
||||
e.preventDefault();
|
||||
await formik.setFieldValue(
|
||||
member.publicId,
|
||||
!formik.values[member.publicId],
|
||||
);
|
||||
|
||||
addOrRemoveMember.mutate({
|
||||
cardPublicId,
|
||||
workspaceMemberPublicId: member.publicId,
|
||||
});
|
||||
|
||||
await formik.submitForm();
|
||||
}}
|
||||
>
|
||||
<input
|
||||
id={member.publicId}
|
||||
name={member.publicId}
|
||||
type="checkbox"
|
||||
className="h-[14px] w-[14px] rounded bg-transparent"
|
||||
onClick={(event) => event.stopPropagation()}
|
||||
onChange={formik.handleChange}
|
||||
checked={formik.values[member.publicId]}
|
||||
/>
|
||||
<label
|
||||
htmlFor={member.publicId}
|
||||
className="ml-3 text-sm"
|
||||
>
|
||||
{member?.user?.name}
|
||||
</label>
|
||||
</div>
|
||||
</Menu.Item>
|
||||
))}
|
||||
</form>
|
||||
</div>
|
||||
</Menu.Items>
|
||||
</Transition>
|
||||
</Menu>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -152,15 +152,27 @@ export default function CardPage() {
|
||||
<div className="min-w-[325px] border-l-[1px] border-light-600 bg-light-200 p-8 text-light-900 dark:border-dark-400 dark:bg-dark-100 dark:text-dark-900">
|
||||
<div className="mb-4 flex w-full">
|
||||
<p className="my-2 w-[100px] text-sm">List</p>
|
||||
<ListSelector cardPublicId={cardId} lists={formattedLists} />
|
||||
<ListSelector
|
||||
cardPublicId={cardId}
|
||||
lists={formattedLists}
|
||||
isLoading={isLoading}
|
||||
/>
|
||||
</div>
|
||||
<div className="mb-4 flex w-full">
|
||||
<p className="my-2 w-[100px] text-sm">Labels</p>
|
||||
<LabelSelector cardPublicId={cardId} labels={formattedLabels} />
|
||||
<LabelSelector
|
||||
cardPublicId={cardId}
|
||||
labels={formattedLabels}
|
||||
isLoading={isLoading}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex w-full">
|
||||
<p className="my-2 w-[100px] text-sm">Members</p>
|
||||
<MemberSelector cardPublicId={cardId} members={formattedMembers} />
|
||||
<MemberSelector
|
||||
cardPublicId={cardId}
|
||||
members={formattedMembers}
|
||||
isLoading={isLoading}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user