folder control

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>
   );
 }