CF2-49: Fixed Measures appearence. Added switch values by history.

2021-10-05 14:57:56 +05:00 · 2021-10-05 14:57:56 +05:00 · fa78376c2a
commit fa78376c2a
parent 5755b41abc
5 changed files with 91 additions and 122 deletions
--- a/src/pages/Measure/MeasureTable2.jsx
+++ b/src/pages/Measure/MeasureTable2.jsx
@ -1,83 +1,59 @@
-import { useState, useEffect } from 'react'
-import { Button, Modal, Timeline } from 'antd'
+import { useState, useEffect } from "react"
+import { Button, Timeline } from 'antd'
 import moment from 'moment'
-import { HourglassOutlined } from '@ant-design/icons'
-import LoaderPortal from '../../components/LoaderPortal'
-import { invokeWebApiWrapperAsync } from '../../components/factory'
-import { MeasureService } from '../../services/api'
-import { Editor } from './Editor'
-import TimelineItem from 'antd/lib/timeline/TimelineItem'
+import { ClockCircleOutlined } from '@ant-design/icons'
 import { View } from  './View'
+import '../../styles/index.css'
 import '../../styles/measure.css'

 const format='YYYY.MM.DD HH:mm'

-export const MeasureTable2 = ({idWell, idCategory, title, columns, currentValues}) => {
-  const [showLoader, setShowLoader] = useState(false)
-  const [showEditor, setShowEditor] = useState(false)
-  const [history, setHistory] = useState([])
+export const MeasureTable2 = ({title, columns, values}) => {
+  var defaultDisplay = values && values.length > 1 
+                       ? values[values.length-1] 
+                       : []

-  const updateHistory = () => invokeWebApiWrapperAsync(async()=>{
-    const data = await MeasureService.getHisory(idWell, idCategory)
-    const story = data?.map( i=> ({
-      id: i.id,
-      idWell: i.idWell,
-      idCategory: i.idCategory,
-      timestamp: moment.utc(i.timestamp).local().format(format),
-      ...i.data}))
-    setHistory(story??[])
-  }
-  , setShowLoader
-  , `Не удалось загрузить последние данные по скважине ${idWell}`)
+  const [displayedValues, setDisplayedValues] = useState([]);

-  useEffect(updateHistory, [idWell, idCategory])
-
-  const lastHistoryIndex = history.length
+  useEffect(() => {
+    setDisplayedValues(defaultDisplay)
+  }, [defaultDisplay])

  return <> 
-    <LoaderPortal show={showLoader}>
-      &nbsp;
-      <h3>{title}</h3>
-      &nbsp;
-      <div className='d-flex'>
-        <div className='measure-dates'>
-          <Timeline>
-            {history.map((item, index)=>
-              <Timeline.Item 
-                key={item.id}
-                className={index === lastHistoryIndex - 1 
-                                      ? 'last-measure-button' 
-                                      : 'measure-button'} 
-                onClick={() => setShowEditor(true)} 
-                value={item}
-              >
-                <p>{item.timestamp}</p>
-              </Timeline.Item>)}
+    &nbsp;
+    <h3>{title}</h3>
+    &nbsp;
+    <div className='d-flex'>
+      <div className='fd-column'>
+        <div className='mt-8px'>
+          <Button className='w-100'>Добавить</Button>
+          <Button className='w-100'>Редактировать</Button>
+          <Button className='w-100'>Удалить</Button>
+        </div>
+        <div className='measure-dates mt-20px'>
+          <Timeline className='mt-8px ml-10px'>
+            {values.map((item, index) => 
+                <Timeline.Item 
+                  key={item.id}
+                  className='measure-button'
+                  onClick={() => setDisplayedValues(values.find(el => el.id === item.id))} 
+                  dot={index === values.length - 1 
+                        ? <ClockCircleOutlined className="timeline-clock-icon" /> 
+                        : null} 
+                  value={moment.utc(item.timestamp).local().format(format)}
+                >
+                  {moment.utc(item.timestamp).local().format(format)}
+                </Timeline.Item>
+            )}
          </Timeline>
        </div>
-        <div className='w-100'>
-          <View
-            item = {currentValues.data}
-            columns = {columns}
-          />
-        </div>
      </div>
-      <Modal
-        title={title}
-        centered
-        visible={showEditor}
-        onOk={() => setShowEditor(false)}
-        onCancel={() => setShowEditor(false)}
-        width="95%"
-        footer={null}
-      >
-        <Editor
-          idWell={idWell}
-          idCategory={idCategory} 
-          columns = {columns}
-          onUpdate={updateHistory}
+      <div className='w-100'>
+        <View
+          item={displayedValues.data}
+          columns={columns}
        />
-      </Modal>
-    </LoaderPortal>
+      </div>
+    </div>
  </> 
 }
--- a/src/pages/Measure/View.jsx
+++ b/src/pages/Measure/View.jsx
@ -12,23 +12,23 @@ export const View = ({columns, item}) => {

    return <>
        <GridItem 
-          //style={{width:'100%', border:'1px solid red'}}
          row={row} 
          col={colb*2 + 1}
-          background='#00000005'        
-          border='1px solid #FFFE'
+          style={{background:'#00000005', 
+                  border:'1px solid black'
+                }}
        >
          {column.title}
        </GridItem>
        <GridItem 
-          //style={{width:'50%', border:'1px solid blue'}}
          row={row} 
          col={colb*2 + 2}
-          border='1px solid rgba(0, 0, 0, 0.05)'
-          justifycontent='right'
-          marginright='16px'
-          fontWeight='bold'
-          textalign='right'
+          style={{background:'#00000005', 
+                  border:'1px solid black', 
+                  justifyContent:'right', 
+                  marginRight:'16px', 
+                  fontWeight:'bold', 
+                  textAlign:'right'}}
        >
            {column.render ? column.render(item[column.dataIndex]) : item[column.dataIndex]}        
        </GridItem>
--- a/src/pages/Measure/index.jsx
+++ b/src/pages/Measure/index.jsx
@ -9,23 +9,27 @@ import LoaderPortal from '../../components/LoaderPortal'
 //import { MeasureTable } from './MeasureTable'
 import { MeasureTable2 } from './MeasureTable2'

-const format='YYYY.MM.DD HH:mm'
-
 export default function Measure({idWell}){
  const [showLoader, setShowLoader] = useState(false)
-  const [currentFluidValues, setCurrentFluidValues] = useState([])
-  const [currentMudValues, setCurrentMudValues] = useState([])
-  const [currentNnbValues, setCurrentNnbValues] = useState([])
+  const [fluidValues, setFluidValues] = useState([])
+  const [mudValues, setMudValues] = useState([])
+  const [nnbValues, setNnbValues] = useState([])

  const updateCurrentValues = () => invokeWebApiWrapperAsync(async()=>{
-    const data = await MeasureService.getAllLast(idWell)
+    // const data = await MeasureService.getAllLast(idWell)

-    const fluidValues = data?.find(value =>  value.idCategory === 1)
-    setCurrentFluidValues(fluidValues ?? [])
-    const mudValues = data?.find(value =>  value.idCategory === 2)
-    setCurrentMudValues(mudValues ?? [])
-    const nnbValues = data?.find(value =>  value.idCategory === 3)
-    setCurrentNnbValues(nnbValues ?? [])
+    // const fluids = data?.filter(value => value.idCategory === 1)
+    // setFluidValues(fluids ?? [])
+    // const muds = data?.filter(value => value.idCategory === 2)
+    // setMudValues(muds ?? [])
+    // const nnbs = data?.filter(value => value.idCategory === 3)
+    // setNnbValues(nnbs ?? [])
+    const fluids = await MeasureService.getHisory(idWell, 1)
+    setFluidValues(fluids ?? [])
+    const muds = await MeasureService.getHisory(idWell, 2)
+    setMudValues(muds ?? [])
+    const nnbs = await MeasureService.getHisory(idWell, 3)
+    setNnbValues(nnbs ?? [])
  }
  ,setShowLoader
  ,`Не удалось загрузить последние данные по скважине ${idWell}`)
@ -35,25 +39,19 @@ export default function Measure({idWell}){
  return <>  
    <LoaderPortal show={showLoader}>
      <MeasureTable2
-        idWell={idWell}
-        idCategory={1} 
        title='Замер бурового раствора'
        columns={columnsDrillingFluid}
-        currentValues={currentFluidValues}
-      />
-      <MeasureTable2
-        idWell={idWell}
-        idCategory={2} 
-        title='Шламограмма'
-        columns={columnsMudDiagram}
-        currentValues={currentMudValues}
+        values={fluidValues}
+      />
+      <MeasureTable2 
+        title='Шламограмма'
+        columns={columnsMudDiagram}
+        values={mudValues}
      />
      <MeasureTable2 
-        idWell={idWell}
-        idCategory={3} 
        title='ННБ'
        columns={columnsNnb}
-        currentValues={currentNnbValues}
+        values={nnbValues}
      />
    </LoaderPortal>
  </>
--- a/src/styles/index.css
+++ b/src/styles/index.css
@ -11,6 +11,10 @@ body {
  display: flex;
 }

+.fd-column {
+  flex-direction: column;
+}
+
 .d-inline {
  display: inline;
 }
@ -27,6 +31,10 @@ body {
  width: 100%
 }

+.mt-8px {
+  margin-top: 8px;
+}
+
 .mt-20px {
  margin-top: 20px;
 }
@ -39,6 +47,10 @@ body {
  margin-left: 5px;
 }

+.ml-10px {
+  margin-left: 10px;
+}
+
 .ml-30px {
  margin-left: 30px;
 }
--- a/src/styles/measure.css
+++ b/src/styles/measure.css
@ -1,32 +1,15 @@
 .measure-dates {
-    width: 15%;
    overflow-y: scroll;
 }

-.measure-button {
-    display: flex;
-    margin-top: 8px;
-    width: 95%;
-    height: 30px;
-    border: 1px solid black;
-    border-radius: 5px;
-}
-
 .measure-button:hover {
    cursor: pointer;
 }

-.last-measure-button {
-    display: flex;
+.mt-8px {
    margin-top: 8px;
-    background-color: #DCDCDC;
-    width: 95%;
-    height: 30px;
-    border: 1px solid black;
-    border-radius: 5px;
 }

-.last-measure-button:hover {
-    cursor: pointer;
-    background-color: #D3D3D3;
-}
+.ml-10px {
+    margin-left: 10px;
+}