npm - hfs - Versions diffs - 0.27.2 → 0.29.1-rc1 - Mend

hfs 0.27.2 → 0.29.1-rc1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (166) hide show

package/README.md +3 -2
package/admin/.DS_Store +0 -0
package/admin/.eslintrc +8 -0
package/admin/.gitignore +23 -0
package/admin/index.html +1 -3
package/admin/package.json +66 -0
package/admin/{logo.svg → public/logo.svg} +0 -0
package/admin/src/AccountForm.ts +95 -0
package/admin/src/AccountsPage.ts +144 -0
package/admin/src/App.ts +83 -0
package/admin/src/ArrayField.ts +86 -0
package/admin/src/ConfigPage.ts +314 -0
package/admin/src/FileField.ts +54 -0
package/admin/src/FileForm.ts +147 -0
package/admin/src/FilePicker.ts +166 -0
package/admin/src/HomePage.ts +96 -0
package/admin/src/InstalledPlugins.ts +163 -0
package/admin/src/LoginRequired.ts +82 -0
package/admin/src/LogoutPage.ts +29 -0
package/admin/src/LogsPage.ts +80 -0
package/admin/src/MainMenu.ts +74 -0
package/admin/src/MenuButton.ts +38 -0
package/admin/src/MonitorPage.ts +205 -0
package/admin/src/OnlinePlugins.ts +103 -0
package/admin/src/PermField.ts +80 -0
package/admin/src/PluginsPage.ts +27 -0
package/admin/src/VfsMenuBar.ts +58 -0
package/admin/src/VfsPage.ts +124 -0
package/admin/src/VfsTree.ts +99 -0
package/admin/src/addFiles.ts +59 -0
package/admin/src/api.ts +250 -0
package/admin/src/dialog.ts +203 -0
package/admin/src/index.css +22 -0
package/admin/src/index.ts +10 -0
package/admin/src/md.ts +31 -0
package/admin/src/misc.ts +141 -0
package/admin/src/react-app-env.d.ts +1 -0
package/admin/src/reportWebVitals.ts +15 -0
package/admin/src/setupTests.ts +5 -0
package/admin/src/state.ts +40 -0
package/admin/src/theme.ts +37 -0
package/admin/tsconfig.json +26 -0
package/admin/vite.config.ts +32 -0
package/frontend/.DS_Store +0 -0
package/frontend/.eslintrc +8 -0
package/frontend/.gitignore +23 -0
package/frontend/index.html +1 -3
package/frontend/package.json +50 -0
package/frontend/{fontello.css → public/fontello.css} +0 -0
package/frontend/{fontello.woff2 → public/fontello.woff2} +0 -0
package/frontend/src/App.ts +25 -0
package/frontend/src/Breadcrumbs.ts +43 -0
package/frontend/src/BrowseFiles.ts +141 -0
package/frontend/src/Head.ts +45 -0
package/frontend/src/UserPanel.ts +57 -0
package/frontend/src/api.ts +93 -0
package/frontend/src/components.ts +55 -0
package/frontend/src/dialog.css +83 -0
package/frontend/src/dialog.ts +125 -0
package/frontend/src/icons.ts +46 -0
package/frontend/src/index.scss +324 -0
package/frontend/src/index.ts +10 -0
package/frontend/src/login.ts +63 -0
package/frontend/src/menu.ts +187 -0
package/frontend/src/misc.ts +54 -0
package/frontend/src/options.ts +56 -0
package/frontend/src/react-app-env.d.ts +1 -0
package/frontend/src/reportWebVitals.ts +15 -0
package/frontend/src/setupTests.ts +5 -0
package/frontend/src/state.ts +84 -0
package/frontend/src/upload.ts +306 -0
package/frontend/src/useAuthorized.ts +19 -0
package/frontend/src/useFetchList.ts +162 -0
package/frontend/src/useTheme.ts +23 -0
package/frontend/tsconfig.json +26 -0
package/frontend/vite.config.ts +21 -0
package/package.json +8 -6
package/plugins/vhosting/plugin.js +1 -1
package/src/QuickZipStream.ts +279 -0
package/src/ThrottledStream.ts +98 -0
package/src/adminApis.ts +161 -0
package/src/api.accounts.ts +78 -0
package/src/api.auth.ts +142 -0
package/src/api.file_list.ts +109 -0
package/src/api.helpers.ts +30 -0
package/src/api.monitor.ts +109 -0
package/src/api.plugins.ts +141 -0
package/src/api.vfs.ts +182 -0
package/src/apiMiddleware.ts +131 -0
package/src/block.ts +37 -0
package/src/commands.ts +124 -0
package/src/config.ts +167 -0
package/src/connections.ts +60 -0
package/src/const.ts +69 -0
package/src/crypt.ts +16 -0
package/src/debounceAsync.ts +53 -0
package/src/events.ts +6 -0
package/src/frontEndApis.ts +37 -0
package/src/github.ts +107 -0
package/src/index.ts +55 -0
package/src/listen.ts +223 -0
package/src/log.ts +128 -0
package/src/middlewares.ts +183 -0
package/src/misc.ts +176 -0
package/src/pbkdf2.ts +83 -0
package/src/perm.ts +197 -0
package/src/plugins.ts +340 -0
package/src/serveFile.ts +114 -0
package/src/serveGuiFiles.ts +95 -0
package/src/sse.ts +30 -0
package/src/throttler.ts +106 -0
package/src/update.ts +69 -0
package/src/upload.ts +98 -0
package/src/util-files.ts +141 -0
package/src/util-generators.ts +31 -0
package/src/util-http.ts +32 -0
package/src/util-os.ts +38 -0
package/src/vfs.ts +264 -0
package/src/watchLoad.ts +75 -0
package/src/zip.ts +71 -0
package/admin/assets/index-509bb1d6.js +0 -415
package/admin/assets/index-60a380a7.css +0 -1
package/admin/assets/sha512-738f0943.js +0 -8
package/frontend/assets/index-6e178dfd.css +0 -1
package/frontend/assets/index-aea7654e.js +0 -85
package/frontend/assets/sha512-bf915587.js +0 -8
package/src/QuickZipStream.js +0 -285
package/src/ThrottledStream.js +0 -93
package/src/adminApis.js +0 -169
package/src/api.accounts.js +0 -59
package/src/api.auth.js +0 -128
package/src/api.file_list.js +0 -110
package/src/api.helpers.js +0 -32
package/src/api.monitor.js +0 -104
package/src/api.plugins.js +0 -128
package/src/api.vfs.js +0 -167
package/src/apiMiddleware.js +0 -123
package/src/block.js +0 -34
package/src/commands.js +0 -125
package/src/config.js +0 -168
package/src/connections.js +0 -57
package/src/const.js +0 -94
package/src/crypt.js +0 -21
package/src/debounceAsync.js +0 -49
package/src/events.js +0 -9
package/src/frontEndApis.js +0 -38
package/src/github.js +0 -104
package/src/index.js +0 -57
package/src/listen.js +0 -235
package/src/log.js +0 -137
package/src/middlewares.js +0 -195
package/src/misc.js +0 -160
package/src/pbkdf2.js +0 -74
package/src/perm.js +0 -183
package/src/plugins.js +0 -343
package/src/serveFile.js +0 -105
package/src/serveGuiFiles.js +0 -113
package/src/sse.js +0 -30
package/src/throttler.js +0 -91
package/src/update.js +0 -70
package/src/util-files.js +0 -163
package/src/util-generators.js +0 -31
package/src/util-http.js +0 -32
package/src/vfs.js +0 -232
package/src/watchLoad.js +0 -73
package/src/zip.js +0 -73

