feat: assign members to cards
This commit is contained in:
Henry
@@ -255,23 +255,25 @@ export default function BoardPage() {
|
||||
<div>{label.name}</div>
|
||||
</span>
|
||||
))}
|
||||
{card.members?.map(({ member }) => (
|
||||
<span
|
||||
key={member.publicId}
|
||||
className="inline-flex h-6 w-6 items-center justify-center rounded-full bg-gray-500"
|
||||
>
|
||||
<span className="text-[10px] font-medium leading-none text-white">
|
||||
{member.user.name
|
||||
.split(" ")
|
||||
.map((namePart) =>
|
||||
namePart
|
||||
.charAt(0)
|
||||
.toUpperCase(),
|
||||
)
|
||||
.join("")}
|
||||
<div className="isolate flex -space-x-1 overflow-hidden">
|
||||
{card.members?.map(({ member }) => (
|
||||
<span
|
||||
key={member.publicId}
|
||||
className="inline-flex h-6 w-6 items-center justify-center rounded-full bg-gray-500 ring-2 ring-dark-500"
|
||||
>
|
||||
<span className="text-[10px] font-medium leading-none text-white">
|
||||
{member.user.name
|
||||
.split(" ")
|
||||
.map((namePart) =>
|
||||
namePart
|
||||
.charAt(0)
|
||||
.toUpperCase(),
|
||||
)
|
||||
.join("")}
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
))}
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
</Link>
|
||||
|
||||
141
src/app/cards/[cardId]/components/MemberSelector.tsx
Normal file
141
src/app/cards/[cardId]/components/MemberSelector.tsx
Normal file
@@ -0,0 +1,141 @@
|
||||
"use client";
|
||||
|
||||
import { Fragment } from "react";
|
||||
import { api } from "~/trpc/react";
|
||||
import { Menu, Transition } from "@headlessui/react";
|
||||
import { HiMiniPlus } from "react-icons/hi2";
|
||||
import { useFormik } from "formik";
|
||||
|
||||
interface MemberSelectorProps {
|
||||
cardPublicId: string;
|
||||
members: {
|
||||
publicId: string;
|
||||
user: {
|
||||
id: string;
|
||||
name: string | null;
|
||||
};
|
||||
selected: boolean;
|
||||
}[];
|
||||
}
|
||||
|
||||
export default function LabelSelector({
|
||||
cardPublicId,
|
||||
members,
|
||||
}: MemberSelectorProps) {
|
||||
const utils = api.useUtils();
|
||||
|
||||
const refetchCard = () => utils.card.byId.refetch({ id: cardPublicId });
|
||||
|
||||
const addOrRemoveMember = api.card.addOrRemoveMember.useMutation({
|
||||
onSuccess: async () => {
|
||||
await refetchCard();
|
||||
},
|
||||
});
|
||||
|
||||
const formik = useFormik({
|
||||
initialValues: {
|
||||
...Object.fromEntries(
|
||||
members?.map((member) => [member.publicId, member.selected]) ?? [],
|
||||
),
|
||||
},
|
||||
onSubmit: (values) => {
|
||||
console.log({ values });
|
||||
},
|
||||
enableReinitialize: true,
|
||||
});
|
||||
|
||||
const selectedMembers = members.filter((member) => member.selected);
|
||||
|
||||
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-dark-100 pl-2 text-left text-sm text-dark-1000 hover:border-dark-300 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-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"
|
||||
>
|
||||
<Menu.Items className="absolute right-[200px] top-[30px] z-10 mt-2 w-56 origin-top-right rounded-md border-[1px] border-dark-500 bg-dark-200 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
|
||||
<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-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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -10,6 +10,7 @@ import Dropdown from "./components/Dropdown";
|
||||
import { DeleteCardConfirmation } from "./components/DeleteCardConfirmation";
|
||||
import LabelSelector from "./components/LabelSelector";
|
||||
import ListSelector from "./components/ListSelector";
|
||||
import MemberSelector from "./components/MemberSelector";
|
||||
import { NewLabelForm } from "./components/NewLabelForm";
|
||||
|
||||
import Modal from "~/app/components/modal";
|
||||
@@ -35,8 +36,10 @@ export default function CardPage() {
|
||||
|
||||
const boardId = data?.list?.board?.publicId;
|
||||
const labels = data?.list?.board?.labels;
|
||||
const workspaceMembers = data?.list?.board?.workspace?.members;
|
||||
const board = data?.list?.board;
|
||||
const selectedLabels = data?.labels;
|
||||
const selectedMembers = data?.members;
|
||||
|
||||
const formattedLabels =
|
||||
labels?.map((label) => {
|
||||
@@ -57,6 +60,18 @@ export default function CardPage() {
|
||||
selected: list.publicId === data?.list.publicId,
|
||||
})) ?? [];
|
||||
|
||||
const formattedMembers =
|
||||
workspaceMembers?.map((member) => {
|
||||
const isSelected = selectedMembers?.some(
|
||||
(assignedMember) => assignedMember.member.publicId === member.publicId,
|
||||
);
|
||||
|
||||
return {
|
||||
...member,
|
||||
selected: isSelected ?? false,
|
||||
};
|
||||
}) ?? [];
|
||||
|
||||
const updateCard = api.card.update.useMutation();
|
||||
|
||||
const formik = useFormik({
|
||||
@@ -126,10 +141,14 @@ export default function CardPage() {
|
||||
<p className="my-2 w-[100px] text-sm">List</p>
|
||||
<ListSelector cardPublicId={cardId} lists={formattedLists} />
|
||||
</div>
|
||||
<div className="flex w-full">
|
||||
<div className="mb-4 flex w-full">
|
||||
<p className="my-2 w-[100px] text-sm">Labels</p>
|
||||
<LabelSelector cardPublicId={cardId} labels={formattedLabels} />
|
||||
</div>
|
||||
<div className="flex w-full">
|
||||
<p className="my-2 w-[100px] text-sm">Members</p>
|
||||
<MemberSelector cardPublicId={cardId} members={formattedMembers} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Modal>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { z } from "zod";
|
||||
import { and, desc, eq, isNull, sql } from "drizzle-orm";
|
||||
|
||||
import { cards, cardsToLabels, labels, lists } from "~/server/db/schema";
|
||||
import { cards, cardsToLabels, cardToWorkspaceMembers, labels, lists, workspaceMembers } from "~/server/db/schema";
|
||||
import { generateUID } from "~/utils/generateUID";
|
||||
|
||||
import {
|
||||
@@ -86,6 +86,45 @@ export const cardRouter = createTRPCRouter({
|
||||
});
|
||||
})
|
||||
}),
|
||||
addOrRemoveMember: publicProcedure
|
||||
.input(
|
||||
z.object({
|
||||
cardPublicId: z.string().min(12),
|
||||
workspaceMemberPublicId: z.string().min(12),
|
||||
}),
|
||||
)
|
||||
.mutation(({ ctx, input }) => {
|
||||
const userId = ctx.session?.user.id;
|
||||
|
||||
if (!userId) return;
|
||||
|
||||
return ctx.db.transaction(async (tx) => {
|
||||
const card = await tx.query.cards.findFirst({
|
||||
where: and(eq(cards.publicId, input.cardPublicId), isNull(cards.deletedAt)),
|
||||
});
|
||||
|
||||
const member = await tx.query.workspaceMembers.findFirst({
|
||||
where: eq(workspaceMembers.publicId, input.workspaceMemberPublicId),
|
||||
});
|
||||
|
||||
if (!card || !member) return;
|
||||
|
||||
console.log({ member })
|
||||
|
||||
const memberExists = await tx.query.cardToWorkspaceMembers.findFirst({
|
||||
where: and(eq(cardToWorkspaceMembers.cardId, card.id), eq(cardToWorkspaceMembers.workspaceMemberId, member.id)),
|
||||
});
|
||||
|
||||
if (memberExists) {
|
||||
return tx.delete(cardToWorkspaceMembers).where(and(eq(cardToWorkspaceMembers.cardId, card.id), eq(cardToWorkspaceMembers.workspaceMemberId, member.id)),);
|
||||
}
|
||||
|
||||
return tx.insert(cardToWorkspaceMembers).values({
|
||||
cardId: card.id,
|
||||
workspaceMemberId: member.id,
|
||||
});
|
||||
})
|
||||
}),
|
||||
byId: publicProcedure
|
||||
.input(z.object({ id: z.string().min(12) }))
|
||||
.query(({ ctx, input }) =>
|
||||
@@ -103,7 +142,7 @@ export const cardRouter = createTRPCRouter({
|
||||
name: true,
|
||||
colourCode: true,
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
},
|
||||
list: {
|
||||
@@ -130,9 +169,50 @@ export const cardRouter = createTRPCRouter({
|
||||
name: true,
|
||||
},
|
||||
where: isNull(lists.deletedAt)
|
||||
},
|
||||
workspace: {
|
||||
columns: {
|
||||
publicId: true,
|
||||
},
|
||||
with: {
|
||||
members: {
|
||||
columns: {
|
||||
publicId: true,
|
||||
},
|
||||
with: {
|
||||
user: {
|
||||
columns: {
|
||||
id: true,
|
||||
name: true,
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
},
|
||||
members: {
|
||||
columns: {
|
||||
workspaceMemberId: false,
|
||||
cardId: false,
|
||||
},
|
||||
with: {
|
||||
member: {
|
||||
columns: {
|
||||
publicId: true,
|
||||
},
|
||||
with: {
|
||||
user: {
|
||||
columns: {
|
||||
id: true,
|
||||
name: true,
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
@@ -334,8 +334,9 @@ export const workspaces = mySqlTable(
|
||||
}
|
||||
);
|
||||
|
||||
export const workspaceRelations = relations(workspaces, ({ one }) => ({
|
||||
export const workspaceRelations = relations(workspaces, ({ one, many }) => ({
|
||||
user: one(users, { fields: [workspaces.createdBy], references: [users.id] }),
|
||||
members: many(workspaceMembers)
|
||||
}));
|
||||
|
||||
export const workspaceMembers = mySqlTable(
|
||||
|
||||
Reference in New Issue
Block a user