folder control

frontend/app/projects/[projectId]/folders/folder-dialog.tsx

@@ -0,0 +1,140 @@
+"use client";
+import React from "react";
+import { useState, useEffect } from "react";
+import {
+  Button,
+  Input,
+  Textarea,
+  Modal,
+  ModalContent,
+  ModalHeader,
+  ModalBody,
+  ModalFooter,
+} from "@nextui-org/react";
+import { FolderType } from "./layout";
+
+type Props = {
+  isOpen: boolean;
+  editingFolder: FolderType;
+  onCancel: () => void;
+  onSubmit: (name: string, detail: string) => void;
+};
+
+export function FolderDialog({
+  isOpen,
+  editingFolder,
+  onCancel,
+  onSubmit,
+}: Props) {
+  const [folderName, setFolderName] = useState({
+    text: editingFolder ? editingFolder.name : "",
+    isValid: false,
+    errorMessage: "",
+  });
+
+  const [folderDetail, setFolderDetail] = useState({
+    text: editingFolder ? editingFolder.detail : "",
+    isValid: false,
+    errorMessage: "",
+  });
+
+  useEffect(() => {
+    if (editingFolder) {
+      setFolderName({
+        ...folderName,
+        text: editingFolder.name,
+      });
+
+      setFolderDetail({
+        ...folderDetail,
+        text: editingFolder.detail ? editingFolder.detail : "",
+      });
+    } else {
+      setFolderName({
+        ...folderName,
+        text: "",
+      });
+
+      setFolderDetail({
+        ...folderDetail,
+        text: "",
+      });
+    }
+  }, [editingFolder]);
+
+  const clear = () => {
+    setFolderName({
+      isValid: false,
+      text: "",
+      errorMessage: "",
+    });
+    setFolderDetail({
+      isValid: false,
+      text: "",
+      errorMessage: "",
+    });
+  };
+
+  const validate = () => {
+    if (!folderName.text) {
+      setFolderName({
+        text: "",
+        isValid: false,
+        errorMessage: "Please enter folder name",
+      });
+
+      return;
+    }
+
+    onSubmit(folderName.text, folderDetail.text);
+    clear();
+  };
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onOpenChange={() => {
+        onCancel();
+      }}
+    >
+      <ModalContent>
+        <ModalHeader className="flex flex-col gap-1">Folder</ModalHeader>
+        <ModalBody>
+          <Input
+            type="text"
+            label="Folder Name"
+            value={folderName.text}
+            isInvalid={folderName.isValid}
+            errorMessage={folderName.errorMessage}
+            onChange={(e) => {
+              setFolderName({
+                ...folderName,
+                text: e.target.value,
+              });
+            }}
+          />
+          <Textarea
+            label="Folder Detail"
+            value={folderDetail.text}
+            isInvalid={folderDetail.isValid}
+            errorMessage={folderDetail.errorMessage}
+            onChange={(e) => {
+              setFolderDetail({
+                ...folderDetail,
+                text: e.target.value,
+              });
+            }}
+          />
+        </ModalBody>
+        <ModalFooter>
+          <Button variant="light" onPress={onCancel}>
+            Close
+          </Button>
+          <Button color="primary" onPress={validate}>
+            {editingFolder ? "Update" : "Create"}
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  );
+}

frontend/app/projects/[projectId]/folders/folder-edit-menu.tsx

@@ -0,0 +1,38 @@
+import {
+  Button,
+  Dropdown,
+  DropdownTrigger,
+  DropdownMenu,
+  DropdownItem,
+} from "@nextui-org/react";
+import { MoreVertical } from "lucide-react";
+import { FolderType } from "./layout";
+
+export default function FolderEditMenu(
+  folder: FolderType,
+  onEditClick: (folder: FolderType) => void,
+  onDeleteClick: (folderId: number) => void
+) {
+  return (
+    <Dropdown>
+      <DropdownTrigger>
+        <Button isIconOnly size="sm" className="bg-transparent rounded-full">
+          <MoreVertical size={16} />
+        </Button>
+      </DropdownTrigger>
+      <DropdownMenu aria-label="Static Actions">
+        <DropdownItem key="edit" onClick={() => onEditClick(folder)}>
+          Edit folder
+        </DropdownItem>
+        <DropdownItem
+          key="delete"
+          className="text-danger"
+          color="danger"
+          onClick={() => onDeleteClick(folder.id)}
+        >
+          Delete folder
+        </DropdownItem>
+      </DropdownMenu>
+    </Dropdown>
+  );
+}

frontend/app/projects/[projectId]/folders/layout.tsx

@@ -4,9 +4,21 @@ import Config from "@/config/config";
 const apiServer = Config.apiServer;
 import { Button, Listbox, ListboxItem } from "@nextui-org/react";
 import { Folder, Plus } from "lucide-react";
+import { FolderDialog } from "./folder-dialog";
+import FolderEditMenu from "./folder-edit-menu";
 import { useRouter } from "next/navigation";
 import useGetCurrentIds from "@/utils/useGetCurrentIds";
 