package/README.md CHANGED Viewed

@@ -34,7 +34,7 @@ You won't find all previous features here (yet), but still we got:
 - search
 - accounts
 - resumable downloads
-- upload
+- resumable uploads
 - download folders as zip archive
 - simple website serving
 - plug-ins
@@ -145,7 +145,7 @@ an *env* called `HFS_CONFIG`. Any relative path provided is relative to the *cwd
 - `https_port` listen on a specific port. Default is 443.
 - `cert` use this file for https certificate. Minimum to start https is to give a cert and a private_key. Default is none.
 - `private_key` use this file for https private key. Default is none.
-- `allowed_referer` you can decide what domains can link to your files. Wildcards supported. Default is any.
+- `allowed_referer` you can decide what domains can link to your files. Wildcards supported. Default is empty, meaning any.
 - `block` a list of rules that will block connections. E.g.:
     ```
     block:
@@ -157,6 +157,7 @@ an *env* called `HFS_CONFIG`. Any relative path provided is relative to the *cwd
 - `custom_header` provide HTML code to be put at the top of your Frontend. Default is none.
 - `localhost_admin` should Admin be accessed without credentials when on localhost. Default is true.
 - `proxies` number of proxies between server and clients to be trusted about providing clients' IP addresses. Default is 0.
+- `keep_unfinished_uploads` should unfinished uploads be deleted immediately when interrupted. Default is true.
 #### Virtual File System (VFS)

package/admin/.DS_Store ADDED Viewed

Binary file

package/admin/.eslintrc ADDED Viewed

@@ -0,0 +1,8 @@
+{
+  "extends": "react-app",
+  "rules": {
+    "no-mixed-operators": 0,
+    "no-ex-assign": 0,
+	"no-throw-literal": 0
+  }
+}

package/admin/.gitignore ADDED Viewed

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+# testing
+/coverage
+# production
+/build
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

package/admin/index.html CHANGED Viewed

@@ -7,11 +7,9 @@
     <script async src='https://unpkg.com/node-forge@1.3.1/dist/forge.min.js'></script>
     <script>SESSION = _HFS_SESSION_</script>
     <title>HFS Admin</title>
-    <script type="module" crossorigin src="/assets/index-509bb1d6.js"></script>
-    <link rel="stylesheet" href="/assets/index-60a380a7.css">
   </head>
   <body>
     <div id="root"></div>
+    <script type="module" src="/src/index.ts"></script>
   </body>
 </html>

package/admin/package.json ADDED Viewed

@@ -0,0 +1,66 @@
+{
+  "name": "@hfs/admin",
+  "private": true,
+  "proxy": "http://localhost",
+  "scripts": {
+    "start": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "test-dep": "npm audit --production"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.10.0",
+    "@hfs/mui-grid-form": "*",
+    "@hfs/shared": "*",
+    "@emotion/styled": "^11.10.0",
+    "@mui/icons-material": "^5.8.4",
+    "@mui/lab": "^5.0.0-alpha.94",
+    "@mui/material": "^5.10.0",
+    "@mui/x-data-grid": "^5.15.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.2.1",
+    "react-window": "^1.8.6",
+    "tssrp6a": "^3.0.0",
+    "valtio": "^1.2.9",
+    "immer": "^9.0.15",
+    "web-vitals": "^2.1.4"
+  },
+  "devDependencies": {
+    "@types/node": "^16.11.21",
+    "@types/react": "^18.0.15",
+    "@types/react-dom": "^18.0.6",
+    "@types/react-window": "^1.8.5",
+    "@types/react-virtualized-auto-sizer": "^1.0.1",
+    "vite": "^4.0.4",
+    "vite-plugin-babel-import": "github:rejetto/vite-plugin-babel-import"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ],
+    "overrides": [
+      {
+        "files": [
+          "*.ts"
+        ],
+        "rules": {
+          "no-mixed-operators": "off"
+        }
+      }
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

package/admin/{logo.svg → public/logo.svg} RENAMED Viewed

File without changes

package/admin/src/AccountForm.ts ADDED Viewed

@@ -0,0 +1,95 @@
+// This file is part of HFS - Copyright 2021-2023, Massimo Melina <a@rejetto.com> - License https://www.gnu.org/licenses/gpl-3.0.txt
+import { createElement as h, useEffect, useRef, useState } from 'react'
+import { BoolField, Form, MultiSelectField } from '@hfs/mui-grid-form'
+import { Box, Button } from '@mui/material'
+import { apiCall } from './api'
+import { alertDialog } from './dialog'
+import { isEqualLax, modifiedSx } from './misc'
+import { Account, account2icon } from './AccountsPage'
+import { createVerifierAndSalt, SRPParameters, SRPRoutines } from 'tssrp6a'
+interface FormProps { account: Account, groups: string[], done: (username: string)=>void, close: ()=>void }
+export default function AccountForm({ account, done, groups, close }: FormProps) {
+    const [values, setValues] = useState<Account & { password?: string, password2?: string }>(account)
+    const [belongsOptions, setBelongOptions] = useState<string[]>([])
+    useEffect(() => {
+        setValues(account)
+        setBelongOptions(groups.filter(x => x !== account.username ))
+        ref.current?.querySelector('input')?.focus()
+    }, [JSON.stringify(account)]) //eslint-disable-line
+    const add = !account.username
+    const group = !values.hasPassword
+    const ref = useRef<HTMLFormElement>()
+    return h(Form, {
+        formRef:  ref,
+        values,
+        set(v, k) {
+            setValues({ ...values, [k]: v })
+        },
+        addToBar: [
+            h(Button, { onClick: close, sx: { ml: 2 } }, "Close"),
+            h(Box, { flex:1 }),
+            account2icon(values, { fontSize: 'large', sx: { p: 1 }})
+        ],
+        fields: [
+            { k: 'username', label: group ? 'Group name' : undefined, autoComplete: 'off', required: true, xl: group ? 12 : 4,
+                getError: v => v !== account.username && apiCall('get_account', { username: v })
+                    .then(got => got.username === account.username ? "usernames are case-insensitive" : "already used", () => false),
+            },
+            !group && { k: 'password', md: 6, xl: 4, type: 'password', autoComplete: 'new-password', required: add,
+                label: add ? "Password" : "Change password"
+            },
+            !group && { k: 'password2', md: 6, xl: 4, type: 'password', autoComplete: 'new-password', label: 'Repeat password',
+                getError: (x, { values }) => (x||'') !== (values.password||'') && "Enter same password" },
+            { k: 'ignore_limits', comp: BoolField, xl: 6,
+                helperText: values.ignore_limits ? "Speed limits don't apply to this account" : "Speed limits apply to this account" },
+            { k: 'admin', comp: BoolField, xl: 6, fromField: (v:boolean) => v||null, label: "Permission to access Admin-panel",
+                helperText: "To access THIS interface you are using right now",
+                ...!account.admin && account.adminActualAccess && { value: true, helperText: "This permission is inherited" },
+            },
+            { k: 'belongs', comp: MultiSelectField, label: "Inherits from", options: belongsOptions,
+                helperText: "Specify groups to inherit permissions from."
+                    + (belongsOptions.length ? '' : " There are no groups available, create one first.")
+            },
+            { k: 'redirect', helperText: "If you want this account to be redirected to a specific folder/address at login time" },
+        ],
+        onError: alertDialog,
+        save: {
+            sx: modifiedSx( !isEqualLax(values, account)),
+            async onClick() {
+                const { password='', password2, adminActualAccess, ...withoutPassword } = values
+                const { username } = values
+                if (add) {
+                    const got = await apiCall('add_account', withoutPassword)
+                    if (password)
+                        try { await apiNewPassword(username, password) }
+                        catch(e) {
+                            apiCall('del_account', { username }).then() // best effort, don't wait
+                            throw e
+                        }
+                    done(got.username)
+                    return alertDialog("Account created", 'success')
+                }
+                const got = await apiCall('set_account', {
+                    username: account.username,
+                    changes: withoutPassword,
+                })
+                if (password)
+                    await apiNewPassword(username, password)
+                done(got.username)
+                return alertDialog("Account modified", 'success')
+            }
+        }
+    })
+}
+async function apiNewPassword(username: string, password: string) {
+    const srp6aNimbusRoutines = new SRPRoutines(new SRPParameters())
+    const res = await createVerifierAndSalt(srp6aNimbusRoutines, username, password)
+    return apiCall('change_srp_others', { username, salt: String(res.s), verifier: String(res.v) }).catch(e => {
+        if (e.code !== 406) // 406 = server was configured to support clear text authentication
+            throw e
+        return apiCall('change_password_others', { username, newPassword: password }) // unencrypted version
+    })
+}

package/admin/src/AccountsPage.ts ADDED Viewed

@@ -0,0 +1,144 @@
+// This file is part of HFS - Copyright 2021-2023, Massimo Melina <a@rejetto.com> - License https://www.gnu.org/licenses/gpl-3.0.txt
+import { createElement as h, useState, useEffect, Fragment } from "react"
+import { apiCall, useApiEx } from './api'
+import { Alert, Box, Button, Card, CardContent, Grid, List, ListItem, ListItemText, Typography } from '@mui/material'
+import { Delete, Group, MilitaryTech, Person, PersonAdd, Refresh } from '@mui/icons-material'
+import { alertDialog, confirmDialog } from './dialog'
+import { iconTooltip, onlyTruthy } from './misc'
+import { TreeItem, TreeView } from '@mui/lab'
+import MenuButton from './MenuButton'
+import AccountForm from './AccountForm'
+import md from './md'
+export interface Account {
+    username: string
+    hasPassword?: boolean
+    admin?: boolean
+    adminActualAccess?: boolean
+    ignore_limits?: boolean
+    redirect?: string
+    belongs?: string[]
+}
+export default function AccountsPage() {
+    const { data, reload, element } = useApiEx('get_accounts')
+    const [sel, setSel] = useState<string[] | 'new-group' | 'new-user'>([])
+    const selectionMode = Array.isArray(sel)
+    useEffect(() => { // if accounts are reloaded, review the selection to remove elements that don't exist anymore
+        if (Array.isArray(data?.list) && selectionMode)
+            setSel( sel.filter(u => data.list.find((e:any) => e?.username === u)) ) // remove elements that don't exist anymore
+    }, [data]) //eslint-disable-line -- Don't fall for its suggestion to add `sel` here: we modify it and declaring it as a dependency would cause a logical loop
+    if (element)
+        return element
+    const { list }: { list: Account[] } = data
+    return h(Grid, { container: true, maxWidth: '80em' },
+        h(Grid, { item: true, xs: 12 },
+            h(Box, {
+                display: 'flex',
+                flexWrap: 'wrap',
+                gap: 2,
+                mb: 2,
+                sx: {
+                    position: 'sticky',
+                    top: 0,
+                    zIndex: 2,
+                    backgroundColor: 'background.paper',
+                    width: 'fit-content',
+                },
+            },
+                h(MenuButton, {
+                    variant: 'contained',
+                    startIcon: h(PersonAdd),
+                    items: [
+                        { children: "user", onClick: () => setSel('new-user') },
+                        { children: "group", onClick: () => setSel('new-group') }
+                    ]
+                }, 'Add'),
+                h(Button, {
+                    disabled: !selectionMode || !sel.length,
+                    startIcon: h(Delete),
+                    async onClick(){
+                        if (!selectionMode) return
+                        if (!await confirmDialog(`You are going to delete ${sel.length} account(s)`))
+                            return
+                        const errors = onlyTruthy(await Promise.all(sel.map(username =>
+                            apiCall('del_account', { username }).then(() => null, () => username) )))
+                        if (errors.length)
+                            return alertDialog(errors.length === sel.length ? "Request failed" : hList("Some accounts were not deleted", errors), 'error')
+                        reload()
+                    }
+                }, "Remove"),
+                h(Button, { onClick: reload, startIcon: h(Refresh) }, "Reload"),
+                list.length > 0 && h(Typography, { p: 1 }, `${list.length} account(s)`),
+            ) ),
+        h(Grid, { item: true, md: 5 },
+            !list.length && h(Alert, { severity: 'info' }, md`To access administration _remotely_ you will need to create a user account with admin permission`),
+            h(TreeView, {
+                multiSelect: true,
+                sx: { pr: 4, pb: 2, minWidth: '15em' },
+                selected: selectionMode ? sel : [],
+                onNodeSelect(ev, ids) {
+                    setSel(ids)
+                }
+            },
+                list.map((ac: Account) =>
+                    h(TreeItem, {
+                        key: ac.username,
+                        nodeId: ac.username,
+                        label: h(Box, {
+                            sx: {
+                                display: 'flex',
+                                flexWrap: 'wrap',
+                                padding: '.2em 0',
+                                gap: '.5em',
+                                alignItems: 'center',
+                            }
+                        },
+                            account2icon(ac),
+                            ac.adminActualAccess && iconTooltip(MilitaryTech, "Can login into Admin"),
+                            ac.username,
+                            Boolean(ac.belongs?.length) && h(Box, { sx: { color: 'text.secondary', fontSize: 'small' } },
+                                '(', ac.belongs?.join(', '), ')')
+                        ),
+                    })
+                )
+            )
+        ),
+        sel.length > 0 // this clever test is true both when some accounts are selected and when we are in "new account" modes
+        && h(Grid, { item: true, md: 7 },
+            h(Card, {},
+                h(CardContent, {},
+                    selectionMode && sel.length > 1 ? h(Box, {},
+                        h(Typography, {}, sel.length + " selected"),
+                        h(List, {},
+                            sel.map(username =>
+                                h(ListItem, { key: username },
+                                    h(ListItemText, {}, username))))
+                    ) : h(AccountForm, {
+                        account: selectionMode && list.find(x => x.username === sel[0])
+                            || { username: '', hasPassword: sel === 'new-user' },
+                        groups: list.filter(x => !x.hasPassword).map( x => x.username ),
+                        close(){ setSel([]) },
+                        done(username) {
+                            setSel([username])
+                            reload()
+                        }
+                    })
+                )))
+    )
+}
+function hList(heading: string, list: any[]) {
+    return h(Fragment, {},
+        heading>'' && h(Typography, {}, heading),
+        h(List, {},
+            list.map((text,key) =>
+                h(ListItem, { key },
+                    typeof text === 'string' ? h(ListItemText, {}, text) : text) ))
+    )
+}
+export function account2icon(ac: Account, props={}) {
+    return h(ac.hasPassword ? Person : Group, props)
+}

package/admin/src/App.ts ADDED Viewed

@@ -0,0 +1,83 @@
+// This file is part of HFS - Copyright 2021-2023, Massimo Melina <a@rejetto.com> - License https://www.gnu.org/licenses/gpl-3.0.txt
+import { createElement as h, Fragment, useState } from 'react'
+import { HashRouter, Routes, Route, useLocation } from 'react-router-dom'
+import MainMenu, { getMenuLabel, mainMenu } from './MainMenu'
+import { AppBar, Box, Drawer, IconButton, ThemeProvider, Toolbar, Typography } from '@mui/material'
+import { Dialogs } from './dialog'
+import { useMyTheme } from './theme'
+import { useBreakpoint} from './misc'
+import { LoginRequired } from './LoginRequired'
+import { Menu } from '@mui/icons-material'
+function App() {
+    return h(ThemeProvider, { theme: useMyTheme() },
+        h(ApplyTheme, {},
+            h(LoginRequired, {},
+                h(HashRouter, {}, h(Routed)) ) ) )
+}
+function ApplyTheme(props:any) {
+    return h(Box, {
+        sx: {
+            bgcolor: 'background.default', color: 'text.primary',
+            display: 'flex', flexDirection: 'column',
+            minHeight: '100%', flex: 1,
+        },
+        ...props
+    })
+}
+function Routed() {
+    const loc = useLocation().pathname.slice(1)
+    const current = mainMenu.find(x => x.path === loc)
+    const title = current && (current.title || getMenuLabel(current))
+    const [open, setOpen] = useState(false)
+    const large = useBreakpoint('lg')
+    return h(Fragment, {},
+        !large && h(StickyBar, { title, openMenu: () => setOpen(true) }),
+        !large && h(Drawer, { anchor:'left', open, onClose(){ setOpen(false) } },
+            h(MainMenu, {
+                onSelect: () => setOpen(false)
+            })),
+        h(Box, { display: 'flex', flex: 1, }, // horizontal layout for menu-content
+            large && h(MainMenu),
+            h(Box, {
+                component: 'main',
+                sx: {
+                    background: 'url(logo.svg) no-repeat right fixed',
+                    backgroundSize: 'contain',
+                    px: { xs: 2, md: 3 },
+                    pb: '1em',
+                    position: 'relative',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    width: '100%',
+                }
+            },
+                title && large && h(Typography, { variant:'h2', mb:2 }, title),
+                h(Routes, {}, mainMenu.map((it,idx) =>
+                    h(Route, { key: idx, path: it.path, element: h(it.comp) })) )
+            ),
+            h(Dialogs)
+        )
+    )
+}
+function StickyBar({ title, openMenu }: { title?: string, openMenu: ()=>void }) {
+    return h(AppBar, { position: 'sticky', sx: { mb: 2 } },
+        h(Toolbar, {},
+            h(IconButton, {
+                size: 'large',
+                edge: 'start',
+                color: 'inherit',
+                sx: { mr: 2 },
+                'aria-label': "menu",
+                onClick: openMenu
+            }, h(Menu)),
+            title,
+        )
+    )
+}
+export default App

package/admin/src/ArrayField.ts ADDED Viewed

@@ -0,0 +1,86 @@
+// This file is part of HFS - Copyright 2021-2023, Massimo Melina <a@rejetto.com> - License https://www.gnu.org/licenses/gpl-3.0.txt
+import { createElement as h, Fragment, useMemo } from 'react'
+import { IconBtn, setHidden } from './misc'
+import { Add, Edit, Delete } from '@mui/icons-material'
+import { confirmDialog, formDialog } from './dialog'
+import { DataGrid, GridAlignment } from '@mui/x-data-grid'
+import { FieldDescriptor, FieldProps, labelFromKey } from '@hfs/mui-grid-form'
+import { Box, FormHelperText, FormLabel } from '@mui/material'
+export function ArrayField<T=any>({ label, helperText, fields, value, onChange, onError, getApi, ...rest }: FieldProps<T[]> & { fields: FieldDescriptor[], height?: number }) {
+    const rows = useMemo(() => (value||[]).map((x,$idx) =>
+            setHidden({ ...x } as any, 'id' in x ? { $idx } : { id: $idx })),
+        [JSON.stringify(value)]) //eslint-disable-line
+    const columns = useMemo(() => {
+        return [
+            ...fields.map(f => ({
+                field: f.k,
+                headerName: f.headerName ?? (typeof f.label === 'string' ? f.label : labelFromKey(f.k)),
+                disableColumnMenu: true,
+                ...f.$width >= 8 ? { width: f.$width } : { flex: f.$width || 1 },
+                ...f.$column,
+            })),
+            {
+                field: '',
+                width: 80,
+                disableColumnMenu: true,
+                sortable: false,
+                align: 'center' as GridAlignment,
+                headerAlign: 'center' as GridAlignment,
+                renderHeader(){
+                    return h(IconBtn, {
+                        icon: Add,
+                        title: "Add",
+                        onClick: (event:any) =>
+                            formDialog({ fields }).then(o => // @ts-ignore
+                                o && onChange([...value||[], o], { was: value, event }))
+                    })
+                },
+                renderCell({ row }: any) {
+                    const { $idx=row.id } = row
+                    return h('div', {},
+                        h(IconBtn, {
+                            icon: Edit,
+                            title: "Modify",
+                            onClick: (event:any) =>
+                                formDialog({ fields, values: row }).then(newRec => {
+                                    if (!newRec) return
+                                    const newValue = value!.map((oldRec, i) => i === $idx ? newRec : oldRec)
+                                    onChange(newValue, { was: value, event })
+                                }),
+                        }),
+                        h(IconBtn, {
+                            icon: Delete,
+                            title: "Delete",
+                            onClick: (event:any) =>
+                                confirmDialog("Delete?").then(ok => {
+                                    if (!ok) return
+                                    const newValue = value!.filter((rec, i) => i !== $idx)
+                                    onChange(newValue, { was: value, event })
+                                }),
+                        }),
+                    )
+                }
+            }
+        ]
+    }, [fields, value, onChange])
+    return h(Fragment, {},
+        label && h(FormLabel, { sx: { ml: 1 } }, label),
+        helperText && h(FormHelperText, {}, helperText),
+        h(Box, { height: '20em', ...rest },
+            h(DataGrid, {
+                columns,
+                rows,
+                hideFooterSelectedRowCount: true,
+                hideFooter: true,
+                componentsProps: {
+                    pagination: {
+                        showFirstButton: true,
+                        showLastButton: true,
+                    }
+                },
+            })
+        )
+    )
+}