admin: satisfy users that don't to keep the details card open
Massimo Melina committed
Mar 18, 2022 at 11:05 UTC
ee969973946b779dc2e6759a51d8d0f8800a0a90
2 files changed
+17
-4
admin/src/AccountsPage.ts
+8
-3
@@ -113,6 +113,7 @@ export default function AccountsPage() {
113
account ? h(AccountForm, {
114
account,
115
groups: list.filter(x => !x.hasPassword).map( x => x.username ),
116
+ close(){ setSel([]) },
117
done(username) {
118
setSel([username])
119
reload()
@@ -149,7 +150,8 @@ function hList(heading: string, list: any[]) {
150
)
151
}
152
152
-function AccountForm({ account, done, groups }: { account: Account, groups: string[], done: (username: string)=>void }) {
153
+interface FormProps { account: Account, groups: string[], done: (username: string)=>void, close: ()=>void }
154
+function AccountForm({ account, done, groups, close }: FormProps) {
155
const [values, setValues] = useState<Account & { password?: string, password2?: string }>(account)
156
const [belongsOptions, setBelongOptions] = useState<string[]>([])
157
useEffect(() => {
@@ -167,8 +169,11 @@ function AccountForm({ account, done, groups }: { account: Account, groups: stri
169
set(v, k) {
170
setValues({ ...values, [k]: v })
171
},
170
- barSx: { width: 'initial', justifyContent: 'space-between' },
171
- addToBar: [ account2icon(values, { fontSize: 'large', sx: { p: 1 }}) ],
172
+ addToBar: [
173
+ h(Button, { onClick: close, sx: { ml: 2 } }, "Close"),
174
+ h(Box, { flex:1 }),
175
+ account2icon(values, { fontSize: 'large', sx: { p: 1 }})
176
+ ],
177
fields: [
178
{ k: 'username', label: group ? 'Group name' : undefined, autoComplete: 'off', validate: x => x>'' || "Required" },
179
!group && { k: 'password', comp: StringField, md: 6, type: 'password', autoComplete: 'new-password', label: add ? "Password" : "Change password",
admin/src/FileCard.ts
+9
-1
@@ -2,7 +2,7 @@
2
3
import { state, useSnapState } from './state'
4
import { createElement as h, useEffect, useMemo, useState } from 'react'
5
-import { Card, CardContent, List, ListItem, ListItemText } from '@mui/material'
5
+import { Button, Card, CardContent, List, ListItem, ListItemText } from '@mui/material'
6
import { BoolField, DisplayField, Field, FieldProps, Form, MultiSelectField, SelectField } from './Form'
7
import { apiCall, useApi } from './api'
8
import { formatBytes, isEqualLax, modifiedSx, onlyTruthy } from './misc'
@@ -61,6 +61,14 @@ function FileForm({ file }: { file: ReturnType<typeof useSnapState>['selectedFil
61
set(v, k) {
62
setValues({ ...values, [k]: v })
63
},
64
+ addToBar: [
65
+ h(Button, { // not really useful, but users misled in thinking it's a dialog will find satisfaction in dismissing the form
66
+ sx: { ml: 2 },
67
+ onClick(){
68
+ state.selectedFiles = []
69
+ }
70
+ }, "Close")
71
+ ],
72
save: {
73
sx: modifiedSx(!isEqualLax(values, file)),
74
async onClick() {