70 lines
2.4 KiB
TypeScript
Executable File
70 lines
2.4 KiB
TypeScript
Executable File
import { LoaderCircleIcon } from 'lucide-react';
|
|
import React from 'react';
|
|
import { useIntl } from 'react-intl';
|
|
import { useDisclosure } from '@crux-kit/hooks';
|
|
import { Button } from '#shared/ui/Button';
|
|
import { Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from '#shared/ui/Dialog';
|
|
import { Skeleton } from '#shared/ui/Skeleton';
|
|
import { useGetDetailed } from '../../api/detailed';
|
|
import { FORM_ID, initialValues, MainForm, prepareInitialValues, useSubmit } from '../forms/MainForm';
|
|
|
|
export const ManageTrigger: React.FC<
|
|
React.PropsWithChildren<{
|
|
title: string;
|
|
id: number | null;
|
|
}>
|
|
> = ({ id, children, title }) => {
|
|
const intl = useIntl();
|
|
|
|
const dialog = useDisclosure(false);
|
|
|
|
const { data, isLoading } = useGetDetailed(
|
|
id == null || dialog.isOpen === false ? undefined : { id: String(id) }
|
|
);
|
|
|
|
const { isSubmitting, submit } = useSubmit({ onSuccess: dialog.close });
|
|
|
|
return (
|
|
<Dialog open={dialog.isOpen} onOpenChange={dialog.toggle}>
|
|
<DialogTrigger asChild>{children}</DialogTrigger>
|
|
<DialogContent variant="fullscreen">
|
|
<DialogHeader>
|
|
<DialogTitle>{title}</DialogTitle>
|
|
<DialogDescription className="sr-only"></DialogDescription>
|
|
</DialogHeader>
|
|
<DialogBody>
|
|
{isLoading ? (
|
|
<div className="grid grid-cols-2 gap-5">
|
|
<Skeleton className="h-15" />
|
|
<Skeleton className="h-15" />
|
|
<Skeleton className="h-15" />
|
|
<Skeleton className="h-15" />
|
|
</div>
|
|
) : (
|
|
<MainForm
|
|
initialValues={data ? prepareInitialValues(data) : initialValues}
|
|
onSubmit={submit}
|
|
/>
|
|
)}
|
|
</DialogBody>
|
|
<DialogFooter>
|
|
<Button type="submit" form={FORM_ID} disabled={isSubmitting}>
|
|
{isSubmitting ? (
|
|
<span className="flex items-center gap-2">
|
|
<LoaderCircleIcon className="h-4 w-4 animate-spin" />
|
|
{intl.formatMessage({ id: 'STATE.SAVING' })}...
|
|
</span>
|
|
) : (
|
|
intl.formatMessage({ id: 'ACTION.SAVE' })
|
|
)}
|
|
</Button>
|
|
|
|
<DialogClose asChild>
|
|
<Button variant="outline">{intl.formatMessage({ id: 'ACTION.CANCEL' })}</Button>
|
|
</DialogClose>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
};
|