CF2-33: Фикс загрузки файлов и меню категорий

src/components/Documents.jsx

@@ -9,27 +9,9 @@ import LoaderPortal from './LoaderPortal'
 import locale from "antd/lib/locale/ru_RU"
 import moment from 'moment'
 
-const pageSize = 26
+const pageSize = 12
 const {RangePicker} = DatePicker;
 
-const columns = [
-  {
-      title: 'Документ',
-      key: 'document',
-      dataIndex: 'name',
-  },
-  {
-      title: 'Дата загрузки',
-      key: 'uploadDate',
-      dataIndex: 'uploadDate',
-      render: (item) => moment.utc(item).local().format('DD MMM YYYY, HH:mm:ss')
-  },
-  {
-      title: 'Ф.И.О.',
-      key: 'userName',
-      dataIndex: 'userName',
-  }
-];
 
 export default function Documents({selectedFileCategory}) {
   let {id} = useParams()
@@ -39,10 +21,71 @@ export default function Documents({selectedFileCategory}) {
   const [pagination, setPagination] = useState(null)
   const [files, setFiles] = useState([])
   const [selectedFiles, setSelectedFiles] = useState([])
+  const [isTableUpdating, setTableUpdating] = useState(false)
 
   const [loader, setLoader] = useState(false)
+  const [form] = Form.useForm();
+
+  const handleFileNameCLick = async (event, row) => {    
+    const element = event.target
+
+    if(!element.href.length) {
+      try {
+        setLoader(true)
+
+        await fetch(`/api/files/${id}/${row.id}`, {
+          headers: {
+            Authorization: 'Bearer ' + localStorage['token']
+          }
+        })
+        .then(async (response) => {
+          const blob = await response.blob();
+  
+          let reader = new FileReader();
+          reader.readAsDataURL(blob);
+          reader.onload = function (e) {
+            element.href = e.target.result
+            element.click()
+          };
+          setLoader(false)
+        });
+      } catch (error) {
+        notify(`Не удалось скачать файл ${row}`, 'error')
+        console.log(error)
+      }
+    }
+  }
+  
+  const columns = [
+    {
+        title: 'Документ',
+        key: 'document',
+        dataIndex: 'name',
+        render: (name, row) => 
+          <a onClick={ev => handleFileNameCLick(ev, row)} download={name}>{name}</a>
+    },
+    {
+        title: 'Дата загрузки',
+        key: 'uploadDate',
+        dataIndex: 'uploadDate',
+        render: (item) => moment.utc(item).local().format('DD MMM YYYY, HH:mm:ss')
+    },
+    {
+        title: 'Ф.И.О.',
+        key: 'userName',
+        dataIndex: 'userName',
+    }
+  ];
 
   const submitFileFormProps = {
+    progress: {
+      strokeColor: {
+        '0%': '#108ee9',
+        '100%': '#87d068',
+      },
+      strokeWidth: 3,
+      format: percent => `${parseFloat(percent.toFixed(2))}%`,
+    },
     onChange({ file, fileList }) {
       if (file.status !== 'uploading') {
         setSelectedFiles(fileList)
@@ -54,11 +97,12 @@ export default function Documents({selectedFileCategory}) {
     setRange(range)
   }
 
-  const onFinish = (values) => {
+  const onFinish = (values, form) => {
     var fileList = values.fileInput.fileList
 
     if (fileList.length > 0)
     {
+      setLoader(true)
       const formData = new FormData();
 
       fileList.forEach(val => {
@@ -73,7 +117,9 @@ export default function Documents({selectedFileCategory}) {
         body: formData
       })
       .then(async (response) => {
-        // refresh component to upload new files в зависимоть useEffect какую-то переменную, чтоб дергался снова запрос на всю инфу о файлах
+        setLoader(false)
+        form.resetFields()
+        setTableUpdating(true)
       });
     }
   }
@@ -93,7 +139,7 @@ export default function Documents({selectedFileCategory}) {
           begin = range[0].toISOString()
           end = range[1].toISOString()
         }
-        console.log(id)
+
         await FileService.getFilesInfo(
             `${id}`,
             (page - 1) * pageSize,
@@ -114,37 +160,40 @@ export default function Documents({selectedFileCategory}) {
                     total: paginatedFiles?.count,
                     current: Math.floor(paginatedFiles?.skip / pageSize),
                 })
+
+                setTableUpdating(false)
+                setLoader(false)
             }
         )
       } catch (ex) {
         notify(`Не удалось загрузить файлы по скважине "${id}"`, 'error')
         console.log(ex)
       }
-      setLoader(false)
     }
     GetDocuments()
-  }, [id, selectedFileCategory, range])
+  }, [id, range, selectedFileCategory, isTableUpdating])
 
   return (
     <div>
       <MenuDocuments/>
-      <div className='filter-group'>
+        <div className='filter-group'>
-        <h3 className='filter-group-heading'>Фильтр документов:</h3>
+          <h3 className='filter-group-heading'>Фильтр документов:</h3>
-        <ConfigProvider locale={locale}>
+          <ConfigProvider locale={locale}>
-            <RangePicker
+              <RangePicker
-                showTime
+                  showTime
-                onChange={onChangeRange}
+                  onChange={onChangeRange}
-            />
+              />
-        </ConfigProvider>
+          </ConfigProvider>
-      </div>
+        </div>
-      <LoaderPortal show={loader}></LoaderPortal>
+        <LoaderPortal show={loader}></LoaderPortal>
-      <div>&nbsp;</div>
+        <div>&nbsp;</div>
-      <Form
+        <Form
-        name="DocumentsUploadForm"
+          form={form}
-        onFinish={onFinish}
+          name="DocumentsUploadForm"
-        onFinishFailed={onFinishFailed}
+          onFinish={(values) => onFinish(values, form)}
-      >
+          onFinishFailed={onFinishFailed}
-        <div style={{display: 'flex'}}>
+          style={{width: '300px'}}
+        >
           <Form.Item
             name="fileInput"
             rules={[{ required: true, message: 'Выберите файл' }]}
@@ -158,13 +207,11 @@ export default function Documents({selectedFileCategory}) {
               type="primary" 
               htmlType="submit"
               disabled={selectedFiles.length === 0}
-              style={{marginLeft: '10px'}}
             >
               Отправить
             </Button>
-        </Form.Item>
+          </Form.Item>
-      </div>
+        </Form>
-      </Form>
       <div>&nbsp;</div>
       <Table
         columns={columns}

src/components/MenuDocuments.jsx

@@ -1,15 +1,25 @@
 import {Menu} from "antd";
 import {FolderOutlined} from "@ant-design/icons";
 import {Link} from "react-router-dom";
+import {useState} from "react"
 
 
 export default function MenuDocuments() {
+
+  const [selectedItem, setSelectedItem] = useState(1)
+
+  const handleClick = e => {
+    setSelectedItem({ current: e.key });
+  };
+
   return(
   <>
     <Menu
       mode="horizontal"
       selectable={true}
       className="well_menu"
+      onClick={handleClick} 
+      selectedKeys={[selectedItem]}
     >
       <Menu.Item key="1" icon={<FolderOutlined/>}>
         <Link to='fluidService'>Растворный сервис</Link>

src/pages/Cementing.jsx

@@ -1,8 +1,8 @@
 import Documents from "../components/Documents"
 
-export default function Cementing(id) {
+export default function Cementing({selectedFileCategory}) {
 
     return(
-        <Documents selectedFileCategory={id} />
+        <Documents selectedFileCategory={selectedFileCategory} />
     )
 }

src/pages/DocumentForWell.jsx

@@ -1,8 +1,8 @@
 import Documents from "../components/Documents"
 
-export default function DocumentsForWell(id) {
+export default function DocumentsForWell({selectedFileCategory}) {
 
     return(
-        <Documents selectedFileCategory={id} />
+        <Documents selectedFileCategory={selectedFileCategory} />
     )
 }

src/pages/FluidService.jsx

@@ -1,8 +1,8 @@
 import Documents from "../components/Documents"
 
-export default function FluidService(id) {
+export default function FluidService({selectedFileCategory}) {
 
     return(
-        <Documents selectedFileCategory={id} />
+        <Documents selectedFileCategory={selectedFileCategory} />
     )
 }

src/pages/Gti.jsx

@@ -1,8 +1,8 @@
 import Documents from "../components/Documents"
 
-export default function Gti(id) {
+export default function Gti({selectedFileCategory}) {
 
     return(
-        <Documents selectedFileCategory={id} />
+        <Documents selectedFileCategory={selectedFileCategory} />
     )
 }

src/pages/Master.jsx

@@ -1,8 +1,8 @@
 import Documents from "../components/Documents"
 
-export default function Master(id) {
+export default function Master({selectedFileCategory}) {
 
     return(
-        <Documents selectedFileCategory={id} />
+        <Documents selectedFileCategory={selectedFileCategory} />
     )
 }

src/pages/Nnb.jsx

@@ -1,8 +1,8 @@
 import Documents from "../components/Documents"
 
-export default function Nnb(id) {
+export default function Nnb({selectedFileCategory}) {
 
     return(
-        <Documents selectedFileCategory={id} />
+        <Documents selectedFileCategory={selectedFileCategory} />
     )
 }

src/pages/Supervisor.jsx

@@ -1,8 +1,8 @@
 import Documents from "../components/Documents"
 
-export default function Supervisor(id) {
+export default function Supervisor({selectedFileCategory}) {
 
     return(
-        <Documents selectedFileCategory={id} />
+        <Documents selectedFileCategory={selectedFileCategory} />
     )
 }

src/pages/Well.jsx

@@ -113,22 +113,22 @@ export default function Well() {
               <FluidService selectedFileCategory={1}/>
             </Route>
             <Route path="/well/:id/cementing">
-              <Cementing id={2}/>
+              <Cementing selectedFileCategory={2}/>
             </Route>
             <Route path="/well/:id/nnb">
-              <Nnb id={3}/>
+              <Nnb selectedFileCategory={3}/>
             </Route>
             <Route path="/well/:id/gti">
-              <Gti id={4}/>
+              <Gti selectedFileCategory={4}/>
             </Route>
             <Route path="/well/:id/documentsForWell">
-              <DocumentForWell id={5}/>
+              <DocumentForWell selectedFileCategory={5}/>
             </Route>
             <Route path="/well/:id/supervisor">
-              <Supervisor id={6}/>
+              <Supervisor selectedFileCategory={6}/>
             </Route>
             <Route path="/well/:id/master">
-              <Master id={7}/>
+              <Master selectedFileCategory={7}/>
             </Route>
             <Route path="/well/:id/lastData">
               <LastData/>

src/services/api/services/FileService.ts

@@ -69,22 +69,17 @@ end?: string,
     /**
      * Возвращает файл с диска на сервере
      * @param wellId id скважины
-     * @param fileName 
      * @param fileId id запрашиваемого файла
      * @returns string Success
      * @throws ApiError
      */
     public static async getFile(
 wellId: number,
-fileName: string,
+fileId: number,
-fileId?: number,
 ): Promise<string> {
         const result = await __request({
             method: 'GET',
-            path: `/api/files/${wellId}/${fileName}`,
+            path: `/api/files/${wellId}/${fileId}`,
-            query: {
-                'fileId': fileId,
-            },
         });
         return result.body;
     }