frontend: move files to tabbed view

NickSavage · Oct 6, 2024 · 25b5e4e · 25b5e4e
1 parent a82dd5d
commit 25b5e4e
Showing 1 changed file with 26 additions and 19 deletions.
diff --git a/zettelkasten-front/src/pages/cards/ViewPage.tsx b/zettelkasten-front/src/pages/cards/ViewPage.tsx
@@ -57,6 +57,7 @@ export function ViewPage({}: ViewPageProps) {
     { label: "Children" },
     { label: "References" },
     { label: "Related" },
+    { label: "Files" },
   ];
 
   function onFileDelete(file_id: number) {}
@@ -243,22 +244,6 @@ export function ViewPage({}: ViewPageProps) {
             setMessage={setError}
             card={viewingCard}
           />
-          {viewingCard.files.length > 0 && (
-            <div>
-              <ul>
-                {viewingCard.files.map((file, index) => (
-                  <FileListItem
-                    file={file}
-                    onDelete={onFileDelete}
-                    setRefreshFiles={(refresh: boolean) => {}}
-                    displayFileOnCard={(file: File) => {
-                      handleDisplayFileOnCardClick(file);
-                    }}
-                  />
-                ))}
-              </ul>
-            </div>
-          )}
           <HeaderSubSection text="Tasks" />
           <Button onClick={toggleCreateTaskWindow} children={"Add Task"} />
           {showCreateTaskWindow && (
@@ -293,9 +278,11 @@ export function ViewPage({}: ViewPageProps) {
                 >
                   {tab.label}
                   <span className="ml-1 text-xs font-semibold bg-gray-200 rounded-full px-2 py-0.5 text-gray-700">
-		  {tab.label === "Children" && viewingCard.children.length}
-		  {tab.label === "References" && viewingCard.references.length}
-		  {tab.label === "Related" && relatedCards.length}
+                    {tab.label === "Children" && viewingCard.children.length}
+                    {tab.label === "References" &&
+                      viewingCard.references.length}
+                    {tab.label === "Related" && relatedCards.length}
+                    {tab.label === "Files" && viewingCard.files.length}
                   </span>
                 </span>
               ))}
@@ -331,6 +318,26 @@ export function ViewPage({}: ViewPageProps) {
                 <CardList cards={relatedCards} />
               </div>
             )}
+            {activeTab === "Files" && (
+              <div>
+                {viewingCard.files.length > 0 && (
+                  <div>
+                    <ul>
+                      {viewingCard.files.map((file, index) => (
+                        <FileListItem
+                          file={file}
+                          onDelete={onFileDelete}
+                          setRefreshFiles={(refresh: boolean) => {}}
+                          displayFileOnCard={(file: File) => {
+                            handleDisplayFileOnCardClick(file);
+                          }}
+                        />
+                      ))}
+                    </ul>
+                  </div>
+                )}
+              </div>
+            )}
           </div>
         </div>
       )}