admin/fs: removed file form from card, to lessen confusion in users
Massimo Melina committed
Apr 12, 2022 at 20:24 UTC
4f3b5babefabfe3a3ebe84a29082cf340870e1e6
2 files changed
+17
-22
admin/src/FileForm.ts
renamed
+3
-18
@@ -1,8 +1,8 @@
1
// This file is part of HFS - Copyright 2021-2022, Massimo Melina <a@rejetto.com> - License https://www.gnu.org/licenses/gpl-3.0.txt
2
3
-import { state, useSnapState } from './state'
3
+import { state } from './state'
4
import { createElement as h, isValidElement, useEffect, useMemo, useState } from 'react'
5
-import { Alert, Button, Card, CardContent, List, ListItem, ListItemText } from '@mui/material'
5
+import { Alert, Button } from '@mui/material'
6
import { BoolField, DisplayField, Field, FieldProps, Form, MultiSelectField, SelectField } from './Form'
7
import { apiCall, useApiComp } from './api'
8
import { formatBytes, isEqualLax, modifiedSx, onlyTruthy } from './misc'
@@ -12,22 +12,7 @@ import _ from 'lodash'
12
13
interface Account { username: string }
14
15
-export default function FileCard() {
16
- const { selectedFiles: files } = useSnapState()
17
- const file = files[0] as VfsNode // it's actually Snapshot<VfsNode> but it's easier this way
18
- if (!file)
19
- return null
20
- return h(Card, {},
21
- h(CardContent, {},
22
- files.length === 1 ? h(FileForm, { file })
23
- : h(List, {},
24
- files.length + ' selected',
25
- files.map(f => h(ListItem, { key: f.name },
26
- h(ListItemText, { primary: f.name, secondary: f.source }) )))
27
- ))
28
-}
29
-
30
-function FileForm({ file }: { file: VfsNode }) {
15
+export default function FileForm({ file }: { file: VfsNode }) {
16
const { parent, children, isRoot, ...rest } = file
17
const [values, setValues] = useState(rest)
18
useEffect(() => {
admin/src/VfsPage.ts
+14
-4
@@ -2,15 +2,15 @@
2
3
import { createElement as h, isValidElement, useEffect, useMemo, useState } from 'react'
4
import { useApi, useApiComp } from './api'
5
-import { Alert, Grid, Link, Typography } from '@mui/material'
5
+import { Alert, Grid, Link, List, ListItem, ListItemText, Typography } from '@mui/material'
6
import { state, useSnapState } from './state'
7
-import FileCard from './FileCard'
7
import VfsMenuBar from './VfsMenuBar'
8
import VfsTree from './VfsTree'
9
import { onlyTruthy } from './misc'
10
import { reactJoin } from '@hfs/shared'
11
import _ from 'lodash'
12
import { AlertProps } from '@mui/material/Alert/Alert'
13
+import FileForm from './FileForm'
14
15
let selectOnReload: string[] | undefined
16
@@ -69,17 +69,27 @@ export default function VfsPage() {
69
reactJoin(" or ", urls.slice(0,3).map(href => h(Link, { href }, href)))
70
]
71
}
72
- return h(Grid, { container:true, rowSpacing: 1, maxWidth: '80em' },
72
+ return h(Grid, { container:true, rowSpacing: 1, maxWidth: '80em', columnSpacing: 2 },
73
alert && h(Grid, { item: true, mb: 2, xs: 12 }, h(Alert, alert)),
74
h(Grid, { item:true, sm: 6, lg: 5 },
75
h(Typography, { variant: 'h6', mb:1, }, "Virtual File System"),
76
h(VfsMenuBar),
77
snap.vfs && h(VfsTree, { id2node })),
78
h(Grid, { item:true, sm: 6, lg: 7, maxWidth:'100%' },
79
- h(FileCard))
79
+ h(SidePanel))
80
)
81
}
82
83
+function SidePanel() {
84
+ const { selectedFiles: files } = useSnapState()
85
+ return files.length === 0 ? null
86
+ : files.length === 1 ? h(FileForm, { file: files[0] as VfsNode }) // it's actually Snapshot<VfsNode> but it's easier this way
87
+ : h(List, {},
88
+ files.length + ' selected',
89
+ files.map(f => h(ListItem, { key: f.name },
90
+ h(ListItemText, { primary: f.name, secondary: f.source }) )))
91
+}
92
+
93
export function reloadVfs(pleaseSelect?: string[]) {
94
selectOnReload = pleaseSelect
95
state.vfs = undefined