feat: select list

2024-01-04 14:28:41 +00:00
parent 2530652a4b
commit 0063f909d1
6 changed files with 182 additions and 31 deletions
--- a/src/app/boards/[...id]/page.tsx
+++ b/src/app/boards/[...id]/page.tsx
@@ -141,9 +141,7 @@ export default function BoardPage() {

      updateCard({
        cardId: draggableId,
-        currentListId: source.droppableId,
        newListId: destination.droppableId,
-        currentIndex: source.index,
        newIndex: destination.index,
      });
    }
@@ -163,7 +161,7 @@ export default function BoardPage() {
            value={formik.values.name}
            onChange={formik.handleChange}
            onBlur={formik.submitForm}
-            className="block border-0 bg-transparent p-0 py-1.5 font-medium tracking-tight text-dark-1000 focus:ring-0 focus-visible:outline-none sm:text-[1.2rem] sm:leading-6"
+            className="block border-0 bg-transparent p-0 py-0 font-medium leading-[2.3rem] tracking-tight text-dark-1000 focus:ring-0 focus-visible:outline-none sm:text-[1.2rem]"
          />
        </form>
        <div className="flex items-center">
@@ -182,7 +180,7 @@ export default function BoardPage() {
        </div>
      </div>

-      <div className="scrollbar-thumb-rounded-[4px] scrollbar-track-rounded-[4px] scrollbar-w-none scrollbar-h-[8px] scrollbar scrollbar-thumb-dark-300 scrollbar-track-dark-100 flex-1 overflow-y-hidden overflow-x-scroll overscroll-contain pb-5">
+      <div className="scrollbar-w-none flex-1 overflow-y-hidden overflow-x-scroll overscroll-contain pb-5 scrollbar scrollbar-track-dark-100 scrollbar-thumb-dark-300 scrollbar-track-rounded-[4px] scrollbar-thumb-rounded-[4px] scrollbar-h-[8px]">
        <DragDropContext onDragEnd={onDragEnd}>
          <Droppable droppableId="all-lists" direction="horizontal" type="LIST">
            {(provided) => (
@@ -206,7 +204,7 @@ export default function BoardPage() {
                        <div
                          ref={provided.innerRef}
                          {...provided.droppableProps}
-                          className="scrollbar-thumb-rounded-[4px] scrollbar-track-rounded-[4px] scrollbar-w-[8px] scrollbar scrollbar-thumb-dark-600 scrollbar-track-dark-100 h-full max-h-[calc(100vh-250px)] min-h-[2rem] overflow-y-auto pr-1"
+                          className="h-full max-h-[calc(100vh-250px)] min-h-[2rem] overflow-y-auto pr-1 scrollbar scrollbar-track-dark-100 scrollbar-thumb-dark-600 scrollbar-track-rounded-[4px] scrollbar-thumb-rounded-[4px] scrollbar-w-[8px]"
                        >
                          {list.cards?.map((card, index) => (
                            <Draggable
--- a/src/app/cards/[...id]/components/ListSelector.tsx
+++ b/src/app/cards/[...id]/components/ListSelector.tsx
@@ -0,0 +1,109 @@
+import { Fragment } from "react";
+import { api } from "~/trpc/react";
+import { Menu, Transition } from "@headlessui/react";
+import { useFormik } from "formik";
+
+interface ListSelectorProps {
+  cardPublicId: string;
+  lists: {
+    publicId: string;
+    name: string;
+    selected: boolean;
+  }[];
+}
+
+export default function ListSelector({
+  cardPublicId,
+  lists,
+}: ListSelectorProps) {
+  const utils = api.useUtils();
+
+  const refetchCard = () => utils.card.byId.refetch({ id: cardPublicId });
+
+  const updateCardList = api.card.reorder.useMutation({
+    onSuccess: async () => {
+      await refetchCard();
+    },
+  });
+
+  const formik = useFormik({
+    initialValues: {
+      ...Object.fromEntries(
+        lists?.map((list) => [list.publicId, list.selected]) ?? [],
+      ),
+    },
+    onSubmit: (values) => {
+      console.log({ values });
+    },
+    enableReinitialize: true,
+  });
+
+  const selectedList = lists.find((list) => list.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">
+          {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"
+        >
+          <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}>
+                {lists?.map((list) => (
+                  <Menu.Item key={list.publicId}>
+                    {() => (
+                      <div
+                        key={list.publicId}
+                        className="flex items-center rounded-[5px] p-2 hover:bg-dark-300"
+                        onClick={async (e) => {
+                          e.preventDefault();
+                          await formik.setFieldValue(
+                            list.publicId,
+                            !formik.values[list.publicId],
+                          );
+
+                          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>
+    </>
+  );
+}
--- a/src/app/cards/[...id]/components/NewLabelForm.tsx
+++ b/src/app/cards/[...id]/components/NewLabelForm.tsx
@@ -1,4 +1,3 @@
-"use client";
 import { Fragment, useState } from "react";
 import { Listbox, Transition } from "@headlessui/react";
 import { api } from "~/trpc/react";
--- a/src/app/cards/[...id]/page.tsx
+++ b/src/app/cards/[...id]/page.tsx
@@ -1,12 +1,15 @@
 "use client";

+import Link from "next/link";
 import { useParams } from "next/navigation";
 import { useFormik } from "formik";
 import ContentEditable from "react-contenteditable";
+import { IoChevronForwardSharp } from "react-icons/io5";

 import Dropdown from "./components/Dropdown";
 import { DeleteCardConfirmation } from "./components/DeleteCardConfirmation";
 import LabelSelector from "./components/LabelSelector";
+import ListSelector from "./components/ListSelector";
 import { NewLabelForm } from "./components/NewLabelForm";

 import Modal from "~/app/_components/modal";
@@ -30,6 +33,7 @@ export default function CardPage() {

  const boardId = data?.list?.board?.publicId;
  const labels = data?.list?.board?.labels;
+  const board = data?.list?.board;
  const selectedLabels = data?.labels;

  const formattedLabels =
@@ -45,6 +49,12 @@ export default function CardPage() {
      };
    }) ?? [];

+  const formattedLists =
+    board?.lists.map((list) => ({
+      ...list,
+      selected: list.publicId === data?.list.publicId,
+    })) ?? [];
+
  const updateCard = api.card.update.useMutation();

  const formik = useFormik({
@@ -68,7 +78,14 @@ export default function CardPage() {
  return (
    <div className="flex h-full flex-1 flex-row">
      <div className="w-full p-8">
-        <div className="mb-8 flex w-full justify-between">
+        <div className="mb-8 flex w-full items-center justify-between">
+          <Link
+            className="font-medium leading-[2.3rem] tracking-tight text-dark-900 sm:text-[1.2rem]"
+            href={`/boards/${board?.publicId}`}
+          >
+            {board?.name}
+          </Link>
+          <IoChevronForwardSharp size={18} className="mx-2 text-dark-900" />
          <form onSubmit={formik.handleSubmit} className="w-full space-y-6">
            <div>
              <input
@@ -78,7 +95,7 @@ export default function CardPage() {
                value={formik.values.title}
                onChange={formik.handleChange}
                onBlur={formik.submitForm}
-                className="block w-full border-0 bg-transparent p-0 py-0 font-medium tracking-tight text-dark-1000 focus:ring-0 sm:text-[1.2rem] sm:leading-6"
+                className="block w-full border-0 bg-transparent p-0 py-0 font-medium tracking-tight text-dark-1000 focus:ring-0 sm:text-[1.2rem]"
              />
            </div>
          </form>
@@ -103,8 +120,12 @@ export default function CardPage() {
        </div>
      </div>
      <div className="min-w-[325px] border-l-[1px] border-dark-400 bg-dark-100 p-8 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} />
+        </div>
        <div className="flex w-full">
-          <p className="my-2 pr-8 text-sm">Labels</p>
+          <p className="my-2 w-[100px] text-sm">Labels</p>
          <LabelSelector cardPublicId={cardId} labels={formattedLabels} />
        </div>
      </div>
--- a/src/app/providers/board.tsx
+++ b/src/app/providers/board.tsx
@@ -44,9 +44,7 @@ interface UpdateListParams {

 interface UpdateCardParams {
  cardId: string;
-  currentListId: string;
  newListId: string;
-  currentIndex: number;
  newIndex: number;
 }

@@ -101,18 +99,10 @@ export const BoardProvider: React.FC<{ children: ReactNode }> = ({
    });
  };

-  const updateCard = ({
-    cardId,
-    currentListId,
-    newListId,
-    currentIndex,
-    newIndex,
-  }: UpdateCardParams) => {
+  const updateCard = ({ cardId, newListId, newIndex }: UpdateCardParams) => {
    updateCardMutation.mutate({
      cardId,
-      currentListId,
      newListId,
-      currentIndex,
      newIndex,
    });
  };
--- a/src/server/api/routers/card.ts
+++ b/src/server/api/routers/card.ts
@@ -114,6 +114,7 @@ export const cardRouter = createTRPCRouter({
                board: {
                  columns: {
                    publicId: true,
+                    name: true,
                  },
                  with: {
                    labels: {
@@ -122,6 +123,13 @@ export const cardRouter = createTRPCRouter({
                        colourCode: true,
                        name: true,
                      }
+                    },
+                    lists: {
+                      columns: {
+                        publicId: true,
+                        name: true,
+                      },
+                      where: isNull(lists.deletedAt)
                    }
                  }
                }
@@ -171,10 +179,8 @@ export const cardRouter = createTRPCRouter({
      .input(
        z.object({ 
          cardId: z.string().min(12),
-          currentListId: z.string().min(12),
          newListId: z.string().min(12),
-          currentIndex: z.number(),
-          newIndex: z.number()
+          newIndex: z.number().optional(),
        }))
      .mutation(({ ctx, input }) => {
        const userId = ctx.session?.user.id;
@@ -182,8 +188,36 @@ export const cardRouter = createTRPCRouter({
        if (!userId) return;

        return ctx.db.transaction(async (tx) => {
-          const [currentList] = await tx.select({ id: lists.id }).from(lists).where(and(eq(lists.publicId, input.currentListId)))
-          const [newList] = await tx.select({ id: lists.id }).from(lists).where(and(eq(lists.publicId, input.newListId)))
+          const card = await tx.query.cards.findFirst({
+            with: {
+              list: true,
+            },
+            where: and(eq(cards.publicId, input.cardId), isNull(cards.deletedAt)),
+          });
+
+          if (!card) return;
+
+          const currentList = card.list;
+          const currentIndex = card.index;
+          
+          let newIndex = input.newIndex;
+
+          const newList = await tx.query.lists.findFirst({
+            with: {
+              cards: {
+                orderBy: [desc(cards.index)],
+                limit: 1,
+              },
+            },
+            where: and(eq(lists.publicId, input.newListId), isNull(cards.deletedAt)),
+          });
+
+          if (!newList) return;
+
+          if (!newIndex) {
+            const lastCardIndex = newList.cards[0]?.index;
+            newIndex = lastCardIndex ? lastCardIndex + 1 : 0;
+          }

          if (!currentList?.id || !newList?.id) return;

@@ -192,21 +226,21 @@ export const cardRouter = createTRPCRouter({
              UPDATE ${cards}
              SET ${cards.index} =
                CASE
-                  WHEN ${cards.index} = ${input.currentIndex} THEN ${input.newIndex}
-                  WHEN ${input.currentIndex} < ${input.newIndex} AND ${cards.index} > ${input.currentIndex} AND ${cards.index} <= ${input.newIndex} THEN ${cards.index} - 1
-                  WHEN ${input.currentIndex} > ${input.newIndex} AND ${cards.index} >= ${input.newIndex} AND ${cards.index} < ${input.currentIndex} THEN ${cards.index} + 1
+                  WHEN ${cards.index} = ${currentIndex} THEN ${newIndex}
+                  WHEN ${currentIndex} < ${newIndex} AND ${cards.index} > ${currentIndex} AND ${cards.index} <= ${newIndex} THEN ${cards.index} - 1
+                  WHEN ${currentIndex} > ${newIndex} AND ${cards.index} >= ${newIndex} AND ${cards.index} < ${currentIndex} THEN ${cards.index} + 1
                  ELSE ${cards.index}
                END
              WHERE ${cards.listId} = ${currentList.id} AND ${cards.deletedAt} IS NULL;
            `);
          } else {
-            await tx.execute(sql`UPDATE ${cards} SET ${cards.index} = ${cards.index} + 1 WHERE ${cards.listId} = ${newList.id} AND ${cards.index} >= ${input.newIndex} AND ${cards.deletedAt} IS NULL;`)
+            await tx.execute(sql`UPDATE ${cards} SET ${cards.index} = ${cards.index} + 1 WHERE ${cards.listId} = ${newList.id} AND ${cards.index} >= ${newIndex} AND ${cards.deletedAt} IS NULL;`)

-            await tx.execute(sql`UPDATE ${cards} SET ${cards.index} = ${cards.index} - 1 WHERE ${cards.listId} = ${currentList.id} AND ${cards.index} >= ${input.currentIndex} AND ${cards.deletedAt} IS NULL;`)
+            await tx.execute(sql`UPDATE ${cards} SET ${cards.index} = ${cards.index} - 1 WHERE ${cards.listId} = ${currentList.id} AND ${cards.index} >= ${currentIndex} AND ${cards.deletedAt} IS NULL;`)

            await tx
              .update(cards)
-              .set({ listId: newList.id, index: input.newIndex })
+              .set({ listId: newList.id, index: newIndex })
              .where(and(eq(cards.publicId, input.cardId), isNull(cards.deletedAt)));
          }
        })