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

2021-10-05 17:55:20 +05:00 · 2021-10-05 17:55:20 +05:00 · 05b891b15f
commit 05b891b15f
parent 1cda800f18
7 changed files with 184 additions and 125 deletions
--- a/src/pages/Measure/MeasureTable.jsx
+++ b/src/pages/Measure/MeasureTable.jsx
@ -1,54 +1,105 @@
-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'
+import { useState, useEffect } from "react"
+import { Button, Timeline } from 'antd'
+import moment from 'moment'
+import { ExclamationCircleOutlined } from '@ant-design/icons'
+import { View } from  './View'
+import '../../styles/index.css'
+import '../../styles/measure.css'

-export const MeasureTable = ({idWell, idCategory, title, columns}) => {
-  const [showLoader, setShowLoader] = useState(false)
-  const [showEditor, setShowEditor] = useState(false)
-  const [lastData, setLastData] = useState({})
+const format='YYYY.MM.DD HH:mm'

-  const update = ()=>invokeWebApiWrapperAsync(async()=>{
-    const data = await MeasureService.getLast(idWell, idCategory)
-    setLastData(data)
+export const MeasureTable = ({title, columns, values}) => {
+  var defaultDisplay = values && values.length
+                       ? 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}>
-    <h3>{title}</h3>
-    <span>Дата: {timestamp}</span>
+  return <> 
    &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>
+    <h3>{title}</h3>
+    &nbsp;
+    <div className='d-flex'>
+      <div className='flex-direction-column'>
+        <div className='d-flex button-container'>
+          {isTableEditing 
+            ? confirmButtons
+            : crudButtons
+          }
+        </div>
+
+        <div className='measure-dates mt-20px'>
+          <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'}
+                onClick={() => setDisplayedValues(values.find(el => el.id === item.id))} 
+                dot={item.id === displayedValues.id 
+                            ? <ExclamationCircleOutlined 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={editingColumns}
+        />
+      </div>
+    </div>
+  </> 
 }
--- a/src/pages/Measure/MeasureTable2.jsx
+++ b/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>
-  </> 
-}
--- a/src/pages/Measure/MeasureTableOld.jsx
+++ b/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>
+}
--- a/src/pages/Measure/View.jsx
+++ b/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', 
--- a/src/pages/Measure/index.jsx
+++ b/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 { MeasureTable2 } from './MeasureTable2'
+import { MeasureTable } from './MeasureTable'

 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)
-    // 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)
+    const fluids = measures.filter(el => el.idCategory === 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}
--- a/src/styles/index.css
+++ b/src/styles/index.css
@ -11,7 +11,7 @@ body {
  display: flex;
 }

-.fd-column {
+.flex-direction-column {
  flex-direction: column;
 }

--- a/src/styles/measure.css
+++ b/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 {
-    margin-top: 8px;
+.last-measure-button {
+    height: 10px;
+    color: red;
+}
+
+.last-measure-button:hover {
+    cursor: pointer;
+}
+
+.mt-12px {
+    margin-top: 12px;
 }

 .ml-10px {