measure design incomplete

src/pages/Measure/Editor.jsx

@@ -60,10 +60,15 @@ export const Editor = ({idWell, idCategory, columns, onUpdate}) => {
       id: id,
       idWell: idWell,
       idCategory: idCategory,
-      timestamp: timestamp?? moment(),
+      timestamp: moment(timestamp)?? moment(),
       data,
     }
+    try{
       await MeasureService.update(idWell, measure)
+    }
+    catch(ex){
+      console.write(ex)
+    }
     if(onUpdate)
       onUpdate()
     else

src/pages/Measure/MeasureTable2.jsx

@@ -0,0 +1,62 @@
+import { useState, useEffect } from 'react'
+import { Button, Modal, 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 { View } from  './View'
+
+const format='YYYY.MM.DD HH:mm'
+
+export const MeasureTable2 = ({idWell, idCategory, title, columns}) => {
+  const [showLoader, setShowLoader] = useState(false)
+  const [showEditor, setShowEditor] = useState(false)
+  const [history, setHistory] = useState([])
+
+  const update = () => 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
+  , "не удалось загрузить")
+
+  useEffect(update, [idWell, idCategory])
+
+  return <LoaderPortal show={showLoader}>
+    <h3>{title}</h3>
+    &nbsp;
+    <Button 
+      onClick={() => setShowEditor(true)}
+      icon={<HourglassOutlined/>}>История</Button>
+    <Timeline>
+      {history.map(item=><TimelineItem value={item}>{item.timestamp}</TimelineItem>)}
+    </Timeline>
+    {/* <View
+          item = {lastData?.data}
+          columns = {columns}/> */}
+    <Modal
+        title={title}
+        centered
+        visible={showEditor}
+        onOk={() => setShowEditor(false)}
+        onCancel={() => setShowEditor(false)}
+        width="95%"
+        footer={null}
+        >
+      <Editor
+        idWell={idWell}
+        idCategory={idCategory} 
+        columns = {columns}
+        onUpdate={update}/>
+    </Modal>
+  </LoaderPortal>
+}

src/pages/Measure/View.jsx

@@ -0,0 +1,38 @@
+import { Empty } from 'antd';
+import {Grid, GridItem} from '../../components/Grid'
+
+export const View = ({columns, item}) => {
+  if (!item || !columns?.length)
+    return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE}/>
+
+  const colsCount = 3
+  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>
+      <GridItem 
+        row={row} 
+        col={colb*2 + 2}
+        border='1px solid rgba(0, 0, 0, 0.05)'
+        justifyContect='right'
+        marginRight='16px'
+        fontWeight='bold'
+        textAlign='right'>
+          {column.render ? column.render(item[column.dataIndex]) : item[column.dataIndex]}        
+      </GridItem>
+    </>
+  })
+
+  return <Grid>
+    {viewItems}
+  </Grid>
+}

src/pages/Measure/columnsCommon.js

@@ -3,19 +3,33 @@ import {Input} from 'antd'
 
 const {TextArea} = Input
 
-export const v = (text) => <div 
+// export const v = (text) => <div 
-  style={{
+//   style={{
-    writingMode:'vertical-rl',
+//     position: 'absolute',
-    textOrientation: 'mixed',
+//     top: '0',
-    verticalAlign: 'top',
+//     left: '0',
-  }}>
+//     transform: 'rotate(-90deg)',
-  {text}
+//     transformOrigin: 'left',
-</div>
+//     height:'000px',
+//     width:'400px'
+//   }}>
+//   {text}
+// </div>
+
+// export const v = (text) => <div 
+//   style={{
+//     writingMode:'vertical-lr',
+//     textOrientation: 'mixed',
+//   }}>
+//   {text}
+// </div>
+
+export const v = (text) => text
 
 export const numericColumnOptions = {
   editable: true,
   initialValue: 0,
-  width:'5em',
+  width:'4rem',
   formItemRules: [
     {
       required: true,
@@ -28,4 +42,4 @@ export const numericColumnOptions = {
 export const textColumnOptions = {
   editable:true, 
   input:<TextArea/>, 
-  width:'20em'}
+  width:'20rem'}

src/pages/Measure/index.jsx

@@ -2,10 +2,11 @@ import { columnsMudDiagram} from './columnsMudDiagram'
 import { columnsDrillingFluid} from './columnsDrillingFluid'
 import { columnsNnb } from './columnsNnb'
 import { MeasureTable } from './MeasureTable'
+import { MeasureTable2 } from './MeasureTable2'
 
 export default function Measure({idWell}){
   return <>  
-    <MeasureTable 
+    <MeasureTable2
       idWell={idWell}
       idCategory={1} 
       title='Замер бурового раствора'