some file explorer improvements

slayernominee · Jan 7, 2024 · b3791c9 · b3791c9
1 parent 3bc7de4
commit b3791c9
Show file tree

Hide file tree

Showing 7 changed files with 91 additions and 33 deletions.
diff --git a/app/dashboard/files/columns.tsx b/app/dashboard/files/columns.tsx
@@ -49,6 +49,13 @@ export const columns: ColumnDef<File>[] = [
         </Button>
       )
     },
+    cell: ({ row }) => {
+      const name: string = row.getValue("name")
+
+      return (
+        <div className="cursor-pointer h-full w-full">{ name }</div>
+      )
+    },
 
   },
   {
@@ -63,7 +70,7 @@ export const columns: ColumnDef<File>[] = [
           <ArrowUpDown className="ml-2 h-4 w-4" />
         </Button>
       )
-    },
+    }
   },
   {
     accessorKey: "modified",

diff --git a/app/dashboard/files/data-table.tsx b/app/dashboard/files/data-table.tsx
@@ -23,12 +23,14 @@ interface DataTableProps<TData, TValue> {
   columns: ColumnDef<TData, TValue>[]
   data: TData[]
   cellClick: any
+  setSelection: any
 }
 
 export function DataTable<TData, TValue>({
   columns,
   data,
   cellClick,
+  setSelection,
 }: DataTableProps<TData, TValue>) {
   const [sorting, setSorting] = React.useState<SortingState>([])
   const [rowSelection, setRowSelection] = React.useState({})
@@ -68,7 +70,7 @@ export function DataTable<TData, TValue>({
             </TableRow>
           ))}
         </TableHeader>
-        <TableBody>
+        <TableBody> 
           {table.getRowModel().rows?.length ? (
             table.getRowModel().rows.map((row) => (
               <TableRow

diff --git a/app/dashboard/files/page.tsx b/app/dashboard/files/page.tsx
@@ -1,14 +1,13 @@
 "use client"
 import { Layout } from "@/app/components/dash_lay"
-import React, { useRef, useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Button } from "@/components/ui/button"
 import Icon from '@mdi/react';
-import { mdiDeleteOutline, mdiChevronLeft, mdiFolderMoveOutline, mdiHomeOutline, mdiPencilOutline, mdiReload, mdiCloudDownloadOutline, mdiCloudUploadOutline, mdiContentCopy } from '@mdi/js';
+import { mdiDeleteOutline, mdiChevronUp, mdiFolderMoveOutline, mdiHomeOutline, mdiPencilOutline, mdiReload, mdiCloudDownloadOutline, mdiCloudUploadOutline, mdiContentCopy } from '@mdi/js';
 
 import { File, columns } from "@/app/dashboard/files/columns"
 import { DataTable } from "@/app/dashboard/files/data-table"
 
-
 async function getData(path: string): Promise<File[]> {
     const res = await fetch(process.env.NEXT_PUBLIC_API_URL + '/api/files/' + path, {
         method: 'POST',
@@ -30,22 +29,17 @@ async function getData(path: string): Promise<File[]> {
 export default function Home() {
     const [data, setData] = useState<File[]>([])
     const [path, setPath] = useState("&.")
+    const [selected, setSelected] = useState<File[]>([])
 
     const refresh = async () => {
         const res = await getData(path)
         setData(res)
     }
 
     useEffect(() => {
-        getData(path).then(res => setData(res))
-
-        setInterval(() => {
-            getData(path).then(res => setData(res))
-        }, 15000) // refresh every 15 seconds
-
+        refresh()
     }, [])
 
-
     const goToHome = async () => {
         setPath("&.")
         const res = await getData("&.")
@@ -63,6 +57,11 @@ export default function Home() {
 
     const handleClick = async (cell: any) => {
 
+        // check if the click is on the name column
+        if (cell.getContext().column.id != "name") {
+            return
+        }
+
         if (cell.getContext().row.original.is_dir) {
             // go in the directory
             setPath(path + "&" + cell.getContext().row.original.name)
@@ -78,22 +77,38 @@ export default function Home() {
             <Layout>
             <h1>Files</h1>
 
-            { path }
 
-            <div>
-                <Button variant="secondary" disabled={path == '&.'} onClick={goToHome}><Icon path={mdiHomeOutline} size={1} /></Button>
-                <Button variant="secondary" disabled={path == '&.'} onClick={goUpwards}><Icon path={mdiChevronLeft} size={1} /></Button>
+            <div className="flex mb-2">
+            <div className="flex">
+                <Button variant="ghost" disabled={path == '&.'} onClick={goToHome}><Icon path={mdiHomeOutline} size={1} /></Button>
+
+                <div className="rounded-md px-4 border py-2 font-mono text-sm w-64">
+                { path.replace("&.", ".").replaceAll("&", "/") }
+                </div>
+
+                <Button variant="ghost" disabled={path == '&.'} onClick={goUpwards}><Icon path={mdiChevronUp} size={1} /></Button>
+                <Button variant="ghost" onClick={refresh}><Icon path={mdiReload} size={1} /></Button>
+            </div>
 
-                <Button variant="secondary"><Icon path={mdiCloudDownloadOutline} size={1} /></Button>
-                <Button variant="secondary"><Icon path={mdiCloudUploadOutline} size={1} /></Button>
-                <Button variant="secondary"><Icon path={mdiPencilOutline} size={1} /></Button>
-                <Button variant="secondary"><Icon path={mdiFolderMoveOutline} size={1} /></Button>
-                <Button variant="secondary"><Icon path={mdiContentCopy} size={1} /></Button>
-                <Button variant="secondary"><Icon path={mdiDeleteOutline} size={1} /></Button>
-                <Button variant="secondary" onClick={refresh}><Icon path={mdiReload} size={1} /></Button>
+            <div className="w-full">
+                <div className="text-right">
+                <Button variant="ghost"><Icon path={mdiCloudDownloadOutline} size={1} /></Button>
+                <Button variant="ghost"><Icon path={mdiCloudUploadOutline} size={1} /></Button>
+                <Button variant="ghost"><Icon path={mdiPencilOutline} size={1} /></Button>
+                <Button variant="ghost"><Icon path={mdiFolderMoveOutline} size={1} /></Button>
+                <Button variant="ghost"><Icon path={mdiContentCopy} size={1} /></Button>
+                <Button variant="ghost"><Icon path={mdiDeleteOutline} size={1} /></Button>
+                </div>
             </div>
+            </div>
+
+            { selected.map((file) => (
+                <div key={file.name}>
+                { file.name }
+                </div>
+            )) }
 
-            <DataTable cellClick={handleClick} columns={columns} data={data} />
+            <DataTable setSelection={setSelected} cellClick={handleClick} columns={columns} data={data} />
 
             </Layout>
         )

diff --git a/app/page.tsx b/app/page.tsx
@@ -5,15 +5,8 @@ export default function Home() {
   return (
     <main className="flex min-h-screen flex-col items-center justify-between p-24">
       <div className="z-10 max-w-5xl w-full items-center justify-between font-mono text-sm lg:flex">
-
-        <Link href="/dashboard"><Button variant="secondary">Dashboard</Button></Link>
-
-
-        This Project uses HyperUI, TailwindCSS and Shadcn UI, thanks a lot for this free components :D 
-
-        Also the project is build with NextJS (ReactJS Framework) and Typescript, also thanks a lot for this wonderful projects
-
-        <h1>Hello World!</h1>
+        <p>The current default token is: 1234</p>
+        <Link href="/login"><Button variant="secondary">Login</Button></Link>
       </div>
     </main>
   )

diff --git a/components/ui/collapsible.tsx b/components/ui/collapsible.tsx
@@ -0,0 +1,9 @@
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
+
+const Collapsible = CollapsiblePrimitive.Root
+
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger
+
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }
diff --git a/package.json b/package.json
@@ -12,6 +12,7 @@
     "@mdi/js": "^7.4.47",
     "@mdi/react": "^1.6.1",
     "@radix-ui/react-checkbox": "^1.0.4",
+    "@radix-ui/react-collapsible": "^1.0.3",
     "@radix-ui/react-context-menu": "^2.1.5",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-dropdown-menu": "^2.0.6",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml