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;
}