Add import/export to WellOperations

src/pages/Documents/DocumentsTemplate.jsx

@@ -8,7 +8,7 @@ import {
   formatBytes,
 } from "../../components/factory"
 import { EditableTable, makePaginationObject } from "../../components/Table"
-import UploadForm from "../../components/UploadForm"
+import {UploadForm} from "../../components/UploadForm"
 import LoaderPortal from "../../components/LoaderPortal"
 import {UserView} from  '../../components/UserView'
 import {CompanyView} from  '../../components/CompanyView'

src/pages/Well.jsx

@@ -46,7 +46,7 @@ export default function Well() {
             <Link to={`${rootPath}/report`}>Рапорт</Link>
           </PrivateMenuItem>
           <PrivateMenuItem key="operations" icon={<FolderOutlined />}>
-            <Link to={`${rootPath}/operations/plan`}>Операции по скважине</Link>
+            <Link to={`${rootPath}/operations`}>Операции по скважине</Link>
           </PrivateMenuItem>
           <PrivateMenuItem key="archive" icon={<DatabaseOutlined />}>
             <Link to={`${rootPath}/archive`}>Архив</Link>
@@ -89,7 +89,7 @@ export default function Well() {
               <Route path="/well/:idWell/report">
                 <Report idWell={idWell} />
               </Route>
-              <Route path="/well/:idWell/operations/:tab">
+              <Route path="/well/:idWell/operations">
                 <WellOperations idWell={idWell} />
               </Route>
               <Route path="/well/:idWell/archive">

src/pages/WellOperations/ImportExportBar.jsx

@@ -0,0 +1,54 @@
+import { Button, Tooltip, Modal } from "antd";
+import {useState} from 'react'
+import { FileOutlined, ImportOutlined, ExportOutlined } from '@ant-design/icons'
+import { download } from '../../components/factory'
+import { ImportOperations } from './ImportOperations'
+
+const style = {margin:4}
+
+export const ImportExportBar = ({idWell, onImported}) =>{
+  const [isImportModalVisible, setIsImportModalVisible] = useState(false)
+
+  const downloadTemplate = async () => download(`/api/well/${idWell}/wellOperations/tamplate`)
+  const downloadExport = async () => download(`/api/well/${idWell}/wellOperations/export`)
+
+  const onDone = () => {
+    setIsImportModalVisible(false)
+    if(onImported)
+      onImported()
+  }
+
+  return <>
+    <Tooltip title = "Импорт - загрузить файл с операциями на сервер">
+      <Button 
+        icon={<ImportOutlined/>} 
+        style={style}
+        onClick={_=>setIsImportModalVisible(true)}/>
+    </Tooltip>
+
+    <Tooltip title = "Экспорт - скачать файл с операциями по скважине">
+      <Button 
+        icon={<ExportOutlined/>} 
+        style={style}
+        onClick={downloadExport}/>
+    </Tooltip>
+
+    <Tooltip title = "Скачать шаблон">
+      <Button 
+        icon={<FileOutlined/>} 
+        style={style}
+        onClick={downloadTemplate}/>
+    </Tooltip>
+
+    <Modal
+      title='Импорт'
+      visible={isImportModalVisible}
+      onCancel={_=>setIsImportModalVisible(false)}
+
+      footer={null}>
+      <ImportOperations 
+        idWell={idWell} 
+        onDone={onDone}/>
+    </Modal >
+  </>
+}

src/pages/WellOperations/ImportOperations.jsx

@@ -0,0 +1,41 @@
+import {Switch} from 'antd'
+import {useState} from 'react'
+import { ErrorFetch } from '../../components/ErrorFetch'
+import {UploadForm} from '../../components/UploadForm'
+
+export const ImportOperations = ({idWell, onDone}) =>{
+  const [deleteBeforeImport, setDeleteBeforeImport] = useState(false)
+  const [errorText, setErrorText] = useState('')
+
+  const url = `/api/well/${idWell}/wellOperations/import`
+
+  const onUploadSuccess = () => {
+    setErrorText('')
+    if(onDone)
+      onDone()
+  }
+
+  const onUploadError = (error) => {
+    if(error instanceof ErrorFetch && error.status === 400)
+      setErrorText(`Не удалось импортировать.\n ${error?.message}`)
+    else
+      setErrorText(`Не удалось импортировать.`)
+  }
+
+  const getUrl = () => deleteBeforeImport 
+    ? url + '/1'
+    : url + '/0'
+
+  return <div>
+    <p>Загрузить файл excel с операциями на сервер</p>
+    <span>Очистить список операций перед импортом&nbsp;</span>
+    <Switch onChange={setDeleteBeforeImport} checked={deleteBeforeImport}/>
+    <UploadForm
+      url={getUrl()}
+      style={{marginTop:'24px'}}
+      onUploadSuccess={onUploadSuccess}
+      onUploadError={onUploadError}
+      />
+    <span style={{color:'red', fontWeight:'bold'}}>{errorText}</span>
+  </div>  
+}

src/pages/WellOperations/index.jsx

@@ -1,16 +1,22 @@
 import {Layout, Menu} from "antd";
-import {Switch, Link, Route, Redirect, useParams} from "react-router-dom";
+import {Switch, Link, Route, Redirect, useParams, useHistory} from "react-router-dom";
 import { FolderOutlined } from "@ant-design/icons";
 import { WellOperationsEditor } from './WellOperationsEditor'
 import { WellSectionsStat } from './WellSectionsStat'
 import { Tvd } from './Tvd'
+import { ImportExportBar } from "./ImportExportBar";
 
 const { Content } = Layout
 
 export default function WellOperations({idWell}) {
   let {tab} = useParams()
+  let history = useHistory()
   const rootPath = `/well/${idWell}/operations`;
   
+  const onImported = () => {
+    history.push(`${rootPath}`)
+  }
+
   return(<>
     <Menu
       mode="horizontal"
@@ -29,6 +35,7 @@ export default function WellOperations({idWell}) {
         <Menu.Item key="fact" icon={<FolderOutlined />}>
           <Link to={`${rootPath}/fact`}>Факт</Link>
         </Menu.Item>
+        <ImportExportBar idWell={idWell} onImported={onImported}/>
     </Menu>
     <Layout>
         <Content className="site-layout-background">
@@ -46,7 +53,7 @@ export default function WellOperations({idWell}) {
               <WellOperationsEditor idWell={idWell} idType={1}/>
             </Route>
             <Route path={rootPath}>
-              <Redirect to={`${rootPath}/tvd`}/>
+              <Redirect to={`${rootPath}/plan`}/>
             </Route>
           </Switch>
         </Content>