forked from ddrilling/asb_cloud_front
Compare commits
5 Commits
dev
...
feature/ed
Author | SHA1 | Date | |
---|---|---|---|
|
4ad6f91c8a | ||
|
32ec3c22d2 | ||
|
44d11d964d | ||
|
41515fdb7e | ||
|
89835f7f00 |
@ -12,6 +12,7 @@ export {
|
|||||||
makeNumericColumnPlanFact,
|
makeNumericColumnPlanFact,
|
||||||
makeNumericStartEnd,
|
makeNumericStartEnd,
|
||||||
makeNumericMinMax,
|
makeNumericMinMax,
|
||||||
|
makeNumericAvgRange,
|
||||||
} from './numeric'
|
} from './numeric'
|
||||||
export { makeColumnsPlanFact } from './plan_fact'
|
export { makeColumnsPlanFact } from './plan_fact'
|
||||||
export { makeSelectColumn } from './select'
|
export { makeSelectColumn } from './select'
|
||||||
|
@ -1,15 +1,15 @@
|
|||||||
|
import { ColumnFilterItem } from 'antd/lib/table/interface'
|
||||||
import { InputNumber } from 'antd'
|
import { InputNumber } from 'antd'
|
||||||
import { ReactNode } from 'react'
|
import { ReactNode } from 'react'
|
||||||
|
|
||||||
import { makeNumericSorter } from '../sorters'
|
import { makeNumericSorter } from '../sorters'
|
||||||
import makeColumn, { columnPropsOther, DataType, makeGroupColumn, RenderMethod } from '.'
|
import makeColumn, { columnPropsOther, DataType, makeGroupColumn, RenderMethod } from '.'
|
||||||
import { ColumnFilterItem, CompareFn } from 'antd/lib/table/interface'
|
|
||||||
|
|
||||||
export const RegExpIsFloat = /^[-+]?\d+\.?\d*$/
|
export const RegExpIsFloat = /^[-+]?\d+\.?\d*$/
|
||||||
|
|
||||||
type FilterMethod<T> = (value: string | number | boolean, record: DataType<T>) => boolean
|
type FilterMethod<T> = (value: string | number | boolean, record: DataType<T>) => boolean
|
||||||
|
|
||||||
export const makeNumericRender = <T extends unknown>(fixed?: number): RenderMethod<T> => (value: T) => {
|
export const makeNumericRender = <T,>(fixed?: number): RenderMethod<T> => (value: T) => {
|
||||||
let val = '-'
|
let val = '-'
|
||||||
if ((value ?? null) !== null && Number.isFinite(+value)) {
|
if ((value ?? null) !== null && Number.isFinite(+value)) {
|
||||||
val = (fixed ?? null) !== null
|
val = (fixed ?? null) !== null
|
||||||
@ -24,7 +24,7 @@ export const makeNumericRender = <T extends unknown>(fixed?: number): RenderMeth
|
|||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
export const makeNumericColumnOptions = <T extends unknown = any>(fixed?: number, sorterKey?: string): columnPropsOther<T> => ({
|
export const makeNumericColumnOptions = <T,>(fixed?: number, sorterKey?: string): columnPropsOther<T> => ({
|
||||||
editable: true,
|
editable: true,
|
||||||
initialValue: 0,
|
initialValue: 0,
|
||||||
width: 100,
|
width: 100,
|
||||||
@ -37,7 +37,7 @@ export const makeNumericColumnOptions = <T extends unknown = any>(fixed?: number
|
|||||||
render: makeNumericRender<T>(fixed),
|
render: makeNumericRender<T>(fixed),
|
||||||
})
|
})
|
||||||
|
|
||||||
export const makeNumericColumn = <T extends unknown = any>(
|
export const makeNumericColumn = <T,>(
|
||||||
title: ReactNode,
|
title: ReactNode,
|
||||||
key: string,
|
key: string,
|
||||||
filters?: ColumnFilterItem[],
|
filters?: ColumnFilterItem[],
|
||||||
@ -48,7 +48,7 @@ export const makeNumericColumn = <T extends unknown = any>(
|
|||||||
) => makeColumn(title, key, {
|
) => makeColumn(title, key, {
|
||||||
filters,
|
filters,
|
||||||
onFilter: filterDelegate ? filterDelegate(key) : undefined,
|
onFilter: filterDelegate ? filterDelegate(key) : undefined,
|
||||||
sorter: makeNumericSorter(key),
|
sorter: makeNumericSorter<T>(key),
|
||||||
width,
|
width,
|
||||||
input: <InputNumber style={{ width: '100%' }}/>,
|
input: <InputNumber style={{ width: '100%' }}/>,
|
||||||
render: renderDelegate ?? makeNumericRender<T>(2),
|
render: renderDelegate ?? makeNumericRender<T>(2),
|
||||||
@ -56,7 +56,7 @@ export const makeNumericColumn = <T extends unknown = any>(
|
|||||||
...other
|
...other
|
||||||
})
|
})
|
||||||
|
|
||||||
export const makeNumericColumnPlanFact = <T extends unknown = any>(
|
export const makeNumericColumnPlanFact = <T,>(
|
||||||
title: ReactNode,
|
title: ReactNode,
|
||||||
key: string,
|
key: string,
|
||||||
filters?: ColumnFilterItem[],
|
filters?: ColumnFilterItem[],
|
||||||
@ -68,7 +68,7 @@ export const makeNumericColumnPlanFact = <T extends unknown = any>(
|
|||||||
makeNumericColumn<T>('ф', key + 'Fact', filters, filterDelegate, renderDelegate, width),
|
makeNumericColumn<T>('ф', key + 'Fact', filters, filterDelegate, renderDelegate, width),
|
||||||
])
|
])
|
||||||
|
|
||||||
export const makeNumericStartEnd = <T extends unknown = any>(
|
export const makeNumericStartEnd = <T,>(
|
||||||
title: ReactNode,
|
title: ReactNode,
|
||||||
key: string,
|
key: string,
|
||||||
fixed: number,
|
fixed: number,
|
||||||
@ -77,11 +77,11 @@ export const makeNumericStartEnd = <T extends unknown = any>(
|
|||||||
renderDelegate?: RenderMethod<T>,
|
renderDelegate?: RenderMethod<T>,
|
||||||
width?: string | number,
|
width?: string | number,
|
||||||
) => makeGroupColumn(title, [
|
) => makeGroupColumn(title, [
|
||||||
makeNumericColumn<T>('старт', key + 'Start', filters, filterDelegate, renderDelegate, width, makeNumericColumnOptions(fixed, key + 'Start')),
|
makeNumericColumn<T>('старт', key + 'Start', filters, filterDelegate, renderDelegate, width, makeNumericColumnOptions<T>(fixed, key + 'Start')),
|
||||||
makeNumericColumn<T>('конец', key + 'End', filters, filterDelegate, renderDelegate, width, makeNumericColumnOptions(fixed, key + 'End'))
|
makeNumericColumn<T>('конец', key + 'End', filters, filterDelegate, renderDelegate, width, makeNumericColumnOptions<T>(fixed, key + 'End'))
|
||||||
])
|
])
|
||||||
|
|
||||||
export const makeNumericMinMax = <T extends unknown = any>(
|
export const makeNumericMinMax = <T,>(
|
||||||
title: ReactNode,
|
title: ReactNode,
|
||||||
key: string,
|
key: string,
|
||||||
fixed: number,
|
fixed: number,
|
||||||
@ -90,8 +90,22 @@ export const makeNumericMinMax = <T extends unknown = any>(
|
|||||||
renderDelegate?: RenderMethod<T>,
|
renderDelegate?: RenderMethod<T>,
|
||||||
width?: string | number,
|
width?: string | number,
|
||||||
) => makeGroupColumn(title, [
|
) => makeGroupColumn(title, [
|
||||||
makeNumericColumn<T>('мин', key + 'Min', filters, filterDelegate, renderDelegate, width, makeNumericColumnOptions(fixed, key + 'Min')),
|
makeNumericColumn<T>('мин', key + 'Min', filters, filterDelegate, renderDelegate, width, makeNumericColumnOptions<T>(fixed, key + 'Min')),
|
||||||
makeNumericColumn<T>('макс', key + 'Max', filters, filterDelegate, renderDelegate, width, makeNumericColumnOptions(fixed, key + 'Max')),
|
makeNumericColumn<T>('макс', key + 'Max', filters, filterDelegate, renderDelegate, width, makeNumericColumnOptions<T>(fixed, key + 'Max')),
|
||||||
|
])
|
||||||
|
|
||||||
|
export const makeNumericAvgRange = <T,>(
|
||||||
|
title: ReactNode,
|
||||||
|
dataIndex: string,
|
||||||
|
fixed: number,
|
||||||
|
filters: ColumnFilterItem[],
|
||||||
|
filterDelegate: (key: string | number) => FilterMethod<T>,
|
||||||
|
renderDelegate: RenderMethod<T>,
|
||||||
|
width: string
|
||||||
|
) => makeGroupColumn(title, [
|
||||||
|
makeNumericColumn<T>('мин', dataIndex + 'Min', filters, filterDelegate, renderDelegate, width, makeNumericColumnOptions<T>(fixed, dataIndex + 'Min')),
|
||||||
|
makeNumericColumn<T>('сред', dataIndex + 'Avg', filters, filterDelegate, renderDelegate, width, makeNumericColumnOptions<T>(fixed, dataIndex + 'Avg')),
|
||||||
|
makeNumericColumn<T>('макс', dataIndex + 'Max', filters, filterDelegate, renderDelegate, width, makeNumericColumnOptions<T>(fixed, dataIndex + 'Max'))
|
||||||
])
|
])
|
||||||
|
|
||||||
export default makeNumericColumn
|
export default makeNumericColumn
|
||||||
|
184
src/components/Table/EditableTable.jsx → src/components/Table/EditableTable.tsx
Executable file → Normal file
184
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 { memo, useCallback, useState, useEffect, useMemo, Dispatch, SetStateAction, ReactNode } from 'react'
|
||||||
import { Form, Button, Popconfirm } from 'antd'
|
import { Form, Button, Popconfirm, TableProps } from 'antd'
|
||||||
import { EditOutlined, SaveOutlined, PlusOutlined, CloseCircleOutlined, DeleteOutlined } from '@ant-design/icons'
|
import { EditOutlined, SaveOutlined, PlusOutlined, CloseCircleOutlined, DeleteOutlined } from '@ant-design/icons'
|
||||||
|
|
||||||
import { invokeWebApiWrapperAsync } from '@components/factory'
|
import { invokeWebApiWrapperAsync } from '@components/factory'
|
||||||
import { hasPermission } from '@utils'
|
import { hasPermission, isDev } from '@utils'
|
||||||
|
|
||||||
import { Table } from '.'
|
import { Table, TableColumns } from '.'
|
||||||
import { EditableCell } from './EditableCell'
|
import { EditableCell } from './EditableCell'
|
||||||
|
import { ColumnsType } from 'antd/lib/table'
|
||||||
|
import { ArrayElement } from '@asb/utils/types'
|
||||||
|
|
||||||
const newRowKeyValue = 'newRow'
|
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],
|
insert: (data, idWell) => [idWell, data],
|
||||||
insertRange: (data, idWell) => [idWell, [data].flat(1)],
|
insertRange: (data, idWell) => [idWell, [data].flat(1)],
|
||||||
update: (data, idWell, idRecord) => [idWell, idRecord && data.id, data],
|
update: (data, idWell, idRecord) => [idWell, idRecord && data.id, data],
|
||||||
delete: (data, idWell) => [idWell, data.id],
|
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,
|
service,
|
||||||
permission,
|
permission,
|
||||||
action,
|
action,
|
||||||
actionName,
|
actionName,
|
||||||
recordParser,
|
recordParser,
|
||||||
idWell,
|
idWell,
|
||||||
idRecord = false,
|
idRecord,
|
||||||
setLoader,
|
setLoader,
|
||||||
errorMsg = 'Не удалось выполнить операцию',
|
errorMsg = 'Не удалось выполнить операцию',
|
||||||
onComplete,
|
onComplete,
|
||||||
}) => hasPermission(permission) && service && action && (
|
}: TableActionProps<T, S>) => {
|
||||||
(record) => invokeWebApiWrapperAsync(
|
if (!hasPermission(permission) || !service || !action) return async (record: T) => {}
|
||||||
|
const actions = makeActions<T>()
|
||||||
|
return async (record: T) => await invokeWebApiWrapperAsync(
|
||||||
async () => {
|
async () => {
|
||||||
const data = recordParser?.(record) ?? record
|
const data = recordParser?.(record) ?? record
|
||||||
const params = actions[action]?.(data, idWell, idRecord).filter(Boolean)
|
const params = actions[action]?.(data, idWell, idRecord).filter(Boolean)
|
||||||
if (params?.length > 0)
|
if (params?.length > 0)
|
||||||
|
//@ts-ignore
|
||||||
await service[action](...params)
|
await service[action](...params)
|
||||||
await onComplete?.()
|
await onComplete?.()
|
||||||
},
|
},
|
||||||
@ -41,25 +74,34 @@ export const makeTableAction = ({
|
|||||||
errorMsg,
|
errorMsg,
|
||||||
{ actionName }
|
{ actionName }
|
||||||
)
|
)
|
||||||
)
|
}
|
||||||
|
|
||||||
export const tryAddKeys = (items) => {
|
export const tryAddKeys = <T extends object & Record<string, any>>(items?: T[]): T[] => {
|
||||||
if (!items?.length || !items[0])
|
if (!items?.length || !items[0]) return items ?? []
|
||||||
return []
|
if (items[0].key) return items
|
||||||
if (items[0].key)
|
|
||||||
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 }}
|
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?: ((data: T[]) => Promise<void>)
|
||||||
|
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 onChange - Метод вызывается со всем dataSource с измененными элементами после любого действия
|
||||||
* @param onRowAdd - Метод вызывается с новой добавленной записью. Если метод не определен, то кнопка добавления строки не показывается
|
* @param onRowAdd - Метод вызывается с новой добавленной записью. Если метод не определен, то кнопка добавления строки не показывается
|
||||||
* @param onRowEdit - Метод вызывается с новой отредактированной записью. Если метод не поределен, то кнопка редактирования строки не показывается
|
* @param onRowEdit - Метод вызывается с новой отредактированной записью. Если метод не поределен, то кнопка редактирования строки не показывается
|
||||||
* @param onRowDelete - Метод вызывается с удаленной записью. Если метод не поределен, то кнопка удаления строки не показывается
|
* @param onRowDelete - Метод вызывается с удаленной записью. Если метод не поределен, то кнопка удаления строки не показывается
|
||||||
*/
|
*/
|
||||||
export const EditableTable = memo(({
|
const _EditableTable = <T extends CrudObject, S extends CrudService<T>>({
|
||||||
columns,
|
columns,
|
||||||
dataSource,
|
dataSource,
|
||||||
onChange,
|
onChange,
|
||||||
@ -69,47 +111,55 @@ export const EditableTable = memo(({
|
|||||||
additionalButtons,
|
additionalButtons,
|
||||||
buttonsWidth,
|
buttonsWidth,
|
||||||
...otherTableProps
|
...otherTableProps
|
||||||
}) => {
|
}: EditableTableProps<T, S>) => {
|
||||||
|
|
||||||
const [form] = Form.useForm()
|
const [form] = Form.useForm()
|
||||||
const [data, setData] = useState(tryAddKeys(dataSource))
|
const [data, setData] = useState<T[]>(tryAddKeys(dataSource))
|
||||||
const [editingKey, setEditingKey] = useState('')
|
const [editingKey, setEditingKey] = useState<string | number>('')
|
||||||
|
|
||||||
const onAdd = useMemo(() => onRowAdd && typeof onRowAdd !== 'function' ? makeTableAction(onRowAdd) : onRowAdd, [onRowAdd])
|
const onAdd = useMemo(() => onRowAdd && typeof onRowAdd !== 'function' ? makeTableAction(onRowAdd) : onRowAdd, [onRowAdd])
|
||||||
const onEdit = useMemo(() => onRowEdit && typeof onRowEdit !== 'function' ? makeTableAction(onRowEdit) : onRowEdit, [onRowEdit])
|
const onEdit = useMemo(() => onRowEdit && typeof onRowEdit !== 'function' ? makeTableAction(onRowEdit) : onRowEdit, [onRowEdit])
|
||||||
const onDelete = useMemo(() => onRowDelete && typeof onRowDelete !== 'function' ? makeTableAction(onRowDelete) : onRowDelete, [onRowDelete])
|
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})
|
form.setFieldsValue({...record})
|
||||||
setEditingKey(record.key)
|
setEditingKey(record.key)
|
||||||
}, [form])
|
}, [form])
|
||||||
|
|
||||||
const cancel = useCallback(() => {
|
const cancel = useCallback(() => {
|
||||||
if (editingKey === newRowKeyValue) {
|
setEditingKey((prev) => {
|
||||||
const newData = [...data]
|
if (prev === newRowKeyValue) {
|
||||||
|
setData((prev) => {
|
||||||
|
const newData = [...prev]
|
||||||
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)
|
return newData
|
||||||
|
})
|
||||||
}
|
}
|
||||||
setEditingKey('')
|
|
||||||
}, [data, editingKey])
|
return ''
|
||||||
|
})
|
||||||
|
}, [])
|
||||||
|
|
||||||
const addNewRow = useCallback(async () => {
|
const addNewRow = useCallback(async () => {
|
||||||
let newRow = {
|
const newRow: any = { key: newRowKeyValue } // TODO: Исправить тип
|
||||||
...form.initialValues,
|
setData((prevData) => [newRow, ...prevData])
|
||||||
key:newRowKeyValue
|
edit(newRow)
|
||||||
|
}, [edit])
|
||||||
|
|
||||||
|
const save = useCallback(async (record: T) => {
|
||||||
|
let row
|
||||||
|
try {
|
||||||
|
row = await form.validateFields()
|
||||||
|
} catch (errInfo) {
|
||||||
|
if (isDev())
|
||||||
|
console.warn('Validate Failed:', errInfo)
|
||||||
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
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 newData = [...data]
|
||||||
const index = newData.findIndex((item) => record.key === item.key)
|
const index = newData.findIndex((item) => record.key === item.key)
|
||||||
const item = newData[index]
|
const item = newData[index]
|
||||||
@ -118,47 +168,35 @@ export const EditableTable = memo(({
|
|||||||
newData.splice(index, 1, newItem)
|
newData.splice(index, 1, newItem)
|
||||||
|
|
||||||
if (item.key === newRowKeyValue)
|
if (item.key === newRowKeyValue)
|
||||||
item.key = newRowKeyValue + newData.length
|
item.key += newData.length
|
||||||
|
|
||||||
|
try {
|
||||||
|
if (editingKey === newRowKeyValue)
|
||||||
|
await onAdd?.(newItem)
|
||||||
|
else
|
||||||
|
await onEdit?.(newItem)
|
||||||
|
await onChange?.(newData)
|
||||||
|
} catch (err) {
|
||||||
|
if (isDev())
|
||||||
|
console.warn(err)
|
||||||
|
}
|
||||||
|
|
||||||
const isAdding = editingKey === newRowKeyValue
|
|
||||||
setEditingKey('')
|
setEditingKey('')
|
||||||
setData(newData)
|
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])
|
}, [data, editingKey, form, onChange, onAdd, onEdit])
|
||||||
|
|
||||||
const deleteRow = useCallback((record) => {
|
const deleteRow = useCallback((record: T) => {
|
||||||
const newData = [...data]
|
const newData = [...data]
|
||||||
const index = newData.findIndex((item) => record.key === item.key)
|
const index = newData.findIndex((item) => record.key === item.key)
|
||||||
|
|
||||||
newData.splice(index, 1)
|
newData.splice(index, 1)
|
||||||
setData(newData)
|
setData(newData)
|
||||||
|
|
||||||
onDelete(record)
|
onDelete?.(record)
|
||||||
onChange?.(newData)
|
onChange?.(newData)
|
||||||
}, [data, onChange, onDelete])
|
}, [data, onChange, onDelete])
|
||||||
|
|
||||||
const handleColumn = useCallback((col) => {
|
const handleColumn = useCallback((col: any) => { // TODO: Исправить тип
|
||||||
if (col.children)
|
if (col.children)
|
||||||
col.children = col.children.map(handleColumn)
|
col.children = col.children.map(handleColumn)
|
||||||
|
|
||||||
@ -167,7 +205,7 @@ export const EditableTable = memo(({
|
|||||||
|
|
||||||
return {
|
return {
|
||||||
...col,
|
...col,
|
||||||
onCell: (record) => ({
|
onCell: (record: T) => ({
|
||||||
...col.onCell?.(record),
|
...col.onCell?.(record),
|
||||||
editing: isEditing(record),
|
editing: isEditing(record),
|
||||||
record,
|
record,
|
||||||
@ -194,7 +232,7 @@ export const EditableTable = memo(({
|
|||||||
/>
|
/>
|
||||||
),
|
),
|
||||||
dataIndex: 'operation',
|
dataIndex: 'operation',
|
||||||
render: (_, record) => isEditing(record) ? (
|
render: (_: any, record: T) => isEditing(record) ? (
|
||||||
<span>
|
<span>
|
||||||
<Button onClick={() => save(record)} icon={<SaveOutlined/>}/>
|
<Button onClick={() => save(record)} icon={<SaveOutlined/>}/>
|
||||||
<Button onClick={cancel} icon={<CloseCircleOutlined/>}/>
|
<Button onClick={cancel} icon={<CloseCircleOutlined/>}/>
|
||||||
@ -219,15 +257,13 @@ export const EditableTable = memo(({
|
|||||||
),
|
),
|
||||||
}), [onAdd, onEdit, onDelete, isEditing, editingKey, save, cancel, edit, deleteRow])
|
}), [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(() => {
|
useEffect(() => setData(tryAddKeys(dataSource)), [dataSource])
|
||||||
setData(tryAddKeys(dataSource))
|
|
||||||
}, [dataSource])
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Form form={form}>
|
<Form form={form}>
|
||||||
<Table
|
<Table<T>
|
||||||
components={EditableTableComponents}
|
components={EditableTableComponents}
|
||||||
columns={mergedColumns}
|
columns={mergedColumns}
|
||||||
dataSource={data}
|
dataSource={data}
|
||||||
@ -235,4 +271,8 @@ export const EditableTable = memo(({
|
|||||||
/>
|
/>
|
||||||
</Form>
|
</Form>
|
||||||
)
|
)
|
||||||
})
|
}
|
||||||
|
|
||||||
|
export const EditableTable = memo(_EditableTable) as typeof _EditableTable
|
||||||
|
|
||||||
|
export default EditableTable
|
@ -1,26 +1,58 @@
|
|||||||
import { memo, useCallback, useEffect, useState } from 'react'
|
import { memo, ReactNode, useCallback, useEffect, useState } from 'react'
|
||||||
import { ColumnGroupType, ColumnType } from 'antd/lib/table'
|
import { ColumnGroupType, ColumnType } from 'antd/lib/table'
|
||||||
import { Table as RawTable, TableProps } from 'antd'
|
import { Table as RawTable, TableProps } from 'antd'
|
||||||
|
import { NamePath } from 'antd/lib/form/interface'
|
||||||
|
|
||||||
import type { OmitExtends } from '@utils/types'
|
import type { OmitExtends } from '@utils/types'
|
||||||
import { applyTableSettings, getTableSettings, setTableSettings, TableColumnSettings, TableSettings } from '@utils'
|
import { applyTableSettings, getTableSettings, setTableSettings, TableColumnSettings, TableSettings } from '@utils'
|
||||||
|
|
||||||
import TableSettingsChanger from './TableSettingsChanger'
|
import TableSettingsChanger from './TableSettingsChanger'
|
||||||
|
import { DataType, RenderMethod } from './Columns'
|
||||||
import { tryAddKeys } from './EditableTable'
|
import { tryAddKeys } from './EditableTable'
|
||||||
|
|
||||||
import '@styles/index.css'
|
import '@styles/index.css'
|
||||||
|
|
||||||
export type BaseTableColumn<T> = ColumnGroupType<T> | ColumnType<T>
|
export type BaseTableColumn<T> = ColumnGroupType<T> | ColumnType<T>
|
||||||
export type TableColumns<T> = OmitExtends<BaseTableColumn<T>, TableColumnSettings>[]
|
export type TableColumns<T> = (OmitExtends<Omit<BaseTableColumn<T>, 'key' | 'render'>, TableColumnSettings> & {
|
||||||
|
key: NamePath
|
||||||
|
render: RenderMethod<T | null>
|
||||||
|
})[]
|
||||||
|
|
||||||
export type TableContainer<T> = TableProps<T> & {
|
type MergedTableColumns<T> = (OmitExtends<Omit<BaseTableColumn<T>, 'render'>, TableColumnSettings> & {
|
||||||
|
render: RenderMethod<T | null>
|
||||||
|
})[]
|
||||||
|
|
||||||
|
export type TableContainer<T> = Omit<TableProps<T>, 'columns' | 'dataSource'> & {
|
||||||
columns: TableColumns<T>
|
columns: TableColumns<T>
|
||||||
tableName?: string
|
tableName?: string
|
||||||
showSettingsChanger?: boolean
|
showSettingsChanger?: boolean
|
||||||
|
dataSource: DataType<T>[]
|
||||||
}
|
}
|
||||||
|
|
||||||
const _Table = <T extends object>({ columns, dataSource, tableName, showSettingsChanger, ...other }: TableContainer<T>) => {
|
export const keyToString = (key: NamePath): string => Array.isArray(key) ? key.join('.') : String(key)
|
||||||
const [newColumns, setNewColumns] = useState<TableColumns<T>>([])
|
|
||||||
|
const defaultRender = <T,>(data: T): ReactNode => <>{data}</>
|
||||||
|
|
||||||
|
const getValueFromKey = <T,>(key: NamePath, record: DataType<T>): T | null => {
|
||||||
|
if (!key) return null
|
||||||
|
if (!Array.isArray(key))
|
||||||
|
return record[String(key)]
|
||||||
|
if (key.length <= 0) return null
|
||||||
|
const child = record[key[0]]
|
||||||
|
if (key.length === 1) return child
|
||||||
|
if (typeof child !== 'object') return null
|
||||||
|
return getValueFromKey(key.slice(1), child as DataType<T>)
|
||||||
|
}
|
||||||
|
|
||||||
|
const columnRenderWrapper = <T,>(key: NamePath, render?: RenderMethod<T | null>): RenderMethod<T | null> => (_: T | null, record?: DataType<T | null>, index?: number) => {
|
||||||
|
if (!record) return '-'
|
||||||
|
if (render)
|
||||||
|
return render(getValueFromKey(key, record), record, index)
|
||||||
|
return defaultRender(getValueFromKey(key, record))
|
||||||
|
}
|
||||||
|
|
||||||
|
const _Table = <T extends Record<string, any>>({ columns, dataSource, tableName, showSettingsChanger, ...other }: TableContainer<T>) => {
|
||||||
|
const [newColumns, setNewColumns] = useState<MergedTableColumns<T>>([])
|
||||||
const [settings, setSettings] = useState<TableSettings>({})
|
const [settings, setSettings] = useState<TableSettings>({})
|
||||||
|
|
||||||
const onSettingsChanged = useCallback((settings?: TableSettings | null) => {
|
const onSettingsChanged = useCallback((settings?: TableSettings | null) => {
|
||||||
@ -31,7 +63,12 @@ const _Table = <T extends object>({ columns, dataSource, tableName, showSettings
|
|||||||
|
|
||||||
useEffect(() => setSettings(tableName ? getTableSettings(tableName) : {}), [tableName])
|
useEffect(() => setSettings(tableName ? getTableSettings(tableName) : {}), [tableName])
|
||||||
useEffect(() => setNewColumns(() => {
|
useEffect(() => setNewColumns(() => {
|
||||||
const newColumns = applyTableSettings(columns, settings)
|
const mergedColumns = applyTableSettings(columns, settings)
|
||||||
|
const newColumns = mergedColumns.map((column) => ({
|
||||||
|
...column,
|
||||||
|
render: columnRenderWrapper(column.key, column.render),
|
||||||
|
key: keyToString(column.key),
|
||||||
|
}))
|
||||||
if (tableName && showSettingsChanger) {
|
if (tableName && showSettingsChanger) {
|
||||||
const oldTitle = newColumns[0].title
|
const oldTitle = newColumns[0].title
|
||||||
newColumns[0].title = (props) => (
|
newColumns[0].title = (props) => (
|
||||||
@ -45,9 +82,9 @@ const _Table = <T extends object>({ columns, dataSource, tableName, showSettings
|
|||||||
}), [settings, columns, onSettingsChanged, showSettingsChanger, tableName])
|
}), [settings, columns, onSettingsChanged, showSettingsChanger, tableName])
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<RawTable
|
<RawTable<DataType<T>>
|
||||||
columns={newColumns}
|
columns={newColumns}
|
||||||
dataSource={tryAddKeys(dataSource)}
|
dataSource={tryAddKeys<DataType<T>>(dataSource)}
|
||||||
{...other}
|
{...other}
|
||||||
/>
|
/>
|
||||||
)
|
)
|
||||||
|
@ -20,6 +20,7 @@ export {
|
|||||||
makeNumericColumnPlanFact,
|
makeNumericColumnPlanFact,
|
||||||
makeNumericStartEnd,
|
makeNumericStartEnd,
|
||||||
makeNumericMinMax,
|
makeNumericMinMax,
|
||||||
|
makeNumericAvgRange,
|
||||||
makeSelectColumn,
|
makeSelectColumn,
|
||||||
makeTagColumn,
|
makeTagColumn,
|
||||||
makeTagInput,
|
makeTagInput,
|
||||||
|
@ -1,89 +1,18 @@
|
|||||||
import { useState, useEffect, useCallback, memo, useMemo } from 'react'
|
import { useState, useEffect, useCallback, memo, useMemo } from 'react'
|
||||||
import { InputNumber } from 'antd'
|
|
||||||
|
|
||||||
import { useWell } from '@asb/context'
|
import { useWell } from '@asb/context'
|
||||||
import {
|
import {
|
||||||
EditableTable,
|
EditableTable,
|
||||||
makeSelectColumn,
|
makeSelectColumn,
|
||||||
makeGroupColumn,
|
|
||||||
makeNumericRender,
|
|
||||||
makeNumericSorter,
|
makeNumericSorter,
|
||||||
RegExpIsFloat,
|
makeNumericAvgRange,
|
||||||
} from '@components/Table'
|
} from '@components/Table'
|
||||||
import LoaderPortal from '@components/LoaderPortal'
|
import LoaderPortal from '@components/LoaderPortal'
|
||||||
import { invokeWebApiWrapperAsync } from '@components/factory'
|
import { invokeWebApiWrapperAsync } from '@components/factory'
|
||||||
import { DrillParamsService, WellOperationService } from '@api'
|
import { DrillParamsService, WellOperationService } from '@api'
|
||||||
import { arrayOrDefault } from '@utils'
|
import { arrayOrDefault } from '@utils'
|
||||||
|
|
||||||
import { makeNumericObjSorter } from '@components/Table/sorters'
|
export const getColumns = async (idWell, makeAvgRange = makeNumericAvgRange) => {
|
||||||
|
|
||||||
const makeNumericObjRender = (fixed, columnKey) => (value, obj) => {
|
|
||||||
let val = '-'
|
|
||||||
const isSelected = obj && columnKey && obj[columnKey[0]] ? obj[columnKey[0]][columnKey[1]] : false
|
|
||||||
|
|
||||||
if ((value ?? null) !== null && Number.isFinite(+value)) {
|
|
||||||
val = (fixed ?? null) !== null
|
|
||||||
? (+value).toFixed(fixed)
|
|
||||||
: (+value).toPrecision(5)
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className={`text-align-r-container ${isSelected ? 'color-pale-green' : ''}`}>
|
|
||||||
<span>{val}</span>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
const makeNumericColumnOptionsWithColor = (fixed, sorterKey, columnKey) => ({
|
|
||||||
editable: true,
|
|
||||||
initialValue: 0,
|
|
||||||
width: 100,
|
|
||||||
sorter: sorterKey ? makeNumericObjSorter(sorterKey) : undefined,
|
|
||||||
formItemRules: [{
|
|
||||||
required: true,
|
|
||||||
message: 'Введите число',
|
|
||||||
pattern: RegExpIsFloat,
|
|
||||||
}],
|
|
||||||
render: makeNumericObjRender(fixed, columnKey),
|
|
||||||
})
|
|
||||||
|
|
||||||
const makeNumericObjColumn = (
|
|
||||||
title,
|
|
||||||
dataIndex,
|
|
||||||
filters,
|
|
||||||
filterDelegate,
|
|
||||||
renderDelegate,
|
|
||||||
width,
|
|
||||||
other
|
|
||||||
) => ({
|
|
||||||
title: title,
|
|
||||||
dataIndex: dataIndex,
|
|
||||||
key: dataIndex,
|
|
||||||
filters: filters,
|
|
||||||
onFilter: filterDelegate ? filterDelegate(dataIndex) : null,
|
|
||||||
sorter: makeNumericObjSorter(dataIndex),
|
|
||||||
width: width,
|
|
||||||
input: <InputNumber style={{ width: '100%' }}/>,
|
|
||||||
render: renderDelegate ?? makeNumericRender(),
|
|
||||||
align: 'right',
|
|
||||||
...other
|
|
||||||
})
|
|
||||||
|
|
||||||
const makeNumericAvgRange = (
|
|
||||||
title,
|
|
||||||
dataIndex,
|
|
||||||
fixed,
|
|
||||||
filters,
|
|
||||||
filterDelegate,
|
|
||||||
renderDelegate,
|
|
||||||
width
|
|
||||||
) => makeGroupColumn(title, [
|
|
||||||
makeNumericObjColumn('мин', [dataIndex, 'min'], filters, filterDelegate, renderDelegate, width, makeNumericColumnOptionsWithColor(fixed, [dataIndex, 'min'], [dataIndex, 'isMin'])),
|
|
||||||
makeNumericObjColumn('сред', [dataIndex, 'avg'], filters, filterDelegate, renderDelegate, width, makeNumericColumnOptionsWithColor(fixed, [dataIndex, 'avg'])),
|
|
||||||
makeNumericObjColumn('макс', [dataIndex, 'max'], filters, filterDelegate, renderDelegate, width, makeNumericColumnOptionsWithColor(fixed, [dataIndex, 'max'], [dataIndex, 'isMax']))
|
|
||||||
])
|
|
||||||
|
|
||||||
export const getColumns = async (idWell) => {
|
|
||||||
let sectionTypes = await WellOperationService.getSectionTypes(idWell)
|
let sectionTypes = await WellOperationService.getSectionTypes(idWell)
|
||||||
sectionTypes = Object.entries(sectionTypes).map(([id, value]) => ({
|
sectionTypes = Object.entries(sectionTypes).map(([id, value]) => ({
|
||||||
label: value,
|
label: value,
|
||||||
@ -96,11 +25,11 @@ export const getColumns = async (idWell) => {
|
|||||||
width: 160,
|
width: 160,
|
||||||
sorter: makeNumericSorter('idWellSectionType'),
|
sorter: makeNumericSorter('idWellSectionType'),
|
||||||
}),
|
}),
|
||||||
makeNumericAvgRange('Нагрузка, т', 'axialLoad', 1),
|
makeAvgRange('Нагрузка, т', 'axialLoad', 1),
|
||||||
makeNumericAvgRange('Давление, атм', 'pressure', 1),
|
makeAvgRange('Давление, атм', 'pressure', 1),
|
||||||
makeNumericAvgRange('Момент на ВСП, кН·м', 'rotorTorque', 1),
|
makeAvgRange('Момент на ВСП, кН·м', 'rotorTorque', 1),
|
||||||
makeNumericAvgRange('Обороты на ВСП, об/мин', 'rotorSpeed', 1),
|
makeAvgRange('Обороты на ВСП, об/мин', 'rotorSpeed', 1),
|
||||||
makeNumericAvgRange('Расход, л/с', 'flow', 1),
|
makeAvgRange('Расход, л/с', 'flow', 1),
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -9,3 +9,5 @@
|
|||||||
export type OmitExtends<T, R> = T & Omit<R, keyof T>
|
export type OmitExtends<T, R> = T & Omit<R, keyof T>
|
||||||
|
|
||||||
export type ArgumentTypes<F extends Function> = F extends (...args: infer A) => any ? A : never
|
export type ArgumentTypes<F extends Function> = F extends (...args: infer A) => any ? A : never
|
||||||
|
|
||||||
|
export type ArrayElement<ArrType> = ArrType extends readonly (infer ElementType)[] ? ElementType : never
|
||||||
|
Loading…
Reference in New Issue
Block a user