Merge branch 'master' of https://bitbucket.org/frolovng/asb_cloud_front_react

src/components/EditableTable.jsx

@@ -0,0 +1,189 @@
+import { Form, Input, Table, Button, Popconfirm } from "antd"
+import { EditOutlined, SaveOutlined, PlusOutlined, CloseCircleOutlined, DeleteOutlined } from '@ant-design/icons'
+import { useState } from "react";
+
+const newRowKeyValue = 'newRow'
+
+const EditableCell = ({
+  editing,
+  record,
+  dataIndex,
+  input,
+  isRequired,
+  title,
+  formItemClass,
+  formItemRules,
+  children,
+}) => {
+
+  const inputNode = input ?? <Input/>
+  const rules = formItemRules ?? [{
+      required: isRequired,
+      message: `Please Input ${title}!`,
+    }]
+
+  const editor = <Form.Item
+    name={dataIndex}
+    style={{margin:0}}
+    className={formItemClass}
+    rules={rules}>
+    {inputNode}
+  </Form.Item>
+
+  return (<td>
+      {editing ? editor: children}
+    </td>)
+}
+
+export const EditableTable = ({
+    columns, 
+    dataSource, 
+    onChange, // Метод вызывается со всем dataSource с измененными элементами после любого действия
+    onRowAdd, // Метод вызывается с новой добавленной записью. Если метод не поределен, то кнопка добавления строки не показывается
+    onRowEdit,// Метод вызывается с новой отредактированной записью. Если метод не поределен, то кнопка редактирования строки не показывается
+    onRowDelete,// Метод вызывается с удаленной записью. Если метод не поределен, то кнопка удаления строки не показывается
+    ...otherTableProps}) => {
+
+  const [form] = Form.useForm()
+  const [data, setData] = useState(dataSource?? [])
+  const [editingKey, setEditingKey] = useState('')
+
+  const isEditing = (record) => record.key === editingKey
+
+  const edit = (record) => {
+    form.setFieldsValue({...record})
+    setEditingKey(record.key)
+  }
+
+  const cancel = () => {
+    if(editingKey == newRowKeyValue)
+    {
+      const newData = [...data]
+      const index = newData.findIndex((item) => newRowKeyValue === item.key)
+      newData.splice(index, 1)
+      setData(newData)
+    }
+    setEditingKey('')
+  }
+
+  const addNewRow = () => {
+    let newRow = {
+      key:newRowKeyValue
+    }
+    const newData = [...data, newRow]
+    setData(newData)
+    edit(newRow)
+  }
+
+  const save = async (record) => {
+    try {
+      const row = await form.validateFields()
+      const newData = [...data]
+      const index = newData.findIndex((item) => record.key === item.key)
+      let item = newData[index]
+
+      newData.splice(index, 1, { ...item, ...row })
+
+      if(item.key === newRowKeyValue)
+        item.key = newRowKeyValue + newData.length
+        
+      setEditingKey('')
+      setData(newData)
+
+      if (editingKey === newRowKeyValue)
+        onRowAdd(item)
+      else
+        onRowEdit(item)
+      
+      if(onChange)
+        onChange(newData)
+
+    } catch (errInfo) {
+      console.log('Validate Failed:', errInfo)
+    }
+  }
+
+  const deleteRow = (record) =>{
+    const newData = [...data]
+    const index = newData.findIndex((item) => record.key === item.key)
+    
+    newData.splice(index, 1)
+    setData(newData)
+    
+    onRowDelete(record)
+
+    if(onChange)
+      onChange(newData)
+  }
+
+  const operationColumn = {
+    title: (!!onRowAdd) && <Button 
+      onClick={addNewRow}
+      disabled={editingKey !== ''}
+      icon={<PlusOutlined/>}
+      />,
+    dataIndex: 'operation',
+    render: (_, record) => {
+      const editable = isEditing(record)
+      return editable 
+      ?(<span>
+          <Button 
+            onClick={() => save(record)}
+            icon={<SaveOutlined/>}/>
+          <Button 
+            onClick={cancel}
+            icon={<CloseCircleOutlined/>}/>
+        </span>) 
+        :(<span>
+          <Button 
+            disabled={editingKey !== ''} 
+            onClick={() => edit(record)}
+            icon={<EditOutlined/>}/>
+          {onRowDelete&&
+          <Popconfirm title="Удалить?" onConfirm={()=>deleteRow(record)}>
+            <Button icon={<DeleteOutlined/>}/>
+          </Popconfirm>}          
+        </span>)
+    },
+  }
+
+  const handleColumn = (col) => {
+    if (col.children)
+      col.children = col.children.map(handleColumn)
+
+    if (!col.editable) 
+      return col    
+
+    return {
+      ...col,
+      onCell: (record) => ({
+        editing: isEditing(record),        
+        record,        
+        dataIndex: col.dataIndex ?? col.key,
+        input: col.input,
+        isRequired: col.isRequired,
+        title: col.title,
+        dataType: col.dataType,
+        formItemClass: col.formItemClass,
+        formItemRules: col.formItemRules,
+      }),
+    }
+  }
+
+  const mergedColumns = [...columns.map(handleColumn), operationColumn]
+
+  return (
+    <Form form={form} component={false}>
+      <Table
+        components={{
+          body: {
+            cell: EditableCell,
+          },
+        }}
+        columns={mergedColumns}
+        dataSource={data}
+        {...otherTableProps}
+      />
+    </Form>
+  )
+}

