From 2418d13e758b0f93a0a947f8c8dfd31735266618 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=A4=D1=80=D0=BE=D0=BB=D0=BE=D0=B2?= Date: Tue, 17 Aug 2021 16:46:46 +0500 Subject: [PATCH] Refactor documents --- src/components/UploadForm.jsx | 51 +++--- src/pages/Documents/DocumentsTemplate.jsx | 192 ++++++++++++++-------- src/pages/Documents/index.jsx | 4 +- src/pages/Documents/menuItems.jsx | 16 +- src/pages/Well.jsx | 5 +- src/styles/grid.css | 9 - 6 files changed, 155 insertions(+), 122 deletions(-) delete mode 100644 src/styles/grid.css diff --git a/src/components/UploadForm.jsx b/src/components/UploadForm.jsx index f4e8755..7f1e437 100644 --- a/src/components/UploadForm.jsx +++ b/src/components/UploadForm.jsx @@ -1,19 +1,17 @@ -import { Form, Upload, Button} from 'antd' -import { UploadOutlined} from '@ant-design/icons' +import { Upload, Button } from 'antd' +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 [form] = Form.useForm(); + const [fileList, setfileList] = useState([]) 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( -
- - setSubmitButtonEnabled(props.fileList.length > 0)}> - - - - - - -
+
+ setfileList(props.fileList)}> + + + +
) } \ No newline at end of file diff --git a/src/pages/Documents/DocumentsTemplate.jsx b/src/pages/Documents/DocumentsTemplate.jsx index 79d02bf..03d57fb 100644 --- a/src/pages/Documents/DocumentsTemplate.jsx +++ b/src/pages/Documents/DocumentsTemplate.jsx @@ -1,115 +1,169 @@ -import {useState, useEffect} from "react" -import {Table, DatePicker, Button, Form} from 'antd' -import moment from 'moment' -import { FileService } from '../../services/api' -import { updateFromWebApiWrapperAsync, download, makePaginationObject} from '../../components/factory' -import UploadForm from '../../components/UploadForm' -import LoaderPortal from '../../components/LoaderPortal' +import { useState, useEffect } from "react" +import { DatePicker, Button, Input } from "antd" +import moment from "moment" +import { FileService } from "../../services/api" +import { + updateFromWebApiWrapperAsync, + 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) => { - updateFromWebApiWrapperAsync(async ()=>{ - await download(`/api/well/${idWell}/files/${row.id}`) - }, - setShowLoader, - `Не удалось скачать файл ${row}`) + const handleFileDownload = async (_, row) => { + updateFromWebApiWrapperAsync( + async () => { + await download(`/api/well/${idWell}/files/${row.id}`) + }, + setShowLoader, + `Не удалось скачать файл ${row}` + ) } - + + const handleUploadComplete = () => { + update() + } + + const handleFileDelete = (file) => { + //FileService.delete(idWell, file.id) + update() + } + + const hanleCompanySearch = (value, _) => { + setCompany(value) + } + const columns = [ { - title: 'Документ', - key: 'document', - dataIndex: 'name', - render: (name, row) => - + title: "Документ", + key: "document", + dataIndex: "name", + render: (name, row) => ( + ), }, { - title: 'Дата загрузки', - key: 'uploadDate', - dataIndex: 'uploadDate', - render: (item) => moment.utc(item).local().format('DD MMM YYYY, HH:mm:ss') + title: "Дата загрузки", + key: "uploadDate", + dataIndex: "uploadDate", + render: (item) => + moment.utc(item).local().format("DD MMM YYYY, HH:mm:ss"), }, { - title: 'Ф.И.О.', - key: 'userName', - dataIndex: 'userName', - } - ]; + title: "Ф.И.О.", + key: "userName", + dataIndex: "userName", + }, + { + title: "Компания", + key: "company", + dataIndex: "company", + }, + ] - const addKeysAndUpdateFiles = (items) =>{ - const mappedFiles = items?.map(fileInfo => ({key: fileInfo.id, begin: fileInfo.date, ...fileInfo})) - setFiles(mappedFiles??[]) + const addKeysAndUpdateFiles = (items) => { + const mappedFiles = items?.map((fileInfo) => ({ + key: fileInfo.id, + begin: fileInfo.date, + ...fileInfo, + })) + setFiles(mappedFiles ?? []) } - useEffect(() => { + const update = () => { let begin = null let end = null - if (range?.length > 1) { - begin = range[0].toISOString() - end = range[1].toISOString() + if (dataRange?.length > 1) { + begin = dataRange[0].toISOString() + end = dataRange[1].toISOString() } updateFromWebApiWrapperAsync( - async ()=>{ + async () => { const paginatedFiles = await FileService.getFilesInfo( - `${idWell}`, + idWell, (page - 1) * pageSize, pageSize, idCategory, begin, - end) - if(!paginatedFiles) - return + end + ) + if (!paginatedFiles) return addKeysAndUpdateFiles(paginatedFiles?.items) const newPagination = makePaginationObject(paginatedFiles) setPagination(newPagination) }, setShowLoader, - `Не удалось загрузить файлы по скважине "${idWell}"`) - }, [idWell, range, page, idCategory]) + `Не удалось загрузить файлы по скважине "${idWell}"` + ) + } - return ( + useEffect(update, [idWell, dataRange, page, idCategory, company]) + + const companies = [...new Set(files.map(file=>file.company))] + .filter(company=>company) + + const DataListCompanies = + {companies.map((company, i)=>)} + + + return ( -
-
- - - - - setShowLoader(true)} - onUploadComplete={()=>setShowLoader(false)}/> - -
-
+
+
+ Фильтр по дате +
+ +
+
+   +
+ Фильтр по компании + + {DataListCompanies} +
+    +
+ Загрузка + setShowLoader(true)} + onUploadComplete={handleUploadComplete}/> +
+
- setPage(page)}} + onChange: (page) => setPage(page), + }} + onRowDelete={handleFileDelete} rowKey={(record) => record.id} /> - ); -} \ No newline at end of file + + ) +} diff --git a/src/pages/Documents/index.jsx b/src/pages/Documents/index.jsx index aeff2f0..c873118 100644 --- a/src/pages/Documents/index.jsx +++ b/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)} - {makeRouteItems('documentsPageMenu', `${rootPath}`, idWell)} + {makeRouteItems(rootPath, idWell)} diff --git a/src/pages/Documents/menuItems.jsx b/src/pages/Documents/menuItems.jsx index ef8aa8d..59068a9 100644 --- a/src/pages/Documents/menuItems.jsx +++ b/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) => ( {title} ) -const makeRouteItem = (keyPrefix, keyValue, rootPath, other) => ( +const makeRouteItem = (keyValue, rootPath, other) => ( + key={`${keyValue}`}> ) @@ -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:})) + makeMenuItem(category.key, root, category.title, {icon:})) } -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; } \ No newline at end of file diff --git a/src/pages/Well.jsx b/src/pages/Well.jsx index 650fabd..e9e54ff 100644 --- a/src/pages/Well.jsx +++ b/src/pages/Well.jsx @@ -53,15 +53,14 @@ export default function Well() { title={ + className="linkDocuments"> Документы } icon={} selectable={true} > - {makeMenuItems('documentsSubMenu', `${rootPath}/document`)} + {makeMenuItems(rootPath)} }> СМБО diff --git a/src/styles/grid.css b/src/styles/grid.css deleted file mode 100644 index 9e095f8..0000000 --- a/src/styles/grid.css +++ /dev/null @@ -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; -} \ No newline at end of file