From 05b891b15f3608a7ed4bacbbf3864a1b8928e59d Mon Sep 17 00:00:00 2001 From: KharchenkoVV Date: Tue, 5 Oct 2021 17:55:20 +0500 Subject: [PATCH] CF2-49: Added switch measure table state (normal/editing) --- src/pages/Measure/MeasureTable.jsx | 143 +++++++++++++++++--------- src/pages/Measure/MeasureTable2.jsx | 59 ----------- src/pages/Measure/MeasureTableOld.jsx | 54 ++++++++++ src/pages/Measure/View.jsx | 4 +- src/pages/Measure/index.jsx | 24 ++--- src/styles/index.css | 2 +- src/styles/measure.css | 23 ++++- 7 files changed, 184 insertions(+), 125 deletions(-) delete mode 100644 src/pages/Measure/MeasureTable2.jsx create mode 100644 src/pages/Measure/MeasureTableOld.jsx diff --git a/src/pages/Measure/MeasureTable.jsx b/src/pages/Measure/MeasureTable.jsx index 7aab0f0..0eb8a55 100644 --- 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: () => , + ...col + }) + ) + } else { + switchableColumns = columns.map(col => + ({ render: null, + ...col + }) + ) + } + + setEditingColumns(switchableColumns) + }, [isTableEditing]) + + const createButtons = (buttonNames, buttonContainerStyle, isEditing) => { + return
+ {buttonNames.map(name => + + )} +
} - , setShowLoader - , "не удалось загрузить") - useEffect(update, [idWell, idCategory]) + const crudButtons = +
+ + + +
- const timestamp = lastData ? new Date(lastData?.timestamp).toLocaleString() : '-' + const confirmButtons = +
+ + +
- return -

{title}

- Дата: {timestamp} + return <>   - - - setShowEditor(false)} - onCancel={() => setShowEditor(false)} - width="95%" - footer={null} - > - - - +

{title}

+   +
+
+
+ {isTableEditing + ? confirmButtons + : crudButtons + } +
+ +
+ + {values.map((item, index) => + setDisplayedValues(values.find(el => el.id === item.id))} + dot={item.id === displayedValues.id + ? + : null} + value={moment.utc(item.timestamp).local().format(format)} + > + {moment.utc(item.timestamp).local().format(format)} + + )} + +
+
+
+ +
+
+ } \ No newline at end of file diff --git a/src/pages/Measure/MeasureTable2.jsx b/src/pages/Measure/MeasureTable2.jsx deleted file mode 100644 index 5c6a04a..0000000 --- a/src/pages/Measure/MeasureTable2.jsx +++ /dev/null @@ -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 <> -   -

{title}

-   -
-
-
- - - -
-
- - {values.map((item, index) => - setDisplayedValues(values.find(el => el.id === item.id))} - dot={index === values.length - 1 - ? - : null} - value={moment.utc(item.timestamp).local().format(format)} - > - {moment.utc(item.timestamp).local().format(format)} - - )} - -
-
-
- -
-
- -} \ No newline at end of file diff --git a/src/pages/Measure/MeasureTableOld.jsx b/src/pages/Measure/MeasureTableOld.jsx new file mode 100644 index 0000000..7aab0f0 --- /dev/null +++ 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 +

{title}

+ Дата: {timestamp} +   + +
+ setShowEditor(false)} + onCancel={() => setShowEditor(false)} + width="95%" + footer={null} + > + + + +} \ No newline at end of file diff --git a/src/pages/Measure/View.jsx b/src/pages/Measure/View.jsx index 0c12887..abc8af8 100644 --- 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}) => { 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 <> - - -