u

2026-10-07 21:28:26 +02:00
parent ee5a30bb21
commit d49ec77043
509 changed files with 2969 additions and 924 deletions
--- a/src/components/vfs/VfsNewFolderDialog.jsx
+++ b/src/components/vfs/VfsNewFolderDialog.jsx
@@ -0,0 +1,105 @@
+import React, { PureComponent } from 'react';
+import Dialog from '@mui/material/Dialog';
+import DialogTitle from '@mui/material/DialogTitle';
+import DialogContent from '@mui/material/DialogContent';
+import DialogActions from '@mui/material/DialogActions';
+import Button from '@mui/material/Button';
+import Typography from '@mui/material/Typography';
+import CreateNewFolderRoundedIcon from '@mui/icons-material/CreateNewFolderRounded';
+import SingleLineTextEdit from 'dashgui/SingleLineTextEdit';
+
+export default class VfsNewFolderDialog extends PureComponent {
+  constructor(props) {
+    super(props);
+    this.state = {
+      folderName: '',
+      error: '',
+    };
+  }
+
+  componentDidUpdate(prevProps) {
+    if (!prevProps.open && this.props.open) {
+      this.setState({ folderName: '', error: '' });
+    }
+  }
+
+  handleSubmit = (e) => {
+    e?.preventDefault();
+    const raw = this.state.folderName.trim();
+    if (!raw) {
+      this.setState({ error: 'Bitte gib einen Ordnernamen ein.' });
+      return;
+    }
+    if (raw.includes('..') || raw.includes('\\')) {
+      this.setState({ error: 'Ungültige Zeichen im Ordnernamen.' });
+      return;
+    }
+
+    const clean = raw.replace(/^[/\\]+/, '').replace(/[/\\]+$/, '');
+    const parent = String(this.props.parentFolder || '').trim().replace(/^[/\\]+/, '').replace(/[/\\]+$/, '');
+    const fullPath = parent ? `${parent}/${clean}` : clean;
+
+    this.props.onCreate?.(fullPath);
+  };
+
+  render() {
+    const { open, onClose, isCreating, parentFolder } = this.props;
+    const { folderName, error } = this.state;
+    const cleanParent = String(parentFolder || '').trim().replace(/^[/\\]+/, '').replace(/[/\\]+$/, '');
+
+    return (
+      <Dialog
+        open={open}
+        onClose={onClose}
+        maxWidth="xs"
+        fullWidth
+        sx={{ zIndex: (theme) => theme.zIndex.modal + 20 }}
+        PaperProps={{
+          sx: { borderRadius: 3, p: 1 },
+        }}
+      >
+        <DialogTitle sx={{ display: 'flex', alignItems: 'center', gap: 1.2, pb: 1 }}>
+          <CreateNewFolderRoundedIcon color="primary" />
+          <Typography variant="h6" fontWeight={700}>
+            Neuen Ordner erstellen
+          </Typography>
+        </DialogTitle>
+
+        <form onSubmit={this.handleSubmit} noValidate autoComplete="off">
+          <DialogContent sx={{ pt: 1 }}>
+            {cleanParent && (
+              <Typography variant="caption" color="text.secondary" sx={{ display: 'block', mb: 1, fontFamily: 'monospace' }}>
+                In: {cleanParent}/
+              </Typography>
+            )}
+            <SingleLineTextEdit
+              autoFocus
+              fullWidth
+              size="small"
+              label=""
+              value={folderName}
+              onChange={(nextVal) => this.setState({ folderName: nextVal, error: '' })}
+              error={Boolean(error)}
+              helperText={error}
+              disabled={isCreating}
+            />
+          </DialogContent>
+
+          <DialogActions sx={{ px: 3, pb: 2, pt: 1 }}>
+            <Button onClick={onClose} disabled={isCreating} color="inherit">
+              Abbrechen
+            </Button>
+            <Button
+              type="submit"
+              variant="contained"
+              disabled={isCreating || !folderName.trim()}
+              sx={{ borderRadius: 2 }}
+            >
+              {isCreating ? 'Erstelle…' : 'Erstellen'}
+            </Button>
+          </DialogActions>
+        </form>
+      </Dialog>
+    );
+  }
+}