1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
|
// CreateSubfolderForm component - English version
import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import { Loader2 } from "lucide-react";
interface CreateSubfolderFormProps {
parentFolder: any;
onSubmit: (name: string, category: string) => Promise<void>;
onCancel: () => void;
}
export function CreateSubfolderForm({
parentFolder,
onSubmit,
onCancel
}: CreateSubfolderFormProps) {
const [folderName, setFolderName] = useState("");
const [category, setCategory] = useState(parentFolder?.category || "general");
const [isCreating, setIsCreating] = useState(false);
const [error, setError] = useState("");
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
if (!folderName.trim()) {
setError("Please enter a folder name");
return;
}
// Special character validation
const invalidChars = /[<>:"|?*\/\\]/;
if (invalidChars.test(folderName)) {
setError("Folder name contains invalid characters");
return;
}
setIsCreating(true);
setError("");
try {
await onSubmit(folderName, category);
setFolderName("");
setCategory(parentFolder?.category || "general");
} catch (error: any) {
setError(error.message || "Failed to create folder");
} finally {
setIsCreating(false);
}
};
return (
<form onSubmit={handleSubmit} className="space-y-4 py-4">
<div className="space-y-2">
<Label htmlFor="folder-name">Folder Name</Label>
<Input
id="folder-name"
value={folderName}
onChange={(e) => {
setFolderName(e.target.value);
setError("");
}}
placeholder="Enter folder name"
disabled={isCreating}
autoFocus
/>
{error && (
<p className="text-sm text-destructive">{error}</p>
)}
</div>
<div className="space-y-2">
<Label htmlFor="folder-category">Security Category</Label>
<Select
value={category}
onValueChange={setCategory}
disabled={isCreating}
>
<SelectTrigger id="folder-category">
<SelectValue placeholder="Select category" />
</SelectTrigger>
<SelectContent>
<SelectItem value="general">General</SelectItem>
<SelectItem value="confidential">Confidential</SelectItem>
<SelectItem value="internal">Internal</SelectItem>
</SelectContent>
</Select>
<p className="text-xs text-muted-foreground">
Sub-folders inherit the security category from their parent folder by default
</p>
</div>
<div className="flex justify-end gap-2">
<Button
type="button"
variant="outline"
onClick={onCancel}
disabled={isCreating}
>
Cancel
</Button>
<Button
type="submit"
disabled={isCreating || !folderName.trim()}
>
{isCreating ? (
<>
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
Creating...
</>
) : (
"Create Folder"
)}
</Button>
</div>
</form>
);
}
|
