apps/web: add canUpload prop to file

.vscode/settings.json

@@ -32,5 +32,5 @@
     ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
     ["cx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
   ],
-  "editor.inlineSuggest.showToolbar": "onHover"
+  "editor.inlineSuggest.showToolbar": "always"
 }

apps/web/api/ius/types.ts

@@ -16,11 +16,9 @@ export type DocumentType = {
   name: string;
 };
 
-export type Document = {
+export type Document = DocumentType & {
-  documentId: string;
+  documentId?: string;
-  documentTypeId: string;
+  href?: string;
-  href: string;
-  name: string;
 };
 
 export type ResponseGetData = Record<string, Value>;

apps/web/app/ius/[slug]/page.tsx

@@ -29,9 +29,10 @@ export default async function Page(pageProps: PageProps) {
         apiIUS.getData({ pageUrlParams }),
         apiIUS.getMetaData({ pageUrlParams }),
         apiIUS.getConfig({ pageUrlParams }),
+        apiIUS.getDocumentTypes({ pageUrlParams }),
         apiIUS.getDocuments({ pageUrlParams }),
-      ]).then(([data, metaData, { title }, documents]) => {
+      ]).then(([data, metaData, { title }, documentTypes, documents]) => {
-        const props = { data, documents, metaData, pageUrlParams, title };
+        const props = { data, documentTypes, documents, metaData, pageUrlParams, title };
 
         return <Form {...props} />;
       });

apps/web/components/Form/Files.tsx

@@ -4,6 +4,7 @@ import type * as IUS from '@/api/ius/types';
 import { ArrowDownTrayIcon } from '@heroicons/react/24/solid';
 import { Heading, InputFile } from '@repo/ui';
 import Link from 'next/link';
+import { unique } from 'radash';
 import { useContext } from 'react';
 
 type DownloadDocumentProps = Pick<FileProps, 'document'>;
@@ -27,13 +28,13 @@ function DownloadDocument({ document }: DownloadDocumentProps) {
 }
 
 type FileProps = {
-  readonly document: IUS.Document;
+  readonly document: Docs[number];
 };
 
 function File({ document }: FileProps) {
   const { formFiles, setFormFiles } = useContext(FormContext);
 
-  const { documentId, documentTypeId, name } = document;
+  const { canUpload, documentTypeId, name } = document;
 
   const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     if (event.target.files !== null) {
@@ -47,23 +48,40 @@ function File({ document }: FileProps) {
   };
 
   return (
-    <div key={documentId} className="flex flex-col gap-1">
+    <div key={documentTypeId} className="flex flex-col gap-1">
       <label className="mb-2 block text-sm font-normal text-gray-900">{name}:</label>
-      <InputFile onChange={handleFileChange} />
+      <InputFile onChange={handleFileChange} disabled={!canUpload} />
       <DownloadDocument document={document} />
     </div>
   );
 }
 
-export function Files({ documents }: Props) {
+export function Files({ documentTypes, documents }: Props) {
+  const docs = getDocs({ documentTypes, documents });
+
   return (
     <div className="grid gap-4">
-      <Heading className="text-sms">Документы</Heading>
+      <Heading className="text-sm">Документы</Heading>
       <div className="grid gap-2 md:grid-cols-2">
-        {documents.map((document) => (
+        {docs.map((document) => (
-          <File key={document.documentId} document={document} />
+          <File key={document.documentTypeId} document={document} />
         ))}
       </div>
     </div>
   );
 }
+
+type Docs = Array<IUS.Document & { canUpload: boolean }>;
+
+function getDocs({ documentTypes, documents }: Pick<Props, 'documentTypes' | 'documents'>): Docs {
+  if (!documents.length) {
+    return documentTypes.map((x) => ({ ...x, canUpload: true }));
+  }
+
+  return unique(documents, ({ documentTypeId }) => documentTypeId).map((document) => ({
+    ...document,
+    canUpload: documentTypes.some(
+      (documentType) => documentType.documentTypeId === document.documentTypeId
+    ),
+  }));
+}

apps/web/components/Form/types.ts

@@ -3,6 +3,7 @@ import type { PageUrlParams } from '@/utils/url';
 
 export type Props = {
   readonly data: IUS.ResponseGetData;
+  readonly documentTypes: IUS.ResponseDocumentTypes;
   readonly documents: IUS.ResponseDocuments;
   readonly metaData: IUS.ResponseMetaData;
   readonly pageUrlParams: PageUrlParams;

packages/ui/input.tsx

@@ -29,7 +29,7 @@ export const InputFile = forwardRef<HTMLInputElement, InputProps>((props, ref) =
     type="file"
     className="file:bg-primary-50 file:text-primary-500 hover:file:bg-primary-100 block w-full text-sm
         text-slate-500 file:mr-4 file:rounded-sm file:border-0
-        file:px-4 file:py-2 file:text-sm
+        file:px-4 file:py-2 file:text-sm file:font-semibold
-        file:font-semibold hover:file:cursor-pointer"
+        hover:file:cursor-pointer disabled:cursor-not-allowed disabled:opacity-30 disabled:file:cursor-not-allowed"
   />
 ));