CF2-49: Changed 'Measures' table crud buttons

src/pages/Measure/MeasureTable.jsx

@@ -1,7 +1,12 @@
 import { useState, useEffect } from 'react'
-import { Button, Form, Input, Timeline } from 'antd'
+import { Button, Form, Input, Popconfirm, Timeline } from 'antd'
 import moment from 'moment'
-import { CheckSquareOutlined } from '@ant-design/icons'
+import { CheckSquareOutlined, 
+  EditOutlined, 
+  SaveOutlined, 
+  PlusOutlined, 
+  CloseCircleOutlined, 
+  DeleteOutlined } from '@ant-design/icons'
 import { View } from  './View'
 import LoaderPortal from '../../components/LoaderPortal'
 import { MeasureService } from '../../services/api'
@@ -13,7 +18,7 @@ const format='YYYY.MM.DD HH:mm'
 export const MeasureTable = ({idWell, idCategory, title, columns, values, updateMeasuresFunc}) => {
 
   const [showLoader, setShowLoader] = useState(false);
-  const [selectedTimeLineId, setSelectedTimeLineId] = useState(0)
+  const [selectedTimeLineId, setSelectedTimeLineId] = useState(undefined)
   const [displayedValues, setDisplayedValues] = useState([]);
   const [editingColumns, setEditingColumns] = useState(columns);
   const [isTableEditing, setIsTableEditing] = useState(false);
@@ -31,13 +36,12 @@ export const MeasureTable = ({idWell, idCategory, title, columns, values, update
   useEffect(() => {
     let valuesToDisplay = []
 
-    if(selectedTimeLineId === 0) {
-      valuesToDisplay = values.length
+    if(!selectedTimeLineId)
+      valuesToDisplay = values && values.length
                         ? values[values.length-1] 
                         : []
-    } else {
+    else
       valuesToDisplay = values.find(el => el.id === selectedTimeLineId)
-    }
 
     setDisplayedValues(valuesToDisplay)
   }, [selectedTimeLineId, values])
@@ -45,77 +49,85 @@ export const MeasureTable = ({idWell, idCategory, title, columns, values, update
   useEffect(() => {
     let switchableColumns = []
 
-    isTableEditing && editingActionName !== 'Удалить'
-      ? switchableColumns = createEditingColumns(columns, () => <Input className='w-100' />)
+    isTableEditing && editingActionName !== 'delete'
+      ? switchableColumns = createEditingColumns(columns, () => <Input className='w-100 measure-input' />)
       : switchableColumns = createEditingColumns(columns, null)
 
-    if(editingActionName === 'Редактировать')
+    if(editingActionName === 'edit')
       measuresForm.setFieldsValue(displayedValues.data);
-    else if(editingActionName === 'Добавить')
+    else if(editingActionName === 'add')
       measuresForm.resetFields()
 
     setEditingColumns(switchableColumns)
-  }, [isTableEditing, columns, editingActionName, displayedValues.data, measuresForm])
+  }, [isTableEditing, columns, editingActionName, displayedValues?.data, measuresForm])
 
-  const buttonsConfig = [
-    {name:'Добавить', key:'add'}, 
-    {name:'Редактировать', key:'edit'}, 
-    {name:'Удалить', key:'delete'}
-  ]
-
-  const createButtons = (config, onClickDelegate) => {
-    return (
-      <div className='w-300px mt-12px'>
-        {config.map(conf => {
-          return (
-            <Button 
-              key={conf.key} 
-              className='w-100' 
-              onClick={onClickDelegate}
-              disabled={conf.key !== 'add' && displayedValues.isDefaultData 
-                                      ? true 
-                                      : false}
-            >
-              {conf.name}
-            </Button>
-          )
-        })}
-      </div>
-    )
+  const markMeasuresAsDeleted = async () => {
+    setShowLoader(true)
+    await MeasureService.markAsDelete(idWell, displayedValues.id)
+    updateMeasuresFunc()
+    setShowLoader(false)
+    setIsTableEditing(false)
   }
 
-  const crudButtons = createButtons(buttonsConfig, (e) => {
-    setEditingActionName(e.target.innerText)
-    setIsTableEditing(true)
-  })
+  const checkIsDataDefault = () =>
+    displayedValues?.isDefaultData ? true : false
+
+  const crudButtons = 
+    <div className='w-300px mt-8px'>
+      <Button 
+        key='add' 
+        className='w-33' 
+        onClick={() => {
+          setEditingActionName('add')
+          setIsTableEditing(true)
+        }}
+      >
+        <PlusOutlined />
+      </Button>
+      <Button 
+        key='edit' 
+        className='w-33' 
+        onClick={() => {
+          setEditingActionName('edit')
+          setIsTableEditing(true)
+        }}
+        disabled={checkIsDataDefault()}
+      >
+        <EditOutlined />
+      </Button>
+      <Popconfirm 
+        title="Удалить данные?" 
+        onConfirm={() => markMeasuresAsDeleted()}
+        disabled={checkIsDataDefault()}
+      >
+        <Button 
+          key='delete' 
+          onClick={() => {
+            setEditingActionName('delete')
+          }}
+          disabled={checkIsDataDefault()}
+        >
+            <DeleteOutlined style={{margin:'auto 28px'}}/>
+        </Button>
+      </Popconfirm>
+    </div>
 
   const confirmButtons = 
-    <div className='w-300px'>
-      <h3 style={{textAlign: 'center'}}>{editingActionName} данные?</h3>
-      <div className='d-flex mt-20px'>
+    <div className='w-300px mt-8px'>
+      <div className='d-flex'>
         <Button 
           key='confirm' 
-          className='w-100' 
-          onClick={async () => {
-            if(editingActionName === 'Удалить'){
-              setShowLoader(true)
-              await MeasureService.markAsDelete(idWell, displayedValues.id)
-              updateMeasuresFunc()
-              setShowLoader(false)
-              setIsTableEditing(false)
-            } else {
-              measuresForm.submit()
-            }
-          }}
+          className='w-50' 
+          onClick={() => { measuresForm.submit() }}
         >
-          Да
+          <SaveOutlined />
         </Button>
         <Button 
           key='decline' 
-          className='w-100' 
+          className='w-50' 
           onClick={()=> setIsTableEditing(false)}
         >
-          Нет
+          <CloseCircleOutlined />
         </Button>
       </div>
     </div>
@@ -132,9 +144,9 @@ export const MeasureTable = ({idWell, idCategory, title, columns, values, update
 
     setShowLoader(true)
 
-    if(editingActionName === 'Добавить') {
+    if(editingActionName === 'add') {
       await MeasureService.insert(idWell, measureParams)
-    } else if (editingActionName === 'Редактировать') {
+    } else if (editingActionName === 'edit') {
       measureParams.id = displayedValues.id
       measureParams.timestamp = displayedValues.timestamp
       await MeasureService.update(idWell, measureParams)
@@ -147,11 +159,11 @@ export const MeasureTable = ({idWell, idCategory, title, columns, values, update
 
   return <> 
     &nbsp;
-    <h3>{title}</h3>
+    <h2>{title}</h2>
     &nbsp;
     <div className='d-flex'>
       <div className='flex-direction-column'>
-        <div className='d-flex button-container'>
+        <div className='measure-buttons-container'>
           {isTableEditing 
             ? confirmButtons
             : crudButtons
@@ -184,7 +196,7 @@ export const MeasureTable = ({idWell, idCategory, title, columns, values, update
             onFinish={handleSubmitMeasuresForm}
           >
             <View
-              item={displayedValues.data}
+              item={displayedValues?.data ?? []}
               columns={editingColumns}
             />
           </Form>

src/styles/index.css

@@ -27,6 +27,14 @@ body {
   width: 15%
 }
 
+.w-33 {
+  width: 33%
+}
+
+.w-50 {
+  width: 50%
+}
+
 .w-100 {
   width: 100%
 }

src/styles/measure.css

@@ -1,4 +1,4 @@
-input {
+input.measure-input {
     font-weight:bold;
 }
 
@@ -6,13 +6,12 @@ input {
     width: 300px;
 }
 
-.button-container {
-    height: 100px;
-    align-items: center;
+.measure-buttons-container {
+    height: 30px;
 }
 
 .measure-dates {
-    height: calc(100% - 130px);
+    height: 160px;
     overflow-y: scroll;
 }