124 lines
3.5 KiB
TypeScript
124 lines
3.5 KiB
TypeScript
"use client";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Label } from "@/components/ui/label";
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from "@/components/ui/dialog";
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from "@/components/ui/select";
|
|
import { cn } from "@/lib/utils";
|
|
import type { Folder } from "@/lib/types";
|
|
import { folderColors } from "./constants";
|
|
|
|
interface FolderFormData {
|
|
name: string;
|
|
parentId: string | null;
|
|
color: string;
|
|
}
|
|
|
|
interface FolderEditDialogProps {
|
|
open: boolean;
|
|
onOpenChange: (open: boolean) => void;
|
|
editingFolder: Folder | null;
|
|
formData: FolderFormData;
|
|
onFormDataChange: (data: FolderFormData) => void;
|
|
folders: Folder[];
|
|
onSave: () => void;
|
|
}
|
|
|
|
export function FolderEditDialog({
|
|
open,
|
|
onOpenChange,
|
|
editingFolder,
|
|
formData,
|
|
onFormDataChange,
|
|
folders,
|
|
onSave,
|
|
}: FolderEditDialogProps) {
|
|
return (
|
|
<Dialog open={open} onOpenChange={onOpenChange}>
|
|
<DialogContent>
|
|
<DialogHeader>
|
|
<DialogTitle>
|
|
{editingFolder ? "Modifier le dossier" : "Nouveau dossier"}
|
|
</DialogTitle>
|
|
</DialogHeader>
|
|
<div className="space-y-4">
|
|
<div className="space-y-2">
|
|
<Label>Nom du dossier</Label>
|
|
<Input
|
|
value={formData.name}
|
|
onChange={(e) =>
|
|
onFormDataChange({ ...formData, name: e.target.value })
|
|
}
|
|
placeholder="Ex: Comptes personnels"
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label>Dossier parent</Label>
|
|
<Select
|
|
value={formData.parentId || "root"}
|
|
onValueChange={(v) =>
|
|
onFormDataChange({
|
|
...formData,
|
|
parentId: v === "root" ? null : v,
|
|
})
|
|
}
|
|
>
|
|
<SelectTrigger>
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="root">Racine</SelectItem>
|
|
{folders
|
|
.filter((f) => f.id !== editingFolder?.id)
|
|
.map((folder) => (
|
|
<SelectItem key={folder.id} value={folder.id}>
|
|
{folder.name}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label>Couleur</Label>
|
|
<div className="flex gap-2">
|
|
{folderColors.map(({ value }) => (
|
|
<button
|
|
key={value}
|
|
onClick={() => onFormDataChange({ ...formData, color: value })}
|
|
className={cn(
|
|
"w-8 h-8 rounded-full transition-transform",
|
|
formData.color === value &&
|
|
"ring-2 ring-offset-2 ring-primary scale-110"
|
|
)}
|
|
style={{ backgroundColor: value }}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<div className="flex justify-end gap-2">
|
|
<Button variant="outline" onClick={() => onOpenChange(false)}>
|
|
Annuler
|
|
</Button>
|
|
<Button onClick={onSave} disabled={!formData.name.trim()}>
|
|
{editingFolder ? "Enregistrer" : "Créer"}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|
|
|