+export type FolderType = {
+  id: number;
+  name: string;
+  detail: string;
+  projectId: number;
+  parentFolderId: number | null;
+  createdAt: string;
+  updatedAt: string;
+};
+
 /**
  * fetch folder records
  *
@@ -34,21 +46,165 @@ async function fetchFolders(url) {
   }
 }
 
-export default function ProjectsLayout({
+/**
+ * Create project
+ */
+async function createFolder(
+  name: string,
+  detail: string,
+  projectId: number,
+  parentFolderId: number
+) {
+  const newFolderData = {
+    name: name,
+    detail: detail,
+    projectId: projectId,
+    parentFolderId: parentFolderId,
+  };
+
+  const fetchOptions = {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify(newFolderData),
+  };
+
+  const url = `${apiServer}/folders`;
+
+  try {
+    const response = await fetch(url, fetchOptions);
+    if (!response.ok) {
+      throw new Error(`HTTP error! Status: ${response.status}`);
+    }
+    const data = await response.json();
+    return data;
+  } catch (error) {
+    console.error("Error creating new project:", error);
+    throw error;
+  }
+}
+
+/**
+ * Update folder
+ */
+async function updateFolder(
+  folderId: number,
+  name: string,
+  detail: string,
+  projectId: number,
+  parentFolderId: number
+) {
+  const updateFolderData = {
+    name: name,
+    detail: detail,
+    projectId: projectId,
+    parentFolderId: parentFolderId,
+  };
+
+  const fetchOptions = {
+    method: "PUT",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify(updateFolderData),
+  };
+
+  const url = `${apiServer}/folders/${folderId}`;
+
+  try {
+    const response = await fetch(url, fetchOptions);
+    if (!response.ok) {
+      throw new Error(`HTTP error! Status: ${response.status}`);
+    }
+    const data = await response.json();
+    return data;
+  } catch (error) {
+    console.error("Error updating project:", error);
+    throw error;
+  }
+}
+
+/**
+ * Delete folder
+ */
+async function deleteFolder(folderId: number) {
+  const fetchOptions = {
+    method: "DELETE",
+    headers: {
+      "Content-Type": "application/json",
+    },
+  };
+
+  const url = `${apiServer}/folders/${folderId}`;
+
+  try {
+    const response = await fetch(url, fetchOptions);
+    if (!response.ok) {
+      throw new Error(`HTTP error! Status: ${response.status}`);
+    }
+  } catch (error) {
+    console.error("Error deleting project:", error);
+    throw error;
+  }
+}
+
+export default function FoldersLayout({
   children,
   params,
 }: {
   children: React.ReactNode;
-  params: { projectId: string };
+  params: { projectId: number };
 }) {
   const [folders, setFolders] = useState([]);
-  const [selectedFolder, setSelectedFolder] = useState({
-    id: null,
-    name: "",
-  });
+  const [selectedFolder, setSelectedFolder] = useState<FolderType>({});
+
   const url = `${apiServer}/folders?projectId=${params.projectId}`;
   const { folderId } = useGetCurrentIds();
 
+  const [isFolderDialogOpen, setIsFolderDialogOpen] = useState(false);
+  const [editingFolder, setEditingProject] = useState<FolderType | null>(null);
+
+  const openDialogForCreate = () => {
+    setIsFolderDialogOpen(true);
+    setEditingProject(null);
+  };
+
+  const closeDialog = () => {
+    setIsFolderDialogOpen(false);
+    setEditingProject(null);
+  };
+
+  const onSubmit = async (name: string, detail: string) => {
+    if (editingFolder) {
+      const updatedProject = await updateFolder(
+        editingFolder.id,
+        name,
+        detail,
+        params.projectId,
+        null
+      );
+      const updatedProjects = folders.map((project) =>
+        project.id === updatedProject.id ? updatedProject : project
+      );
+      setFolders(updatedProjects);
+    } else {
+      const newProject = await createFolder(
+        name,
+        detail,
+        params.projectId,
+        null
+      );
+      setFolders([...folders, newProject]);
+    }
+    closeDialog();
+  };
+
+  const onEditClick = (folder: FolderType) => {
+    setEditingProject(folder);
+    setIsFolderDialogOpen(true);
+  };
+
   useEffect(() => {
     async function fetchDataEffect() {
       try {
@@ -76,6 +232,7 @@ export default function ProjectsLayout({
           size="sm"
           variant="bordered"
           className="m-2"
+          onClick={openDialogForCreate}
         >
           New Folder
         </Button>
@@ -94,6 +251,14 @@ export default function ProjectsLayout({
                   ? "bg-gray-300"
                   : ""
               }
+              endContent={
+                <FolderEditMenu
+                  key={index}
+                  folder={folder}
+                  onEditClick={onEditClick}
+                  onDeleteClick={() => console.log("TODO")}
+                />
+              }
             >
               {folder.name}
             </ListboxItem>
@@ -101,9 +266,18 @@ export default function ProjectsLayout({
         </Listbox>
       </div>
       <div className="flex-grow w-full">
-        <h3 className="border-b-1 w-full font-bold p-3">{selectedFolder ? selectedFolder.name : "Select Folder"}</h3>
+        <h3 className="border-b-1 w-full font-bold p-3">
+          {selectedFolder ? selectedFolder.name : "Select Folder"}
+        </h3>
         {children}
       </div>
+
+      <FolderDialog
+        isOpen={isFolderDialogOpen}
+        editingFolder={editingFolder}
+        onCancel={closeDialog}
+        onSubmit={onSubmit}
+      />
     </div>
   );
 }

frontend/app/projects/[projectId]/folders/page.tsx

@@ -4,6 +4,4 @@ export default function Page() {
       This is folders page.
     </>
   );
-}
-
-// TODO Automatically navigate to head folder page
+}

frontend/app/projects/[projectId]/layout.tsx

@@ -1,6 +1,6 @@
 import Sidebar from "./sidebar";
 
-export default function ProjectsLayout({
+export default function SidebarLayout({
   children,
 }: {
   children: React.ReactNode;