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

2021-08-04 14:19:22 +05:00 · 2021-08-04 14:19:22 +05:00 · 31398b65b4
commit 31398b65b4
parent 3e1312fec2
4 changed files with 89 additions and 67 deletions
--- a/src/components/modalWindows/DrillingFluid.jsx
+++ b/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: '',
-                pattern: '(-?[0-9]+\d*([.,]\d+)?)$|^(-?0[.,]\d*[0-9]+)$|^0$|^0.0$'
-                //pattern: '^-?\d+(\.\d{1,2})?$'
+                message: null
              },
            ]}
          >
-            <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 [dataFact, setDataFact] = useState(originDataFact)
+  const [dataPlan, setDataPlan] = useState({})
+  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('Mf', 'mf', { dataIndex: 'mf', align: 'center', className: 'small-font', editable: true}),
-    makeColumn('Pm', 'pm', { dataIndex: 'pm', align: 'center', className: 'small-font', editable: true}),
+    makeColumn('PF', 'pf', { dataIndex: 'pf', align: 'center', className: 'small-font', 
+        render: text => <span style={{marginLeft: '12px', marginRight: '12px'}}>{text}</span>, 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>
  </>
  )
 }
--- a/src/components/modalWindows/MudDiagram.jsx
+++ b/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: '',
-                pattern: '(-?[0-9]+\d*([.,]\d+)?)$|^(-?0[.,]\d*[0-9]+)$|^0$|^0.0$'
-                //pattern: '^-?\d+(\.\d{1,2})?$'
+                message: ''
              },
            ]}
          >
-            <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>
  </>
  )
 }
--- a/src/components/modalWindows/Nnb.jsx
+++ b/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: '',
-                pattern: '(-?[1-9]+\d*([.,]\d+)?)$|^(-?0[.,]\d*[1-9]+)$|^0$|^0.0$'
+                message: ''
              },
            ]}
          >
-            <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>
  </>)
 }
--- a/src/pages/LastData.jsx
+++ b/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"}}>
        Распоряжение