CF2-49: Added values to table inputs while 'Measures' table update

src/pages/Measure/MeasureTable.jsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react'
-import { Button, Form, Timeline } from 'antd'
+import { Button, Form, Input, Timeline } from 'antd'
 import moment from 'moment'
 import { ExclamationCircleOutlined } from '@ant-design/icons'
 import { View } from  './View'
@@ -44,12 +44,18 @@ export const MeasureTable = ({idWell, idCategory, title, columns, values, update
 
   useEffect(() => {
     let switchableColumns = []
+
     isTableEditing && editingActionName !== 'Удалить'
-      ? switchableColumns = createEditingColumns(columns, () => <input className='w-100'></input>)
+      ? switchableColumns = createEditingColumns(columns, () => <Input className='w-100' />)
       : switchableColumns = createEditingColumns(columns, null)
 
+    if(editingActionName === 'Редактировать')
+      measuresForm.setFieldsValue(displayedValues.data);
+    else if(editingActionName === 'Добавить')
+      measuresForm.resetFields()
+
     setEditingColumns(switchableColumns)
-  }, [isTableEditing, columns, editingActionName])
+  }, [isTableEditing, columns, editingActionName, displayedValues.data, measuresForm])
 
   const buttonsConfig = [
     {name:'Добавить', key:'add'}, 
@@ -60,14 +66,14 @@ export const MeasureTable = ({idWell, idCategory, title, columns, values, update
   const createButtons = (config, onClickDelegate) => {
     return (
       <div className='w-300px mt-12px'>
-        {config.map(c => {
+        {config.map(conf => {
           return (
             <Button 
-              key={c.key} 
+              key={conf.key} 
               className='w-100' 
               onClick={onClickDelegate}
             >
-              {c.name}
+              {conf.name}
             </Button>
           )
         })}
@@ -75,7 +81,7 @@ export const MeasureTable = ({idWell, idCategory, title, columns, values, update
     )
   }
 
-  const crudButtons = createButtons(buttonsConfig, (e)=> {
+  const crudButtons = createButtons(buttonsConfig, (e) => {
     setEditingActionName(e.target.innerText)
     setIsTableEditing(true)
   })
@@ -103,10 +109,6 @@ export const MeasureTable = ({idWell, idCategory, title, columns, values, update
     </div>
   
   let handleSubmitMeasuresForm = async (formData) => {
-    // if(isTableEditing)
-    //   measuresForm.setFieldsValue({
-    //     ...displayedValues
-    //   });
     measuresForm.validateFields()
 
     const measureParams = {
@@ -162,7 +164,7 @@ export const MeasureTable = ({idWell, idCategory, title, columns, values, update
             onFinish={handleSubmitMeasuresForm}
           >
             <View
-              item={displayedValues?.data ?? []}
+              item={displayedValues.data}
               columns={editingColumns}
             />
           </Form>

src/pages/Measure/View.jsx

@@ -31,10 +31,7 @@ export const View = ({columns, item}) => {
       <GridItem 
         row={row} 
         col={colb*2 + 1}
-        style={{background:'#00000005', 
-                //width: '300px',
-                border:'1px solid black'
-              }}
+        style={{border:'1px solid lightgrey'}}
       >
         {column.title}
       </GridItem>
@@ -42,9 +39,7 @@ export const View = ({columns, item}) => {
       <GridItem 
         row={row} 
         col={colb*2 + 2}
-        style={{background:'#00000005',
-                //width: '150px',
-                border:'1px solid black', 
+        style={{border:'1px solid lightgrey', 
                 justifyContent:'right', 
                 marginRight:'16px', 
                 fontWeight:'bold', 

src/styles/measure.css

@@ -1,3 +1,7 @@
+input {
+    font-weight:bold;
+}
+
 .w-300px {
     width: 300px;
 }