130 lines
3.1 KiB
TypeScript
130 lines
3.1 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from "@/components/ui/dialog";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Label } from "@/components/ui/label";
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
|
import type IShortcode from "@/interfaces/IShortcode";
|
|
|
|
interface ShortcodeDialogProps {
|
|
onSave: (shortcode: IShortcode) => void;
|
|
open: boolean;
|
|
setOpen: () => void;
|
|
shortcode?: IShortcode;
|
|
}
|
|
|
|
export default function ShortcodeDialog({
|
|
onSave,
|
|
open,
|
|
setOpen,
|
|
shortcode,
|
|
}: ShortcodeDialogProps) {
|
|
const [_shortcode, setShortcode] = useState<IShortcode>(
|
|
shortcode ?? { code: "", type: "", id: 0 },
|
|
);
|
|
|
|
const handleSave = () => {
|
|
onSave(_shortcode);
|
|
setOpen();
|
|
resetForm();
|
|
};
|
|
|
|
const resetForm = () => {
|
|
setShortcode({ code: "", type: "", id: 0 });
|
|
};
|
|
|
|
return (
|
|
<Dialog open={open} onOpenChange={setOpen}>
|
|
<DialogContent className="sm:max-w-[425px]">
|
|
<DialogHeader>
|
|
<DialogTitle>Ajouter un nouveau shortcode</DialogTitle>
|
|
<DialogDescription>
|
|
Créer un nouveau shortcode ici. Cliquez enregistrer
|
|
quand vous avez fini.
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
<div className="grid gap-4 py-4">
|
|
<div className="grid grid-cols-4 items-center gap-4">
|
|
<Label htmlFor="code" className="text-right">
|
|
Code
|
|
</Label>
|
|
<Input
|
|
id="code"
|
|
value={_shortcode.code}
|
|
onChange={(e) =>
|
|
setShortcode((p) => ({
|
|
...p,
|
|
code: e.target.value,
|
|
}))
|
|
}
|
|
className="col-span-3"
|
|
/>
|
|
</div>
|
|
<Tabs
|
|
defaultValue={_shortcode.type}
|
|
onValueChange={(v) =>
|
|
setShortcode((p) => ({ ...p, type: v }))
|
|
}
|
|
className="w-full"
|
|
>
|
|
<TabsList className="grid w-full grid-cols-2">
|
|
<TabsTrigger value="value">Valeur</TabsTrigger>
|
|
<TabsTrigger value="media">Media</TabsTrigger>
|
|
</TabsList>
|
|
<TabsContent value="value">
|
|
<div className="grid grid-cols-4 items-center gap-4">
|
|
<Label htmlFor="value" className="text-right">
|
|
Valeur
|
|
</Label>
|
|
<Input
|
|
id="value"
|
|
value={_shortcode.value}
|
|
onChange={(e) =>
|
|
setShortcode((p) => ({
|
|
...p,
|
|
value: e.target.value,
|
|
}))
|
|
}
|
|
className="col-span-3"
|
|
/>
|
|
</div>
|
|
</TabsContent>
|
|
<TabsContent value="media">
|
|
<div className="grid grid-cols-4 items-center gap-4">
|
|
<Label htmlFor="mediaId" className="text-right">
|
|
Media ID
|
|
</Label>
|
|
<Input
|
|
id="mediaId"
|
|
value={_shortcode.media_id}
|
|
onChange={(e) =>
|
|
setShortcode((p) => ({
|
|
...p,
|
|
media_id: e.target.value,
|
|
}))
|
|
}
|
|
className="col-span-3"
|
|
/>
|
|
</div>
|
|
</TabsContent>
|
|
</Tabs>
|
|
</div>
|
|
<DialogFooter>
|
|
<Button type="submit" onClick={handleSave}>
|
|
Enregistrer
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|