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

src/pages/Measure/MeasureTable2.jsx

@@ -1,83 +1,59 @@
-import { useState, useEffect } from 'react'
+import { useState, useEffect } from "react"
-import { Button, Modal, Timeline } from 'antd'
+import { Button, Timeline } from 'antd'
 import moment from 'moment'
-import { HourglassOutlined } from '@ant-design/icons'
+import { ClockCircleOutlined } 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 { 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}) => {
+export const MeasureTable2 = ({title, columns, values}) => {
-  const [showLoader, setShowLoader] = useState(false)
+  var defaultDisplay = values && values.length > 1 
-  const [showEditor, setShowEditor] = useState(false)
+                       ? values[values.length-1] 
-  const [history, setHistory] = useState([])
+                       : []
 
-  const updateHistory = () => invokeWebApiWrapperAsync(async()=>{
+  const [displayedValues, setDisplayedValues] = useState([]);
-    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}`)
 
-  useEffect(updateHistory, [idWell, idCategory])
+  useEffect(() => {
-
+    setDisplayedValues(defaultDisplay)
-  const lastHistoryIndex = history.length
+  }, [defaultDisplay])
 
   return <> 
-    <LoaderPortal show={showLoader}>
     &nbsp;
     <h3>{title}</h3>
     &nbsp;
     <div className='d-flex'>
-        <div className='measure-dates'>
+      <div className='fd-column'>
-          <Timeline>
+        <div className='mt-8px'>
-            {history.map((item, index)=>
+          <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={index === lastHistoryIndex - 1 
+                  className='measure-button'
-                                      ? 'last-measure-button' 
+                  onClick={() => setDisplayedValues(values.find(el => el.id === item.id))} 
-                                      : 'measure-button'} 
+                  dot={index === values.length - 1 
-                onClick={() => setShowEditor(true)} 
+                        ? <ClockCircleOutlined className="timeline-clock-icon" /> 
-                value={item}
+                        : null} 
+                  value={moment.utc(item.timestamp).local().format(format)}
                 >
-                <p>{item.timestamp}</p>
+                  {moment.utc(item.timestamp).local().format(format)}
-              </Timeline.Item>)}
+                </Timeline.Item>
+            )}
           </Timeline>
         </div>
+      </div>
       <div className='w-100'>
         <View
-            item = {currentValues.data}
+          item={displayedValues.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}
-        />
-      </Modal>
-    </LoaderPortal>
   </> 
 }

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'        
+          style={{background:'#00000005', 
-          border='1px solid #FFFE'
+                  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)'
+          style={{background:'#00000005', 
-          justifycontent='right'
+                  border:'1px solid black', 
-          marginright='16px'
+                  justifyContent:'right', 
-          fontWeight='bold'
+                  marginRight:'16px', 
-          textalign='right'
+                  fontWeight:'bold', 
+                  textAlign:'right'}}
         >
             {column.render ? column.render(item[column.dataIndex]) : item[column.dataIndex]}        
         </GridItem>

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 [fluidValues, setFluidValues] = useState([])
-  const [currentMudValues, setCurrentMudValues] = useState([])
+  const [mudValues, setMudValues] = useState([])
-  const [currentNnbValues, setCurrentNnbValues] = 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)
+    // const fluids = data?.filter(value => value.idCategory === 1)
-    setCurrentFluidValues(fluidValues ?? [])
+    // setFluidValues(fluids ?? [])
-    const mudValues = data?.find(value =>  value.idCategory === 2)
+    // const muds = data?.filter(value => value.idCategory === 2)
-    setCurrentMudValues(mudValues ?? [])
+    // setMudValues(muds ?? [])
-    const nnbValues = data?.find(value =>  value.idCategory === 3)
+    // const nnbs = data?.filter(value => value.idCategory === 3)
-    setCurrentNnbValues(nnbValues ?? [])
+    // 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}
+        values={fluidValues}
       />
       <MeasureTable2 
-        idWell={idWell}
-        idCategory={2} 
         title='Шламограмма'
         columns={columnsMudDiagram}
-        currentValues={currentMudValues}
+        values={mudValues}
       />
       <MeasureTable2 
-        idWell={idWell}
-        idCategory={3} 
         title='ННБ'
         columns={columnsNnb}
-        currentValues={currentNnbValues}
+        values={nnbValues}
       />
     </LoaderPortal>
   </>

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;
 }

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 {
+.mt-8px {
-    display: flex;
     margin-top: 8px;
-    background-color: #DCDCDC;
-    width: 95%;
-    height: 30px;
-    border: 1px solid black;
-    border-radius: 5px;
 }
 
-.last-measure-button:hover {
+.ml-10px {
-    cursor: pointer;
+    margin-left: 10px;
-    background-color: #D3D3D3;
 }