Добавлена страница с режимами бурения

src/components/Table/index.ts

@@ -148,7 +148,7 @@ export const defaultNumericRender = (value: any, row: object) => {
 
 export const makeNumericColumn = (title: string, dataIndex: string, 
   filters: object[], filterDelegate: (key: string | number) => any,
-  renderDelegate: (_: any, row: object) => any, width: string) => ({  
+  renderDelegate: (_: any, row: object) => any, width: string, other?: columnPropsOther) => ({  
     title: title,
     dataIndex: dataIndex,
     key: dataIndex,
@@ -157,7 +157,8 @@ export const makeNumericColumn = (title: string, dataIndex: string,
     sorter: makeNumericSorter(dataIndex),
     width: width,
     render: renderDelegate??defaultNumericRender,
-    align: 'right'
+    align: 'right',
+    ...other
 })
 
 export const makeNumericColumnPlanFact = (title: string, dataIndex: string, filters: object[], 
@@ -167,17 +168,31 @@ export const makeNumericColumnPlanFact = (title: string, dataIndex: string, filt
     makeNumericColumn('ф', dataIndex + 'Fact', filters, filterDelegate, renderDelegate, width),
   ])
 
+export const makeNumericStartEnd = (
+  title: string,
+  dataIndex: string,
+  editable: boolean,
+  filters: object[],
+  filterDelegate: (key: string | number) => any,
+  renderDelegate: (_: any, row: object) => any,
+  width: string,
+) => makeGroupColumn( title, [
+    makeNumericColumn('старт', dataIndex + '_start', filters, filterDelegate, renderDelegate, width, {editable}),
+    makeNumericColumn('конец', dataIndex + '_end', filters, filterDelegate, renderDelegate, width, {editable})
+])
+
 export const makeNumericAvgRange = (
     title: string,
     dataIndex: string,
+    editable: boolean,
     filters: object[],
     filterDelegate: (key: string | number) => any,
     renderDelegate: (_: any, row: object) => any,
     width: string
 ) => makeGroupColumn( title, [
-    makeNumericColumn('мин', dataIndex + 'Min', filters, filterDelegate, renderDelegate, width),
-    makeNumericColumn('макс', dataIndex + 'Max', filters, filterDelegate, renderDelegate, width),
-    makeNumericColumn('сред', dataIndex + 'Avg', filters, filterDelegate, renderDelegate, width)
+    makeNumericColumn('мин', dataIndex + '_min', filters, filterDelegate, renderDelegate, width, {editable}),
+    makeNumericColumn('сред', dataIndex + '_avg', filters, filterDelegate, renderDelegate, width, {editable}),
+    makeNumericColumn('макс', dataIndex + '_max', filters, filterDelegate, renderDelegate, width, {editable})
 ])
 
 type PaginationContainer = {

src/pages/WellOperations/WellOpeationsModes.jsx

@@ -0,0 +1,94 @@
+import { useState, useEffect } from 'react'
+
+import {
+    makeColumn,
+    makeNumericAvgRange,
+    makeNumericStartEnd
+} from '../../components/Table'
+import LoaderPortal from '../../components/LoaderPortal'
+import { invokeWebApiWrapperAsync } from '../../components/factory'
+import { EditableTable, SelectFromDictionary } from '../../components/Table'
+import { DrillingParamsService } from '../../services/api'
+import { dictionarySectionType, getByKeyOrReturnKey } from './dictionary'
+
+const basePageSize = 160;
+
+
+export const WellOpeationsModes = ({idWell}) => {
+    const [pageNumAndPageSize, setPageNumAndPageSize] = useState({current:1, pageSize:basePageSize})
+    const [paginationTotal, setPaginationTotal] = useState(0)
+    const [params, setParams] = useState([])
+    const [showLoader, setShowLoader] = useState(false)
+
+    const updatePrograms = () => invokeWebApiWrapperAsync(
+        async () => {
+            const skip = ((pageNumAndPageSize.current - 1) * pageNumAndPageSize.pageSize) || 0
+            const take = pageNumAndPageSize.pageSize
+            const paginatedParams = await DrillingParamsService.getParams(idWell, skip, take)
+            const params = paginatedParams?.items ?? []
+            setParams(params)
+            const total = paginatedParams.count?? paginatedParams.items?.length ?? 0
+            setPaginationTotal(total)
+        },
+        setShowLoader,
+        'Не удалось загрузить список режимов бурения скважины'
+    )
+
+    useEffect(updatePrograms, [idWell, pageNumAndPageSize])
+
+    const columns = [
+        makeColumn('Конструкция секции','id_wellsection_type', {
+            editable:true,
+            input:<SelectFromDictionary dictionary={dictionarySectionType}/>,
+            width:160,
+            render:(_, record)=>getByKeyOrReturnKey(dictionarySectionType, record.idWellSectionType)
+        }),
+        makeNumericStartEnd('Глубина', 'depth', true),
+        makeNumericAvgRange('Нагрузка', 'axial_load', true),
+        makeNumericAvgRange('Давление', 'pressure', true),
+        makeNumericAvgRange('Момент на ВПС', 'rotor_torque', true),
+        makeNumericAvgRange('Обороты на ВПС', 'rotor_speed', true),
+        makeNumericAvgRange('Расход', 'flow', true)
+    ]
+
+    const onAdd = async (param) => {
+        if (!param.id) return
+        // TODO: Add row
+        await DrillingParamsService.insertRange(idWell, [param])
+        updatePrograms()
+    }
+
+    const onEdit = async (param) => {
+        if (!param.id) return
+        // TODO: Edit row
+        await DrillingParamsService.update(idWell, param.id, param)
+        updatePrograms()
+    }
+
+    const onDelete = async (param) => {
+        if (!param.id) return
+        await DrillingParamsService.delete(idWell, param.id)
+        updatePrograms()
+    }
+
+    return (
+        <LoaderPortal show={showLoader}>
+            <EditableTable
+                size={'small'}
+                bordered
+                columns={columns}
+                dataSource={params}
+                onRowAdd={onAdd}
+                onRowEdit={onEdit}
+                onRowDelete={onDelete}
+                pagination={{
+                    current: pageNumAndPageSize.current,
+                    pageSize: pageNumAndPageSize.pageSize,
+                    showSizeChanger: false,
+                    total: paginationTotal,
+                    onChange: (page, pageSize) => setPageNumAndPageSize({current: page, pageSize: pageSize})
+                }}
+            />
+        </LoaderPortal>
+    )
+}

src/pages/WellOperations/index.jsx

@@ -4,6 +4,7 @@ import { FolderOutlined } from "@ant-design/icons";
 import { WellOperationsEditor } from './WellOperationsEditor'
 import { WellSectionsStat } from './WellSectionsStat'
 import { Tvd } from './Tvd'
+import { WellOpeationsModes } from './WellOpeationsModes'
 
 const { Content } = Layout
 
@@ -29,6 +30,9 @@ export default function WellOperations({idWell}) {
         <Menu.Item key="fact" icon={<FolderOutlined />}>
           <Link to={`${rootPath}/fact`}>Факт</Link>
         </Menu.Item>
+        <Menu.Item key={'modes'} icon={<FolderOutlined />}>
+          <Link to={`${rootPath}/modes`}>Режимы</Link>
+        </Menu.Item>
     </Menu>
     <Layout>
         <Content className="site-layout-background">
@@ -45,6 +49,9 @@ export default function WellOperations({idWell}) {
             <Route path={`${rootPath}/fact`}>
               <WellOperationsEditor idWell={idWell} idType={1}/>
             </Route>
+            <Route path={`${rootPath}/modes`}>
+              <WellOpeationsModes idWell={idWell}/>
+            </Route>
             <Route path={rootPath}>
               <Redirect to={`${rootPath}/tvd`}/>
             </Route>