feat: select position when creating a new card

src/server/api/routers/card.ts

@@ -15,6 +15,7 @@ export const cardRouter = createTRPCRouter({
         listPublicId: z.string().min(12),
         labelPublicIds: z.array(z.string().min(12)),
         memberPublicIds: z.array(z.string().min(12)),
+        position: z.enum(["start", "end"]),
       }),
     )
     .mutation(async ({ ctx, input }) => {
@@ -29,13 +30,26 @@ export const cardRouter = createTRPCRouter({
 
       if (!list?.id) return;
 
-      const latestCard = list.cards.length && list.cards[0];
+      const lastCard = list.cards.length && list.cards[0];
+
+      let index = 0;
+
+      if (list.cards.length) {
+        if (input.position === "end" && lastCard) index = lastCard.index + 1;
+
+        if (input.position === "start") {
+          await cardRepo.pushIndex(ctx.db, {
+            listId: list.id,
+            cardIndex: 0,
+          });
+        }
+      }
 
       const newCard = await cardRepo.create(ctx.db, {
         title: input.title,
         createdBy: userId,
         listId: list.id,
-        index: latestCard ? latestCard.index + 1 : 0,
+        index,
       });
 
       const newCardId = newCard?.id;

src/server/db/repository/card.repo.ts

@@ -83,7 +83,7 @@ export const destroy = async (
   const result = await db
     .from("card")
     .update({ deletedAt: args.deletedAt, deletedBy: args.deletedBy })
-    .eq("publicId", args.cardId);
+    .eq("id", args.cardId);
 
   return result;
 };
@@ -327,3 +327,18 @@ export const shiftIndex = async (
 
   return data;
 };
+
+export const pushIndex = async (
+  db: SupabaseClient<Database>,
+  args: {
+    listId: number;
+    cardIndex: number;
+  },
+) => {
+  const { data } = await db.rpc("push_card_index", {
+    list_id: args.listId,
+    card_index: args.cardIndex,
+  });
+
+  return data;
+};

src/types/database.types.ts

@@ -506,6 +506,13 @@ export type Database = {
       [_ in never]: never
     }
     Functions: {
+      push_card_index: {
+        Args: {
+          list_id: number
+          card_index: number
+        }
+        Returns: undefined
+      }
       reorder_cards: {
         Args: {
           card_id: number

src/views/board/components/NewCardForm.tsx

@@ -2,7 +2,12 @@ import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { api } from "~/utils/api";
 
-import { HiXMark } from "react-icons/hi2";
+import {
+  HiXMark,
+  HiOutlineBarsArrowDown,
+  HiOutlineBarsArrowUp,
+} from "react-icons/hi2";
+
 import { Switch } from "@headlessui/react";
 
 import CheckboxDropdown from "~/components/CheckboxDropdown";
@@ -36,12 +41,14 @@ export function NewCardForm({ listPublicId }: NewCardFormProps) {
         labelPublicIds: [],
         memberPublicIds: [],
         isCreateAnotherEnabled: false,
+        position: "start",
       },
     });
 
   const labelPublicIds = watch("labelPublicIds") || [];
   const memberPublicIds = watch("memberPublicIds") || [];
   const isCreateAnotherEnabled = watch("isCreateAnotherEnabled");
+  const position = watch("position");
 
   const refetchBoard = async () => {
     if (boardData?.publicId) {
@@ -104,6 +111,7 @@ export function NewCardForm({ listPublicId }: NewCardFormProps) {
       listPublicId: data.listPublicId,
       labelPublicIds: data.labelPublicIds,
       memberPublicIds: data.memberPublicIds,
+      position: data.position,
     });
   };
 
@@ -268,6 +276,18 @@ export function NewCardForm({ listPublicId }: NewCardFormProps) {
               </div>
             </CheckboxDropdown>
           </div>
+          <button
+            onClick={() =>
+              setValue("position", position === "start" ? "end" : "start")
+            }
+            className="flex h-auto items-center rounded-[5px] border-[1px] border-light-600 bg-light-200 px-1.5 py-1 text-left text-xs text-light-800 hover:bg-light-300 dark:border-dark-600 dark:bg-dark-400 dark:text-dark-1000 dark:hover:bg-dark-500"
+          >
+            {position === "start" ? (
+              <HiOutlineBarsArrowUp size={14} />
+            ) : (
+              <HiOutlineBarsArrowDown size={14} />
+            )}
+          </button>
         </div>
 
         <div className="mt-3 flex items-center justify-end">

supabase/seed.sql

@@ -66,3 +66,12 @@ AS $$
     WHERE "listId" = list_id AND index > card_index AND "deletedAt" IS NULL;
 $$;
 
+CREATE OR REPLACE FUNCTION push_card_index(list_id BIGINT, card_index INT)
+RETURNS VOID
+LANGUAGE SQL
+AS $$
+  UPDATE card
+    SET index = index + 1
+    WHERE "listId" = list_id AND index >= card_index AND "deletedAt" IS NULL;
+$$;
+