update filemanager navigation

2024-02-20 15:01:43 +07:00 · 2024-02-20 15:01:43 +07:00 · 92b11f7b9d
commit 92b11f7b9d
parent 11dc6b2132
31 changed files with 363 additions and 305 deletions
--- a/client-electron/src/pages/Login.tsx
+++ b/client-electron/src/pages/Login.tsx
@ -21,18 +21,18 @@ const LoginPage: React.FC = () => {
      window.ipcRenderer.on('loginSuccess', (_event, data) => {
        console.log(data)

-        const { access_token, max_age, refresh_token } = data
+        const { accessToken, maxAge, refreshToken } = data

        window.ipcRenderer.send('set-keyChain', {
          serviceName: import.meta.env.TAOBIN_RECIPE_MANAGER_KEY_CHAIN_SERVICE_NAME,
          account: import.meta.env.TAOBIN_RECIPE_MANAGER_KEY_CHAIN_ACCOUNT_ACCESS_TOKEN,
-          password: access_token + ';' + max_age
+          password: accessToken + ';' + maxAge
        })

        window.ipcRenderer.send('set-keyChain', {
          serviceName: import.meta.env.TAOBIN_RECIPE_MANAGER_KEY_CHAIN_SERVICE_NAME,
          account: import.meta.env.TAOBIN_RECIPE_MANAGER_KEY_CHAIN_ACCOUNT_REFRESH_TOKEN,
-          password: refresh_token
+          password: refreshToken
        })

        data.permissions = Number(data.permissions)
--- a/client-electron/src/pages/android/android.tsx
+++ b/client-electron/src/pages/android/android.tsx
@ -20,7 +20,7 @@ const AndroidPage: React.FC = () => {

  return (
    <div className="flex flex-col w-full">
-      <div className="flex w-full p-5">
+      <div className="flex w-full py-5">
        <ToolBar manager={manager} device={device} adb={adb} setAdb={setAdb} setDevice={setDevice} />
      </div>
      <Tabs defaultValue="scrcpy" className="w-full">
--- a/client-electron/src/pages/android/components/file-manager-tab.tsx
+++ b/client-electron/src/pages/android/components/file-manager-tab.tsx
@ -1,18 +1,19 @@
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
-import useFileManager, { type AndroidFile } from '@/hooks/filemanager-android'
+import useFileManager from '@/hooks/filemanager-android'
 import { useEffect, useState } from 'react'
 import { useShallow } from 'zustand/react/shallow'
 import DataTable from './filemanager-table/data-table'
-import { ChevronRightIcon, FileIcon } from '@radix-ui/react-icons'
+import { FileIcon } from '@radix-ui/react-icons'
 import { type ColumnDef } from '@tanstack/react-table'
 import { LinuxFileType } from '@yume-chan/adb'
 import { formatDate } from 'date-fns'
 import DataTableColumnHeader from './filemanager-table/data-table-column-header'
 import DataTableRowActions from './filemanager-table/data-table-row-actions'
 import { Checkbox } from '@/components/ui/checkbox'
+import { type AndroidFile } from '@/models/android/schema'

 export const FileManagerTab: React.FC = () => {
-  const { currentPath, pushPath, popPath, setCurrentPath, scanPath } = useFileManager(
+  const { currentPath, pushPath, scanPath } = useFileManager(
    useShallow(state => ({
      currentPath: state.currentPath,
      pushPath: state.pushPath,
@ -57,7 +58,7 @@ export const FileManagerTab: React.FC = () => {
      enableHiding: false
    },
    {
-      id: 'filename',
+      accessorKey: 'filename',
      header: ({ column }) => <DataTableColumnHeader column={column} title="Name" />,
      cell: ({ row }) => {
        return (
@ -73,22 +74,52 @@ export const FileManagerTab: React.FC = () => {
            </span>
          </div>
        )
+      }
+    },
+    {
+      accessorKey: 'type',
+      header: ({ column }) => <DataTableColumnHeader column={column} title="Type" />,
+      cell: ({ row }) => {
+        return <div>{row.original.type === LinuxFileType.File ? 'File' : 'Directory'}</div>
      },
-      enableSorting: true,
-      enableHiding: false
+      filterFn: (row, id, value) => {
+        return value.includes(row.getValue(id))
+      }
    },
    {
-      id: 'size',
+      accessorKey: 'size',
      header: ({ column }) => <DataTableColumnHeader column={column} title="Size" />,
-      cell: ({ row }) => <div>{row.original.size.toString()}</div>
+      cell: ({ row }) => {
+        if (row.original.type === LinuxFileType.Directory) return <div>-</div>
+        // show size in B, KB, MB, GB
+        let size = Number(row.original.size)
+        let unit = 'B'
+        if (size > 1024) {
+          size /= 1024
+          unit = 'KB'
+        }
+        if (size > 1024) {
+          size /= 1024
+          unit = 'MB'
+        }
+        if (size > 1024) {
+          size /= 1024
+          unit = 'GB'
+        }
+        return (
+          <div>
+            {size.toFixed(2)} {unit}
+          </div>
+        )
+      }
    },
    {
-      id: 'dateModified',
+      accessorKey: 'dateModified',
      header: ({ column }) => <DataTableColumnHeader column={column} title="Date" />,
      cell: ({ row }) => <div>{formatDate(row.original.dateModified, 'dd MMM yyyy HH:mm:ss')}</div>
    },
    {
-      id: 'actions',
+      accessorKey: 'actions',
      cell: ({ row }) => <DataTableRowActions row={row} />
    }
  ]
@ -100,32 +131,6 @@ export const FileManagerTab: React.FC = () => {
        <CardDescription>Manage files in Android</CardDescription>
      </CardHeader>
      <CardContent>
-        <div className="flex space-x-3">
-          <span className="hover:underline" onClick={() => setCurrentPath('')}>
-            ROOT
-          </span>
-          {currentPath &&
-            currentPath.split('/').map((path, index) => {
-              return (
-                <div key={index} className="flex justify-center items-center space-x-3">
-                  <span
-                    className="hover:underline"
-                    onClick={() =>
-                      setCurrentPath(
-                        currentPath
-                          .split('/')
-                          .slice(0, index + 1)
-                          .join('/')
-                      )
-                    }
-                  >
-                    {path}
-                  </span>
-                  {currentPath.split('/').length - 1 !== index && <ChevronRightIcon />}
-                </div>
-              )
-            })}
-        </div>
        <DataTable data={files ?? []} columns={columns} isLoading={isLoading} />
      </CardContent>
    </Card>
--- a/client-electron/src/pages/android/components/filemanager-table/data-table-row-actions.tsx
+++ b/client-electron/src/pages/android/components/filemanager-table/data-table-row-actions.tsx
@ -15,15 +15,14 @@ import {
 import { Button } from '@/components/ui/button'
 import { DotsHorizontalIcon } from '@radix-ui/react-icons'
 import { labels } from '@/models/data'
+import { AndroidFileSchema } from '@/models/android/schema'

 interface DataTableRowActionsProps<TData> {
  row: Row<TData>
 }

 const DataTableRowActions = <TData,>({ row }: DataTableRowActionsProps<TData>) => {
-  const task = {
-    label: 'none'
-  }
+  const task = AndroidFileSchema.parse(row.original)

  return (
    <DropdownMenu>
@ -40,7 +39,7 @@ const DataTableRowActions = <TData,>({ row }: DataTableRowActionsProps<TData>) =
        <DropdownMenuSub>
          <DropdownMenuSubTrigger>Labels</DropdownMenuSubTrigger>
          <DropdownMenuSubContent>
-            <DropdownMenuRadioGroup value={task.label}>
+            <DropdownMenuRadioGroup value={task.filename}>
              {labels.map(label => (
                <DropdownMenuRadioItem key={label.value} value={label.value}>
                  {label.label}
--- a/client-electron/src/pages/android/components/filemanager-table/data-table-toolbar.tsx
+++ b/client-electron/src/pages/android/components/filemanager-table/data-table-toolbar.tsx
@ -1,20 +1,42 @@
 import { Button } from '@/components/ui/button'
 import { type Table } from '@tanstack/react-table'
 import DataTableViewOptions from './data-table-view-options'
-import { Cross2Icon } from '@radix-ui/react-icons'
+import { ArrowUpIcon, Cross2Icon } from '@radix-ui/react-icons'
+import DataTableFacetedFilter from './data-table-faceted-filter'
+import useFileManager from '@/hooks/filemanager-android'

 interface DataTableToolbarProps<TData> {
  table: Table<TData>
 }

+const type = [
+  { value: 'file', label: 'File' },
+  { value: 'directory', label: 'Directory' }
+]
+
 const DataTableToolbar = <TData,>({ table }: DataTableToolbarProps<TData>) => {
  const isFiltered = table.getState().columnFilters.length > 0
+  const popPath = useFileManager(state => state.popPath)
+  const currentPath = useFileManager(state => state.currentPath)

  return (
    <div className="flex items-center justify-between">
      <div className="flex w-full flex-col space-y-4 rounded-lg bg-white p-3 shadow-md">
        <div className="flex items-center justify-between">
          <div className="flex flex-1 items-center space-x-2">
+            <div>
+              <Button
+                variant="ghost"
+                disabled={currentPath ? false : true}
+                onClick={popPath}
+                className="h-8 px-2 lg:px-3"
+              >
+                <ArrowUpIcon className="h-4 w-4" /> Back
+              </Button>
+            </div>
+            {table.getColumn('type') && (
+              <DataTableFacetedFilter column={table.getColumn('type')} title="Type" options={type} />
+            )}
            {isFiltered && (
              <Button variant="ghost" onClick={() => table.resetColumnFilters()} className="h-8 px-2 lg:px-3">
                Reset
--- a/client-electron/src/pages/android/components/filemanager-table/data-table.tsx
+++ b/client-electron/src/pages/android/components/filemanager-table/data-table.tsx
@ -3,7 +3,6 @@ import {
  useReactTable,
  getCoreRowModel,
  getFilteredRowModel,
-  getPaginationRowModel,
  getSortedRowModel,
  getFacetedRowModel,
  getFacetedUniqueValues,
@ -12,7 +11,6 @@ import {
 import { rankItem } from '@tanstack/match-sorter-utils'
 import { useState } from 'react'
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
-import DataTablePagination from './data-table-pagination'
 import { ReloadIcon } from '@radix-ui/react-icons'
 import DataTableToolbar from './data-table-toolbar'

@ -40,7 +38,12 @@ const DataTable = <TData, TValue>({ columns, data, isLoading }: DataTableProps<T
  const [rowSelection, setRowSelection] = useState({})
  const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({})
  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([])
-  const [sorting, setSorting] = useState<SortingState>([])
+  const [sorting, setSorting] = useState<SortingState>([
+    {
+      id: 'type',
+      desc: false
+    }
+  ])

  const table = useReactTable({
    data,
@ -62,7 +65,6 @@ const DataTable = <TData, TValue>({ columns, data, isLoading }: DataTableProps<T
    onColumnVisibilityChange: setColumnVisibility,
    getCoreRowModel: getCoreRowModel(),
    getFilteredRowModel: getFilteredRowModel(),
-    getPaginationRowModel: getPaginationRowModel(),
    getSortedRowModel: getSortedRowModel(),
    getFacetedRowModel: getFacetedRowModel(),
    getFacetedUniqueValues: getFacetedUniqueValues()
@ -70,7 +72,6 @@ const DataTable = <TData, TValue>({ columns, data, isLoading }: DataTableProps<T
  return (
    <div className="space-y-4">
      <DataTableToolbar table={table} />
-
      <div className="rounded-md border">
        <Table>
          <TableHeader>
@ -112,7 +113,6 @@ const DataTable = <TData, TValue>({ columns, data, isLoading }: DataTableProps<T
          </TableBody>
        </Table>
      </div>
-      <DataTablePagination table={table} />
    </div>
  )
 }
--- a/client-electron/src/pages/android/components/tool-bar.tsx
+++ b/client-electron/src/pages/android/components/tool-bar.tsx
@ -128,7 +128,7 @@ export const ToolBar: React.FC<ToolBarProps> = ({ manager, adb, device, setAdb,
  }

  return (
-    <div className="flex justify-between items-center space-x-5 w-full p-4 shadow-lg rounded-lg">
+    <div className="flex justify-between items-center w-full p-4 shadow-lg rounded-lg">
      {adb ? (
        <div className="flex flex-col justify-center items-start">
          <ul className="list-disc pl-4">
--- a/client-electron/src/pages/recipes/components/recipe-table-components/columns.tsx
+++ b/client-electron/src/pages/recipes/components/recipe-table-components/columns.tsx
@ -6,7 +6,7 @@ import DataTableColumnHeader from './data-table-column-header'
 import DataTableRowActions from './data-table-row-actions'
 import { CheckCircledIcon, CrossCircledIcon } from '@radix-ui/react-icons'
 import * as dateFormat from 'date-fns'
-import { DateRange } from 'react-day-picker'
+import { type DateRange } from 'react-day-picker'

 export const columns: ColumnDef<RecipeDashboard>[] = [
  {
--- a/client-electron/src/pages/recipes/components/recipe-table-components/data-table-column-header.tsx
+++ b/client-electron/src/pages/recipes/components/recipe-table-components/data-table-column-header.tsx
@ -1,4 +1,5 @@
 import { Button } from '@/components/ui/button'
+import { Calendar } from '@/components/ui/calendar'
 import {
  DropdownMenu,
  DropdownMenuContent,
@ -7,23 +8,52 @@ import {
  DropdownMenuTrigger
 } from '@/components/ui/dropdown-menu'
 import { cn } from '@/lib/utils'
-import { ArrowDownIcon, ArrowUpIcon, CaretSortIcon, EyeNoneIcon } from '@radix-ui/react-icons'
+import { ArrowDownIcon, ArrowUpIcon, CalendarIcon, CaretSortIcon, EyeNoneIcon } from '@radix-ui/react-icons'
 import { type Column } from '@tanstack/react-table'
+import { type DateRange } from 'react-day-picker'

 interface DataTableColumnHeaderProps<TData, TValue> extends React.HTMLAttributes<HTMLDivElement> {
  column: Column<TData, TValue>
  title: string
+  isDate?: boolean
 }

 const DataTableColumnHeader = <TData, TValue>({
  column,
  title,
+  isDate,
  className
 }: DataTableColumnHeaderProps<TData, TValue>) => {
-  if (!column.getCanSort()) {
+  if (!column.getCanSort() && !isDate) {
    return <div className={cn(className)}>{title}</div>
  }

+  if (isDate) {
+    return (
+      <div className={cn('flex items-center space-x-2', className)}>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="ghost" size="sm" className="data-[state=open]:bg-accent -ml-3 h-8">
+              <span>{title}</span>
+              <CalendarIcon className="ml-2 h-4 w-4" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="center">
+            <Calendar
+              mode="range"
+              defaultMonth={new Date('2022-01-01')}
+              selected={column.getFilterValue() as DateRange}
+              onSelect={date => column.setFilterValue(date)}
+              numberOfMonths={2}
+              disabled={date => date > new Date() || date < new Date('1900-01-01')}
+              initialFocus
+            />
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+    )
+  }
+
  return (
    <div className={cn('flex items-center space-x-2', className)}>
      <DropdownMenu>