update

package.json

@@ -22,6 +22,7 @@
     "react": "^18",
     "react-dom": "^18",
     "react-hook-form": "^7.51.5",
+    "react-icons": "^5.2.1",
     "zod": "^3.23.8"
   },
   "devDependencies": {
@@ -31,6 +32,7 @@
     "eslint": "^8",
     "eslint-config-next": "14.2.3",
     "postcss": "^8",
+    "tailwind-scrollbar": "^3.1.0",
     "tailwindcss": "^3.4.1",
     "typescript": "^5"
   }

prisma/migrations/20240605160230_added_board/migration.sql

@@ -0,0 +1,12 @@
+-- CreateTable
+CREATE TABLE "Group" (
+    "id" TEXT NOT NULL,
+    "name" TEXT NOT NULL,
+    "boardId" TEXT NOT NULL
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "Group_id_key" ON "Group"("id");
+
+-- AddForeignKey
+ALTER TABLE "Group" ADD CONSTRAINT "Group_boardId_fkey" FOREIGN KEY ("boardId") REFERENCES "Board"("id") ON DELETE RESTRICT ON UPDATE CASCADE;

prisma/migrations/20240606000459_added_group_card/migration.sql

@@ -0,0 +1,11 @@
+-- CreateTable
+CREATE TABLE "GroupCard" (
+    "id" TEXT NOT NULL,
+    "title" VARCHAR(200) NOT NULL,
+    "comment" TEXT NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "GroupCard_id_key" ON "GroupCard"("id");

prisma/migrations/20240606005934_update/migration.sql

@@ -0,0 +1,11 @@
+/*
+  Warnings:
+
+  - Added the required column `groupId` to the `GroupCard` table without a default value. This is not possible if the table is not empty.
+
+*/
+-- AlterTable
+ALTER TABLE "GroupCard" ADD COLUMN     "groupId" TEXT NOT NULL;
+
+-- AddForeignKey
+ALTER TABLE "GroupCard" ADD CONSTRAINT "GroupCard_groupId_fkey" FOREIGN KEY ("groupId") REFERENCES "Group"("id") ON DELETE RESTRICT ON UPDATE CASCADE;

prisma/schema.prisma

@@ -92,6 +92,7 @@ model Board {
   user      User       @relation(fields: [userId], references: [id])
   userId    String
   Workspace Workspace?
+  Group     Group[]
 }
 
 model Workspace {
@@ -101,3 +102,22 @@ model Workspace {
   userId  String @unique
   boardId String @unique
 }
+
+model Group {
+  id        String      @unique @default(uuid())
+  name      String
+  board     Board       @relation(fields: [boardId], references: [id])
+  boardId   String
+  GroupCard GroupCard[]
+}
+
+model GroupCard {
+  id      String @unique @default(uuid())
+  title   String @db.VarChar(200)
+  comment String
+  group   Group  @relation(fields: [groupId], references: [id])
+  groupId String
+
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+}

src/app/boards/actions.ts

@@ -41,7 +41,7 @@ export const updateWorkspace = async (boardId: string) => {
   const session = await getServerSession(authOptions);
 
   if (session) {
-    const workspace = await prisma.workspace.update({
+    await prisma.workspace.update({
       where: {
         userId: session.user.id,
       },
@@ -53,3 +53,63 @@ export const updateWorkspace = async (boardId: string) => {
     revalidatePath("/boards");
   }
 };
+
+export const createGroup = async (prevState: TState, data: FormData) => {
+  const name = data.get("group_name") as string;
+  const session = await getServerSession(authOptions);
+
+  if (!name.length) {
+    return { status: "failed" };
+  }
+
+  if (session) {
+    const workspace = await prisma.workspace.findUnique({
+      where: {
+        userId: session.user.id,
+      },
+    });
+
+    if (workspace) {
+      await prisma.group.create({
+        data: {
+          name,
+          boardId: workspace.boardId,
+        },
+      });
+    }
+    revalidatePath("/boards");
+
+    return { status: "success" };
+  }
+
+  return { status: "failed" };
+};
+
+type TCreateCardState = {
+  status: string;
+  groupId?: string;
+};
+
+export const createCard = async (
+  prevState: TCreateCardState,
+  data: FormData
+) => {
+  const title = data.get("title") as string;
+  const description = data.get("description") as string;
+  const groupId = prevState.groupId;
+
+  if (!title.length || !groupId) {
+    return { status: "failed" };
+  }
+
+  await prisma.groupCard.create({
+    data: {
+      title,
+      comment: description,
+      groupId,
+    },
+  });
+
+  revalidatePath("/boards");
+  return { status: "success", groupId: "" };
+};

src/app/boards/components/edit-card-button.tsx

@@ -0,0 +1,25 @@
+"use client";
+import React, { useState } from "react";
+import { FiEdit } from "react-icons/fi";
+import Modal from "./modal";
+
+const EditCardButton = () => {
+  const [visible, setVisible] = useState(false);
+  return (
+    <>
+      <Modal
+        header="Edit Card"
+        visible={visible}
+        onHide={() => setVisible(false)}
+        onSave={() => console.log("s")}
+      >
+        This
+      </Modal>
+      <button className="hover:bg-gray-200 text-gray-800 font-bold py-2 px-2 rounded h-fit">
+        <FiEdit />
+      </button>
+    </>
+  );
+};
+
+export default EditCardButton;

src/app/boards/components/forms/card-form.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import { InputTextarea } from "primereact/inputtextarea";
+import { InputText } from "primereact/inputtext";
+
+const CardForm = ({
+  formAction,
+  formRef,
+}: {
+  formAction: (payload: FormData) => void;
+  formRef: React.MutableRefObject<HTMLFormElement | null>;
+}) => {
+  return (
+    <form action={formAction} ref={formRef}>
+      <div>
+        <span className="">Title</span>
+        <InputText className="w-full" name="title" />
+      </div>
+      <div className="mt-3">
+        <span className="">Description</span>
+        <InputTextarea
+          rows={3}
+          cols={30}
+          className="w-full"
+          name="description"
+          autoResize
+        />
+      </div>
+    </form>
+  );
+};
+
+export default CardForm;

src/app/boards/components/group-card.tsx

@@ -0,0 +1,24 @@
+"use client";
+import React from "react";
+import EditCardButton from "./edit-card-button";
+
+type GroupCardProps = {
+  title: string;
+  description: string;
+};
+
+const GroupCard = ({ title, description }: GroupCardProps) => {
+  return (
+    <div className="w-full bg-white shadow rounded p-2">
+      <div className="flex justify-between p-2">
+        <div className="flex flex-col gap-1">
+          <h2 className="font-semibold text-md">{title}</h2>
+          <div className="text-sm">{description}</div>
+        </div>
+        <EditCardButton />
+      </div>
+    </div>
+  );
+};
+
+export default GroupCard;

src/app/boards/components/group.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import GroupCard from "./group-card";
+import NewCardButton from "./new-card-button";
+import prisma from "@/lib/db";
+
+type GroupProps = {
+  id: string;
+  name: string;
+};
+
+const Group = async ({ id, name }: GroupProps) => {
+  const cards = await prisma.groupCard.findMany({
+    where: {
+      groupId: id,
+    },
+  });
+  return (
+    <div className="w-full">
+      <div className="mb-3">{name}</div>
+      {cards.map((card) => {
+        return (
+          <div key={card.id} className="mb-4">
+            <GroupCard title={card.title} description={card.comment} />
+          </div>
+        );
+      })}
+      <NewCardButton groupId={id} />
+    </div>
+  );
+};
+
+export default Group;

src/app/boards/components/modal.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+import { Dialog } from "primereact/dialog";
+import { Button } from "primereact/button";
+
+type ModalProps = {
+  visible: boolean;
+  onHide: () => void;
+  children: React.ReactNode;
+  onSave: () => void;
+  header: string;
+};
+
+const Modal = ({ visible, onHide, children, onSave, header }: ModalProps) => {
+  const renderFooter = () => {
+    return (
+      <div>
+        <Button
+          label="Cancel"
+          icon="pi pi-times"
+          onClick={() => onHide()}
+          className="p-button-text"
+        />
+        <Button
+          label="Create"
+          icon="pi pi-check"
+          onClick={onSave}
+          autoFocus
+          type="submit"
+        />
+      </div>
+    );
+  };
+  return (
+    <Dialog
+      className="w-48"
+      visible={visible}
+      onHide={onHide}
+      breakpoints={{ "960px": "75vw", "640px": "100vw" }}
+      style={{ width: "50vw" }}
+      header={header}
+      footer={renderFooter()}
+      draggable={false}
+    >
+      {children}
+    </Dialog>
+  );
+};
+
+export default Modal;