gitscope
← marzneshin / v0.3.2 / dashboard/src/features/services/dialogs/mutation/index.tsx
https://dev.kronoz.win/r/marzneshin.git
dashboard/src/features/services/dialogs/mutation/index.tsx · TypeScript
Blame Raw
 1import {
 2    DialogTitle,
 3    DialogContent,
 4    Dialog,
 5    DialogHeader,
 6    Form,
 7    Button,
 8} from "@marzneshin/components";
 9import { type FC, useEffect } from "react";
10import {
11    type ServiceType,
12    useServicesCreationMutation,
13    useServicesUpdateMutation,
14} from "@marzneshin/features/services";
15import { useTranslation } from "react-i18next";
16import { z } from "zod";
17import { useMutationDialog } from "@marzneshin/hooks";
18import { NameField, InboundsField } from "./fields";
19
20export const ServiceSchema = z.object({
21    id: z.number().optional(),
22    inbound_ids: z.array(z.number()).refine((value) => value.some((item) => item), {
23        message: "You have to select at least one inbound.",
24    }),
25    name: z.string().trim().min(1),
26});
27
28type ServiceCreateType = z.infer<typeof ServiceSchema>;
29
30interface MutationDialogProps {
31    entity: ServiceType | null;
32    open: boolean;
33    onOpenChange: (state: boolean) => void;
34    onClose: () => void;
35}
36
37const getDefaultValues = (): ServiceCreateType => ({
38    name: "",
39    inbound_ids: [],
40});
41
42export const MutationDialog: FC<MutationDialogProps> = ({
43    entity,
44    open,
45    onOpenChange,
46    onClose,
47}) => {
48    const isEditing = entity !== null;
49    const updateMutation = useServicesUpdateMutation();
50    const createMutation = useServicesCreationMutation();
51    const { form, handleSubmit } = useMutationDialog({
52        entity,
53        updateMutation,
54        createMutation,
55        getDefaultValue: getDefaultValues,
56        schema: ServiceSchema,
57        onOpenChange,
58    });
59    const { t } = useTranslation();
60
61    useEffect(() => {
62        if (!open) onClose();
63    }, [open, onClose]);
64
65    return (
66        <Dialog open={open} onOpenChange={onOpenChange} defaultOpen={true}>
67            <DialogContent>
68                <DialogHeader>
69                    <DialogTitle className="text-primary">
70                        {isEditing
71                            ? t("page.services.dialogs.edition.title")
72                            : t("page.services.dialogs.creation.title")}
73                    </DialogTitle>
74                </DialogHeader>
75                <Form {...form}>
76                    <form onSubmit={handleSubmit} className="h-full">
77                        <NameField />
78                        <InboundsField />
79                        <Button
80                            className="mt-3 w-full font-semibold"
81                            type="submit"
82                            disabled={form.formState.isSubmitting}
83                        >
84                            {t("submit")}
85                        </Button>
86                    </form>
87                </Form>
88            </DialogContent>
89        </Dialog>
90    );
91};