diff --git a/src/pages/Measure/InclinometryTable.jsx b/src/pages/Measure/InclinometryTable.jsx index fe04957..ed55e38 100644 --- a/src/pages/Measure/InclinometryTable.jsx +++ b/src/pages/Measure/InclinometryTable.jsx @@ -1,29 +1,38 @@ -import React, { useEffect, useState } from 'react' import { Modal } from 'antd' +import { memo, useEffect, useState } from 'react' + import { Table } from '../../components/Table' + import { formatDate } from './MeasureTable' import { v } from './columnsCommon' -export const InclinometryTable = React.memo(({ group, visible, onClose }) => { +const tableScroll = { y: 400, x: 1300 } + +const dateColumn = { + title: 'Дата', + key: 'date', + dataIndex: 'date', + render: formatDate, + fixed: 'left', + width: '8rem', +} + +export const InclinometryTable = memo(({ group, visible, onClose }) => { const [tableColumns, setTableColumns] = useState([]) const [tableData, setTableData] = useState([]) - useEffect(() => { - setTableColumns([{ - title: 'Дата', - key: 'date', - dataIndex: 'date', - render: (item) => formatDate(item), - fixed: 'left', - width: '8rem', - }, - ...(group?.columns?.map((column) => ({...column, title: v(column.title)})) ?? []) - ]) - }, [group?.columns]) + useEffect(() => setTableColumns([ + dateColumn, + ...(group?.columns?.map((column) => ({ + ...column, + title: v(column.title) + })) ?? []) + ]), [group?.columns]) - useEffect(() => { - setTableData(group?.values?.map(row => ({ date: row.timestamp, ...row.data }))) - }, [group?.values]) + useEffect(() => setTableData(group?.values?.map(row => ({ + date: row.timestamp, + ...row.data + }))), [group?.values]) return !group?.columns ? null : ( { ) }) - -export default InclinometryTable diff --git a/src/pages/Measure/MeasureTable.jsx b/src/pages/Measure/MeasureTable.jsx index 04fbff9..71025c6 100644 --- a/src/pages/Measure/MeasureTable.jsx +++ b/src/pages/Measure/MeasureTable.jsx @@ -1,6 +1,6 @@ +import moment from 'moment' import { useState, useEffect } from 'react' import { Button, Form, Input, Popconfirm, Timeline } from 'antd' -import moment from 'moment' import { CheckSquareOutlined, EditOutlined, @@ -9,15 +9,21 @@ import { CloseCircleOutlined, DeleteOutlined } from '@ant-design/icons' -import { View } from './View' + import LoaderPortal from '../../components/LoaderPortal' import { MeasureService } from '../../services/api' -import '../../styles/index.css' -import '../../styles/measure.css' import { invokeWebApiWrapperAsync } from '../../components/factory' -const dateFormat = 'YYYY.MM.DD HH:mm' -export const formatDate = (date) => date ? moment.utc(date).local().format(dateFormat) : 'Нет данных' +import { View } from './View' + +import '../../styles/index.css' +import '../../styles/measure.css' + +export const formatDate = (date) => date ? + moment.utc(date).local().format('YYYY.MM.DD HH:mm') : 'Нет данных' + +const createEditingColumns = (cols, renderDelegate) => + cols.map(col => ({ render: renderDelegate, ...col })) export const MeasureTable = ({idWell, group, updateMeasuresFunc, additionalButtons}) => { const [showLoader, setShowLoader] = useState(false) @@ -29,11 +35,10 @@ export const MeasureTable = ({idWell, group, updateMeasuresFunc, additionalButto const [measuresForm] = Form.useForm() - const createEditingColumns = (cols, renderDelegate) => - cols.map(col => ({ render: renderDelegate, ...col })) - useEffect(() => { - const data = [group.defaultValue].concat(group.values ?? []) + let data = [group.defaultValue] + if (group?.values?.length > 0) + data = group.values setData(data) setDisplayedValues(data.at(-1)) }, [group.defaultValue, group.values]) @@ -136,11 +141,11 @@ export const MeasureTable = ({idWell, group, updateMeasuresFunc, additionalButto key={index} className={'measure-button'} onClick={() => setDisplayedValues(item)} - dot={item?.id !== displayedValues?.id ? null : + dot={item?.id === displayedValues?.id && } > - + {formatDate(item.timestamp)} diff --git a/src/pages/Measure/View.jsx b/src/pages/Measure/View.jsx index a42cbbe..04d204b 100644 --- a/src/pages/Measure/View.jsx +++ b/src/pages/Measure/View.jsx @@ -1,61 +1,50 @@ -import React from 'react' +import { memo, Fragment } from 'react' import { Empty, Form } from 'antd' + import { Grid, GridItem } from '../../components/Grid' + import '../../styles/index.css' +import '../../styles/measure.css' const colsCount = 3 -const headerCellStyle = { - border:'1px solid lightgrey' -} +export const View = memo(({ columns, item }) => !item || !columns?.length ? ( + +) : ( + + {columns.map((column, i) => ( + + + {column.title} + -const valueCellStyle = { - border:'1px solid lightgrey', - justifyContent:'right', - marginRight:'16px', - fontWeight:'bold', - textAlign:'right', - padding: 0 -} - -export const View = React.memo(({columns, item}) => { - if (!item || !columns?.length) - return - - return ( - - {columns.map((column, i) => ( - <> - - {column.title} - - - - {column.render ? ( - - {column.render(item[column.dataIndex])} - - ) : ( -

{item[column.dataIndex]}

- )} -
- - ))} -
- ) -}) \ No newline at end of file + + {column.render ? ( + + {column.render(item[column.dataIndex])} + + ) : ( +

+ {item[column.dataIndex]} +

+ )} +
+
+ ))} +
+)) diff --git a/src/pages/Measure/columnsCommon.js b/src/pages/Measure/columnsCommon.js index 8e2a9fc..8db90bd 100644 --- a/src/pages/Measure/columnsCommon.js +++ b/src/pages/Measure/columnsCommon.js @@ -1,27 +1,12 @@ -import React from 'react' import { Input } from 'antd' + import { RegExpIsFloat } from '../../components/Table' -const { TextArea } = Input +import '../../styles/measure.css' export const v = (text) => ( -
- +
+ {text}
@@ -42,7 +27,7 @@ export const numericColumnOptions = { export const textColumnOptions = { editable: true, - input: