Compare commits

...

5 Commits

7 changed files with 205 additions and 181 deletions

View File

@ -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'

View File

@ -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

View 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

View File

@ -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}
/> />
) )

View File

@ -20,6 +20,7 @@ export {
makeNumericColumnPlanFact, makeNumericColumnPlanFact,
makeNumericStartEnd, makeNumericStartEnd,
makeNumericMinMax, makeNumericMinMax,
makeNumericAvgRange,
makeSelectColumn, makeSelectColumn,
makeTagColumn, makeTagColumn,
makeTagInput, makeTagInput,

View File

@ -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),
] ]
} }

View File

@ -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