392 lines
9.9 KiB
TypeScript
392 lines
9.9 KiB
TypeScript
import { z } from "zod/v4";
|
|
import {
|
|
Form,
|
|
FormControl,
|
|
FormField,
|
|
FormItem,
|
|
FormLabel,
|
|
FormMessage,
|
|
} from "~/components/custom_ui/form";
|
|
import { IconMatrixTooltip } from "~/components/IconComponents";
|
|
import { Button } from "~/components/ui/button";
|
|
import Input from "~/components/ui/input";
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from "~/components/ui/select";
|
|
import { Switch } from "~/components/ui/switch";
|
|
import { NullableStringOnChange } from "~/lib/form_utils";
|
|
import { useZodForm } from "~/lib/zodForm";
|
|
import type { Banners, BannersIdbanner } from "~/schemas/public/Banners";
|
|
|
|
type FormProps = {
|
|
initialValues: Banners | null;
|
|
submitMutation: (values: Banners) => void;
|
|
del?: (idbanner: BannersIdbanner) => void;
|
|
};
|
|
|
|
export const FormBanners = ({
|
|
initialValues,
|
|
submitMutation,
|
|
del,
|
|
}: FormProps) => {
|
|
const Schema = z.object({
|
|
color: z.string().nullable(),
|
|
cta_href: z.string().nullable(),
|
|
cta_icon: z.string().nullable(),
|
|
cta_text: z.string().nullable(),
|
|
has_cta: z.boolean(),
|
|
hide_duration: z.number().nullable(),
|
|
idbanner: z.custom<BannersIdbanner>(),
|
|
is_active: z.boolean(),
|
|
is_unskippable: z.boolean(),
|
|
show_private: z.boolean(),
|
|
show_public: z.boolean(),
|
|
testo: z.string().nullable(),
|
|
titolo: z.string().nullable(),
|
|
});
|
|
type FormValues = z.infer<typeof Schema>;
|
|
|
|
let defaultValues: FormValues;
|
|
|
|
if (!initialValues) {
|
|
defaultValues = {
|
|
color: "",
|
|
cta_href: "",
|
|
cta_icon: "arrowR",
|
|
cta_text: "",
|
|
has_cta: false,
|
|
hide_duration: 1,
|
|
idbanner: "" as BannersIdbanner,
|
|
is_active: false,
|
|
is_unskippable: false,
|
|
show_private: false,
|
|
show_public: true,
|
|
testo: "",
|
|
titolo: "",
|
|
};
|
|
} else {
|
|
defaultValues = {
|
|
...initialValues,
|
|
};
|
|
}
|
|
|
|
z.config(z.locales.it());
|
|
|
|
const form = useZodForm(Schema, {
|
|
defaultValues: defaultValues,
|
|
});
|
|
|
|
function onSubmit(fields: FormValues) {
|
|
const values = {
|
|
...fields,
|
|
};
|
|
submitMutation(values);
|
|
}
|
|
const COLORI_OPTIONS = ["blu", "rosso", "verde", "indaco"];
|
|
|
|
return (
|
|
<>
|
|
<Form {...form}>
|
|
<form
|
|
className="space-y-8 px-0.5"
|
|
onSubmit={form.handleSubmit(onSubmit)}
|
|
>
|
|
<FormField
|
|
control={form.control}
|
|
name="idbanner"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<div className="flex flex-wrap items-center gap-x-2">
|
|
<FormLabel htmlFor="idbanner">Codice</FormLabel>
|
|
<FormMessage />
|
|
</div>
|
|
<FormControl>
|
|
<Input placeholder="" {...field} id="idbanner" />
|
|
</FormControl>
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
<FormField
|
|
control={form.control}
|
|
name="titolo"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<div className="flex flex-wrap items-center gap-x-2">
|
|
<FormLabel htmlFor="titolo">Titolo</FormLabel>
|
|
<FormMessage />
|
|
</div>
|
|
<FormControl>
|
|
<Input
|
|
placeholder=""
|
|
{...field}
|
|
id="titolo"
|
|
onChange={(e) => NullableStringOnChange(e, field.onChange)}
|
|
value={field.value || ""}
|
|
/>
|
|
</FormControl>
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
<FormField
|
|
control={form.control}
|
|
name="testo"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<div className="flex flex-wrap items-center gap-x-2">
|
|
<FormLabel htmlFor="testo">Testo</FormLabel>
|
|
<FormMessage />
|
|
</div>
|
|
<FormControl>
|
|
<Input
|
|
placeholder=""
|
|
{...field}
|
|
id="testo"
|
|
onChange={(e) => NullableStringOnChange(e, field.onChange)}
|
|
value={field.value || ""}
|
|
/>
|
|
</FormControl>
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
<FormField
|
|
control={form.control}
|
|
name="is_unskippable"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<div className="flex flex-wrap items-center gap-x-2">
|
|
<FormLabel htmlFor="unskippable">Non Saltabile</FormLabel>
|
|
<FormControl>
|
|
<Switch
|
|
className="data-[state=checked]:bg-neutral-700"
|
|
defaultChecked={field.value}
|
|
id="unskippable"
|
|
onCheckedChange={field.onChange}
|
|
/>
|
|
</FormControl>
|
|
<FormMessage />
|
|
</div>
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
<FormField
|
|
control={form.control}
|
|
name="has_cta"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<div className="flex flex-wrap items-center gap-x-2">
|
|
<FormLabel htmlFor="hcta">Ha Link</FormLabel>
|
|
<FormControl>
|
|
<Switch
|
|
className="data-[state=checked]:bg-neutral-700"
|
|
defaultChecked={field.value}
|
|
id="hcta"
|
|
onCheckedChange={field.onChange}
|
|
/>
|
|
</FormControl>
|
|
<FormMessage />
|
|
</div>
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
<FormField
|
|
control={form.control}
|
|
name="hide_duration"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<div className="flex flex-wrap items-center gap-x-2">
|
|
<FormLabel htmlFor="durata">
|
|
Per quanto il banner stà nascosto
|
|
</FormLabel>
|
|
<FormMessage />
|
|
</div>
|
|
<FormControl>
|
|
<Input
|
|
placeholder=""
|
|
type="number"
|
|
{...field}
|
|
id="durata"
|
|
onChange={(e) => {
|
|
field.onChange(Number.parseInt(e.target.value));
|
|
}}
|
|
value={field.value || 1}
|
|
/>
|
|
</FormControl>
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
<FormField
|
|
control={form.control}
|
|
name="cta_href"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<div className="flex flex-wrap items-center gap-x-2">
|
|
<FormLabel htmlFor="cta_href">Indirizzo Link</FormLabel>
|
|
<FormMessage />
|
|
</div>
|
|
<FormControl>
|
|
<Input
|
|
placeholder=""
|
|
{...field}
|
|
id="cta_href"
|
|
onChange={(e) => NullableStringOnChange(e, field.onChange)}
|
|
value={field.value || ""}
|
|
/>
|
|
</FormControl>
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
<FormField
|
|
control={form.control}
|
|
name="cta_icon"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<div className="flex flex-wrap items-center gap-x-2">
|
|
<FormLabel className="flex flex-row gap-1" htmlFor="cta_icon">
|
|
Icona Link - <IconMatrixTooltip />
|
|
</FormLabel>
|
|
<FormMessage />
|
|
</div>
|
|
<FormControl>
|
|
<Input
|
|
placeholder=""
|
|
{...field}
|
|
id="cta_icon"
|
|
onChange={(e) => NullableStringOnChange(e, field.onChange)}
|
|
value={field.value || ""}
|
|
/>
|
|
</FormControl>
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
<FormField
|
|
control={form.control}
|
|
name="cta_text"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<div className="flex flex-wrap items-center gap-x-2">
|
|
<FormLabel htmlFor="cta_text">Testo Link</FormLabel>
|
|
<FormMessage />
|
|
</div>
|
|
<FormControl>
|
|
<Input
|
|
placeholder=""
|
|
{...field}
|
|
id="cta_text"
|
|
onChange={(e) => NullableStringOnChange(e, field.onChange)}
|
|
value={field.value || ""}
|
|
/>
|
|
</FormControl>
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
<FormField
|
|
control={form.control}
|
|
name="color"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<div className="flex flex-wrap items-center gap-x-2">
|
|
<FormLabel htmlFor="select-color">Colore</FormLabel>
|
|
<FormMessage />
|
|
</div>
|
|
<Select
|
|
defaultValue={field.value || ""}
|
|
onValueChange={field.onChange}
|
|
>
|
|
<FormControl>
|
|
<SelectTrigger>
|
|
<SelectValue placeholder="Select a verified email to display" />
|
|
</SelectTrigger>
|
|
</FormControl>
|
|
<SelectContent id="select-color">
|
|
{COLORI_OPTIONS.map((option) => (
|
|
<SelectItem key={option} value={option}>
|
|
{option}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
<FormField
|
|
control={form.control}
|
|
name="is_active"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<div className="flex flex-wrap items-center gap-x-2">
|
|
<FormLabel htmlFor="attivo">Attivo</FormLabel>
|
|
<FormControl>
|
|
<Switch
|
|
className="data-[state=checked]:bg-neutral-700"
|
|
defaultChecked={field.value}
|
|
id="attivo"
|
|
onCheckedChange={field.onChange}
|
|
/>
|
|
</FormControl>
|
|
<FormMessage />
|
|
</div>
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
<FormField
|
|
control={form.control}
|
|
name="show_public"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<div className="flex flex-wrap items-center gap-x-2">
|
|
<FormLabel htmlFor="pub">Mostra nel pubblico</FormLabel>
|
|
<FormControl>
|
|
<Switch
|
|
className="data-[state=checked]:bg-neutral-700"
|
|
defaultChecked={field.value}
|
|
id="pub"
|
|
onCheckedChange={field.onChange}
|
|
/>
|
|
</FormControl>
|
|
<FormMessage />
|
|
</div>
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
<FormField
|
|
control={form.control}
|
|
name="show_private"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<div className="flex flex-wrap items-center gap-x-2">
|
|
<FormLabel htmlFor="priv">Mostra in area riservata</FormLabel>
|
|
<FormControl>
|
|
<Switch
|
|
className="data-[state=checked]:bg-neutral-700"
|
|
defaultChecked={field.value}
|
|
id="priv"
|
|
onCheckedChange={field.onChange}
|
|
/>
|
|
</FormControl>
|
|
<FormMessage />
|
|
</div>
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
|
|
<div className="flex flex-row items-center justify-between">
|
|
<Button type="submit">Salva</Button>
|
|
{initialValues?.idbanner && del && (
|
|
<Button
|
|
onClick={() => del(initialValues.idbanner)}
|
|
type="button"
|
|
variant="destructive"
|
|
>
|
|
Cancella
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</form>
|
|
</Form>
|
|
</>
|
|
);
|
|
};
|