CF2-49: Main changes for new Measures table display

src/pages/Measure/MeasureTable2.jsx

@@ -7,16 +7,17 @@ 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 { View } from  './View'
+import '../../styles/measure.css'
 
 const format='YYYY.MM.DD HH:mm'
 
-export const MeasureTable2 = ({idWell, idCategory, title, columns}) => {
+export const MeasureTable2 = ({idWell, idCategory, title, columns, currentValues}) => {
   const [showLoader, setShowLoader] = useState(false)
   const [showEditor, setShowEditor] = useState(false)
   const [history, setHistory] = useState([])
 
-  const update = () => invokeWebApiWrapperAsync(async()=>{
+  const updateHistory = () => invokeWebApiWrapperAsync(async()=>{
     const data = await MeasureService.getHisory(idWell, idCategory)
     const story = data?.map( i=> ({
       id: i.id,
@@ -27,22 +28,40 @@ export const MeasureTable2 = ({idWell, idCategory, title, columns}) => {
     setHistory(story??[])
   }
   , setShowLoader
-  , "не удалось загрузить")
+  , `Не удалось загрузить последние данные по скважине ${idWell}`)
 
-  useEffect(update, [idWell, idCategory])
+  useEffect(updateHistory, [idWell, idCategory])
 
-  return <LoaderPortal show={showLoader}>
+  const lastHistoryIndex = history.length
+
+  return <> 
+    <LoaderPortal show={showLoader}>
+      &nbsp;
       <h3>{title}</h3>
       &nbsp;
-    <Button 
+      <div className='d-flex'>
-      onClick={() => setShowEditor(true)}
+        <div className='measure-dates'>
-      icon={<HourglassOutlined/>}>История</Button>
           <Timeline>
-      {history.map(item=><TimelineItem value={item}>{item.timestamp}</TimelineItem>)}
+            {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>)}
           </Timeline>
-    {/* <View
+        </div>
-          item = {lastData?.data}
+        <div className='w-100'>
-          columns = {columns}/> */}
+          <View
+            item = {currentValues.data}
+            columns = {columns}
+          />
+        </div>
+      </div>
       <Modal
         title={title}
         centered
@@ -56,7 +75,9 @@ export const MeasureTable2 = ({idWell, idCategory, title, columns}) => {
           idWell={idWell}
           idCategory={idCategory} 
           columns = {columns}
-        onUpdate={update}/>
+          onUpdate={updateHistory}
+        />
       </Modal>
     </LoaderPortal>
+  </> 
 }

src/pages/Measure/View.jsx

@@ -9,30 +9,35 @@ export const View = ({columns, item}) => {
   const viewItems = columns.map( (column, i) => {
     const row = Math.floor(i / colsCount) + 1
     const colb = i % colsCount
+
     return <>
         <GridItem 
+          //style={{width:'100%', border:'1px solid red'}}
           row={row} 
           col={colb*2 + 1}
           background='#00000005'        
           border='1px solid #FFFE'
         >
           {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)'
-        justifyContect='right'
+          justifycontent='right'
-        marginRight='16px'
+          marginright='16px'
           fontWeight='bold'
-        textAlign='right'>
+          textalign='right'
+        >
             {column.render ? column.render(item[column.dataIndex]) : item[column.dataIndex]}        
         </GridItem>
     </>
   })
 
-  return <Grid>
+  return <>
+    <Grid>
       {viewItems}
     </Grid>
+  </>
 }

src/pages/Measure/columnsMudDiagram.js

@@ -4,10 +4,6 @@ import {v, numericColumnOptions, textColumnOptions} from './columnsCommon'
 export const columnsMudDiagram = [
   makeColumn(v('N пробы'), 'probeNumber', numericColumnOptions),
   makeColumn(v('Глубина отбора пробы'), 'probeExtractionDepth', numericColumnOptions),
-  {
-    title: 'Литология',
-    key: 'lithology',
-    children: [
   makeColumn(v('Песчаник (%)'), 'sandstone', numericColumnOptions),
   makeColumn(v('Алевролит (%)'), 'siltstone', numericColumnOptions),
   makeColumn(v('Аргиллит (%)'), 'argillit', numericColumnOptions),
@@ -17,23 +13,15 @@ export const columnsMudDiagram = [
   makeColumn(v('Глина (%)'), 'clay', numericColumnOptions),
   makeColumn(v('Известняк (%)'), 'camstone', numericColumnOptions),
   makeColumn(v('Цемент (%)'), 'cement', numericColumnOptions),
-    ]
-  },
   makeColumn('Краткое описание', 'summary', textColumnOptions),
   makeColumn(v('ЛБА бурового раствора'), 'drillingMud', numericColumnOptions),
   makeColumn(v('ЛБА (шлама)'), 'sludge', numericColumnOptions),
-  {
-    title: 'Газопоказания',
-    key: 'gasIndications',
-    children: [
   makeColumn(v('Сумма УВ мах. (абс%)'), 'maxSum', numericColumnOptions),
   makeColumn(v('С1 метан (отн%)'), 'methane', numericColumnOptions),
   makeColumn(v('С2 этан (отн%)'), 'ethane', numericColumnOptions),
   makeColumn(v('С3 пропан (отн%)'), 'propane', numericColumnOptions),
   makeColumn(v('С4 бутан (отн%)'), 'butane', numericColumnOptions),
   makeColumn(v('С5 пентан (отн%)'), 'pentane', numericColumnOptions),
-    ]
-  },
   makeColumn(v('Мех. скорость'), 'mechanicalSpeed', numericColumnOptions),
   makeColumn('Предварительное заключение о насыщении по ГК', 'preliminaryConclusion', textColumnOptions),
 ]

src/pages/Measure/index.jsx

@@ -1,25 +1,60 @@
+import { useState, useEffect } from 'react'
 import { columnsMudDiagram} from './columnsMudDiagram'
 import { columnsDrillingFluid} from './columnsDrillingFluid'
+import { invokeWebApiWrapperAsync } from '../../components/factory'
+import { MeasureService } from '../../services/api'
 import { columnsNnb } from './columnsNnb'
-import { MeasureTable } from './MeasureTable'
+import LoaderPortal from '../../components/LoaderPortal'
-//import { MeasureTable2 } from './MeasureTable2'
+//import moment from 'moment'
+//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 updateCurrentValues = () => invokeWebApiWrapperAsync(async()=>{
+    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 ?? [])
+  }
+  ,setShowLoader
+  ,`Не удалось загрузить последние данные по скважине ${idWell}`)
+
+  useEffect(updateCurrentValues, [idWell])
+
   return <>  
-    <MeasureTable
+    <LoaderPortal show={showLoader}>
+      <MeasureTable2
         idWell={idWell}
         idCategory={1} 
         title='Замер бурового раствора'
-      columns={columnsDrillingFluid}/>
+        columns={columnsDrillingFluid}
-    <MeasureTable 
+        currentValues={currentFluidValues}
+      />
+      <MeasureTable2
         idWell={idWell}
         idCategory={2} 
         title='Шламограмма'
-      columns={columnsMudDiagram}/>
+        columns={columnsMudDiagram}
-    <MeasureTable 
+        currentValues={currentMudValues}
+      />
+      <MeasureTable2 
         idWell={idWell}
         idCategory={3} 
         title='ННБ'
-      columns={columnsNnb}/>
+        columns={columnsNnb}
+        currentValues={currentNnbValues}
+      />
+    </LoaderPortal>
   </>
 }

src/styles/index.css

@@ -19,6 +19,10 @@ body {
   display: none;
 }
 
+.w-15 {
+  width: 15%
+}
+
 .w-100 {
   width: 100%
 }

src/styles/measure.css

@@ -0,0 +1,32 @@
+.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;
+    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;
+}