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,23 +28,41 @@ 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
-    <h3>{title}</h3>
+
-    &nbsp;
+  return <> 
-    <Button 
+    <LoaderPortal show={showLoader}>
-      onClick={() => setShowEditor(true)}
+      &nbsp;
-      icon={<HourglassOutlined/>}>История</Button>
+      <h3>{title}</h3>
-    <Timeline>
+      &nbsp;
-      {history.map(item=><TimelineItem value={item}>{item.timestamp}</TimelineItem>)}
+      <div className='d-flex'>
-    </Timeline>
+        <div className='measure-dates'>
-    {/* <View
+          <Timeline>
-          item = {lastData?.data}
+            {history.map((item, index)=>
-          columns = {columns}/> */}
+              <Timeline.Item 
-    <Modal
+                key={item.id}
+                className={index === lastHistoryIndex - 1 
+                                      ? 'last-measure-button' 
+                                      : 'measure-button'} 
+                onClick={() => setShowEditor(true)} 
+                value={item}
+              >
+                <p>{item.timestamp}</p>
+              </Timeline.Item>)}
+          </Timeline>
+        </div>
+        <div className='w-100'>
+          <View
+            item = {currentValues.data}
+            columns = {columns}
+          />
+        </div>
+      </div>
+      <Modal
         title={title}
         centered
         visible={showEditor}
@@ -51,12 +70,14 @@ export const MeasureTable2 = ({idWell, idCategory, title, columns}) => {
         onCancel={() => setShowEditor(false)}
         width="95%"
         footer={null}
-        >
+      >
-      <Editor
+        <Editor
-        idWell={idWell}
+          idWell={idWell}
-        idCategory={idCategory} 
+          idCategory={idCategory} 
-        columns = {columns}
+          columns = {columns}
-        onUpdate={update}/>
+          onUpdate={updateHistory}
-    </Modal>
+        />
-  </LoaderPortal>
+      </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 
-        row={row} 
-        col={colb*2 + 1}
-        background='#00000005'        
-        border='1px solid #FFFE'
-        >
-        {column.title}
 
-      </GridItem>
+    return <>
-      <GridItem 
+        <GridItem 
-        row={row} 
+          //style={{width:'100%', border:'1px solid red'}}
-        col={colb*2 + 2}
+          row={row} 
-        border='1px solid rgba(0, 0, 0, 0.05)'
+          col={colb*2 + 1}
-        justifyContect='right'
+          background='#00000005'        
-        marginRight='16px'
+          border='1px solid #FFFE'
-        fontWeight='bold'
+        >
-        textAlign='right'>
+          {column.title}
-          {column.render ? column.render(item[column.dataIndex]) : item[column.dataIndex]}        
+        </GridItem>
-      </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'
+        >
+            {column.render ? column.render(item[column.dataIndex]) : item[column.dataIndex]}        
+        </GridItem>
     </>
   })
 
-  return <Grid>
+  return <>
-    {viewItems}
+    <Grid>
-  </Grid>
+      {viewItems}
+    </Grid>
+  </>
 }

src/pages/Measure/columnsMudDiagram.js

@@ -4,36 +4,24 @@ import {v, numericColumnOptions, textColumnOptions} from './columnsCommon'
 export const columnsMudDiagram = [
   makeColumn(v('N пробы'), 'probeNumber', numericColumnOptions),
   makeColumn(v('Глубина отбора пробы'), 'probeExtractionDepth', numericColumnOptions),
-  {
+  makeColumn(v('Песчаник (%)'), 'sandstone', numericColumnOptions),
-    title: 'Литология',
+  makeColumn(v('Алевролит (%)'), 'siltstone', numericColumnOptions),
-    key: 'lithology',
+  makeColumn(v('Аргиллит (%)'), 'argillit', numericColumnOptions),
-    children: [
+  makeColumn(v('Аргиллит бит. (%)'), 'brokenArgillit', numericColumnOptions),
-      makeColumn(v('Песчаник (%)'), 'sandstone', numericColumnOptions),
+  makeColumn(v('Уголь (%)'), 'coal', numericColumnOptions),
-      makeColumn(v('Алевролит (%)'), 'siltstone', numericColumnOptions),
+  makeColumn(v('Песок (%)'), 'sand', numericColumnOptions),
-      makeColumn(v('Аргиллит (%)'), 'argillit', numericColumnOptions),
+  makeColumn(v('Глина (%)'), 'clay', numericColumnOptions),
-      makeColumn(v('Аргиллит бит. (%)'), 'brokenArgillit', numericColumnOptions),
+  makeColumn(v('Известняк (%)'), 'camstone', numericColumnOptions),
-      makeColumn(v('Уголь (%)'), 'coal', numericColumnOptions),
+  makeColumn(v('Цемент (%)'), 'cement', numericColumnOptions),
-      makeColumn(v('Песок (%)'), 'sand', numericColumnOptions),
-      makeColumn(v('Глина (%)'), 'clay', numericColumnOptions),
-      makeColumn(v('Известняк (%)'), 'camstone', numericColumnOptions),
-      makeColumn(v('Цемент (%)'), 'cement', numericColumnOptions),
-    ]
-  },
   makeColumn('Краткое описание', 'summary', textColumnOptions),
   makeColumn(v('ЛБА бурового раствора'), 'drillingMud', numericColumnOptions),
   makeColumn(v('ЛБА (шлама)'), 'sludge', numericColumnOptions),
-  {
+  makeColumn(v('Сумма УВ мах. (абс%)'), 'maxSum', numericColumnOptions),
-    title: 'Газопоказания',
+  makeColumn(v('С1 метан (отн%)'), 'methane', numericColumnOptions),
-    key: 'gasIndications',
+  makeColumn(v('С2 этан (отн%)'), 'ethane', numericColumnOptions),
-    children: [
+  makeColumn(v('С3 пропан (отн%)'), 'propane', numericColumnOptions),
-      makeColumn(v('Сумма УВ мах. (абс%)'), 'maxSum', numericColumnOptions),
+  makeColumn(v('С4 бутан (отн%)'), 'butane', numericColumnOptions),
-      makeColumn(v('С1 метан (отн%)'), 'methane', numericColumnOptions),
+  makeColumn(v('С5 пентан (отн%)'), 'pentane', 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}>
-      idWell={idWell}
+      <MeasureTable2
-      idCategory={1} 
+        idWell={idWell}
-      title='Замер бурового раствора'
+        idCategory={1} 
-      columns={columnsDrillingFluid}/>
+        title='Замер бурового раствора'
-    <MeasureTable 
+        columns={columnsDrillingFluid}
-      idWell={idWell}
+        currentValues={currentFluidValues}
-      idCategory={2} 
+      />
-      title='Шламограмма'
+      <MeasureTable2
-      columns={columnsMudDiagram}/>
+        idWell={idWell}
-    <MeasureTable 
+        idCategory={2} 
-      idWell={idWell}
+        title='Шламограмма'
-      idCategory={3} 
+        columns={columnsMudDiagram}
-      title='ННБ'
+        currentValues={currentMudValues}
-      columns={columnsNnb}/>
+      />
+      <MeasureTable2 
+        idWell={idWell}
+        idCategory={3} 
+        title='ННБ'
+        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;
+}