gitscope
← marzneshin / v0.6.2 / dashboard/src/features/services/components/dialogs/mutation/index.tsx
https://dev.kronoz.win/r/marzneshin.git
dashboard/src/features/services/components/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, useMemo } 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, MutationDialogProps } 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
28export const MutationDialog: FC<MutationDialogProps<ServiceType>> = ({
29    entity,
30    onClose,
31}) => {
32    const defaultValue = useMemo(() => ({
33        name: "",
34        inbound_ids: [],
35    }), []);
36    const updateMutation = useServicesUpdateMutation();
37    const createMutation = useServicesCreationMutation();
38    const { open, onOpenChange, form, handleSubmit } = useMutationDialog({
39        onClose,
40        entity,
41        updateMutation,
42        createMutation,
43        defaultValue,
44        schema: ServiceSchema,
45    });
46    const { t } = useTranslation();
47
48    return (
49        <Dialog open={open} onOpenChange={onOpenChange} defaultOpen={true}>
50            <DialogContent>
51                <DialogHeader>
52                    <DialogTitle className="text-primary">
53                        {entity
54                            ? t("page.services.dialogs.edition.title")
55                            : t("page.services.dialogs.creation.title")}
56                    </DialogTitle>
57                </DialogHeader>
58                <Form {...form}>
59                    <form onSubmit={handleSubmit} className="h-full">
60                        <NameField />
61                        <InboundsField />
62                        <Button
63                            className="mt-3 w-full font-semibold"
64                            type="submit"
65                            disabled={form.formState.isSubmitting}
66                        >
67                            {t("submit")}
68                        </Button>
69                    </form>
70                </Form>
71            </DialogContent>
72        </Dialog>
73    );
74};