diff --git a/src/components/pages/files/index.tsx b/src/components/pages/files/index.tsx index 029c5f9b..77dcae37 100755 --- a/src/components/pages/files/index.tsx +++ b/src/components/pages/files/index.tsx @@ -6,12 +6,16 @@ import FileTable from './views/FileTable'; import Files from './views/Files'; import TagsButton from './tags/TagsButton'; import PendingFilesButton from './PendingFilesButton'; -import { IconFileUpload } from '@tabler/icons-react'; +import { IconFileUpload, IconGridPatternFilled, IconTableOptions } from '@tabler/icons-react'; import { Link } from 'react-router-dom'; +import { useState } from 'react'; export default function DashboardFiles() { const view = useViewStore((state) => state.files); + const [tableEditOpen, setTableEditOpen] = useState(false); + const [idSearchOpen, setIdSearchOpen] = useState(false); + return ( <> @@ -28,6 +32,23 @@ export default function DashboardFiles() { + + setTableEditOpen((open) => !open)}> + + + + + + { + setIdSearchOpen((open) => !open); + }} + > + + + + @@ -38,7 +59,16 @@ export default function DashboardFiles() { ) : ( - + )} ); diff --git a/src/components/pages/files/views/FileTable.tsx b/src/components/pages/files/views/FileTable.tsx index bf13e573..b79dcedb 100755 --- a/src/components/pages/files/views/FileTable.tsx +++ b/src/components/pages/files/views/FileTable.tsx @@ -175,12 +175,24 @@ function TagsFilter({ ); } -export default function FileTable({ id }: { id?: string }) { +export default function FileTable({ + id, + tableEdit, + idSearch, +}: { + id?: string; + tableEdit: { + open: boolean; + setOpen: (open: boolean) => void; + }; + idSearch: { + open: boolean; + setOpen: (open: boolean) => void; + }; +}) { const clipboard = useClipboard(); const warnDeletion = useSettingsStore((state) => state.settings.warnDeletion); - const [tableEditOpen, setTableEditOpen] = useState(false); - const fields = useFileTableSettingsStore((state) => state.fields); const { data: folders } = useSWR>( @@ -204,7 +216,6 @@ export default function FileTable({ id }: { id?: string }) { const [order, setOrder] = useState<'asc' | 'desc'>('desc'); const [selectedFile, setSelectedFile] = useState(null); - const [idSearchOpen, setIdSearchOpen] = useState(false); const [searchField, setSearchField] = useState<'name' | 'originalName' | 'type' | 'tags' | 'id'>('name'); const [searchQuery, setSearchQuery] = useReducer( (state: ReducerQuery['state'], action: ReducerQuery['action']) => { @@ -218,13 +229,13 @@ export default function FileTable({ id }: { id?: string }) { const [debouncedQuery, setDebouncedQuery] = useState(searchQuery); useEffect(() => { - if (idSearchOpen) return; + if (idSearch.open) return; setSearchQuery({ field: 'id', query: '', }); - }, [idSearchOpen]); + }, [idSearch.open]); useEffect(() => { const handler = setTimeout(() => setDebouncedQuery(searchQuery), 300); @@ -389,33 +400,9 @@ export default function FileTable({ id }: { id?: string }) { file={selectedFile} /> - setTableEditOpen(false)} /> + tableEdit.setOpen(false)} /> - - - setTableEditOpen((open) => !open)} - style={{ position: 'relative', top: '-36.4px', left: '221px', margin: 0 }} - > - - - - - { - setIdSearchOpen((open) => !open); - }} - // lol if it works it works :shrug: - style={{ position: 'relative', top: '-36.4px', left: '221px', margin: 0 }} - > - - - - - 0}> @@ -500,8 +487,8 @@ export default function FileTable({ id }: { id?: string }) { - - + + (); @@ -16,6 +17,9 @@ export default function ViewUserFiles() { const view = useViewStore((state) => state.files); + const [tableEditOpen, setTableEditOpen] = useState(false); + const [idSearchOpen, setIdSearchOpen] = useState(false); + return ( <> @@ -26,10 +30,41 @@ export default function ViewUserFiles() { + + setTableEditOpen((open) => !open)}> + + + + + + { + setIdSearchOpen((open) => !open); + }} + > + + + + - {view === 'grid' ? : } + {view === 'grid' ? ( + + ) : ( + + )} ); }