Refactor documents

src/components/UploadForm.jsx

@@ -1,19 +1,17 @@
-import { Form, Upload, Button} from 'antd'
+import { Upload, Button } from 'antd'
-import { UploadOutlined} from '@ant-design/icons'
+import { UploadOutlined } from '@ant-design/icons'
 import { useState } from 'react'
 import { upload } from  './factory'
 
 export default function UploadForm({url, onUploadStart, onUploadComplete, onUploadError}) {  
-  const [isSubmitButtonEnabled, setSubmitButtonEnabled] = useState(false)  
+  const [fileList, setfileList] = useState([])
-  const [form] = Form.useForm();
 
   const handleFileSend = async (values) => {
     if(onUploadStart)
       onUploadStart()
     try {
-      const values = await form.validateFields();      
       const formData = new FormData()
-      values.file.fileList.forEach((val) => {
+      fileList.forEach((val) => {
         formData.append("files", val.originFileObj);
       });
       await upload(url, formData)
@@ -21,36 +19,27 @@ export default function UploadForm({url, onUploadStart, onUploadComplete, onUplo
       if(onUploadError)
       onUploadError(error)
     } finally {
-      form.resetFields()
+      setfileList([])
       if(onUploadComplete)
         onUploadComplete()
     }
   }
 
+  const isSendButtonEnabled = fileList.length > 0
   return(
-    <Form
+    <div style={{display: 'flex'}}>
-      form={form}
-      onFinish={handleFileSend}
-      style={{display: 'flex'}}>
-      <Form.Item 
-        name="file" 
-        style={{marginBottom: 0}}
-        rules={[{ required: true, message: 'Выберите файл' }]}>
       <Upload 
         name ="file"
-          onChange={(props) => setSubmitButtonEnabled(props.fileList.length > 0)}>
+        fileList={fileList}
+        onChange={(props) => setfileList(props.fileList)}>
         <Button icon={<UploadOutlined/>}>Загрузить файл</Button>
       </Upload>
-      </Form.Item>
+      <Button type="primary"
-      <Form.Item style={{marginBottom: 0}}>
+        disabled={!isSendButtonEnabled}
-        <Button 
+        style={{marginLeft: '10px', display:isSendButtonEnabled?'':'none'}}
-          type="primary" 
+        onClick={handleFileSend}>
-          htmlType="submit"
-          disabled={!isSubmitButtonEnabled}
-          style={{marginLeft: '10px', display:isSubmitButtonEnabled?'':'none'}}>
         Отправить
       </Button>
-      </Form.Item>
+    </div>
-    </Form>
   )
 } 

src/pages/Documents/DocumentsTemplate.jsx

@@ -1,115 +1,169 @@
-import {useState, useEffect} from "react"
+import { useState, useEffect } from "react"
-import {Table, DatePicker, Button, Form} from 'antd'
+import { DatePicker, Button, Input } from "antd"
-import moment from 'moment'
+import moment from "moment"
-import { FileService } from '../../services/api'
+import { FileService } from "../../services/api"
-import { updateFromWebApiWrapperAsync, download, makePaginationObject} from '../../components/factory'
+import {
-import UploadForm from '../../components/UploadForm'
+  updateFromWebApiWrapperAsync,
-import LoaderPortal from '../../components/LoaderPortal'
+  download,
+  makePaginationObject,
+} from "../../components/factory"
+import { EditableTable } from "../../components/EditableTable"
+import UploadForm from "../../components/UploadForm"
+import LoaderPortal from "../../components/LoaderPortal"
 
 const pageSize = 12
-const {RangePicker} = DatePicker;
+const { RangePicker } = DatePicker
+const { Search } = Input
 
-export default function DocumentsTemplate({idCategory, idWell}) {
+export default function DocumentsTemplate({ idCategory, idWell }) {
   const [page, setPage] = useState(1)
-  const [range, setRange] = useState([])
+  const [dataRange, setDataRange] = useState([])
+  const [company, setCompany] = useState([])
   const [pagination, setPagination] = useState(null)
   const [files, setFiles] = useState([])
   const [showLoader, setShowLoader] = useState(false)
 
   const uploadUrl = `/api/well/${idWell}/files/?idCategory=${idCategory}`
 
-  const handleFileNameCLick = async (_, row) => {    
+  const handleFileDownload = async (_, row) => {
-    updateFromWebApiWrapperAsync(async ()=>{
+    updateFromWebApiWrapperAsync(
+      async () => {
         await download(`/api/well/${idWell}/files/${row.id}`)
       },
       setShowLoader,
-    `Не удалось скачать файл ${row}`)
+      `Не удалось скачать файл ${row}`
+    )
+  }
+
+  const handleUploadComplete = () => {
+    update()
+  }
+
+  const handleFileDelete = (file) => {
+    //FileService.delete(idWell, file.id)
+    update()
+  }
+
+  const hanleCompanySearch = (value, _) => {
+    setCompany(value)
   }
 
   const columns = [
     {
-        title: 'Документ',
+      title: "Документ",
-        key: 'document',
+      key: "document",
-        dataIndex: 'name',
+      dataIndex: "name",
-        render: (name, row) => 
+      render: (name, row) => (
-          <Button onClick={ev => handleFileNameCLick(ev, row)} download={name}>{name}</Button>
+        <Button type="link" onClick={(ev) => handleFileDownload(ev, row)} download={name}>
+          {name}
+        </Button>),
     },
     {
-        title: 'Дата загрузки',
+      title: "Дата загрузки",
-        key: 'uploadDate',
+      key: "uploadDate",
-        dataIndex: 'uploadDate',
+      dataIndex: "uploadDate",
-        render: (item) => moment.utc(item).local().format('DD MMM YYYY, HH:mm:ss')
+      render: (item) =>
+        moment.utc(item).local().format("DD MMM YYYY, HH:mm:ss"),
     },
     {
-        title: 'Ф.И.О.',
+      title: "Ф.И.О.",
-        key: 'userName',
+      key: "userName",
-        dataIndex: 'userName',
+      dataIndex: "userName",
-    }
+    },
-  ];
+    {
+      title: "Компания",
+      key: "company",
+      dataIndex: "company",
+    },
+  ]
 
-  const addKeysAndUpdateFiles = (items) =>{
+  const addKeysAndUpdateFiles = (items) => {
-    const mappedFiles = items?.map(fileInfo => ({key: fileInfo.id, begin: fileInfo.date, ...fileInfo}))
+    const mappedFiles = items?.map((fileInfo) => ({
-    setFiles(mappedFiles??[])
+      key: fileInfo.id,
+      begin: fileInfo.date,
+      ...fileInfo,
+    }))
+    setFiles(mappedFiles ?? [])
   }
 
-  useEffect(() => {
+  const update = () => {
     let begin = null
     let end = null
-    if (range?.length > 1) {
+    if (dataRange?.length > 1) {
-      begin = range[0].toISOString()
+      begin = dataRange[0].toISOString()
-      end = range[1].toISOString()
+      end = dataRange[1].toISOString()
     }
 
     updateFromWebApiWrapperAsync(
-      async ()=>{
+      async () => {
         const paginatedFiles = await FileService.getFilesInfo(
-          `${idWell}`,
+          idWell,
           (page - 1) * pageSize,
           pageSize,
           idCategory,
           begin,
-          end)
+          end
-        if(!paginatedFiles)
+        )
-          return
+        if (!paginatedFiles) return
         addKeysAndUpdateFiles(paginatedFiles?.items)
 
         const newPagination = makePaginationObject(paginatedFiles)
         setPagination(newPagination)
       },
       setShowLoader,
-      `Не удалось загрузить файлы по скважине "${idWell}"`)
+      `Не удалось загрузить файлы по скважине "${idWell}"`
-  }, [idWell, range, page, idCategory])
+    )
+  }
+
+  useEffect(update, [idWell, dataRange, page, idCategory, company])
+
+  const companies = [...new Set(files.map(file=>file.company))]
+    .filter(company=>company)
+
+  const DataListCompanies = <datalist id="listCompanies">
+    {companies.map((company, i)=><option key={company} value={company}>{company}</option>)}
+  </datalist>
 
   return (
     <LoaderPortal show={showLoader}>
-          <Form
+      <div style={{margin:16, display:'flex'}}>
-            layout="vertical">
+        <div>
-              <div className='d-flex'>
+          <span>Фильтр по дате</span>
-              <Form.Item
+          <div>
-                label="Фильтр документов">
+            <RangePicker showTime onChange={setDataRange} />
-                <RangePicker
+          </div>
-                    showTime
+        </div>        
-                    onChange={setRange}/>
+        &nbsp;
-              </Form.Item>
+        <div>
-              <Form.Item
+          <span>Фильтр по компании</span>
-                label="Загрузка документов">
+          <Search
+            list='listCompanies'
+            placeholder="Фильтр по компании"
+            onSearch={hanleCompanySearch}/>
+          {DataListCompanies}
+        </div>
+        &nbsp;&nbsp;
+        <div>
+          <span>Загрузка</span>
           <UploadForm
             url={uploadUrl}
-                  onUploadStart={()=>setShowLoader(true)}
+            onUploadStart={() => setShowLoader(true)}
-                  onUploadComplete={()=>setShowLoader(false)}/>
+            onUploadComplete={handleUploadComplete}/>
-              </Form.Item>
+        </div>
       </div>
-          </Form>
 
-      <Table
+      <EditableTable
         columns={columns}
         dataSource={files}
-        size={'small'}
+        size={"small"}
         pagination={{
           ...pagination,
           showSizeChanger: false,
-          onChange: (page) => setPage(page)}}
+          onChange: (page) => setPage(page),
+        }}
+        onRowDelete={handleFileDelete}
         rowKey={(record) => record.id}
       />
-    </LoaderPortal>);
+    </LoaderPortal>
+  )
 }

src/pages/Documents/index.jsx

@@ -14,12 +14,12 @@ export default function MenuDocuments({idWell}) {
       selectable={true}
       className="well_menu"
       selectedKeys={[category]}>
-      {makeMenuItems('documentsPageMenu', rootPath)}
+      {makeMenuItems(rootPath)}
     </Menu>
     <Layout>
         <Content className="site-layout-background">
           <Switch>            
-            {makeRouteItems('documentsPageMenu', `${rootPath}`, idWell)}            
+            {makeRouteItems(rootPath, idWell)}            
           </Switch>
         </Content>
       </Layout>

src/pages/Documents/menuItems.jsx

@@ -13,17 +13,17 @@ export const documentCategories = [
   {id:7, key:'master', title:'Мастер'},
 ]
 
-const makeMenuItem = (keyPrefix, keyValue, rootPath, title, other) => (
+const makeMenuItem = (keyValue, rootPath, title, other) => (
   <Menu.Item className="ant-menu-item" 
-    key={`${keyPrefix}/${keyValue}/menuItem`} 
+    key={`${keyValue}`} 
     {...other}>
     <Link to={{pathname: `${rootPath}/${keyValue}`}}>{title}</Link>
   </Menu.Item>)
 
-const makeRouteItem = (keyPrefix, keyValue, rootPath, other) => (
+const makeRouteItem = (keyValue, rootPath, other) => (
   <Route 
     path={`${rootPath}/${keyValue}`} 
-    key={`${keyPrefix}/${keyValue}/routeItem`}>
+    key={`${keyValue}`}>
     <DocumentsTemplate {...other}/>
   </Route>)
 
@@ -42,17 +42,17 @@ const formatRoutePath = (rootPath) =>{
 const getCategoriesByUserRole = (role) => documentCategories
   .filter(cat => !cat.roles || cat.roles.includes('*') || cat.roles.includes(role))
 
-export const makeMenuItems = (keyPrefix, rootPath) => {
+export const makeMenuItems = (rootPath) => {
   const root = formatRoutePath(rootPath)
   const categories = getCategoriesByUserRole(localStorage['roleName'])
   return  categories.map(category => 
-    makeMenuItem(keyPrefix, category.key, root, category.title, {icon:<FolderOutlined/>}))
+    makeMenuItem(category.key, root, category.title, {icon:<FolderOutlined/>}))
 }
 
-export const makeRouteItems = (keyPrefix, rootPath, idWell) => { 
+export const makeRouteItems = (rootPath, idWell) => { 
   const root = formatRoutePath(rootPath)
   const categories = getCategoriesByUserRole(localStorage['roleName'])
   const routes = categories.map(category =>
-    makeRouteItem(keyPrefix, category.key, root, {idCategory: category.id, idWell: idWell}))
+    makeRouteItem(category.key, root, {idCategory: category.id, idWell: idWell}))
   return routes;
 }

src/pages/Well.jsx

@@ -53,15 +53,14 @@ export default function Well() {
             title={
               <Link
                 to={{ pathname: `${rootPath}/document/fluidService` }}
-                className="linkDocuments"
+                className="linkDocuments">
-              >
                 Документы
               </Link>
             }
             icon={<FolderOutlined />}
             selectable={true}
           >
-            {makeMenuItems('documentsSubMenu', `${rootPath}/document`)}
+            {makeMenuItems(rootPath)}
           </SubMenu>
           <Menu.Item key="8" icon={<FolderOutlined />}>
             <Link to={{ pathname: `${rootPath}/smbo` }}>СМБО</Link>

src/styles/grid.css

@@ -1,9 +0,0 @@
-.grid_container{
-  display: grid;
-  column-gap: 4px;
-  row-gap: 4px;
-  /* grid-template-columns: repeat(6, 1fr);
-  grid-template-rows:  repeat(9, 1fr); */
-  justify-items: stretch;
-  align-items: stretch;
-}