Добавлен метод makeTableAction на замену makeActionHandler

src/components/Table/EditableTable.jsx

@@ -1,223 +1,267 @@
-import { memo, useCallback, useState, useEffect } from 'react'
+import { memo, useCallback, useState, useEffect, useMemo } from 'react'
 import { Form, Button, Popconfirm } from 'antd'
 import { EditOutlined, SaveOutlined, PlusOutlined, CloseCircleOutlined, DeleteOutlined } from '@ant-design/icons'
 
 import { invokeWebApiWrapperAsync } from '@components/factory'
+import { hasPermission } from '@utils'
 
 import { Table } from '.'
 import { EditableCell } from './EditableCell'
 
 const newRowKeyValue = 'newRow'
 
-const actions = [
+const actions = {
-  [['insert'], (data) => [data]],
+    insert: (data, idWell) => [idWell, data],
-  [['insertRange'], (data) => [[data].flat(1)]],
+    insertRange: (data, idWell) => [idWell, [data].flat(1)],
-  [['edit', 'update', 'put'], (data) => data.id && [data.id, data]],
+    update: (data, idWell, idRecord) => [idWell, idRecord && data.id, data],
-  [['delete'], (data) => data.id && [data.id]],
+    delete: (data, idWell) => [idWell, data.id],
-]
+}
 
