CF2-49: Fixed 'Measures' table in editing view

src/pages/Measure/MeasureTable.jsx

@@ -1,7 +1,7 @@
 import { useState, useEffect } from 'react'
 import { Button, Form, Input, Timeline } from 'antd'
 import moment from 'moment'
-import { ExclamationCircleOutlined } from '@ant-design/icons'
+import { CheckSquareOutlined } from '@ant-design/icons'
 import { View } from  './View'
 import LoaderPortal from '../../components/LoaderPortal'
 import { MeasureService } from '../../services/api'
@@ -22,10 +22,10 @@ export const MeasureTable = ({idWell, idCategory, title, columns, values, update
   const [measuresForm] = Form.useForm();
 
   const createEditingColumns = (cols, renderDelegate) =>
-  cols.map(col =>
-    ({ render: renderDelegate,
-      ...col
-    })
+    cols.map(col =>
+      ({ render: renderDelegate,
+        ...col
+      })
   )
 
   useEffect(() => {
@@ -93,7 +93,10 @@ export const MeasureTable = ({idWell, idCategory, title, columns, values, update
     <div className='w-300px'>
       <h3 style={{textAlign: 'center'}}>{editingActionName} данные?</h3>
       <div className='d-flex mt-20px'>
-        <Button key='confirm' className='w-100' onClick={async () => {
+        <Button 
+          key='confirm' 
+          className='w-100' 
+          onClick={async () => {
             if(editingActionName === 'Удалить'){
               setShowLoader(true)
               await MeasureService.markAsDelete(idWell, displayedValues.id)
@@ -107,7 +110,13 @@ export const MeasureTable = ({idWell, idCategory, title, columns, values, update
         >
           Да
         </Button>
-        <Button key='decline' className='w-100' onClick={()=> setIsTableEditing(false)}>Нет</Button>
+        <Button 
+          key='decline' 
+          className='w-100' 
+          onClick={()=> setIsTableEditing(false)}
+        >
+          Нет
+        </Button>
       </div>
     </div>
   
@@ -122,7 +131,15 @@ export const MeasureTable = ({idWell, idCategory, title, columns, values, update
     }
 
     setShowLoader(true)
-    await MeasureService.insert(idWell, measureParams)
+
+    if(editingActionName === 'Добавить') {
+      await MeasureService.insert(idWell, measureParams)
+    } else if (editingActionName === 'Редактировать') {
+      measureParams.id = displayedValues.id
+      measureParams.timestamp = displayedValues.timestamp
+      await MeasureService.update(idWell, measureParams)
+    }
+
     setIsTableEditing(false)
     updateMeasuresFunc()
     setShowLoader(false)
@@ -145,16 +162,16 @@ export const MeasureTable = ({idWell, idCategory, title, columns, values, update
           <Timeline className='mt-12px ml-10px'>
             {values.map((item, index) => 
               <Timeline.Item 
-                key={item.id}
-                className={index === values.length-1 
-                           ? 'last-measure-button' 
-                           : 'measure-button'}
+                key={index}
+                className='measure-button'
                 onClick={() => setSelectedTimeLineId(item.id)} 
                 dot={item?.id === displayedValues?.id 
-                            ? <ExclamationCircleOutlined className="timeline-clock-icon" /> 
+                            ? <CheckSquareOutlined className="timeline-clock-icon" /> 
                             : null}
               >
-                {moment.utc(item.timestamp).local().format(format)}
+                <span className={item?.id === displayedValues?.id ? 'selected-timeline' : ''}>
+                  {moment.utc(item.timestamp).local().format(format)}
+                </span>
               </Timeline.Item>
             )}
           </Timeline>

src/pages/Measure/View.jsx

@@ -6,6 +6,7 @@ const renderSwitchableColumn = (column, itm) => {
   if(column.render) {
     return ( 
       <Form.Item
+        key={column.dataIndex}
         name={column.dataIndex}
         style={{margin: 0}}
         rules={column.formItemRules}
@@ -15,12 +16,12 @@ const renderSwitchableColumn = (column, itm) => {
     )
   }
 
-  return <p className='m-5px-auto'>{itm[column.dataIndex]}</p>
+  return <p key={column.title} className='m-5px'>{itm[column.dataIndex]}</p>
 }
 
 export const View = ({columns, item}) => {
   if (!item || !columns?.length)
-    return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE}/>
+    return <Empty key='empty' image={Empty.PRESENTED_IMAGE_SIMPLE}/>
 
   const colsCount = 3
   const viewItems = columns.map( (column, i) => {
@@ -29,6 +30,7 @@ export const View = ({columns, item}) => {
 
     return <>
       <GridItem 
+        key={column.dataIndex}
         row={row} 
         col={colb*2 + 1}
         style={{border:'1px solid lightgrey'}}
@@ -37,13 +39,15 @@ export const View = ({columns, item}) => {
       </GridItem>
 
       <GridItem 
+        key={column.title}
         row={row} 
         col={colb*2 + 2}
         style={{border:'1px solid lightgrey', 
                 justifyContent:'right', 
                 marginRight:'16px', 
                 fontWeight:'bold', 
-                textAlign:'right'}}
+                textAlign:'right',
+                padding: 0}}
       >
         {renderSwitchableColumn(column, item)}
       </GridItem>

src/pages/Measure/columnsCommon.js

@@ -42,4 +42,10 @@ export const numericColumnOptions = {
 export const textColumnOptions = {
   editable:true, 
   input:<TextArea/>, 
-  width:'20rem'}
+  width:'20rem',
+  formItemRules: [
+    {
+      required: true,
+      message: `Введите текст`
+    },
+  ],}

src/pages/Measure/index.jsx

@@ -19,12 +19,16 @@ export default function Measure({idWell}){
 
   const updateCurrentValues = () => invokeWebApiWrapperAsync(async()=>{
     const measures = await MeasureService.getHisory(idWell)   
+    setIsMeasuresUpdating(false)
 
     const fluids = measures.filter(el => el.idCategory === 1)
+    drillingFluidDefaultData.timestamp = new Date().toISOString()
     setFluidValues(fluids.length ? fluids : [drillingFluidDefaultData])
     const muds = measures.filter(el => el.idCategory === 2)
+    mudDiagramDefaultData.timestamp = new Date().toISOString()
     setMudValues(muds.length ? muds : [mudDiagramDefaultData])
     const nnbs = measures.filter(el => el.idCategory === 3)
+    nnbDefaultData.timestamp = new Date().toISOString()
     setNnbValues(nnbs.length ? nnbs : [nnbDefaultData])
   }
   ,setShowLoader
@@ -40,7 +44,7 @@ export default function Measure({idWell}){
         title='Замер бурового раствора'
         columns={columnsDrillingFluid}
         values={fluidValues}
-        updateMeasuresDelegate = {() => setIsMeasuresUpdating(true)}
+        updateMeasuresFunc = {() => setIsMeasuresUpdating(true)}
       />
       <MeasureTable 
         idWell={idWell}
@@ -48,7 +52,7 @@ export default function Measure({idWell}){
         title='Шламограмма'
         columns={columnsMudDiagram}
         values={mudValues}
-        updateMeasuresDelegate = {() => setIsMeasuresUpdating(true)}
+        updateMeasuresFunc = {() => setIsMeasuresUpdating(true)}
       />
       <MeasureTable 
         idWell={idWell}
@@ -56,7 +60,7 @@ export default function Measure({idWell}){
         title='ННБ'
         columns={columnsNnb}
         values={nnbValues}
-        updateMeasuresDelegate = {() => setIsMeasuresUpdating(true)}
+        updateMeasuresFunc = {() => setIsMeasuresUpdating(true)}
       />
     </LoaderPortal>
   </>

src/styles/measure.css

@@ -20,17 +20,12 @@ input {
     cursor: pointer;
 }
 
-.last-measure-button {
-    height: 10px;
-    color: red;
+.selected-timeline {
+    font-weight: bold;
 }
 
-.last-measure-button:hover {
-    cursor: pointer;
-}
-
-.m-5px-auto {
-    margin: 5px auto;
+.m-5px {
+    margin: 5px 5px;
 }
 
 .mt-12px {