CF2-49: Added switch measure table state (normal/editing)

src/pages/Measure/MeasureTable.jsx

@@ -1,54 +1,105 @@
-import { useState, useEffect } from 'react'
+import { useState, useEffect } from "react"
-import { Table, Button, Modal } from 'antd'
+import { Button, Timeline } from 'antd'
-import { HourglassOutlined } from '@ant-design/icons'
+import moment from 'moment'
-import LoaderPortal from '../../components/LoaderPortal'
+import { ExclamationCircleOutlined } from '@ant-design/icons'
-import { invokeWebApiWrapperAsync } from '../../components/factory'
+import { View } from  './View'
-import { MeasureService } from '../../services/api'
+import '../../styles/index.css'
-import { Editor } from './Editor'
+import '../../styles/measure.css'
 
-export const MeasureTable = ({idWell, idCategory, title, columns}) => {
+const format='YYYY.MM.DD HH:mm'
-  const [showLoader, setShowLoader] = useState(false)
-  const [showEditor, setShowEditor] = useState(false)
-  const [lastData, setLastData] = useState({})
 
-  const update = ()=>invokeWebApiWrapperAsync(async()=>{
+export const MeasureTable = ({title, columns, values}) => {
-    const data = await MeasureService.getLast(idWell, idCategory)
+  var defaultDisplay = values && values.length
-    setLastData(data)
+                       ? values[values.length-1] 
+                       : []
+
+  const [displayedValues, setDisplayedValues] = useState([]);
+  const [editingColumns, setEditingColumns] = useState(columns);
+  const [isTableEditing, setIsTableEditing] = useState(false);
+
+  useEffect(() => {
+    setDisplayedValues(defaultDisplay)
+  }, [defaultDisplay])
+
+  useEffect(() => {
+    let switchableColumns = []
+    if(isTableEditing) {
+      switchableColumns = columns.map(col =>
+        ({ render: () => <input className='w-100'></input>,
+          ...col
+        })
+      )
+    } else {
+      switchableColumns = columns.map(col =>
+        ({ render: null,
+          ...col
+        })
+      )
+    }
+
+    setEditingColumns(switchableColumns)
+  }, [isTableEditing])
+
+  const createButtons = (buttonNames, buttonContainerStyle, isEditing) => {
+    return <div className={buttonContainerStyle}>
+              {buttonNames.map(name =>
+                <Button key={name} className='w-100' onClick={()=> setIsTableEditing(isEditing)}>{name}</Button>
+              )}
+            </div>
   }
-  , setShowLoader
-  , "не удалось загрузить")
 
-  useEffect(update, [idWell, idCategory])
+  const crudButtons = 
+    <div className='w-300px mt-12px'>
+      <Button key='add' className='w-100' onClick={()=> setIsTableEditing(true)}>Добавить</Button>
+      <Button key='edit' className='w-100' onClick={()=> setIsTableEditing(true)}>Редактировать</Button>
+      <Button key='delete' className='w-100' onClick={()=> setIsTableEditing(true)}>Удалить</Button>
+    </div>
 
-  const timestamp = lastData ? new Date(lastData?.timestamp).toLocaleString() : '-'
+  const confirmButtons = 
+    <div className='w-300px d-flex mt-12px'>
+      <Button key='confirm' className='w-100' onClick={()=> setIsTableEditing(false)}>Да</Button>
+      <Button key='decline' className='w-100' onClick={()=> setIsTableEditing(false)}>Нет</Button>
+    </div>
 
-  return <LoaderPortal show={showLoader}>
+  return <> 
-    <h3>{title}</h3>
-    <span>Дата: {timestamp}</span>
     &nbsp;
-    <Button 
+    <h3>{title}</h3>
-      onClick={() => setShowEditor(true)}
+    &nbsp;
-      icon={<HourglassOutlined/>}>История</Button>  
+    <div className='d-flex'>
-    <Table
+      <div className='flex-direction-column'>
-      style={{marginTop:16}}
+        <div className='d-flex button-container'>
-      bordered
+          {isTableEditing 
-      dataSource = {[lastData?.data]}
+            ? confirmButtons
-      columns = {columns}
+            : crudButtons
-      scroll={{ x: 400, y: 600 }}/>
+          }
-    <Modal
+        </div>
-        title={title}
+
-        centered
+        <div className='measure-dates mt-20px'>
-        visible={showEditor}
+          <Timeline className='mt-12px ml-10px'>
-        onOk={() => setShowEditor(false)}
+            {values.map((item, index) => 
-        onCancel={() => setShowEditor(false)}
+              <Timeline.Item 
-        width="95%"
+                key={item.id}
-        footer={null}
+                className={index === values.length-1 
-        >
+                           ? 'last-measure-button' 
-      <Editor
+                           : 'measure-button'}
-        idWell={idWell}
+                onClick={() => setDisplayedValues(values.find(el => el.id === item.id))} 
-        idCategory={idCategory} 
+                dot={item.id === displayedValues.id 
-        columns = {columns}
+                            ? <ExclamationCircleOutlined className="timeline-clock-icon" /> 
-        onUpdate={update}/>
+                            : null} 
-    </Modal>
+                value={moment.utc(item.timestamp).local().format(format)}
-  </LoaderPortal>
+              >
+                {moment.utc(item.timestamp).local().format(format)}
+              </Timeline.Item>
+            )}
+          </Timeline>
+        </div>
+      </div>
+      <div className='w-100'>
+        <View
+          item={displayedValues.data}
+          columns={editingColumns}
+        />
+      </div>
+    </div>
+  </> 
 }

src/pages/Measure/MeasureTable2.jsx

@@ -1,59 +0,0 @@
-import { useState, useEffect } from "react"
-import { Button, Timeline } from 'antd'
-import moment from 'moment'
-import { ClockCircleOutlined } from '@ant-design/icons'
-import { View } from  './View'
-import '../../styles/index.css'
-import '../../styles/measure.css'
-
-const format='YYYY.MM.DD HH:mm'
-
-export const MeasureTable2 = ({title, columns, values}) => {
-  var defaultDisplay = values && values.length > 1 
-                       ? values[values.length-1] 
-                       : []
-
-  const [displayedValues, setDisplayedValues] = useState([]);
-
-  useEffect(() => {
-    setDisplayedValues(defaultDisplay)
-  }, [defaultDisplay])
-
-  return <> 
-    &nbsp;
-    <h3>{title}</h3>
-    &nbsp;
-    <div className='d-flex'>
-      <div className='fd-column'>
-        <div className='mt-8px'>
-          <Button className='w-100'>Добавить</Button>
-          <Button className='w-100'>Редактировать</Button>
-          <Button className='w-100'>Удалить</Button>
-        </div>
-        <div className='measure-dates mt-20px'>
-          <Timeline className='mt-8px ml-10px'>
-            {values.map((item, index) => 
-                <Timeline.Item 
-                  key={item.id}
-                  className='measure-button'
-                  onClick={() => setDisplayedValues(values.find(el => el.id === item.id))} 
-                  dot={index === values.length - 1 
-                        ? <ClockCircleOutlined className="timeline-clock-icon" /> 
-                        : null} 
-                  value={moment.utc(item.timestamp).local().format(format)}
-                >
-                  {moment.utc(item.timestamp).local().format(format)}
-                </Timeline.Item>
-            )}
-          </Timeline>
-        </div>
-      </div>
-      <div className='w-100'>
-        <View
-          item={displayedValues.data}
-          columns={columns}
-        />
-      </div>
-    </div>
-  </> 
-}

src/pages/Measure/MeasureTableOld.jsx

@@ -0,0 +1,54 @@
+import { useState, useEffect } from 'react'
+import { Table, Button, Modal } from 'antd'
+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'
+
+export const MeasureTable = ({idWell, idCategory, title, columns}) => {
+  const [showLoader, setShowLoader] = useState(false)
+  const [showEditor, setShowEditor] = useState(false)
+  const [lastData, setLastData] = useState({})
+
+  const update = ()=>invokeWebApiWrapperAsync(async()=>{
+    const data = await MeasureService.getLast(idWell, idCategory)
+    setLastData(data)
+  }
+  , setShowLoader
+  , "не удалось загрузить")
+
+  useEffect(update, [idWell, idCategory])
+
+  const timestamp = lastData ? new Date(lastData?.timestamp).toLocaleString() : '-'
+
+  return <LoaderPortal show={showLoader}>
+    <h3>{title}</h3>
+    <span>Дата: {timestamp}</span>
+    &nbsp;
+    <Button 
+      onClick={() => setShowEditor(true)}
+      icon={<HourglassOutlined/>}>История</Button>  
+    <Table
+      style={{marginTop:16}}
+      bordered
+      dataSource = {[lastData?.data]}
+      columns = {columns}
+      scroll={{ x: 400, y: 600 }}/>
+    <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

@@ -15,6 +15,7 @@ export const View = ({columns, item}) => {
           row={row} 
           col={colb*2 + 1}
           style={{background:'#00000005', 
+                  //width: '300px',
                   border:'1px solid black'
                 }}
         >
@@ -23,7 +24,8 @@ export const View = ({columns, item}) => {
         <GridItem 
           row={row} 
           col={colb*2 + 2}
-          style={{background:'#00000005', 
+          style={{background:'#00000005',
+                  //width: '150px',
                   border:'1px solid black', 
                   justifyContent:'right', 
                   marginRight:'16px', 

src/pages/Measure/index.jsx

@@ -5,9 +5,7 @@ import { invokeWebApiWrapperAsync } from '../../components/factory'
 import { MeasureService } from '../../services/api'
 import { columnsNnb } from './columnsNnb'
 import LoaderPortal from '../../components/LoaderPortal'
-//import moment from 'moment'
+import { MeasureTable } from './MeasureTable'
-//import { MeasureTable } from './MeasureTable'
-import { MeasureTable2 } from './MeasureTable2'
 
 export default function Measure({idWell}){
   const [showLoader, setShowLoader] = useState(false)
@@ -16,19 +14,13 @@ export default function Measure({idWell}){
   const [nnbValues, setNnbValues] = useState([])
 
   const updateCurrentValues = () => invokeWebApiWrapperAsync(async()=>{
-    // const data = await MeasureService.getAllLast(idWell)
+    const measures = await MeasureService.getHisory(idWell)   
 
-    // const fluids = data?.filter(value => value.idCategory === 1)
+    const fluids = measures.filter(el => el.idCategory === 1)
-    // setFluidValues(fluids ?? [])
-    // const muds = data?.filter(value => value.idCategory === 2)
-    // setMudValues(muds ?? [])
-    // const nnbs = data?.filter(value => value.idCategory === 3)
-    // setNnbValues(nnbs ?? [])
-    const fluids = await MeasureService.getHisory(idWell, 1)
     setFluidValues(fluids ?? [])
-    const muds = await MeasureService.getHisory(idWell, 2)
+    const muds = measures.filter(el => el.idCategory === 2)
     setMudValues(muds ?? [])
-    const nnbs = await MeasureService.getHisory(idWell, 3)
+    const nnbs = measures.filter(el => el.idCategory === 3)
     setNnbValues(nnbs ?? [])
   }
   ,setShowLoader
@@ -38,17 +30,17 @@ export default function Measure({idWell}){
 
   return <>  
     <LoaderPortal show={showLoader}>
-      <MeasureTable2
+      <MeasureTable
         title='Замер бурового раствора'
         columns={columnsDrillingFluid}
         values={fluidValues}
       />
-      <MeasureTable2 
+      <MeasureTable 
         title='Шламограмма'
         columns={columnsMudDiagram}
         values={mudValues}
       />
-      <MeasureTable2 
+      <MeasureTable 
         title='ННБ'
         columns={columnsNnb}
         values={nnbValues}

src/styles/index.css

@@ -11,7 +11,7 @@ body {
   display: flex;
 }
 
-.fd-column {
+.flex-direction-column {
   flex-direction: column;
 }
 

src/styles/measure.css

@@ -1,4 +1,14 @@
+.w-300px {
+    width: 300px;
+}
+
+.button-container {
+    height: 100px;
+    align-items: center;
+}
+
 .measure-dates {
+    height: calc(100% - 130px);
     overflow-y: scroll;
 }
 
@@ -6,8 +16,17 @@
     cursor: pointer;
 }
 
-.mt-8px {
+.last-measure-button {
-    margin-top: 8px;
+    height: 10px;
+    color: red;
+}
+
+.last-measure-button:hover {
+    cursor: pointer;
+}
+
+.mt-12px {
+    margin-top: 12px;
 }
 
 .ml-10px {