From b51428fc07d52563868e0bb3a8dbfc41dfe795d8 Mon Sep 17 00:00:00 2001 From: shatfield4 Date: Tue, 12 Mar 2024 15:40:06 -0700 Subject: [PATCH 01/14] implement alternating color rows for file picker --- .../Documents/Directory/FileRow/index.jsx | 15 ++++++++++----- .../Documents/Directory/FolderRow/index.jsx | 11 ++++++----- .../MangeWorkspace/Documents/Directory/index.jsx | 2 +- frontend/src/index.css | 16 ++++++++++++++++ 4 files changed, 33 insertions(+), 11 deletions(-) diff --git a/frontend/src/components/Modals/MangeWorkspace/Documents/Directory/FileRow/index.jsx b/frontend/src/components/Modals/MangeWorkspace/Documents/Directory/FileRow/index.jsx index 7e2259b2284..5e48ebfa6d4 100644 --- a/frontend/src/components/Modals/MangeWorkspace/Documents/Directory/FileRow/index.jsx +++ b/frontend/src/components/Modals/MangeWorkspace/Documents/Directory/FileRow/index.jsx @@ -9,6 +9,7 @@ import System from "@/models/system"; import debounce from "lodash.debounce"; export default function FileRow({ + index, item, folderName, selected, @@ -53,12 +54,16 @@ export default function FileRow({ const handleMouseEnter = debounce(handleShowTooltip, 500); const handleMouseLeave = debounce(handleHideTooltip, 500); + + const lightColorRow = selected ? "bg-sky-500/20" : ""; + const darkColorRow = selected ? "bg-sky-500/10" : ""; + return ( -
toggleSelection(item)} - className={`transition-all duration-200 text-white/80 text-xs grid grid-cols-12 py-2 pl-3.5 pr-8 border-b border-white/20 hover:bg-sky-500/20 cursor-pointer ${`${ - selected ? "bg-sky-500/20" : "" - } ${expanded ? "bg-sky-500/10" : ""}`}`} + className={`transition-all duration-200 text-white/80 text-xs grid grid-cols-12 py-2 pl-3.5 pr-8 border-white/20 hover:bg-sky-500/20 cursor-pointer file-row ${ + selected ? "selected" : "" + }`} >
-
+ ); } diff --git a/frontend/src/components/Modals/MangeWorkspace/Documents/Directory/FolderRow/index.jsx b/frontend/src/components/Modals/MangeWorkspace/Documents/Directory/FolderRow/index.jsx index 5b7f1be393b..1ead4d875c7 100644 --- a/frontend/src/components/Modals/MangeWorkspace/Documents/Directory/FolderRow/index.jsx +++ b/frontend/src/components/Modals/MangeWorkspace/Documents/Directory/FolderRow/index.jsx @@ -47,10 +47,10 @@ export default function FolderRow({ return ( <> -
@@ -88,12 +88,13 @@ export default function FolderRow({ /> )}
-
+ {expanded && (
- {item.items.map((fileItem) => ( + {item.items.map((fileItem, index) => (
-
+

Name

Date

Kind

diff --git a/frontend/src/index.css b/frontend/src/index.css index e2141d8debc..b355eb20a80 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -597,3 +597,19 @@ dialog::backdrop { font-weight: 600; color: #fff; } + +.file-row:nth-child(odd) { + @apply bg-[#1C1E21]; +} + +.file-row:nth-child(even) { + @apply bg-[#2C2C2C]; +} + +.file-row.selected:nth-child(odd) { + @apply bg-sky-500/20; +} + +.file-row.selected:nth-child(even) { + @apply bg-sky-500/10; +} From b2564c9bf6e5f8df8ac3abe2a64f4bbcf9931246 Mon Sep 17 00:00:00 2001 From: shatfield4 Date: Tue, 12 Mar 2024 15:46:54 -0700 Subject: [PATCH 02/14] implement alternating colors for workspace directory --- .../Modals/MangeWorkspace/Documents/Directory/index.jsx | 2 +- .../Documents/WorkspaceDirectory/WorkspaceFileRow/index.jsx | 4 ++-- .../MangeWorkspace/Documents/WorkspaceDirectory/index.jsx | 4 ++-- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/frontend/src/components/Modals/MangeWorkspace/Documents/Directory/index.jsx b/frontend/src/components/Modals/MangeWorkspace/Documents/Directory/index.jsx index bd66d9a3e61..95a1ecd07b5 100644 --- a/frontend/src/components/Modals/MangeWorkspace/Documents/Directory/index.jsx +++ b/frontend/src/components/Modals/MangeWorkspace/Documents/Directory/index.jsx @@ -104,7 +104,7 @@ function Directory({
-
+

Name

Date

Kind

diff --git a/frontend/src/components/Modals/MangeWorkspace/Documents/WorkspaceDirectory/WorkspaceFileRow/index.jsx b/frontend/src/components/Modals/MangeWorkspace/Documents/WorkspaceDirectory/WorkspaceFileRow/index.jsx index 3367c7289ce..dfca2e74c0d 100644 --- a/frontend/src/components/Modals/MangeWorkspace/Documents/WorkspaceDirectory/WorkspaceFileRow/index.jsx +++ b/frontend/src/components/Modals/MangeWorkspace/Documents/WorkspaceDirectory/WorkspaceFileRow/index.jsx @@ -53,8 +53,8 @@ export default function WorkspaceFileRow({ const handleMouseLeave = debounce(handleHideTooltip, 500); return (
-
+

Name

Date

Kind

@@ -148,7 +148,7 @@ const PinAlert = memo(() => {
-
+

From 1d44181829cad955a89f66e2e35bba5ab53e6325 Mon Sep 17 00:00:00 2001 From: shatfield4 Date: Tue, 12 Mar 2024 15:49:46 -0700 Subject: [PATCH 03/14] remove unneeded props/variables --- .../MangeWorkspace/Documents/Directory/FileRow/index.jsx | 5 ----- .../MangeWorkspace/Documents/Directory/FolderRow/index.jsx | 3 +-- 2 files changed, 1 insertion(+), 7 deletions(-) diff --git a/frontend/src/components/Modals/MangeWorkspace/Documents/Directory/FileRow/index.jsx b/frontend/src/components/Modals/MangeWorkspace/Documents/Directory/FileRow/index.jsx index 5e48ebfa6d4..da1e2ba009b 100644 --- a/frontend/src/components/Modals/MangeWorkspace/Documents/Directory/FileRow/index.jsx +++ b/frontend/src/components/Modals/MangeWorkspace/Documents/Directory/FileRow/index.jsx @@ -9,12 +9,10 @@ import System from "@/models/system"; import debounce from "lodash.debounce"; export default function FileRow({ - index, item, folderName, selected, toggleSelection, - expanded, fetchKeys, setLoading, setLoadingMessage, @@ -55,9 +53,6 @@ export default function FileRow({ const handleMouseEnter = debounce(handleShowTooltip, 500); const handleMouseLeave = debounce(handleHideTooltip, 500); - const lightColorRow = selected ? "bg-sky-500/20" : ""; - const darkColorRow = selected ? "bg-sky-500/10" : ""; - return ( toggleSelection(item)} diff --git a/frontend/src/components/Modals/MangeWorkspace/Documents/Directory/FolderRow/index.jsx b/frontend/src/components/Modals/MangeWorkspace/Documents/Directory/FolderRow/index.jsx index 1ead4d875c7..ad0660e2dee 100644 --- a/frontend/src/components/Modals/MangeWorkspace/Documents/Directory/FolderRow/index.jsx +++ b/frontend/src/components/Modals/MangeWorkspace/Documents/Directory/FolderRow/index.jsx @@ -91,10 +91,9 @@ export default function FolderRow({ {expanded && (
- {item.items.map((fileItem, index) => ( + {item.items.map((fileItem) => ( Date: Tue, 12 Mar 2024 15:55:39 -0700 Subject: [PATCH 04/14] remove unused border classes --- .../Modals/MangeWorkspace/Documents/Directory/FileRow/index.jsx | 2 +- .../Documents/WorkspaceDirectory/WorkspaceFileRow/index.jsx | 2 +- .../MangeWorkspace/Documents/WorkspaceDirectory/index.jsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/frontend/src/components/Modals/MangeWorkspace/Documents/Directory/FileRow/index.jsx b/frontend/src/components/Modals/MangeWorkspace/Documents/Directory/FileRow/index.jsx index da1e2ba009b..976c6598820 100644 --- a/frontend/src/components/Modals/MangeWorkspace/Documents/Directory/FileRow/index.jsx +++ b/frontend/src/components/Modals/MangeWorkspace/Documents/Directory/FileRow/index.jsx @@ -56,7 +56,7 @@ export default function FileRow({ return ( toggleSelection(item)} - className={`transition-all duration-200 text-white/80 text-xs grid grid-cols-12 py-2 pl-3.5 pr-8 border-white/20 hover:bg-sky-500/20 cursor-pointer file-row ${ + className={`transition-all duration-200 text-white/80 text-xs grid grid-cols-12 py-2 pl-3.5 pr-8 hover:bg-sky-500/20 cursor-pointer file-row ${ selected ? "selected" : "" }`} > diff --git a/frontend/src/components/Modals/MangeWorkspace/Documents/WorkspaceDirectory/WorkspaceFileRow/index.jsx b/frontend/src/components/Modals/MangeWorkspace/Documents/WorkspaceDirectory/WorkspaceFileRow/index.jsx index dfca2e74c0d..f73916290f3 100644 --- a/frontend/src/components/Modals/MangeWorkspace/Documents/WorkspaceDirectory/WorkspaceFileRow/index.jsx +++ b/frontend/src/components/Modals/MangeWorkspace/Documents/WorkspaceDirectory/WorkspaceFileRow/index.jsx @@ -53,7 +53,7 @@ export default function WorkspaceFileRow({ const handleMouseLeave = debounce(handleHideTooltip, 500); return (
diff --git a/frontend/src/components/Modals/MangeWorkspace/Documents/WorkspaceDirectory/index.jsx b/frontend/src/components/Modals/MangeWorkspace/Documents/WorkspaceDirectory/index.jsx index b9dedc2305a..68a5005a4a9 100644 --- a/frontend/src/components/Modals/MangeWorkspace/Documents/WorkspaceDirectory/index.jsx +++ b/frontend/src/components/Modals/MangeWorkspace/Documents/WorkspaceDirectory/index.jsx @@ -29,7 +29,7 @@ function WorkspaceDirectory({

-
+

Name

Date

Kind

From add34d17500343ead3c717ffc19829cc5c3541bb Mon Sep 17 00:00:00 2001 From: shatfield4 Date: Tue, 12 Mar 2024 16:51:44 -0700 Subject: [PATCH 05/14] WIP new folder UI --- .../Documents/Directory/index.jsx | 27 ++++++++++++++++++- 1 file changed, 26 insertions(+), 1 deletion(-) diff --git a/frontend/src/components/Modals/MangeWorkspace/Documents/Directory/index.jsx b/frontend/src/components/Modals/MangeWorkspace/Documents/Directory/index.jsx index 95a1ecd07b5..ee5613939e6 100644 --- a/frontend/src/components/Modals/MangeWorkspace/Documents/Directory/index.jsx +++ b/frontend/src/components/Modals/MangeWorkspace/Documents/Directory/index.jsx @@ -4,6 +4,7 @@ import { memo, useEffect, useState } from "react"; import FolderRow from "./FolderRow"; import pluralize from "pluralize"; import System from "@/models/system"; +import { FolderNotchOpen, Plus, Trash } from "@phosphor-icons/react"; function Directory({ files, @@ -101,6 +102,15 @@ function Directory({

My Documents

+
@@ -153,7 +163,7 @@ function Directory({ )}
- {amountSelected !== 0 && ( + {/* {amountSelected !== 0 && (
+ )} */} + {amountSelected !== 0 && ( +
+
+ + + +
+
)}
Date: Wed, 13 Mar 2024 09:30:34 -0700 Subject: [PATCH 06/14] remove unneeded expanded prop from filerow component --- .../MangeWorkspace/Documents/Directory/FolderRow/index.jsx | 1 - 1 file changed, 1 deletion(-) diff --git a/frontend/src/components/Modals/MangeWorkspace/Documents/Directory/FolderRow/index.jsx b/frontend/src/components/Modals/MangeWorkspace/Documents/Directory/FolderRow/index.jsx index ad0660e2dee..48953ab1ff9 100644 --- a/frontend/src/components/Modals/MangeWorkspace/Documents/Directory/FolderRow/index.jsx +++ b/frontend/src/components/Modals/MangeWorkspace/Documents/Directory/FolderRow/index.jsx @@ -97,7 +97,6 @@ export default function FolderRow({ item={fileItem} folderName={item.name} selected={isSelected(fileItem.id)} - expanded={expanded} toggleSelection={toggleSelection} fetchKeys={fetchKeys} setLoading={setLoading} From eaa593cadb1da9d76a6bde7102567a95b7a5b700 Mon Sep 17 00:00:00 2001 From: shatfield4 Date: Wed, 13 Mar 2024 17:02:46 -0700 Subject: [PATCH 07/14] folder creation UI and files object manipulation WIP --- .../Documents/Directory/index.jsx | 94 +++++++++++++++---- .../Documents/WorkspaceDirectory/index.jsx | 2 +- .../Modals/MangeWorkspace/Documents/index.jsx | 3 +- .../Modals/MangeWorkspace/index.jsx | 4 +- 4 files changed, 82 insertions(+), 21 deletions(-) diff --git a/frontend/src/components/Modals/MangeWorkspace/Documents/Directory/index.jsx b/frontend/src/components/Modals/MangeWorkspace/Documents/Directory/index.jsx index ee5613939e6..5393a07b9b3 100644 --- a/frontend/src/components/Modals/MangeWorkspace/Documents/Directory/index.jsx +++ b/frontend/src/components/Modals/MangeWorkspace/Documents/Directory/index.jsx @@ -2,12 +2,12 @@ import UploadFile from "../UploadFile"; import PreLoader from "@/components/Preloader"; import { memo, useEffect, useState } from "react"; import FolderRow from "./FolderRow"; -import pluralize from "pluralize"; import System from "@/models/system"; -import { FolderNotchOpen, Plus, Trash } from "@phosphor-icons/react"; +import { FolderNotchOpen, Plus, Trash, X } from "@phosphor-icons/react"; function Directory({ files, + setFiles, loading, setLoading, workspace, @@ -20,6 +20,10 @@ function Directory({ loadingMessage, }) { const [amountSelected, setAmountSelected] = useState(0); + const [newFolderName, setNewFolderName] = useState(""); + const [showNewFolderInput, setShowNewFolderInput] = useState(false); + + console.log(files); const deleteFiles = async (event) => { event.stopPropagation(); @@ -93,6 +97,33 @@ function Directory({ return !!selectedItems[id]; }; + const createNewFolder = () => { + setShowNewFolderInput(true); + }; + + const confirmNewFolder = () => { + if (newFolderName.trim() !== "") { + const newFolder = { + name: newFolderName, + type: "folder", + items: [], + }; + + setFiles({ + ...files, + items: [...files.items, newFolder], + }); + + // TODO: Make a backend call to create the folder + + setNewFolderName(""); + setShowNewFolderInput(false); + // Update the files prop with the new folder + // You can pass a callback function to update the files in the parent component + // or use a state management solution like Redux or Context API + } + }; + useEffect(() => { setAmountSelected(Object.keys(selectedItems).length); }, [selectedItems]); @@ -100,17 +131,37 @@ function Directory({ return (
-
+

My Documents

- +
- + ) : ( + + )}
@@ -136,7 +187,8 @@ function Directory({ files.items.map( (item, index) => (item.name === "custom-documents" || - (item.type === "folder" && item.items.length > 0)) && ( + item.type === "folder") && ( + // (item.type === "folder" && item.items.length > 0)) && (
- - -
diff --git a/frontend/src/components/Modals/MangeWorkspace/Documents/WorkspaceDirectory/index.jsx b/frontend/src/components/Modals/MangeWorkspace/Documents/WorkspaceDirectory/index.jsx index 68a5005a4a9..586a5b90991 100644 --- a/frontend/src/components/Modals/MangeWorkspace/Documents/WorkspaceDirectory/index.jsx +++ b/frontend/src/components/Modals/MangeWorkspace/Documents/WorkspaceDirectory/index.jsx @@ -29,7 +29,7 @@ function WorkspaceDirectory({
-
+

Name

Date

Kind

diff --git a/frontend/src/components/Modals/MangeWorkspace/Documents/index.jsx b/frontend/src/components/Modals/MangeWorkspace/Documents/index.jsx index 736a1476f6b..5a5cf69d96c 100644 --- a/frontend/src/components/Modals/MangeWorkspace/Documents/index.jsx +++ b/frontend/src/components/Modals/MangeWorkspace/Documents/index.jsx @@ -191,9 +191,10 @@ export default function DocumentSettings({ workspace, systemSettings }) { }; return ( -
+
{ return (
-
+
-
+
-
- -
- )} */} {amountSelected !== 0 && (
-
+
- +
+ + {showFolderSelection && ( + item.type === "folder" + )} + onSelect={moveToFolder} + onClose={() => setShowFolderSelection(false)} + /> + )} +
+
{showFolderSelection && ( Date: Wed, 20 Mar 2024 15:42:36 -0700 Subject: [PATCH 14/14] linting and move FolderIcon to JSX --- .../Documents/Directory/MoveToFolderIcon.jsx | 44 +++++++++++++++++++ .../Documents/Directory/index.jsx | 39 +--------------- server/endpoints/api/document/index.js | 10 ++--- server/endpoints/document.js | 10 ++--- 4 files changed, 54 insertions(+), 49 deletions(-) create mode 100644 frontend/src/components/Modals/MangeWorkspace/Documents/Directory/MoveToFolderIcon.jsx diff --git a/frontend/src/components/Modals/MangeWorkspace/Documents/Directory/MoveToFolderIcon.jsx b/frontend/src/components/Modals/MangeWorkspace/Documents/Directory/MoveToFolderIcon.jsx new file mode 100644 index 00000000000..3916fc771c2 --- /dev/null +++ b/frontend/src/components/Modals/MangeWorkspace/Documents/Directory/MoveToFolderIcon.jsx @@ -0,0 +1,44 @@ +export default function MoveToFolderIcon({ + className, + width = 18, + height = 18, +}) { + return ( + + + + + + + ); +} diff --git a/frontend/src/components/Modals/MangeWorkspace/Documents/Directory/index.jsx b/frontend/src/components/Modals/MangeWorkspace/Documents/Directory/index.jsx index 6e340a4607f..44d65448c99 100644 --- a/frontend/src/components/Modals/MangeWorkspace/Documents/Directory/index.jsx +++ b/frontend/src/components/Modals/MangeWorkspace/Documents/Directory/index.jsx @@ -7,6 +7,7 @@ import { Plus, Trash } from "@phosphor-icons/react"; import Document from "@/models/document"; import showToast from "@/utils/toast"; import FolderSelectionPopup from "./FolderSelectionPopup"; +import MoveToFolderIcon from "./MoveToFolderIcon"; function Directory({ files, @@ -281,43 +282,7 @@ function Directory({ onClick={() => setShowFolderSelection(!showFolderSelection)} className="border-none text-sm font-semibold bg-white h-[32px] w-[32px] rounded-lg text-[#222628] hover:bg-neutral-800/80 flex justify-center items-center group" > - {/* Folder Icon */} - - - - - - + {showFolderSelection && (