src/components/factory.ts

@@ -1,3 +1,15 @@
+export const RegExpIsFloat = /^[-+]?\d+\.?\d?$/
+
+/*  
+  other - объект с дополнительными свойствами колонки
+  поддерживаются все базовые свойства из описания https://ant.design/components/table/#Column
+  плю дополнительные для колонок EditableTable:
+  editable - редактируемая колонка, bool
+  input - react компонента редактора (<Inpet/>, <InpetNumber/>, <DatePicker/>...)
+  isRequired - значение может быть пустым,
+  formItemClass - css класс для <FormItem/>, если требуется
+  formItemRules - массив правил валидации значений https://ant.design/components/form/#Rule, 
+ */
 export const makeColumn = (title:string, key:string, other?:any) => ({
   title: title,
   key: key,
@@ -5,22 +17,31 @@ export const makeColumn = (title:string, key:string, other?:any) => ({
   ...other,
 })
 
-export const makeColumnsPlanFact = (title:string, keyPlan:string, keyFact?:string, groupOther?:any) =>
+export const makeColumnsPlanFact = (title:string, key:string|string[], columsOther?:any|any[], gruopOther?:any) =>
 {
-  let keyPlanLocal = keyPlan
-  let keyFactLocal = keyFact ?? ''
+  let keyPlanLocal = key
+  let keyFactLocal = key
   
-  if(!keyFact){
-    keyPlanLocal = keyPlan + 'Plan'
-    keyFactLocal =  keyPlan + 'Fact'
+  if(key instanceof Array){    
+    keyPlanLocal = key[0]
+    keyFactLocal =  key[1]
+  }else{
+    keyPlanLocal = key + 'Plan'
+    keyFactLocal =  key + 'Fact'
   }
 
+  let columsOtherLoacl :any[2]
+  if(columsOther instanceof Array)
+    columsOtherLoacl = [columsOther[0], columsOther[1]]
+  else
+    columsOtherLoacl = [columsOther, columsOther]
+
   return {  
     title: title,
-    ...groupOther,
-    children: [ 
-      makeColumn('план', keyPlanLocal),
-      makeColumn('факт', keyFactLocal),
+    ...gruopOther,
+    children: [
+      makeColumn('план', keyPlanLocal, columsOtherLoacl[0]),
+      makeColumn('факт', keyFactLocal, columsOtherLoacl[1]),
     ]
   }
 }

src/pages/Well.jsx

@@ -8,7 +8,7 @@ import Analysis from "../pages/Analysis";
 import WellAnalysis from "../pages/WellAnalysis";
 import TelemetryView from "../pages/TelemetryView";
 import MenuDocuments from "../components/MenuDocuments";
-import WellStat from "./WellStat";
+import WellStat from "./WellStat"
 
 const { Content } = Layout
 
@@ -83,7 +83,7 @@ export default function Well() {
         <Content className="site-layout-background">
           <Switch>
             <Route path="/well/:id/stat">
-              <WellStat/>
+              <WellStat idWell={id}/>
             </Route>
             <Route path="/well/:id/archive">
               <Archive/>

src/pages/WellStat.jsx

@@ -1,44 +1,28 @@
-//import {useParams} from "react-router-dom";
-//import {Link} from "react-router-dom";
 import LoaderPortal from '../components/LoaderPortal'
 import { useState, useEffect } from "react";
-// import {ClusterService} from '../services/api'
-// import notify from '../components/notify'
-import {Table, Tag, Button} from 'antd';
-
-const makeColumn = (title, key) => ({title: title,  key: key,  dataIndex: key,})
-
-const makePlanFactColumns = (title, keyPlan, keyFact) =>
-{
-  let keyPlanLocal = keyPlan
-  let keyFactLocal = keyFact
-  
-  if(!keyFact){
-    keyPlanLocal = keyPlan + 'Plan'
-    keyFactLocal =  keyPlan + 'Fact'
-  }
-
-  return {  
-    title: title,
-    children: [ 
-      makeColumn('план', keyPlanLocal),
-      makeColumn('факт', keyFactLocal),
-    ]
-  }
-}
+import {makeColumn, makeColumnsPlanFact, RegExpIsFloat} from '../components/factory'
+import {WellService} from '../services/api'
+import notify from '../components/notify'
+import { EditableTable } from '../components/EditableTable';
 
 const columns = [
-  makeColumn('Конструкция секции', 'sectionType'),
-  makePlanFactColumns('Глубина, м', 'wellDepth'),
-  makePlanFactColumns('Период, д',  'buildDays'),
-  makePlanFactColumns('Механическая скорость проходки, м/час', 'rateOfPenetration'),
-  makePlanFactColumns('Рейсовая скорость, м/час', 'routeSpeed'),
-  makePlanFactColumns('Скорость подъема КНБК', 'bhaUpSpeed'),
-  makePlanFactColumns('Скорость спуска КНБК', 'bhaDownSpeed'),
-  makePlanFactColumns('Скорость спуска обсадной колонны', 'casingDownSpeed'),
+  makeColumn('Конструкция секции', 'sectionType', {editable:true}),
+  makeColumnsPlanFact('Глубина, м', 'wellDepth', {editable:true, formItemRules:[
+    {
+      required: true,
+      message: `Введите число`,
+      pattern: RegExpIsFloat
+    }]}),
+  makeColumnsPlanFact('Период, д',  'buildDays', {editable:true}),
+  makeColumnsPlanFact('Механическая скорость проходки, м/час', 'rateOfPenetration', {editable:true}),
+  makeColumnsPlanFact('Рейсовая скорость, м/час', 'routeSpeed', {editable:true}),
+  makeColumnsPlanFact('Скорость подъема КНБК', 'bhaUpSpeed', {editable:true}),
+  makeColumnsPlanFact('Скорость спуска КНБК', 'bhaDownSpeed', {editable:true}),
+  makeColumnsPlanFact('Скорость спуска обсадной колонны', 'casingDownSpeed', {editable:true}),
 ]
 
 // const data = [{
+//   key:1,
 //   sectionType: 'загагулина',
 //   wellDepthPlan: 1,
 //   wellDepthFact: 1,
@@ -56,17 +40,41 @@ const columns = [
 //   casingDownSpeedFact: 1,
 //   }]
 
-export default function WellStat({data}){
+export default function WellStat({idWell}){
   const [showLoader, setShowLoader] = useState(false)
+  const [data, setData] = useState(null)
+  
+  useEffect(()=>{
+    const update = async()=>{
+      setShowLoader(true)
+      try{
+        const data = await WellService.getSections(idWell)
+        setData(data);
+      } catch (ex) {
+        console.log(ex)
+        notify(`Не удалось загрузить секции по скважине "${idWell}"`, 'error')
+      }
+      setShowLoader(false)
+    }
+    update();
+  } ,[idWell])
+
+  const onChange = (newData) =>{
+    setData(newData)
+  }
+
   return(
     <LoaderPortal show={showLoader}>
-      <Table
-          columns={columns}
-          dataSource={data}
-          size={'small'}
-          bordered
-          pagination={false}
-          rowKey={(record) => record.sectionType}
-        />
+      <EditableTable
+        columns={columns}
+        dataSource={data}
+        size={'small'}
+        bordered
+        pagination={false}
+        onChange={onChange}
+        onRowAdd={()=>{}}
+        onRowEdit={()=>{}}
+        onRowDelete={()=>{}}
+      />
     </LoaderPortal>)
 }