diff --git a/src/pages/Measure/MeasureTable.jsx b/src/pages/Measure/MeasureTable.jsx index e1337d7..eb4714c 100644 --- a/src/pages/Measure/MeasureTable.jsx +++ b/src/pages/Measure/MeasureTable.jsx @@ -10,12 +10,10 @@ import '../../styles/measure.css' const format='YYYY.MM.DD HH:mm' -export const MeasureTable = ({idWell, idCategory, title, columns, values, updateMeasuresDelegate}) => { - var defaultDisplay = values && values.length - ? values[values.length-1] - : [] +export const MeasureTable = ({idWell, idCategory, title, columns, values, updateMeasures}) => { const [showLoader, setShowLoader] = useState(false); + const [selectedTimeLineId, setSelectedTimeLineId] = useState(0) const [displayedValues, setDisplayedValues] = useState([]); const [editingColumns, setEditingColumns] = useState(columns); const [isTableEditing, setIsTableEditing] = useState(false); @@ -23,6 +21,36 @@ export const MeasureTable = ({idWell, idCategory, title, columns, values, update const [measuresForm] = Form.useForm(); + const createEditingColumns = (cols, renderDelegate) => + cols.map(col => + ({ render: renderDelegate, + ...col + }) + ) + + useEffect(() => { + let valuesToDisplay = [] + + if(selectedTimeLineId === 0) { + valuesToDisplay = values.length + ? values[values.length-1] + : [] + } else { + valuesToDisplay = values.find(el => el.id === selectedTimeLineId) + } + + setDisplayedValues(valuesToDisplay) + }, [selectedTimeLineId, values]) + + useEffect(() => { + let switchableColumns = [] + isTableEditing && editingActionName !== 'Удалить' + ? switchableColumns = createEditingColumns(columns, () => ) + : switchableColumns = createEditingColumns(columns, null) + + setEditingColumns(switchableColumns) + }, [isTableEditing, columns, editingActionName]) + const buttonsConfig = [ {name:'Добавить', key:'add'}, {name:'Редактировать', key:'edit'}, @@ -60,7 +88,7 @@ export const MeasureTable = ({idWell, idCategory, title, columns, values, update if(editingActionName === 'Удалить'){ setShowLoader(true) await MeasureService.markAsDelete(idWell, displayedValues.id) - updateMeasuresDelegate() + updateMeasures() setShowLoader(false) setIsTableEditing(false) } else { @@ -73,27 +101,6 @@ export const MeasureTable = ({idWell, idCategory, title, columns, values, update - - const createEditingColumns = (cols, renderDelegate) => - cols.map(col => - ({ render: renderDelegate, - ...col - }) - ) - - useEffect(() => { - setDisplayedValues(defaultDisplay) - }, [defaultDisplay]) - - useEffect(() => { - let switchableColumns = [] - isTableEditing && editingActionName !== 'Удалить' - ? switchableColumns = createEditingColumns(columns, () => ) - : switchableColumns = createEditingColumns(columns, null) - - setEditingColumns(switchableColumns) - }, [isTableEditing, columns, editingActionName]) - let handleSubmitMeasuresForm = async (formData) => { // if(isTableEditing) @@ -112,7 +119,7 @@ export const MeasureTable = ({idWell, idCategory, title, columns, values, update setShowLoader(true) await MeasureService.insert(idWell, measureParams) setIsTableEditing(false) - updateMeasuresDelegate() + updateMeasures() setShowLoader(false) } @@ -137,8 +144,8 @@ export const MeasureTable = ({idWell, idCategory, title, columns, values, update className={index === values.length-1 ? 'last-measure-button' : 'measure-button'} - onClick={() => setDisplayedValues(values.find(el => el.id === item.id))} - dot={item.id === displayedValues.id + onClick={() => setSelectedTimeLineId(item.id)} + dot={item?.id === displayedValues?.id ? : null} > @@ -155,7 +162,7 @@ export const MeasureTable = ({idWell, idCategory, title, columns, values, update onFinish={handleSubmitMeasuresForm} >