CF2-40: Finalized 'Last Data' tables data saving

src/components/modalWindows/DrillingFluid.jsx

@@ -1,22 +1,10 @@
 import { useState, useEffect } from 'react';
 import { useParams } from "react-router-dom";
-import {Table, Input, Form, Popconfirm, Typography } from 'antd'
+import { Table, InputNumber, Form, Popconfirm, Typography } from 'antd'
 import { makeColumn } from '../factory'
 import { FluidService } from '../../services/api/services/FluidService';
 import notify from "../notify"
 
-const originDataPlan = {
-    key: '8', name: 'План', temperature: '', density: '', conditionalViscosity: '', r300: '', r600: '', r3r6: '', dnsDpa: '', plasticViscocity: '',
-    snsDpa: '', r3r649С: '', dns49Cdpa: '', plasticViscocity49c: '', sns49Cdpa: '', mbt: '', sand: '', filter: '', crust: '', ktk: '', ph: '',
-    hardness: '', chlorides: '', pf: '', mf: '', pm: '', fluidSolidPhase: '', grease: '', calciumCarbonate: ''
-  }
-
-
-const originDataFact = {
-    key: '9', name: 'Факт', temperature: '', density: '', conditionalViscosity: '', r300: '', r600: '', r3r6: '', dnsDpa: '', plasticViscocity: '',
-    snsDpa: '', r3r649С: '', dns49Cdpa: '', plasticViscocity49c: '', sns49Cdpa: '', mbt: '', sand: '', filter: '', crust: '', ktk: '', ph: '',
-    hardness: '', chlorides: '', pf: '', mf: '', pm: '', fluidSolidPhase: '', grease: '', calciumCarbonate: ''
-  }
 
 const EditableCell = ({
   editing,
@@ -37,14 +25,13 @@ const EditableCell = ({
             style={{ margin: 0 }}
             rules={[
               {
+                type: 'number',
                 required: true,
-                message: '',
+                message: null
-                pattern: '(-?[0-9]+\d*([.,]\d+)?)$|^(-?0[.,]\d*[0-9]+)$|^0$|^0.0$'
-                //pattern: '^-?\d+(\.\d{1,2})?$'
               },
             ]}
           >
-            <Input size="small" />
+            <InputNumber size="small" style={{width:"auto"}} />
           </Form.Item>
         ) : (
           children
@@ -61,8 +48,8 @@ export function DrillingFluid() {
   const [form] = Form.useForm();
   const [editingKey, setEditingKey] = useState('');
   const [idCategory, setIdCategory] = useState(8);
-  const [dataPlan, setDataPlan] = useState(originDataPlan)
+  const [dataPlan, setDataPlan] = useState({})
-  const [dataFact, setDataFact] = useState(originDataFact)
+  const [dataFact, setDataFact] = useState({})
   const [isUpdatingData, setIsUpdatingData] = useState(false)
 
   const [loader, setLoader] = useState(false)
@@ -92,9 +79,12 @@ export function DrillingFluid() {
     makeColumn('pH', 'ph', { dataIndex: 'ph', align: 'center', className: 'small-font', editable: true}),
     makeColumn('Жесткость, мг/л', 'hardness', { dataIndex: 'hardness', align: 'center', className: 'small-font', editable: true}),
     makeColumn('Хлориды, мг/л', 'chlorides', { dataIndex: 'chlorides', align: 'center', className: 'small-font', editable: true}),
-    makeColumn('PF', 'pf', { dataIndex: 'pf', align: 'center', className: 'small-font', editable: true}),
+    makeColumn('PF', 'pf', { dataIndex: 'pf', align: 'center', className: 'small-font', 
-    makeColumn('Mf', 'mf', { dataIndex: 'mf', align: 'center', className: 'small-font', editable: true}),
+        render: text => <span style={{marginLeft: '12px', marginRight: '12px'}}>{text}</span>, editable: true}),
-    makeColumn('Pm', 'pm', { dataIndex: 'pm', align: 'center', className: 'small-font', editable: true}),
+    makeColumn('Mf', 'mf', { dataIndex: 'mf', align: 'center', className: 'small-font', 
+        render: text => <span style={{marginLeft: '12px', marginRight: '12px'}}>{text}</span>, editable: true}),
+    makeColumn('Pm', 'pm', { dataIndex: 'pm', align: 'center', className: 'small-font', 
+        render: text => <span style={{marginLeft: '12px', marginRight: '12px'}}>{text}</span>, editable: true}),
     makeColumn('Твердая фаза раствора, %', 'fluidSolidPhase', { dataIndex: 'fluidSolidPhase', align: 'center', className: 'small-font', editable: true}),
     makeColumn('Смазка, %', 'grease', { dataIndex: 'grease', align: 'center', className: 'small-font', editable: true}),
     makeColumn('Карбонат кальция, кг/м³', 'calciumCarbonate', { dataIndex: 'calciumCarbonate', align: 'center', className: 'small-font', editable: true}),
@@ -109,7 +99,6 @@ export function DrillingFluid() {
         return editable ? (
           <span>
             <a
-              href="javascript:;"
               onClick={() => form.submit()}
               style={{ marginRight: 8 }}
             >
@@ -250,6 +239,12 @@ export function DrillingFluid() {
         pagination={false}
       />
     </Form>
+    <div>&nbsp;</div>
+    <p style={{textAlign: "right"}}>
+      Дата последнего обновления: 
+        &nbsp;<b>План:</b>&nbsp;<b>{new Date(dataPlan?.lastUpdate).toLocaleString()}</b> &nbsp;
+        &nbsp;<b>Факт:</b>&nbsp;<b>{new Date(dataFact?.lastUpdate).toLocaleString()}</b>&nbsp;
+    </p>
   </>
   )
 }

src/components/modalWindows/MudDiagram.jsx

@@ -1,16 +1,10 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { useParams } from "react-router-dom";
-import { Table, Input, Form, Popconfirm, Typography } from 'antd'
+import { Table, InputNumber, Input, Form, Popconfirm, Typography } from 'antd'
 import { makeColumn } from '../factory'
-import { MudDiagramService } from '../../services/api/services/MudDiagramService';
+import { MudDiagramService } from '../../services/api/services/MudDiagramService'
+import notify from "../notify"
 
-const originData = [
-  {
-    key: '10', probeNumber: '1', probeExtractionDepth: '1', sandstone: '1', siltstone: '1', argillit: '1', brokenArgillit: '1', coal: '1', sand: '1', clay: '1',
-    camstone: '1', cement: '1', summary: '1', drillingMud: '1', sludge: '1', maxSum: '1', methane: '1', ethane: '1', propane: '1', butane: '1', pentane: '1',
-    mechanicalSpeed: '1', preliminaryConclusion: '1'
-  }
-]
 
 const EditableCell = ({
   editing,
@@ -22,6 +16,8 @@ const EditableCell = ({
   children,
   ...restProps
 }) => {
+  const inputNumber = <InputNumber size="small" style={{width:"auto"}} />
+  const input = <Input size="small" style={{width:"auto"}} />
   return (
     <td {...restProps} style={{paddingLeft: 2, paddingRight: 2}}>
       <div style={{width: '100%', display: 'flex', justifyContent: 'center'}}>
@@ -32,13 +28,11 @@ const EditableCell = ({
             rules={[
               {
                 required: true,
-                message: '',
+                message: ''
-                pattern: '(-?[0-9]+\d*([.,]\d+)?)$|^(-?0[.,]\d*[0-9]+)$|^0$|^0.0$'
-                //pattern: '^-?\d+(\.\d{1,2})?$'
               },
             ]}
           >
-            <Input size="small" />
+            {(dataIndex === 'preliminaryConclusion' || dataIndex === 'summary') ? input : inputNumber }
           </Form.Item>
         ) : (
           children
@@ -53,7 +47,8 @@ export function SludgeDiagram() {
 
   const [form] = Form.useForm();
   const [editingKey, setEditingKey] = useState('');
-  const [data, setData] = useState(originData)
+  const [data, setData] = useState({})
+  const [isUpdatingData, setIsUpdatingData] = useState(false)
 
   const [loader, setLoader] = useState(false)
 
@@ -112,7 +107,6 @@ export function SludgeDiagram() {
         return editable ? (
           <span>
             <a
-              href="javascript:;"
               onClick={() => save(row.key)}
               style={{ marginRight: 8 }}
             >
@@ -131,6 +125,26 @@ export function SludgeDiagram() {
     }
   ];
 
+  useEffect(() => {
+    const update = async () => {
+      setLoader(true)
+
+      try {
+        let response = await MudDiagramService.get(id, 10)
+        response.key = 10
+        setData(response)
+      }
+      catch (ex) {
+        notify(`Не удалось загрузить данные шламограммы по скважине "${id}"`, 'error')
+        console.log(ex)
+      }
+
+      setIsUpdatingData(false)
+      setLoader(false)
+    }
+    update()
+  }, [isUpdatingData])
+
   const mapColumns = (col) => {
     if(col.children)
       col.children = col.children.map(mapColumns)
@@ -164,10 +178,9 @@ export function SludgeDiagram() {
   };
   
   const save = async (formData) => {
-    // TODO: Почему-то в formData из всей формы попадает только поле key. Остальное пришлось записывать в params ниже
+
-    // В аналогичной модалке DrillingFluid все ок, все поля формы попадают в formData.
     const params = {
-      key: form.getFieldValue('key'), 
+      key: 10, 
       probeNumber: form.getFieldValue('probeNumber'), 
       probeExtractionDepth: form.getFieldValue('probeExtractionDepth'), 
       sandstone: form.getFieldValue('sandstone'), 
@@ -196,6 +209,7 @@ export function SludgeDiagram() {
       setLoader(true)
       await MudDiagramService.put(`${id}`, 10, params)
 
+      setIsUpdatingData(true)
       setLoader(false)
 
       setEditingKey('')
@@ -213,12 +227,16 @@ export function SludgeDiagram() {
           },
         }}
         columns={mergedColumns}
-        dataSource={data}
+        dataSource={[data]}
         size={'small'}
         bordered={true}
         pagination={false}
       />
     </Form>
+    <div>&nbsp;</div>
+    <p style={{textAlign: "right"}}>
+      Дата последнего обновления: <b>{new Date(data?.lastUpdate).toLocaleString()}</b>
+    </p>
   </>
   )
 }

src/components/modalWindows/Nnb.jsx

@@ -1,16 +1,10 @@
-import { useState } from 'react'
+import { useState, useEffect } from 'react'
 import { useParams } from "react-router-dom";
-import {Table, Input, Form, Popconfirm, Typography } from 'antd'
+import {Table, InputNumber, Form, Popconfirm, Typography } from 'antd'
 import { makeColumn } from '../factory'
 import { NnbDataService } from '../../services/api/services/NnbDataService';
+import notify from "../notify"
 
-const originData = [
-  {
-    key: '11', depth: '', zenithAngle: '', magneticAzimuth: '', trueAzimuth: '', directAzimuth: '', verticalDepth: '', absoluteMark: '', localNorthOffset: '', 
-    localEastOffset: '', outFallOffset: '', offsetAzimuth: '', areaIntensity: '', offsetStopAngle: '', zenithIntensity: '', comment: '', depthPlanFactDifference: '', 
-    distancePlanFactDifference: ''
-  }
-]
 
 const EditableCell = ({
   editing,
@@ -32,12 +26,11 @@ const EditableCell = ({
             rules={[
               {
                 required: true,
-                message: '',
+                message: ''
-                pattern: '(-?[1-9]+\d*([.,]\d+)?)$|^(-?0[.,]\d*[1-9]+)$|^0$|^0.0$'
               },
             ]}
           >
-            <Input size="small" />
+            <InputNumber size="small" style={{width:"auto"}} />
           </Form.Item>
         ) : (
           children
@@ -52,7 +45,7 @@ export function Nnb() {
 
   const [form] = Form.useForm();
   const [editingKey, setEditingKey] = useState('');
-  const [data, setData] = useState(originData)
+  const [data, setData] = useState({})
   const [isUpdatingData, setIsUpdatingData] = useState(false)
 
   const [loader, setLoader] = useState(false)
@@ -88,7 +81,6 @@ export function Nnb() {
         return editable ? (
           <span>
             <a
-              href="javascript:;"
               onClick={() => save(row.key)}
               style={{ marginRight: 8 }}
             >
@@ -107,6 +99,26 @@ export function Nnb() {
     }
   ];
 
+  useEffect(() => {
+    const update = async () => {
+      setLoader(true)
+
+      try {
+        let response = await NnbDataService.get(id,11)
+        response.key = 11
+        setData(response)
+      }
+      catch (ex) {
+        notify(`Не удалось загрузить данные ННБ по скважине "${id}"`, 'error')
+        console.log(ex)
+      }
+
+      setIsUpdatingData(false)
+      setLoader(false)
+    }
+    update()
+  }, [isUpdatingData])
+
   const mergedColumns = columns.map((col) => {
     if (!col.editable) {
       return col;
@@ -135,10 +147,8 @@ export function Nnb() {
   };
 
   const save = async (formData) => {
-    // TODO: Почему-то в formData из всей формы попадает только поле key. Остальное пришлось записывать в params ниже
-    // В аналогичной модалке DrillingFluid все ок, все поля формы попадают в formData. 
     const params = {
-      key: form.getFieldValue('key'), 
+      key: 11, 
       depth: form.getFieldValue('depth'), 
       zenithAngle: form.getFieldValue('zenithAngle'), 
       magneticAzimuth: form.getFieldValue('magneticAzimuth'), 
@@ -162,6 +172,7 @@ export function Nnb() {
       setLoader(true)
       await NnbDataService.put(`${id}`, 11, params)
 
+      setIsUpdatingData(true)
       setLoader(false)
 
       setEditingKey('')
@@ -180,11 +191,15 @@ export function Nnb() {
           },
         }}
         columns={mergedColumns}
-        dataSource={data}
+        dataSource={[data]}
         size={'small'}
         bordered={true}
         pagination={false}
       />
     </Form>
+    <div>&nbsp;</div>
+    <p style={{textAlign: "right"}}>
+      Дата последнего обновления: <b>{new Date(data?.lastUpdate).toLocaleString()}</b>
+    </p>
   </>)
 }

src/pages/LastData.jsx

@@ -33,8 +33,6 @@ export default function LastData() {
         ]}
       >
         <DrillingFluid/>
-        <div>&nbsp;</div>
-        <p style={{textAlign: "right"}}><b>{new Date().toLocaleString()}</b></p>
       </Modal>
       <Button type="primary" onClick={() => setTableSludgeVisible(true)} style={{marginLeft: "5px"}}>
         Шламограмма
@@ -52,8 +50,6 @@ export default function LastData() {
         ]}
       >
         <SludgeDiagram/>
-        <div>&nbsp;</div>
-        <p style={{textAlign: "right"}}><b>{new Date().toLocaleString()}</b></p>
       </Modal>
       <Button type="primary" onClick={() => setTableNNBVisible(true)} style={{marginLeft: "5px"}}>
         ННБ
@@ -71,8 +67,6 @@ export default function LastData() {
         ]}
       >
         <Nnb/>
-        <div>&nbsp;</div>
-        <p style={{textAlign: "right"}}><b>{new Date().toLocaleString()}</b></p>
       </Modal>
       <Button type="primary" onClick={() => setDispositionVisible(true)} style={{marginLeft: "5px"}}>
         Распоряжение