forked from ddrilling/asb_cloud_front
Начата типизация EditableTable
This commit is contained in:
parent
41515fdb7e
commit
44d11d964d
124
src/components/Table/EditableTable.jsx → src/components/Table/EditableTable.tsx
Executable file → Normal file
124
src/components/Table/EditableTable.jsx → src/components/Table/EditableTable.tsx
Executable file → Normal file
@ -1,39 +1,72 @@
|
||||
import { memo, useCallback, useState, useEffect, useMemo } from 'react'
|
||||
import { Form, Button, Popconfirm } from 'antd'
|
||||
import { memo, useCallback, useState, useEffect, useMemo, Dispatch, SetStateAction, ReactNode } from 'react'
|
||||
import { Form, Button, Popconfirm, TableProps } 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 { Table, TableColumns } from '.'
|
||||
import { EditableCell } from './EditableCell'
|
||||
import { ColumnsType } from 'antd/lib/table'
|
||||
import { ArrayElement } from '@asb/utils/types'
|
||||
|
||||
const newRowKeyValue = 'newRow'
|
||||
|
||||
const actions = {
|
||||
type CrudObject = {
|
||||
id?: string | number
|
||||
key?: string | number
|
||||
}
|
||||
|
||||
interface CrudService<T extends CrudObject> {
|
||||
insert: (((data: T) => Promise<number>) | ((idWell: number, data: T) => Promise<number>))
|
||||
insertRange: (((data: T[]) => Promise<number>) | ((idWell: number, data: T[]) => Promise<number>))
|
||||
update: (((data: T) => Promise<number> | ((idWell: number, data: T) => Promise<number>) | ((idWell: number, id: number, data: T) => Promise<number>)))
|
||||
delete: (((id: number) => Promise<number>) | ((idWell: number, id: number) => Promise<number>))
|
||||
new(...args: any[]): any
|
||||
}
|
||||
|
||||
type TableAction<T extends CrudObject> = Record<keyof CrudService<T>, (data: T, idWell?: number, idRecord?: number) => any[]>
|
||||
|
||||
const makeActions = <T extends CrudObject>(): TableAction<T> => ({
|
||||
insert: (data, idWell) => [idWell, data],
|
||||
insertRange: (data, idWell) => [idWell, [data].flat(1)],
|
||||
update: (data, idWell, idRecord) => [idWell, idRecord && data.id, data],
|
||||
delete: (data, idWell) => [idWell, data.id],
|
||||
})
|
||||
|
||||
type TableActionProps<T extends CrudObject, S extends CrudService<T>> = {
|
||||
service?: S
|
||||
permission?: string | string[]
|
||||
action?: keyof CrudService<T>
|
||||
actionName?: string
|
||||
recordParser?: (record: T) => T
|
||||
idWell?: number
|
||||
idRecord?: number
|
||||
setLoader?: Dispatch<SetStateAction<boolean>>
|
||||
errorMsg?: string
|
||||
onComplete?: () => Promise<void>
|
||||
}
|
||||
|
||||
export const makeTableAction = ({
|
||||
export const makeTableAction = <T extends CrudObject, S extends CrudService<T>>({
|
||||
service,
|
||||
permission,
|
||||
action,
|
||||
actionName,
|
||||
recordParser,
|
||||
idWell,
|
||||
idRecord = false,
|
||||
idRecord,
|
||||
setLoader,
|
||||
errorMsg = 'Не удалось выполнить операцию',
|
||||
onComplete,
|
||||
}) => hasPermission(permission) && service && action && (
|
||||
(record) => invokeWebApiWrapperAsync(
|
||||
}: TableActionProps<T, S>) => {
|
||||
if (!hasPermission(permission) || !service || !action) return async (record: T) => {}
|
||||
const actions = makeActions<T>()
|
||||
return async (record: T) => await invokeWebApiWrapperAsync(
|
||||
async () => {
|
||||
const data = recordParser?.(record) ?? record
|
||||
const params = actions[action]?.(data, idWell, idRecord).filter(Boolean)
|
||||
if (params?.length > 0)
|
||||
//@ts-ignore
|
||||
await service[action](...params)
|
||||
await onComplete?.()
|
||||
},
|
||||
@ -41,25 +74,34 @@ export const makeTableAction = ({
|
||||
errorMsg,
|
||||
{ actionName }
|
||||
)
|
||||
)
|
||||
}
|
||||
|
||||
export const tryAddKeys = (items) => {
|
||||
if (!items?.length || !items[0])
|
||||
return []
|
||||
if (items[0].key)
|
||||
return items
|
||||
export const tryAddKeys = <T extends object & Record<string, any>>(items?: T[]): T[] => {
|
||||
if (!items?.length || !items[0]) return items ?? []
|
||||
if (items[0].key) return items
|
||||
return items.map((item, index) => ({...item, key: item.key ?? item.id ?? index }))
|
||||
}
|
||||
|
||||
const EditableTableComponents = { body: { cell: EditableCell }}
|
||||
|
||||
export type EditableTableProps<T extends CrudObject, S extends CrudService<T>> = TableProps<T> & {
|
||||
columns: ColumnsType<T> & TableColumns<T>
|
||||
dataSource?: T[]
|
||||
onChange
|
||||
onRowAdd?: TableActionProps<T, S> | ((record: T) => Promise<void>)
|
||||
onRowEdit?: TableActionProps<T, S> | ((record: T) => Promise<void>)
|
||||
onRowDelete?: TableActionProps<T, S> | ((record: T) => Promise<void>)
|
||||
additionalButtons?: (record: T, editingKey: string | number) => ReactNode
|
||||
buttonsWidth
|
||||
}
|
||||
|
||||
/**
|
||||
* @param onChange - Метод вызывается со всем dataSource с измененными элементами после любого действия
|
||||
* @param onRowAdd - Метод вызывается с новой добавленной записью. Если метод не определен, то кнопка добавления строки не показывается
|
||||
* @param onRowEdit - Метод вызывается с новой отредактированной записью. Если метод не поределен, то кнопка редактирования строки не показывается
|
||||
* @param onRowDelete - Метод вызывается с удаленной записью. Если метод не поределен, то кнопка удаления строки не показывается
|
||||
*/
|
||||
export const EditableTable = memo(({
|
||||
const _EditableTable = <T extends CrudObject, S extends CrudService<T>>({
|
||||
columns,
|
||||
dataSource,
|
||||
onChange,
|
||||
@ -69,19 +111,20 @@ export const EditableTable = memo(({
|
||||
additionalButtons,
|
||||
buttonsWidth,
|
||||
...otherTableProps
|
||||
}) => {
|
||||
}: EditableTableProps<T, S>) => {
|
||||
|
||||
const [form] = Form.useForm()
|
||||
const [data, setData] = useState(tryAddKeys(dataSource))
|
||||
const [editingKey, setEditingKey] = useState('')
|
||||
const [data, setData] = useState<T[]>(tryAddKeys(dataSource))
|
||||
const [editingKey, setEditingKey] = useState<string | number>('')
|
||||
|
||||
const onAdd = useMemo(() => onRowAdd && typeof onRowAdd !== 'function' ? makeTableAction(onRowAdd) : onRowAdd, [onRowAdd])
|
||||
const onEdit = useMemo(() => onRowEdit && typeof onRowEdit !== 'function' ? makeTableAction(onRowEdit) : onRowEdit, [onRowEdit])
|
||||
const onDelete = useMemo(() => onRowDelete && typeof onRowDelete !== 'function' ? makeTableAction(onRowDelete) : onRowDelete, [onRowDelete])
|
||||
|
||||
const isEditing = useCallback((record) => record?.key === editingKey, [editingKey])
|
||||
const isEditing = useCallback((record: T) => record?.key === editingKey, [editingKey])
|
||||
|
||||
const edit = useCallback((record) => {
|
||||
const edit = useCallback((record: T) => {
|
||||
if (!record.key) return
|
||||
form.setFieldsValue({...record})
|
||||
setEditingKey(record.key)
|
||||
}, [form])
|
||||
@ -97,17 +140,12 @@ export const EditableTable = memo(({
|
||||
}, [data, editingKey])
|
||||
|
||||
const addNewRow = useCallback(async () => {
|
||||
let newRow = {
|
||||
...form.initialValues,
|
||||
key:newRowKeyValue
|
||||
}
|
||||
|
||||
const newData = [newRow, ...data]
|
||||
setData(newData)
|
||||
const newRow: any = { key: newRowKeyValue } // TODO: Исправить тип
|
||||
setData((prevData) => [newRow, ...prevData])
|
||||
edit(newRow)
|
||||
}, [data, edit, form.initialValues])
|
||||
}, [edit])
|
||||
|
||||
const save = useCallback(async (record) => {
|
||||
const save = useCallback(async (record: T) => {
|
||||
try {
|
||||
const row = await form.validateFields()
|
||||
const newData = [...data]
|
||||
@ -126,13 +164,13 @@ export const EditableTable = memo(({
|
||||
|
||||
if (isAdding)
|
||||
try {
|
||||
onAdd(newItem)
|
||||
onAdd?.(newItem)
|
||||
} catch (err) {
|
||||
console.log('callback onRowAdd fault:', err)
|
||||
}
|
||||
else
|
||||
try {
|
||||
onEdit(newItem)
|
||||
onEdit?.(newItem)
|
||||
} catch (err) {
|
||||
console.log('callback onRowEdit fault:', err)
|
||||
}
|
||||
@ -147,18 +185,18 @@ export const EditableTable = memo(({
|
||||
}
|
||||
}, [data, editingKey, form, onChange, onAdd, onEdit])
|
||||
|
||||
const deleteRow = useCallback((record) => {
|
||||
const deleteRow = useCallback((record: T) => {
|
||||
const newData = [...data]
|
||||
const index = newData.findIndex((item) => record.key === item.key)
|
||||
|
||||
newData.splice(index, 1)
|
||||
setData(newData)
|
||||
|
||||
onDelete(record)
|
||||
onDelete?.(record)
|
||||
onChange?.(newData)
|
||||
}, [data, onChange, onDelete])
|
||||
|
||||
const handleColumn = useCallback((col) => {
|
||||
const handleColumn = useCallback((col: any) => { // TODO: Исправить тип
|
||||
if (col.children)
|
||||
col.children = col.children.map(handleColumn)
|
||||
|
||||
@ -167,7 +205,7 @@ export const EditableTable = memo(({
|
||||
|
||||
return {
|
||||
...col,
|
||||
onCell: (record) => ({
|
||||
onCell: (record: T) => ({
|
||||
...col.onCell?.(record),
|
||||
editing: isEditing(record),
|
||||
record,
|
||||
@ -194,7 +232,7 @@ export const EditableTable = memo(({
|
||||
/>
|
||||
),
|
||||
dataIndex: 'operation',
|
||||
render: (_, record) => isEditing(record) ? (
|
||||
render: (_: any, record: T) => isEditing(record) ? (
|
||||
<span>
|
||||
<Button onClick={() => save(record)} icon={<SaveOutlined/>}/>
|
||||
<Button onClick={cancel} icon={<CloseCircleOutlined/>}/>
|
||||
@ -219,15 +257,13 @@ export const EditableTable = memo(({
|
||||
),
|
||||
}), [onAdd, onEdit, onDelete, isEditing, editingKey, save, cancel, edit, deleteRow])
|
||||
|
||||
const mergedColumns = useMemo(() => [...columns.map(handleColumn), operationColumn], [columns, handleColumn, operationColumn])
|
||||
const mergedColumns: TableColumns<T> = useMemo(() => [...columns.map(handleColumn), operationColumn], [columns, handleColumn, operationColumn])
|
||||
|
||||
useEffect(() => {
|
||||
setData(tryAddKeys(dataSource))
|
||||
}, [dataSource])
|
||||
useEffect(() => setData(tryAddKeys(dataSource)), [dataSource])
|
||||
|
||||
return (
|
||||
<Form form={form}>
|
||||
<Table
|
||||
<Table<T>
|
||||
components={EditableTableComponents}
|
||||
columns={mergedColumns}
|
||||
dataSource={data}
|
||||
@ -235,4 +271,8 @@ export const EditableTable = memo(({
|
||||
/>
|
||||
</Form>
|
||||
)
|
||||
})
|
||||
}
|
||||
|
||||
export const EditableTable = memo(_EditableTable) as typeof _EditableTable
|
||||
|
||||
export default EditableTable
|
Loading…
Reference in New Issue
Block a user