TASKS-1823 WebManager module

2026-08-28 08:35:58 +00:00
parent fdb2cf3837
commit c93d8c025b
654 changed files with 26232 additions and 6075 deletions
@@ -0,0 +1,69 @@
+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>
+  );
+};