-export const makeActionHandler = (action, { idWell, service, setLoader, errorMsg, onComplete }, recordParser, actionName) => service && action && (
+export const makeTableAction = ({
-  (record) => invokeWebApiWrapperAsync(
+    service,
-    async () => {
+    permission,
-      const addIdWell = (...params) => idWell ? [idWell, ...params] : params
+    action,
-      if (typeof recordParser === 'function')
+    actionName,
-        record = recordParser(record)
+    recordParser,
-
+    idWell,
-      const actionId = actions.findIndex((elm) => elm[0].includes(action))
+    idRecord = false,
-      const params = actions[actionId]?.[1](record)
-
-      if (params) await service[action](...addIdWell(...params))
-      await onComplete?.()
-    },
     setLoader,
-    errorMsg,
+    errorMsg = 'Не удалось выполнить операцию',
-    actionName
+    onComplete,
-  )
+}) => hasPermission(permission) && service && action && (
+    (record) => invokeWebApiWrapperAsync(
+        async () => {
+            const data = recordParser?.(record) ?? record
+            const params = actions[action]?.(data, idWell, idRecord).filter(Boolean)
+            if (params?.length > 0)
+                await service[action](...params)
+            await onComplete?.()
+        },
+        setLoader,
+        errorMsg,
+        actionName
+    )
+)
+
+// TODO: Remove makeActionHandler
+const actions2 = {
+    insert: (data) => [data],
+    insertRange: (data) => [[data].flat(1)],
+    update: (data) => data.id && [data.id, data],
+    delete: (data) => data.id && [data.id],
+}
+
+/**
+ * @deprecated используйте {@link makeTableAction}
+ */
+export const makeActionHandler = (action, { idWell, service, setLoader, errorMsg, onComplete }, recordParser, actionName) => service && action && (
+    (record) => invokeWebApiWrapperAsync(
+        async () => {
+            const addIdWell = (...params) => idWell ? [idWell, ...params] : params
+            if (typeof recordParser === 'function')
+                record = recordParser(record)
+
+            const params = actions2[action]?.(record)
+
+            if (params) await service[action](...addIdWell(...params))
+            await onComplete?.()
+        },
+        setLoader,
+        errorMsg,
+        actionName
+    )
 )
 
 export const tryAddKeys = (items) => {
-  if (!items?.length || !items[0])
+    if (!items?.length || !items[0])
-    return []
+        return []
-  if (items[0].key)
+    if (items[0].key)
-    return items
+        return items
-  return items.map((item, index) => ({...item, key: item.key ?? item.id ?? index }))
+    return items.map((item, index) => ({...item, key: item.key ?? item.id ?? index }))
 }
 
+const EditableTableComponents = { body: { cell: EditableCell }}
+
+/**
+ * @param onChange - Метод вызывается со всем dataSource с измененными элементами после любого действия
+ * @param onRowAdd - Метод вызывается с новой добавленной записью. Если метод не определен, то кнопка добавления строки не показывается
+ * @param onRowEdit - Метод вызывается с новой отредактированной записью. Если метод не поределен, то кнопка редактирования строки не показывается
+ * @param onRowDelete - Метод вызывается с удаленной записью. Если метод не поределен, то кнопка удаления строки не показывается
+ */
 export const EditableTable = memo(({
-  columns,
+    columns,
-  dataSource,
+    dataSource,
-  onChange, // Метод вызывается со всем dataSource с измененными элементами после любого действия
+    onChange,
-  onRowAdd, // Метод вызывается с новой добавленной записью. Если метод не определен, то кнопка добавления строки не показывается
+    onRowAdd,
-  onRowEdit, // Метод вызывается с новой отредактированной записью. Если метод не поределен, то кнопка редактирования строки не показывается
+    onRowEdit,
-  onRowDelete, // Метод вызывается с удаленной записью. Если метод не поределен, то кнопка удаления строки не показывается
+    onRowDelete,
-  additionalButtons,
+    additionalButtons,
-  buttonsWidth,
+    buttonsWidth,
-  ...otherTableProps
+    ...otherTableProps
 }) => {
 
-  const [form] = Form.useForm()
+    const [form] = Form.useForm()
-  const [data, setData] = useState(tryAddKeys(dataSource))
+    const [data, setData] = useState(tryAddKeys(dataSource))
-  const [editingKey, setEditingKey] = useState('')
+    const [editingKey, setEditingKey] = useState('')
 
-  useEffect(() => {
+    const onAdd = useMemo(() => typeof onRowAdd === 'function' ? onRowAdd : makeTableAction(onRowAdd), [onRowAdd])
-    setData(tryAddKeys(dataSource))
+    const onEdit = useMemo(() => typeof onRowEdit === 'function' ? onRowEdit : makeTableAction(onRowEdit), [onRowEdit])
-  }, [dataSource])
+    const onDelete = useMemo(() => typeof onRowDelete === 'function' ? onRowDelete : makeTableAction(onRowDelete), [onRowDelete])
 
-  const isEditing = useCallback((record) => record?.key === editingKey, [editingKey])
+    const isEditing = useCallback((record) => record?.key === editingKey, [editingKey])
 
-  const edit = useCallback((record) => {
+    const edit = useCallback((record) => {
-    form.setFieldsValue({...record})
+        form.setFieldsValue({...record})
-    setEditingKey(record.key)
+        setEditingKey(record.key)
-  }, [form])
+    }, [form])
 
-  const cancel = useCallback(() => {
+    const cancel = useCallback(() => {
-    if (editingKey === newRowKeyValue) {
+        if (editingKey === newRowKeyValue) {
-      const newData = [...data]
+            const newData = [...data]
-      const index = newData.findIndex((item) => newRowKeyValue === item.key)
+            const index = newData.findIndex((item) => newRowKeyValue === item.key)
-      newData.splice(index, 1)
+            newData.splice(index, 1)
-      setData(newData)
+            setData(newData)
-    }
-    setEditingKey('')
-  }, [data, editingKey])
-
-  const addNewRow = useCallback(async () => {
-    let newRow = {
-      ...form.initialValues,
-      key:newRowKeyValue
-    }
-
-    const newData = [newRow, ...data]
-    setData(newData)
-    edit(newRow)
-  }, [data, edit, form.initialValues])
-
-  const save = useCallback(async (record) => {
-    try {
-      const row = await form.validateFields()
-      const newData = [...data]
-      const index = newData.findIndex((item) => record.key === item.key)
-      const item = newData[index]
-      const newItem = { ...item, ...row }
-
-      newData.splice(index, 1, newItem)
-
-      if (item.key === newRowKeyValue)
-        item.key = newRowKeyValue + newData.length
-
-      const isAdding = editingKey === newRowKeyValue
-      setEditingKey('')
-      setData(newData)
-
-      if (isAdding)
-        try {
-          onRowAdd(newItem)
-        } catch (err) {
-          console.log('callback onRowAdd fault:', err)
         }
-      else
+        setEditingKey('')
-        try {
+    }, [data, editingKey])
-          onRowEdit(newItem)
+
-        } catch (err) {
+    const addNewRow = useCallback(async () => {
-          console.log('callback onRowEdit fault:', err)
+        let newRow = {
+            ...form.initialValues,
+            key:newRowKeyValue
         }
 
-      try {
+        const newData = [newRow, ...data]
+        setData(newData)
+        edit(newRow)
+    }, [data, edit, form.initialValues])
+
+    const save = useCallback(async (record) => {
+        try {
+            const row = await form.validateFields()
+            const newData = [...data]
+            const index = newData.findIndex((item) => record.key === item.key)
+            const item = newData[index]
+            const newItem = { ...item, ...row }
+
+            newData.splice(index, 1, newItem)
+
+            if (item.key === newRowKeyValue)
+                item.key = newRowKeyValue + newData.length
+
+            const isAdding = editingKey === newRowKeyValue
+            setEditingKey('')
+            setData(newData)
+
+            if (isAdding)
+                try {
+                    onAdd(newItem)
+                } catch (err) {
+                    console.log('callback onRowAdd fault:', err)
+                }
+            else
+                try {
+                    onEdit(newItem)
+                } catch (err) {
+                    console.log('callback onRowEdit fault:', err)
+                }
+
+            try {
+                onChange?.(newData)
+            } catch (err) {
+                console.log('callback onChange fault:', err)
+            }
+        } catch (errInfo) {
+            console.log('Validate Failed:', errInfo)
+        }
+    }, [data, editingKey, form, onChange, onAdd, onEdit])
+
+    const deleteRow = useCallback((record) => {
+        const newData = [...data]
+        const index = newData.findIndex((item) => record.key === item.key)
+
+        newData.splice(index, 1)
+        setData(newData)
+
+        onDelete(record)
         onChange?.(newData)
-      } catch (err) {
+    }, [data, onChange, onDelete])
-        console.log('callback onChange fault:', err)
-      }
 
-    } catch (errInfo) {
+    const handleColumn = useCallback((col) => {
-      console.log('Validate Failed:', errInfo)
+        if (col.children)
-    }
+            col.children = col.children.map(handleColumn)
-  }, [data, editingKey, form, onChange, onRowAdd, onRowEdit])
 
-  const deleteRow = useCallback((record) => {
+        if (!col.editable)
-    const newData = [...data]
+            return col
-    const index = newData.findIndex((item) => record.key === item.key)
 
-    newData.splice(index, 1)
+        return {
-    setData(newData)
+            ...col,
+            onCell: (record) => ({
+                ...col.onCell?.(record),
+                editing: isEditing(record),
+                record,
+                dataIndex: col.dataIndex ?? col.key,
+                key: col.key ?? col.dataIndex,
+                input: col.input,
+                isRequired: col.isRequired,
+                title: col.title,
+                datatype: col.datatype,
+                formItemClass: col.formItemClass,
+                formItemRules: col.formItemRules,
+                initialValue: col.initialValue,
+            }),
+        }
+    }, [isEditing])
 
-    onRowDelete(record)
+    const operationColumn = useMemo(() => ({
-    onChange?.(newData)
+        width: buttonsWidth ?? 82,
-  }, [data, onChange, onRowDelete])
+        title: !!onAdd && (
+            <Button
+                onClick={addNewRow}
+                disabled={editingKey !== ''}
+                icon={<PlusOutlined/>}
+            />
+        ),
+        dataIndex: 'operation',
+        render: (_, record) => isEditing(record) ? (
+            <span>
+                <Button onClick={() => save(record)} icon={<SaveOutlined/>}/>
+                <Button onClick={cancel} icon={<CloseCircleOutlined/>}/>
+                {additionalButtons?.(record, editingKey)}
+            </span>
+        ) : (
+            <span>
+                {onEdit && (
+                    <Button
+                        disabled={editingKey !== ''}
+                        onClick={() => edit(record)}
+                        icon={<EditOutlined/>}
+                    />
+                )}
+                {onDelete && (
+                    <Popconfirm title={'Удалить?'} onConfirm={() => deleteRow(record)}>
+                        <Button icon={<DeleteOutlined/>}/>
+                    </Popconfirm>
+                )}
+                {additionalButtons?.(record, editingKey)}
+            </span>
+        ),
+    }), [onAdd, onEdit, onDelete, isEditing, editingKey, save, cancel, edit, deleteRow])
 
-  const operationColumn = {
+    const mergedColumns = useMemo(() => [...columns.map(handleColumn), operationColumn], [columns, handleColumn, operationColumn])
-    width: buttonsWidth ?? 82,
-    title: !!onRowAdd && (
-      <Button
-        onClick={addNewRow}
-        disabled={editingKey !== ''}
-        icon={<PlusOutlined/>}
-      />
-    ),
-    dataIndex: 'operation',
-    render: (_, record) => isEditing(record) ? (
-      <span>
-        <Button onClick={() => save(record)} icon={<SaveOutlined/>}/>
-        <Button onClick={cancel} icon={<CloseCircleOutlined/>}/>
-        {additionalButtons?.(record, editingKey)}
-      </span>
-    ) : (
-      <span>
-        {onRowEdit && (
-          <Button
-            disabled={editingKey !== ''}
-            onClick={() => edit(record)}
-            icon={<EditOutlined/>}
-          />
-        )}
-        {onRowDelete && (
-          <Popconfirm title={'Удалить?'} onConfirm={() => deleteRow(record)}>
-            <Button icon={<DeleteOutlined/>}/>
-          </Popconfirm>
-        )}
-        {additionalButtons?.(record, editingKey)}
-      </span>
-    ),
-  }
 
-  const handleColumn = useCallback((col) => {
+    useEffect(() => {
-    if (col.children)
+        setData(tryAddKeys(dataSource))
-      col.children = col.children.map(handleColumn)
+    }, [dataSource])
 
-    if (!col.editable)
+    return (
-      return col
+        <Form form={form}>
-
+            <Table
-    return {
+                components={EditableTableComponents}
-      ...col,
+                columns={mergedColumns}
-      onCell: (record) => ({
+                dataSource={data}
-        ...col.onCell?.(record),
+                {...otherTableProps}
-        editing: isEditing(record),
+            />
-        record,
+        </Form>
-        dataIndex: col.dataIndex ?? col.key,
+    )
-        key: col.key ?? col.dataIndex,
-        input: col.input,
-        isRequired: col.isRequired,
-        title: col.title,
-        datatype: col.datatype,
-        formItemClass: col.formItemClass,
-        formItemRules: col.formItemRules,
-        initialValue: col.initialValue,
-      }),
-    }
-  }, [isEditing])
-
-  const mergedColumns = [...columns.map(handleColumn), operationColumn]
-
-  return (
-    <Form form={form}>
-      <Table
-        components={{
-          body: {
-            cell: EditableCell,
-          },
-        }}
-        columns={mergedColumns}
-        dataSource={data}
-        {...otherTableProps}
-      />
-    </Form>
-  )
 })

src/components/Table/index.tsx

@@ -1,5 +1,5 @@
 export { makeDateSorter, makeNumericSorter, makeStringSorter, makeTimeSorter } from './sorters'
-export { EditableTable, makeActionHandler } from './EditableTable'
+export { EditableTable, makeActionHandler, makeTableAction } from './EditableTable'
 export { DatePickerWrapper } from './DatePickerWrapper'
 export { TimePickerWrapper } from './TimePickerWrapper'
 export { DateRangeWrapper } from './DateRangeWrapper'