diff --git a/frontend/src/components/Modals/MangeWorkspace/Documents/Directory/NewFolderModal/index.jsx b/frontend/src/components/Modals/MangeWorkspace/Documents/Directory/NewFolderModal/index.jsx
new file mode 100644
index 00000000..c3f7a8d2
--- /dev/null
+++ b/frontend/src/components/Modals/MangeWorkspace/Documents/Directory/NewFolderModal/index.jsx
@@ -0,0 +1,90 @@
+import React, { useState } from "react";
+import { X } from "@phosphor-icons/react";
+import Document from "@/models/document";
+
+export default function NewFolderModal({ closeModal, files, setFiles }) {
+ const [error, setError] = useState(null);
+ const [folderName, setFolderName] = useState("");
+
+ const handleCreate = async (e) => {
+ e.preventDefault();
+ setError(null);
+ if (folderName.trim() !== "") {
+ const newFolder = {
+ name: folderName,
+ type: "folder",
+ items: [],
+ };
+ const { success } = await Document.createFolder(folderName);
+ if (success) {
+ setFiles({
+ ...files,
+ items: [...files.items, newFolder],
+ });
+ closeModal();
+ } else {
+ setError("Failed to create folder");
+ }
+ }
+ };
+
+ return (
+
+
+
+
+ Create New Folder
+
+
+
+
+
+
+ );
+}
diff --git a/frontend/src/components/Modals/MangeWorkspace/Documents/Directory/index.jsx b/frontend/src/components/Modals/MangeWorkspace/Documents/Directory/index.jsx
index d479a6cc..7dc4cfb9 100644
--- a/frontend/src/components/Modals/MangeWorkspace/Documents/Directory/index.jsx
+++ b/frontend/src/components/Modals/MangeWorkspace/Documents/Directory/index.jsx
@@ -3,11 +3,15 @@ import PreLoader from "@/components/Preloader";
import { memo, useEffect, useState } from "react";
import FolderRow from "./FolderRow";
import System from "@/models/system";
-import { Plus, Trash } from "@phosphor-icons/react";
+import { MagnifyingGlass, Plus, Trash } from "@phosphor-icons/react";
import Document from "@/models/document";
import showToast from "@/utils/toast";
import FolderSelectionPopup from "./FolderSelectionPopup";
import MoveToFolderIcon from "./MoveToFolderIcon";
+import { useModal } from "@/hooks/useModal";
+import ModalWrapper from "@/components/ModalWrapper";
+import NewFolderModal from "./NewFolderModal";
+import debounce from "lodash.debounce";
function Directory({
files,
@@ -24,9 +28,14 @@ function Directory({
loadingMessage,
}) {
const [amountSelected, setAmountSelected] = useState(0);
- const [newFolderName, setNewFolderName] = useState("");
- const [showNewFolderInput, setShowNewFolderInput] = useState(false);
const [showFolderSelection, setShowFolderSelection] = useState(false);
+ const [searchTerm, setSearchTerm] = useState("");
+ const [isSearching, setIsSearching] = useState(false);
+ const {
+ isOpen: isFolderModalOpen,
+ openModal: openFolderModal,
+ closeModal: closeFolderModal,
+ } = useModal();
useEffect(() => {
setAmountSelected(Object.keys(selectedItems).length);
@@ -121,32 +130,6 @@ function Directory({
return !!selectedItems[id];
};
- const createNewFolder = () => {
- setShowNewFolderInput(true);
- };
-
- const confirmNewFolder = async () => {
- if (newFolderName.trim() !== "") {
- const newFolder = {
- name: newFolderName,
- type: "folder",
- items: [],
- };
-
- // If folder failed to create - silently fail.
- const { success } = await Document.createFolder(newFolderName);
- if (success) {
- setFiles({
- ...files,
- items: [...files.items, newFolder],
- });
- }
-
- setNewFolderName("");
- setShowNewFolderInput(false);
- }
- };
-
const moveToFolder = async (folder) => {
const toMove = [];
for (const itemId of Object.keys(selectedItems)) {
@@ -183,40 +166,61 @@ function Directory({
setLoading(false);
};
+ const filterFiles = (item) => {
+ if (item.type === "folder") {
+ return (
+ item.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+ item.items.some((file) =>
+ file.name.toLowerCase().includes(searchTerm.toLowerCase())
+ )
+ );
+ } else {
+ return item.name.toLowerCase().includes(searchTerm.toLowerCase());
+ }
+ };
+
+ const debouncedSearch = debounce((value) => {
+ setSearchTerm(value);
+ setIsSearching(false);
+ }, 500);
+
+ const handleSearch = (e) => {
+ const searchValue = e.target.value;
+ setSearchTerm(searchValue);
+ setIsSearching(true);
+ debouncedSearch(searchValue);
+ };
+
+ const filteredFiles =
+ files && files.items ? files.items.filter((item) => filterFiles(item)) : [];
+
return (
My Documents
- {showNewFolderInput ? (
-
-
setNewFolderName(e.target.value)}
- className="bg-zinc-900 text-white placeholder-white/20 text-sm rounded-md p-2.5 w-[150px] h-[32px]"
- />
-
-
-
+
+
+
+
+
@@ -234,8 +238,12 @@ function Directory({
{loadingMessage}
- ) : files.items ? (
- files.items.map(
+ ) : isSearching && searchTerm !== "" ? (
+
+ ) : filteredFiles.length > 0 ? (
+ filteredFiles.map(
(item, index) =>
item.type === "folder" && (
)}
+
+
+
+
+
);
}