diff --git a/web/src/pages/AdminLibraryPanel.tsx b/web/src/pages/AdminLibraryPanel.tsx index 1b62b34..4bbdce7 100644 --- a/web/src/pages/AdminLibraryPanel.tsx +++ b/web/src/pages/AdminLibraryPanel.tsx @@ -1,4 +1,5 @@ -import { AdminLibraryCreateForm, AdminLibraryTable } from './AdminLibraryPanelSections' +import { AdminLibraryCreateForm } from './AdminLibraryPanelSections' +import { AdminLibraryTable } from './AdminLibraryTable' import { useAdminLibraryPanel } from './useAdminLibraryPanel' export function AdminLibraryPanel() { diff --git a/web/src/pages/AdminLibraryPanelSections.tsx b/web/src/pages/AdminLibraryPanelSections.tsx index 8cd7a35..92f889a 100644 --- a/web/src/pages/AdminLibraryPanelSections.tsx +++ b/web/src/pages/AdminLibraryPanelSections.tsx @@ -1,9 +1,7 @@ import { FormEvent } from 'react' -import { Plus, RefreshCw, Save, Trash2 } from 'lucide-react' +import { Plus, Trash2 } from 'lucide-react' -import type { Library, LibraryRoot } from '../types' import type { RootDraft } from './adminLibraryPanelModel' -import { fallbackLibraryRoot } from './adminLibraryPanelModel' type CreateFormProps = { name: string @@ -106,190 +104,3 @@ function CreateRootRow({ root, index, canRemove, onChange, onRemove }: CreateRoo ) } - -type LibraryTableProps = { - libs: Library[] - newRootDraft: (libraryID: string) => RootDraft - editableRootDraft: (libraryID: string, root: LibraryRoot) => RootDraft - onNewRootChange: (libraryID: string, patch: Partial) => void - onEditableRootChange: (libraryID: string, root: LibraryRoot, patch: Partial) => void - onAddRoot: (libraryID: string) => void - onSaveRoot: (libraryID: string, root: LibraryRoot) => void - onScanRoot: (libraryID: string, root: LibraryRoot) => void - onToggleRoot: (libraryID: string, root: LibraryRoot) => void - onRemoveRoot: (library: Library, root: LibraryRoot) => void - onScanLibrary: (library: Library) => void - onRemoveLibrary: (library: Library) => void -} - -export function AdminLibraryTable({ libs, ...actions }: LibraryTableProps) { - return ( -
- - - - - - - - - - - {libs.map((library) => ( - - ))} - -
名称路径类型操作
-
- ) -} - -type LibraryTableRowProps = Omit & { - library: Library -} - -function LibraryTableRow({ library, ...actions }: LibraryTableRowProps) { - return ( - - {library.name} - - - - {library.type} - - - - - ) -} - -function LibraryRootsCell({ library, ...actions }: LibraryTableRowProps) { - const roots = library.roots?.length ? library.roots : [fallbackLibraryRoot(library)] - return ( -
- {roots.map((root) => ( - - ))} - -
- ) -} - -type RootEditorProps = Omit & { - library: Library - root: LibraryRoot -} - -function ExistingRootEditor({ library, root, ...actions }: RootEditorProps) { - const draft = actions.editableRootDraft(library.id, root) - return ( -
-
- {root.id ? ( - - ) : ( - {root.name ? `${root.name}:${root.path}` : root.path} - )} - -
-
- ) -} - -function EditableRootFields({ library, root, draft, onEditableRootChange }: RootEditorProps & { draft: RootDraft }) { - return ( - <> - onEditableRootChange(library.id, root, { name: e.target.value })} - /> - onEditableRootChange(library.id, root, { path: e.target.value })} - /> - - ) -} - -function RootActionButtons({ library, root, draft, ...actions }: RootEditorProps & { draft: RootDraft }) { - return ( -
- {root.id && ( - - )} - - {root.id && ( - - )} - {root.id && ( - - )} -
- ) -} - -function AddRootRow({ library, ...actions }: LibraryTableRowProps) { - const draft = actions.newRootDraft(library.id) - return ( -
- actions.onNewRootChange(library.id, { name: e.target.value })} - /> - actions.onNewRootChange(library.id, { path: e.target.value })} - /> - -
- ) -} - -function LibraryActionsCell({ library, onScanLibrary, onRemoveLibrary }: LibraryTableRowProps) { - return ( - <> - - - - ) -} diff --git a/web/src/pages/AdminLibraryTable.tsx b/web/src/pages/AdminLibraryTable.tsx new file mode 100644 index 0000000..5252552 --- /dev/null +++ b/web/src/pages/AdminLibraryTable.tsx @@ -0,0 +1,192 @@ +import { Plus, RefreshCw, Save, Trash2 } from 'lucide-react' + +import type { Library, LibraryRoot } from '../types' +import type { RootDraft } from './adminLibraryPanelModel' +import { fallbackLibraryRoot } from './adminLibraryPanelModel' + +type LibraryTableProps = { + libs: Library[] + newRootDraft: (libraryID: string) => RootDraft + editableRootDraft: (libraryID: string, root: LibraryRoot) => RootDraft + onNewRootChange: (libraryID: string, patch: Partial) => void + onEditableRootChange: (libraryID: string, root: LibraryRoot, patch: Partial) => void + onAddRoot: (libraryID: string) => void + onSaveRoot: (libraryID: string, root: LibraryRoot) => void + onScanRoot: (libraryID: string, root: LibraryRoot) => void + onToggleRoot: (libraryID: string, root: LibraryRoot) => void + onRemoveRoot: (library: Library, root: LibraryRoot) => void + onScanLibrary: (library: Library) => void + onRemoveLibrary: (library: Library) => void +} + +export function AdminLibraryTable({ libs, ...actions }: LibraryTableProps) { + return ( +
+ + + + + + + + + + + {libs.map((library) => ( + + ))} + +
名称路径类型操作
+
+ ) +} + +type LibraryTableRowProps = Omit & { + library: Library +} + +function LibraryTableRow({ library, ...actions }: LibraryTableRowProps) { + return ( + + {library.name} + + + + {library.type} + + + + + ) +} + +function LibraryRootsCell({ library, ...actions }: LibraryTableRowProps) { + const roots = library.roots?.length ? library.roots : [fallbackLibraryRoot(library)] + return ( +
+ {roots.map((root) => ( + + ))} + +
+ ) +} + +type RootEditorProps = Omit & { + library: Library + root: LibraryRoot +} + +function ExistingRootEditor({ library, root, ...actions }: RootEditorProps) { + const draft = actions.editableRootDraft(library.id, root) + return ( +
+
+ {root.id ? ( + + ) : ( + {root.name ? `${root.name}:${root.path}` : root.path} + )} + +
+
+ ) +} + +function EditableRootFields({ library, root, draft, onEditableRootChange }: RootEditorProps & { draft: RootDraft }) { + return ( + <> + onEditableRootChange(library.id, root, { name: e.target.value })} + /> + onEditableRootChange(library.id, root, { path: e.target.value })} + /> + + ) +} + +function RootActionButtons({ library, root, draft, ...actions }: RootEditorProps & { draft: RootDraft }) { + return ( +
+ {root.id && ( + + )} + + {root.id && ( + + )} + {root.id && ( + + )} +
+ ) +} + +function AddRootRow({ library, ...actions }: LibraryTableRowProps) { + const draft = actions.newRootDraft(library.id) + return ( +
+ actions.onNewRootChange(library.id, { name: e.target.value })} + /> + actions.onNewRootChange(library.id, { path: e.target.value })} + /> + +
+ ) +} + +function LibraryActionsCell({ library, onScanLibrary, onRemoveLibrary }: LibraryTableRowProps) { + return ( + <> + + + + ) +}