Fixed Document Management, Added Features

code/client/src/domain/workspaces/utils.ts

@@ -0,0 +1,52 @@
+import { WorkspaceMeta } from '@notespace/shared/src/workspace/types/workspace';
+import { DocumentResource, ResourceType } from '@notespace/shared/src/workspace/types/resource';
+import { Resources } from '@ui/contexts/workspace/WorkspaceContext';
+
+export function sortWorkspaces(workspaces: WorkspaceMeta[], column: string, ascending: boolean): WorkspaceMeta[] {
+  return workspaces.sort((a, b) => {
+    let comparison = 0;
+    switch (column) {
+      case 'Name':
+        comparison = a.name.localeCompare(b.name);
+        break;
+      case 'Visibility':
+        comparison = a.isPrivate === b.isPrivate ? 0 : a.isPrivate ? 1 : -1;
+        break;
+      case 'Members':
+        comparison = a.members.length - b.members.length;
+        break;
+      case 'Created':
+        comparison = new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime();
+        break;
+      default:
+        break;
+    }
+    return ascending ? comparison : -comparison;
+  });
+}
+
+export function sortDocuments(documents: DocumentResource[], column: string, ascending: boolean): DocumentResource[] {
+  return documents.sort((a, b) => {
+    let comparison = 0;
+    switch (column) {
+      case 'Name':
+        comparison = a.name.localeCompare(b.name);
+        break;
+      case 'Created':
+        comparison = new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime();
+        break;
+      case 'Modified':
+        comparison = new Date(a.updatedAt).getTime() - new Date(b.updatedAt).getTime();
+        break;
+      default:
+        break;
+    }
+    return ascending ? comparison : -comparison;
+  });
+}
+
+export function getDocuments(resources?: Resources): DocumentResource[] {
+  return Object.values(resources || []).filter(
+    resource => resource.type === ResourceType.DOCUMENT
+  ) as DocumentResource[];
+}

code/client/src/ui/components/sidebar/Sidebar.scss

@@ -41,7 +41,7 @@
     }
 
     a {
-      padding: 0 0 2vh 1vh;
+      padding-left: 2vh;
     }
   }
 

code/client/src/ui/components/table/DataTable.scss

@@ -0,0 +1,60 @@
+.table {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: start;
+
+  button {
+    margin: 1vh 0 1vh 1vh;
+  }
+
+  .table-content {
+    width: 50%;
+    position: relative;
+
+    > div:first-child {
+      background-color: black;
+      color: white;
+    }
+
+    .table-header button {
+      padding: 0;
+      margin: 0;
+    }
+
+    .table-row,
+    .table-header {
+      display: grid;
+      grid-template-columns: 50px repeat(4, 1fr);
+      grid-template-rows: 5vh;
+      row-gap: 10vh;
+      grid-gap: 1vh;
+      margin: 5px;
+      align-items: center;
+      justify-content: space-between;
+      gap: 4vh;
+      padding: 1vh;
+      background-color: lightgray;
+      border-radius: 5px;
+      transition: background-color 0.2s;
+
+      span {
+        width: min-content;
+      }
+    }
+
+    .table-row:hover {
+      background-color: rgb(180, 180, 180);
+      cursor: pointer;
+    }
+
+    a {
+      text-decoration: none !important;
+    }
+
+    svg {
+      color: white;
+    }
+  }
+}

code/client/src/ui/components/table/DataTable.tsx

@@ -0,0 +1,57 @@
+import { ReactNode, useState } from 'react';
+import { Checkbox } from '@mui/material';
+import { FaSortDown, FaSortUp } from 'react-icons/fa6';
+
+type DataTableProps = {
+  columns: string[];
+  selectedAll: boolean;
+  setSelectedAll: (selected: boolean) => void;
+  createButton: ReactNode;
+  deleteButton: ReactNode;
+  sortRows: (column: string, ascending: boolean) => void;
+  children: ReactNode;
+};
+
+function DataTable({
+  columns,
+  createButton,
+  deleteButton,
+  setSelectedAll,
+  selectedAll,
+  sortRows,
+  children,
+}: DataTableProps) {
+  const [sortColumn, setSortColumn] = useState('');
+  const [ascending, setAscending] = useState(true);
+  return (
+    <div className="table">
+      {selectedAll ? deleteButton : createButton}
+      <div className="table-content">
+        <div className="table-header">
+          <Checkbox checked={selectedAll} onChange={() => setSelectedAll(!selectedAll)} />
+          {columns.map(column => (
+            <div key={column}>
+              <button
+                onClick={() => {
+                  if (sortColumn === column) {
+                    setAscending(!ascending);
+                  } else {
+                    setSortColumn(column);
+                    setAscending(true);
+                  }
+                  sortRows(column, ascending);
+                }}
+              >
+                {column}
+                {sortColumn === column && (ascending ? <FaSortUp /> : <FaSortDown />)}
+              </button>
+            </div>
+          ))}
+        </div>
+        {children}
+      </div>
+    </div>
+  );
+}
+
+export default DataTable;

code/client/src/ui/contexts/workspace/WorkspaceContext.tsx

@@ -38,8 +38,8 @@ export function WorkspaceProvider({ children }: { children: React.ReactNode }) {
     if (!wid) return;
 
     async function fetchWorkspace() {
-      const { id, name, resources } = await services.getWorkspace(wid!);
-      setWorkspace({ id, name });
+      const { resources, ...workspace } = await services.getWorkspace(wid!);
+      setWorkspace(workspace);
       setResources(resources);
     }
     socket.emit('joinWorkspace', wid);

code/client/src/ui/pages/workspace/Workspace.scss

@@ -1,63 +1,2 @@
 .workspace {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 2vh;
-
-  .table {
-    padding: 1vh;
-    width: 50%;
-    position: relative;
-
-    > div:first-child {
-      background-color: black;
-      color: white;
-    }
-
-    .table-row {
-      display: grid;
-      grid-template-columns: repeat(3, 1fr);
-      grid-template-rows: 5vh;
-      row-gap: 10vh;
-      grid-gap: 1vh;
-      margin: 5px;
-
-      align-items: center;
-      justify-content: space-between;
-      gap: 4vh;
-      padding: 1vh;
-      background-color: lightgray;
-      border-radius: 5px;
-      transition: background-color 0.2s;
-
-      div {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-      }
-
-      :first-child {
-        text-align: left;
-        display: flex;
-        align-items: center;
-        justify-content: start;
-        gap: 1vh;
-        padding-left: 2vh;
-      }
-    }
-
-    .document:hover {
-      background-color: rgb(180, 180, 180);
-      cursor: pointer;
-    }
-
-    .document-checkbox {
-      position: absolute;
-    }
-
-    a {
-      text-decoration: none !important;
-    }
-  }
 }