diff --git a/src/pages/Measure/MeasureTable.jsx b/src/pages/Measure/MeasureTable.jsx index 0eb8a55..67b712a 100644 --- a/src/pages/Measure/MeasureTable.jsx +++ b/src/pages/Measure/MeasureTable.jsx @@ -1,8 +1,9 @@ -import { useState, useEffect } from "react" -import { Button, Timeline } from 'antd' +import { useState, useEffect } from 'react' +import { Button, Form, Timeline } from 'antd' import moment from 'moment' import { ExclamationCircleOutlined } from '@ant-design/icons' import { View } from './View' +import LoaderPortal from '../../components/LoaderPortal' import '../../styles/index.css' import '../../styles/measure.css' @@ -13,9 +14,58 @@ export const MeasureTable = ({title, columns, values}) => { ? values[values.length-1] : [] + const [showLoader, setShowLoader] = useState(false); const [displayedValues, setDisplayedValues] = useState([]); const [editingColumns, setEditingColumns] = useState(columns); const [isTableEditing, setIsTableEditing] = useState(false); + const [editingActionName, setEditingActionName] = useState(''); + + const [measuresForm] = Form.useForm(); + + const buttonsConfig = [ + {name:'Добавить', key:'add'}, + {name:'Редактировать', key:'edit'}, + {name:'Удалить', key:'delete'} + ] + + const createButtons = (config, onClickDelegate) => { + return ( +
+ {config.map(c => { + return ( + + ) + })} +
+ ) + } + + const crudButtons = createButtons(buttonsConfig, (e)=> { + setEditingActionName(e.target.innerText) + setIsTableEditing(true) + }) + + const confirmButtons = +
+

{editingActionName} данные?

+
+ + +
+
+ + const createEditingColumns = (cols, renderDelegate) => + cols.map(col => + ({ render: renderDelegate, + ...col + }) + ) useEffect(() => { setDisplayedValues(defaultDisplay) @@ -23,44 +73,26 @@ export const MeasureTable = ({title, columns, values}) => { useEffect(() => { let switchableColumns = [] - if(isTableEditing) { - switchableColumns = columns.map(col => - ({ render: () => , - ...col - }) - ) - } else { - switchableColumns = columns.map(col => - ({ render: null, - ...col - }) - ) - } + isTableEditing && editingActionName !== 'Удалить' + ? switchableColumns = createEditingColumns(columns, () => ) + : switchableColumns = createEditingColumns(columns, null) setEditingColumns(switchableColumns) }, [isTableEditing]) - const createButtons = (buttonNames, buttonContainerStyle, isEditing) => { - return
- {buttonNames.map(name => - - )} -
+ + let handleSubmitMeasuresForm = async (formData) => { + // if(isTableEditing) + // measuresForm.setFieldsValue({ + // ...displayedValues + // }); + + measuresForm.validateFields() + + setShowLoader(true) + setShowLoader(false) } - const crudButtons = -
- - - -
- - const confirmButtons = -
- - -
- return <>  

{title}

@@ -85,8 +117,7 @@ export const MeasureTable = ({title, columns, values}) => { onClick={() => setDisplayedValues(values.find(el => el.id === item.id))} dot={item.id === displayedValues.id ? - : null} - value={moment.utc(item.timestamp).local().format(format)} + : null} > {moment.utc(item.timestamp).local().format(format)} @@ -95,10 +126,17 @@ export const MeasureTable = ({title, columns, values}) => {
- + +
+ + +
diff --git a/src/pages/Measure/View.jsx b/src/pages/Measure/View.jsx index abc8af8..419caad 100644 --- a/src/pages/Measure/View.jsx +++ b/src/pages/Measure/View.jsx @@ -1,5 +1,22 @@ -import { Empty } from 'antd'; +import { Empty, Form } from 'antd'; import {Grid, GridItem} from '../../components/Grid' +import '../../styles/index.css' + +const renderSwitchableColumn = (column, itm) => { + if(column.render) { + return ( + + {column.render(itm[column.dataIndex])} + + ) + } + + return

{itm[column.dataIndex]}

+} export const View = ({columns, item}) => { if (!item || !columns?.length) @@ -11,29 +28,30 @@ export const View = ({columns, item}) => { const colb = i % colsCount return <> - - {column.title} - - - {column.render ? column.render(item[column.dataIndex]) : item[column.dataIndex]} - + + {column.title} + + + + {renderSwitchableColumn(column, item)} + }) diff --git a/src/styles/index.css b/src/styles/index.css index f64b70c..16aee1c 100644 --- a/src/styles/index.css +++ b/src/styles/index.css @@ -31,6 +31,10 @@ body { width: 100% } +.m-0 { + margin: 0; +} + .mt-8px { margin-top: 8px; } diff --git a/src/styles/measure.css b/src/styles/measure.css index 94d5be1..37ce2ac 100644 --- a/src/styles/measure.css +++ b/src/styles/measure.css @@ -25,6 +25,10 @@ cursor: pointer; } +.m-5px-auto { + margin: 5px auto; +} + .mt-12px { margin-top: 12px; }