apps/web: add UploadFiles button

apps/web/components/Form/Common/Buttons.tsx

@@ -1,19 +1,16 @@
 /* eslint-disable react/jsx-curly-newline */
 /* eslint-disable no-negated-condition */
-import { FormContext } from './context/form-context';
+import { FormContext } from '../context/form-context';
 import * as apiIus from '@/api/ius/query';
 import { useFormStore } from '@/store/ius/form';
 import { Button } from '@repo/ui';
 import { useRouter } from 'next/navigation';
-import { pick } from 'radash';
 import { useCallback } from 'react';
 import { useContext } from 'react';
 
-const ERROR_UPLOAD_DOCUMENT = 'Произошла ошибка при загрузке документов';
-
 export function Buttons() {
   const { reset, resetValidation, setValidation, values } = useFormStore();
-  const { formFiles, pageUrlParams, setFormState } = useContext(FormContext);
+  const { pageUrlParams, setFormState } = useContext(FormContext);
 
   const router = useRouter();
 
@@ -37,27 +34,6 @@ export function Buttons() {
     });
   }, [pageUrlParams, router, setFormState, setValidation, values]);
 
-  const handleUploadFiles = useCallback(() => {
-    setFormState({ status: 'pending' });
-    resetValidation();
-    const uploadFiles = formFiles.map((formFile) => {
-      const formData = new FormData();
-      formData.append('file', formFile.file);
-      const document = pick(formFile, ['documentTypeId']);
-
-      return apiIus.uploadDocument({
-        document,
-        formData,
-        pageUrlParams,
-      });
-    });
-
-    return Promise.allSettled(uploadFiles).catch(() => {
-      setFormState({ status: 'error', text: ERROR_UPLOAD_DOCUMENT });
-      throw new Error(ERROR_UPLOAD_DOCUMENT);
-    });
-  }, [formFiles, pageUrlParams, resetValidation, setFormState]);
-
   const handleRetract = useCallback(() => {
     setFormState({ status: 'pending' });
     resetValidation();
@@ -93,7 +69,7 @@ export function Buttons() {
       <Button intent="outline-secondary" onClick={() => handleRetract()}>
         Возврат на доработку
       </Button>
-      <Button onClick={() => handleUploadFiles().then(() => handleSave())}>Сохранить</Button>
+      <Button onClick={handleSave}>Сохранить</Button>
     </div>
   );
 }

apps/web/components/Form/Common/Elements.tsx

@@ -1,4 +1,4 @@
-import type { FormComponentProps } from './types';
+import type { FormComponentProps } from '../types';
 import type { MetaObject } from '@/api/ius/types';
 import { mapFieldTypeElement } from '@/config/elements';
 import { useFormStore } from '@/store/ius/form';

apps/web/components/Form/Common/index.ts

@@ -0,0 +1,2 @@
+export * from './Buttons';
+export * from './Elements';

apps/web/components/Form/Documents/Buttons.tsx

@@ -0,0 +1,44 @@
+/* eslint-disable react/jsx-curly-newline */
+/* eslint-disable no-negated-condition */
+import { FormContext } from '../context/form-context';
+import * as apiIus from '@/api/ius/query';
+import { useFormStore } from '@/store/ius/form';
+import { Button } from '@repo/ui';
+import { pick } from 'radash';
+import { useCallback } from 'react';
+import { useContext } from 'react';
+
+const ERROR_UPLOAD_DOCUMENT = 'Произошла ошибка при загрузке документов';
+
+export function Buttons() {
+  const { resetValidation } = useFormStore();
+  const { formFiles, pageUrlParams, setFormState } = useContext(FormContext);
+
+  const handleUploadFiles = useCallback(() => {
+    setFormState({ status: 'pending' });
+    resetValidation();
+    const uploadFiles = formFiles.map((formFile) => {
+      const formData = new FormData();
+      formData.append('file', formFile.file);
+      const document = pick(formFile, ['documentTypeId']);
+
+      return apiIus.uploadDocument({
+        document,
+        formData,
+        pageUrlParams,
+      });
+    });
+
+    return Promise.allSettled(uploadFiles).catch(() => {
+      setFormState({ status: 'error', text: ERROR_UPLOAD_DOCUMENT });
+      throw new Error(ERROR_UPLOAD_DOCUMENT);
+    });
+  }, [formFiles, pageUrlParams, resetValidation, setFormState]);
+
+  return (
+    <div className="grid grid-cols-1 gap-2 gap-x-4 md:grid-cols-2">
+      <div />
+      <Button onClick={handleUploadFiles}>Загрузить файлы</Button>
+    </div>
+  );
+}

apps/web/components/Form/Documents/Files.tsx

@@ -1,5 +1,5 @@
-import { FormContext } from './context/form-context';
+import { FormContext } from '../context/form-context';
-import type { FormComponentProps } from './types';
+import type { FormComponentProps } from '../types';
 import { ArrowDownTrayIcon } from '@heroicons/react/24/solid';
 import { Heading, InputFile } from '@repo/ui';
 import Link from 'next/link';

apps/web/components/Form/Documents/index.ts

@@ -0,0 +1,2 @@
+export * from './Buttons';
+export * from './Files';

apps/web/components/Form/index.tsx

@@ -1,8 +1,7 @@
 'use client';
-import { Buttons } from './Buttons';
+import * as Common from './Common';
 import { FormContext, FormContextProvider } from './context/form-context';
-import { Elements } from './Elements';
+import * as Documents from './Documents';
-import { Files } from './Files';
 import { Header } from './Header';
 import { Overlay } from './Overlay';
 import type { FormComponentProps } from './types';
@@ -19,11 +18,12 @@ function Content(props: FormComponentProps) {
     <Background className="relative flex w-full flex-col gap-2 p-5">
       <Overlay />
       <Header title={title} link={'/ius' + createUrl({ ...pageUrlParams, route: '/conditions' })} />
-      <Elements {...props} />
+      <Common.Elements {...props} />
+      <Common.Buttons />
       <Divider />
-      <Files {...props} />
+      <Documents.Files {...props} />
+      <Documents.Buttons />
       <Divider />
-      <Buttons />
     </Background>
   );
 }