ia.novokshanov/asb_cloud_front
1
0
Fork 0
forked from ddrilling/asb_cloud_front
Code Issues Pull Requests Packages Projects Releases Wiki Activity

* EditableCell улучшена мемоизация

Browse Source 
* Добавлена поддержка составных ключей для столбцов таблиц
* Улучшена типизация
* Методы-генераторы столбцов переписаны
* Методы-генераторы сортировок переписаны с учётом составных ключей
This commit is contained in:
Александр Сироткин 2022-11-08 08:09:22 +05:00
parent bc73490029
commit aa0fafb7a1
15 changed files with 251 additions and 269 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/components/Table/Columns/date.tsx
View File

@ -1,26 +1,36 @@
import { ReactNode } from 'react'
import { Key, ReactNode } from 'react'
import { formatDate } from '@utils'
import makeColumn, { columnPropsOther } from '.'
import { DatePickerWrapper, makeDateSorter } from '..'
import { makeColumn, ColumnProps, SorterMethod } from '.'
import { DatePickerWrapper, getObjectByDeepKey } from '..'
import { DatePickerWrapperProps } from '../DatePickerWrapper'
import { formatDate, isRawDate } from '@utils'
export const makeDateColumn = (
export const makeDateSorter = <T extends unknown>(key: Key): SorterMethod<T> => (a, b) => {
const vA = a ? getObjectByDeepKey(key, a) : null
const vB = b ? getObjectByDeepKey(key, b) : null
if (!isRawDate(vA) || !isRawDate(vB)) return 0
if (!isRawDate(vA)) return 1
if (!isRawDate(vB)) return -1
return (new Date(vA)).getTime() - (new Date(vB)).getTime()
}
export const makeDateColumn = <T extends unknown>(
title: ReactNode,
key: string,
utc?: boolean,
format?: string,
other?: columnPropsOther,
other?: ColumnProps<T>,
pickerOther?: DatePickerWrapperProps,
) => makeColumn(title, key, {
) => makeColumn<T>(title, key, {
...other,
render: (date) => (
<div className={'text-align-r-container'}>
<span>{formatDate(date, utc, format) ?? '-'}</span>
</div>
),
sorter: makeDateSorter(key),
sorter: makeDateSorter<T>(key),
input: <DatePickerWrapper {...pickerOther} />,
})

23
src/components/Table/Columns/index.ts
View File

@ -1,6 +1,10 @@
import { ReactNode } from 'react'
import { Key, ReactNode } from 'react'
import { Rule } from 'antd/lib/form'
import { ColumnProps } from 'antd/lib/table'
import { ColumnType } from 'antd/lib/table'
import { RenderedCell } from 'rc-table/lib/interface'
import { DataSet } from '../Table'
import { OmitExtends } from '@utils/types'
export * from './date'
export * from './time'
@ -12,10 +16,13 @@ export * from './text'
export * from './timezone'
export type DataType<T = any> = Record<string, T>
export type RenderMethod<T = any> = (value: T, dataset?: DataType<T>, index?: number) => ReactNode
export type SorterMethod<T = any> = (a?: DataType<T> | null, b?: DataType<T> | null) => number
export type RenderMethod<T = any, DT = DataSet<T>> = (value: T | undefined, dataset: DT, index: number) => ReactNode | RenderedCell<T> | undefined
export type SorterMethod<T = any, DT = DataSet<T> | null | undefined> = (a: DT, b: DT) => number
export type FilterMethod<T = any, DT = DataSet<T>> = (value: string | number | T | undefined, record: DT) => boolean
export type columnPropsOther<T = any> = ColumnProps<DataType<T>> & {
export type FilterGenerator<T, DT = DataSet<T>> = (key: Key) => FilterMethod<T, DT>
export type ColumnProps<T = any> = OmitExtends<{
// редактируемая колонка
editable?: boolean
// react компонента редактора
@ -29,10 +36,12 @@ export type columnPropsOther<T = any> = ColumnProps<DataType<T>> & {
// дефолтное значение при добавлении новой строки
initialValue?: string | number
onFilter?: FilterMethod<T>
sorter?: SorterMethod<T>
render?: RenderMethod<T>
}
}, ColumnType<DataSet<T>>>
export const makeColumn = (title: ReactNode, key: string, other?: columnPropsOther) => ({
export const makeColumn = <T = any>(title: ReactNode, key: Key, other?: ColumnProps<T>) => ({
title: title,
key: key,
dataIndex: key,

73
src/components/Table/Columns/numeric.tsx
View File

@ -1,20 +1,26 @@
import { ColumnFilterItem } from 'antd/lib/table/interface'
import { InputNumber } from 'antd'
import { ReactNode } from 'react'
import { Key, ReactNode } from 'react'
import { makeNumericSorter } from '../sorters'
import makeColumn, { columnPropsOther, DataType, makeGroupColumn, RenderMethod } from '.'
import { ColumnFilterItem, CompareFn } from 'antd/lib/table/interface'
import makeColumn, { ColumnProps, FilterGenerator, makeGroupColumn, RenderMethod, SorterMethod } from '.'
import { getObjectByDeepKey } from '../Table'
export const RegExpIsFloat = /^[-+]?\d+\.?\d*$/
type FilterMethod<T> = (value: string | number | boolean, record: DataType<T>) => boolean
export const makeNumericSorter = <T extends number = number>(key: Key): SorterMethod<T> => (a, b) => {
if (!a && !b) return 0
if (!a) return 1
if (!b) return -1
export const makeNumericRender = <T extends unknown>(fixed?: number): RenderMethod<T> => (value: T) => {
let val = '-'
if ((value ?? null) !== null && Number.isFinite(+value)) {
return Number(getObjectByDeepKey(key, a)) - Number(getObjectByDeepKey(key, b))
}
export const makeNumericRender = <T extends unknown>(fixed?: number, defaultValue: string = '-', precision: number = 5): RenderMethod<T> => (value) => {
let val = defaultValue
if (value !== undefined && value !== null && Number.isFinite(+value)) {
val = (fixed ?? null) !== null
? (+value).toFixed(fixed)
: (+value).toPrecision(5)
: (+value).toPrecision(precision)
}
return (
@ -24,7 +30,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 extends number>(fixed?: number, sorterKey?: string): ColumnProps<T> => ({
editable: true,
initialValue: 0,
width: 100,
@ -37,14 +43,14 @@ export const makeNumericColumnOptions = <T extends unknown = any>(fixed?: number
render: makeNumericRender<T>(fixed),
})
export const makeNumericColumn = <T extends unknown = any>(
export const makeNumericColumn = <T extends number>(
title: ReactNode,
key: string,
key: Key,
filters?: ColumnFilterItem[],
filterDelegate?: (key: string | number) => FilterMethod<T>,
filterDelegate?: FilterGenerator<T>,
renderDelegate?: RenderMethod<T>,
width?: string | number,
other?: columnPropsOther,
other?: ColumnProps<T>,
) => makeColumn(title, key, {
filters,
onFilter: filterDelegate ? filterDelegate(key) : undefined,
@ -56,24 +62,25 @@ export const makeNumericColumn = <T extends unknown = any>(
...other
})
export const makeNumericColumnPlanFact = <T extends unknown = any>(
export const makeNumericColumnPlanFact = <T extends number>(
title: ReactNode,
key: string,
key: Key,
filters?: ColumnFilterItem[],
filterDelegate?: (key: string | number) => FilterMethod<T>,
filterDelegate?: FilterGenerator<T>,
renderDelegate?: RenderMethod<T>,
width?: string | number
width?: string | number,
other?: ColumnProps<T>,
) => makeGroupColumn(title, [
makeNumericColumn<T>('п', key + 'Plan', filters, filterDelegate, renderDelegate, width),
makeNumericColumn<T>('ф', key + 'Fact', filters, filterDelegate, renderDelegate, width),
makeNumericColumn<T>('п', key + 'Plan', filters, filterDelegate, renderDelegate, width, other),
makeNumericColumn<T>('ф', key + 'Fact', filters, filterDelegate, renderDelegate, width, other),
])
export const makeNumericStartEnd = <T extends unknown = any>(
export const makeNumericStartEnd = <T extends number>(
title: ReactNode,
key: string,
key: Key,
fixed: number,
filters?: ColumnFilterItem[],
filterDelegate?: (key: string | number) => FilterMethod<T>,
filterDelegate?: FilterGenerator<T>,
renderDelegate?: RenderMethod<T>,
width?: string | number,
) => makeGroupColumn(title, [
@ -81,12 +88,12 @@ export const makeNumericStartEnd = <T extends unknown = any>(
makeNumericColumn<T>('конец', key + 'End', filters, filterDelegate, renderDelegate, width, makeNumericColumnOptions(fixed, key + 'End'))
])
export const makeNumericMinMax = <T extends unknown = any>(
export const makeNumericMinMax = <T extends number>(
title: ReactNode,
key: string,
key: Key,
fixed: number,
filters?: ColumnFilterItem[],
filterDelegate?: (key: string | number) => FilterMethod<T>,
filterDelegate?: FilterGenerator<T>,
renderDelegate?: RenderMethod<T>,
width?: string | number,
) => makeGroupColumn(title, [
@ -94,4 +101,18 @@ export const makeNumericMinMax = <T extends unknown = any>(
makeNumericColumn<T>('макс', key + 'Max', filters, filterDelegate, renderDelegate, width, makeNumericColumnOptions(fixed, key + 'Max')),
])
export const makeNumericAvgRange = <T extends number>(
title: ReactNode,
key: Key,
fixed: number,
filters?: ColumnFilterItem[],
filterDelegate?: FilterGenerator<T>,
renderDelegate?: RenderMethod<T>,
width?: string | number,
) => makeGroupColumn(title, [
makeNumericColumn<T>('мин', `${key}.min`, filters, filterDelegate, renderDelegate, width, makeNumericColumnOptions(fixed, `${key}.min`)),
makeNumericColumn<T>('сред', `${key}.avg`, filters, filterDelegate, renderDelegate, width, makeNumericColumnOptions(fixed, `${key}.avg`)),
makeNumericColumn<T>('макс', `${key}.max`, filters, filterDelegate, renderDelegate, width, makeNumericColumnOptions(fixed, `${key}.max`)),
])
export default makeNumericColumn

36
src/components/Table/Columns/plan_fact.tsx
View File

@ -1,36 +1,20 @@
import { ReactNode } from 'react'
import { Key, ReactNode } from 'react'
import { columnPropsOther, makeColumn } from '.'
import { ColumnProps, makeColumn } from '.'
export const makeColumnsPlanFact = (
export const makeColumnsPlanFact = <T,>(
title: string | ReactNode,
key: string | string[],
columsOther?: columnPropsOther | [columnPropsOther, columnPropsOther],
gruopOther?: any
key: Key | [Key, Key],
columsOther?: ColumnProps<T> | [ColumnProps<T>, ColumnProps<T>],
) => {
let keyPlanLocal: string
let keyFactLocal: string
if (key instanceof Array) {
keyPlanLocal = key[0]
keyFactLocal = key[1]
} else {
keyPlanLocal = key + 'Plan'
keyFactLocal = key + 'Fact'
}
let columsOtherLocal : any[2]
if (columsOther instanceof Array)
columsOtherLocal = [columsOther[0], columsOther[1]]
else
columsOtherLocal = [columsOther, columsOther]
const keys = Array.isArray(key) ? key : [`${key}Plan`, `${key}Fact`]
const others = Array.isArray(columsOther) ? columsOther : [columsOther, columsOther]
return {
title: title,
...gruopOther,
title,
children: [
makeColumn('план', keyPlanLocal, columsOtherLocal[0]),
makeColumn('факт', keyFactLocal, columsOtherLocal[1]),
makeColumn<T>('план', keys[0], others[0]),
makeColumn<T>('факт', keys[1], others[1]),
]
}
}

19
src/components/Table/Columns/select.tsx
View File

@ -1,21 +1,22 @@
import { Select, SelectProps } from 'antd'
import { DefaultOptionType, SelectValue } from 'antd/lib/select'
import { Key, ReactNode } from 'react'
import { columnPropsOther, makeColumn } from '.'
import { ColumnProps, makeColumn } from '.'
export const makeSelectColumn = <T extends unknown = string>(
title: string,
dataIndex: string,
options: DefaultOptionType[],
export const makeSelectColumn = <T extends DefaultOptionType>(
title: ReactNode,
key: Key,
options: T[],
defaultValue?: T,
other?: columnPropsOther,
other?: ColumnProps<T>,
selectOther?: SelectProps<SelectValue>
) => makeColumn(title, dataIndex, {
) => makeColumn(title, key, {
...other,
input: <Select options={options} {...selectOther}/>,
render: (value) => {
render: (value, dataset, index) => {
const item = options?.find(option => String(option?.value) === String(value))
return other?.render?.(item?.value) ?? item?.label ?? defaultValue ?? value ?? '--'
return other?.render?.(item, dataset, index) ?? item?.label ?? defaultValue?.label ?? value?.label ?? '--'
}
})

6
src/components/Table/Columns/tag.tsx
View File

@ -4,7 +4,7 @@ import { Select, SelectProps, Tag } from 'antd'
import type { OmitExtends } from '@utils/types'
import { columnPropsOther, DataType, makeColumn } from '.'
import { ColumnProps, DataType, makeColumn } from '.'
export type TagInputProps<T extends DataType> = OmitExtends<{
options: T[],
@ -59,14 +59,14 @@ export const makeTagColumn = <T extends DataType>(
options: T[],
value_key: keyof DataType,
label_key: keyof DataType,
other?: columnPropsOther,
other?: ColumnProps,
tagOther?: TagInputProps<T>
) => {
const InputComponent = makeTagInput<T>(value_key, label_key)
return makeColumn(title, dataIndex, {
...other,
render: (item?: T[]) => item?.map((elm: T) => <Tag key={elm[label_key]} color={'blue'}>{other?.render?.(elm) ?? elm[label_key]}</Tag>) ?? '-',
render: (item: T[] | undefined, dataset, index) => item?.map((elm: T) => <Tag key={elm[label_key]} color={'blue'}>{other?.render?.(elm, dataset, index) ?? elm[label_key]}</Tag>) ?? '-',
input: <InputComponent {...tagOther} options={options} />,
})
}

19
src/components/Table/Columns/text.tsx
View File

@ -1,8 +1,19 @@
import { ColumnFilterItem } from 'antd/lib/table/interface'
import { ReactNode } from 'react'
import { Key, ReactNode } from 'react'
import makeColumn, { columnPropsOther, DataType, RenderMethod, SorterMethod } from '.'
import { makeStringSorter } from '../sorters'
import { ColumnProps, makeColumn, DataType, RenderMethod, SorterMethod } from '.'
import { getObjectByDeepKey } from '../Table'
export const makeStringSorter = <T extends string>(key: Key): SorterMethod<T> => (a, b) => {
const vA = a ? getObjectByDeepKey(key, a) : null
const vB = b ? getObjectByDeepKey(key, b) : null
if (!vA && !vB) return 0
if (!vA) return 1
if (!vB) return -1
return String(vA).localeCompare(String(vB))
}
export const makeFilterTextMatch = <T extends unknown>(key: keyof DataType<T>) =>
(filterValue: T, dataItem: DataType<T>) => dataItem[key] === filterValue
@ -13,7 +24,7 @@ export const makeTextColumn = <T extends unknown = any>(
filters?: ColumnFilterItem[],
sorter?: SorterMethod<T>,
render?: RenderMethod<T>,
other?: columnPropsOther
other?: ColumnProps
) => makeColumn(title, key, {
filters,
onFilter: filters ? makeFilterTextMatch(key) : undefined,

27
src/components/Table/Columns/time.tsx
View File

@ -1,25 +1,36 @@
import { ReactNode } from 'react'
import { Key, ReactNode } from 'react'
import { formatTime } from '@utils'
import { makeColumn, ColumnProps, SorterMethod } from '.'
import { TimePickerWrapper, TimePickerWrapperProps, getObjectByDeepKey } from '..'
import { formatTime, timeToMoment } from '@utils'
import { TimeDto } from '@api'
import { makeColumn, columnPropsOther } from '.'
import { makeTimeSorter, TimePickerWrapper, TimePickerWrapperProps } from '..'
export const makeTimeSorter = <T extends TimeDto>(key: Key): SorterMethod<T> => (a, b) => {
const vA = a ? getObjectByDeepKey(key, a) : null
const vB = b? getObjectByDeepKey(key, b) : null
export const makeTimeColumn = (
if (!vA && !vB) return 0
if (!vA) return 1
if (!vB) return -1
return timeToMoment(vA).diff(timeToMoment(vB))
}
export const makeTimeColumn = <T extends TimeDto>(
title: ReactNode,
key: string,
utc?: boolean,
format?: string,
other?: columnPropsOther,
other?: ColumnProps,
pickerOther?: TimePickerWrapperProps,
) => makeColumn(title, key, {
) => makeColumn<T>(title, key, {
...other,
render: (time) => (
<div className={'text-align-r-container'}>
<span>{formatTime(time, utc, format) ?? '-'}</span>
</div>
),
sorter: makeTimeSorter(key),
sorter: makeTimeSorter<T>(key),
input: <TimePickerWrapper isUTC={utc} {...pickerOther} />,
})

16
src/components/Table/Columns/timezone.tsx
View File

@ -1,11 +1,11 @@
import { memo, ReactNode, useCallback, useEffect, useState } from 'react'
import { Key, memo, ReactNode, useCallback, useEffect, useState } from 'react'
import { Select, SelectProps } from 'antd'
import { findTimezoneId, rawTimezones, TimezoneId } from '@utils'
import type { OmitExtends } from '@utils/types'
import { SimpleTimezoneDto } from '@api'
import { columnPropsOther, makeColumn } from '.'
import { ColumnProps, makeColumn } from '.'
const makeTimezoneLabel = (id?: string | null, hours?: number) =>
`UTC${hours && hours > 0 ? '+':''}${hours ? ('0' + hours).slice(-2) : '~??'} :: ${id ?? 'Неизвестно'}`
@ -18,7 +18,7 @@ export const timezoneOptions = Object
value: id,
}))
export const makeTimezoneRenderer = () => (timezone?: SimpleTimezoneDto) => {
export const makeTimezoneRender = () => (timezone?: SimpleTimezoneDto) => {
if (!timezone) return 'UTC~?? :: Неизвестно'
const { hours, timezoneId } = timezone
return makeTimezoneLabel(timezoneId, hours)
@ -46,17 +46,17 @@ export const TimezoneSelect = memo<TimezoneSelectProps>(({ onChange, value, defa
return (<Select {...other} onChange={onValueChanged} value={id} defaultValue={defaultTimezone} />)
})
export const makeTimezoneColumn = (
export const makeTimezoneColumn = <T extends SimpleTimezoneDto>(
title: ReactNode = 'Зона',
key: string = 'timezone',
defaultValue?: SimpleTimezoneDto,
key: Key = 'timezone',
defaultValue?: T,
allowClear: boolean = true,
other?: columnPropsOther,
other?: ColumnProps<T>,
selectOther?: TimezoneSelectProps
) => makeColumn(title, key, {
width: 100,
editable: true,
render: makeTimezoneRenderer(),
render: makeTimezoneRender(),
input: (
<TimezoneSelect
key={key}

44
src/components/Table/EditableCell.tsx
View File

@ -1,19 +1,20 @@
import { memo, ReactNode } from 'react'
import { Key, memo, ReactNode, useMemo } from 'react'
import { Rule } from 'rc-field-form/lib/interface'
import { Form, Input } from 'antd'
import { NamePath, Rule } from 'rc-field-form/lib/interface'
type EditableCellProps = React.DetailedHTMLProps<React.TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement> & {
export type EditableCellProps = React.DetailedHTMLProps<React.TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement> & {
editing?: boolean
dataIndex?: NamePath
dataIndex?: Key
input?: ReactNode
isRequired?: boolean
title: string
formItemClass?: string
formItemRules?: Rule[]
children: ReactNode
initialValue: any
}
const itemStyle = { margin: 0 }
export const EditableCell = memo<EditableCellProps>(({
editing,
dataIndex,
@ -24,21 +25,30 @@ export const EditableCell = memo<EditableCellProps>(({
children,
initialValue,
...other
}) => (
<td style={editing ? { padding: 0 } : undefined} {...other}>
{!editing ? children : (
<Form.Item
name={dataIndex}
style={{ margin: 0 }}
className={formItemClass}
rules={formItemRules ?? [{
}) => {
const rules = useMemo(() => formItemRules || [{
required: isRequired,
message: `Это обязательное поле!`,
}]}
}], [formItemRules, isRequired])
const name = useMemo(() => dataIndex ? String(dataIndex).split('.') : undefined, [dataIndex])
const tdStyle = useMemo(() => editing ? { padding: 0 } : undefined, [editing])
const edititngItem = useMemo(() => (
<Form.Item
name={name}
style={itemStyle}
className={formItemClass}
rules={rules}
initialValue={initialValue}
>
{input ?? <Input/>}
{input ?? <Input />}
</Form.Item>
)}
), [name, rules, formItemClass, initialValue, input])
return (
<td style={tdStyle} {...other}>
{editing ? edititngItem : children}
</td>
))
)
})

57
src/components/Table/Table.tsx
View File

@ -1,26 +1,65 @@
import { memo, useCallback, useEffect, useState } from 'react'
import { Key, memo, useCallback, useEffect, useState } from 'react'
import { ColumnGroupType, ColumnType } from 'antd/lib/table'
import { Table as RawTable, TableProps } from 'antd'
import { RenderMethod } from './Columns'
import { tryAddKeys } from './EditableTable'
import TableSettingsChanger from './TableSettingsChanger'
import type { OmitExtends } from '@utils/types'
import { applyTableSettings, getTableSettings, setTableSettings, TableColumnSettings, TableSettings } from '@utils'
import TableSettingsChanger from './TableSettingsChanger'
import { tryAddKeys } from './EditableTable'
import '@styles/index.css'
export type BaseTableColumn<T> = ColumnGroupType<T> | ColumnType<T>
export type TableColumns<T> = OmitExtends<BaseTableColumn<T>, TableColumnSettings>[]
export type TableColumn<T> = OmitExtends<BaseTableColumn<T>, TableColumnSettings>
export type TableColumns<T> = TableColumn<T>[]
export type TableContainer<T> = TableProps<T> & {
columns: TableColumns<T>
columns: TableColumn<T>[]
tableName?: string
showSettingsChanger?: boolean
}
const _Table = <T extends object>({ columns, dataSource, tableName, showSettingsChanger, ...other }: TableContainer<T>) => {
const [newColumns, setNewColumns] = useState<TableColumns<T>>([])
export interface DataSet<T, D = any> {
[k: Key]: DataSet<T> | T | D
}
export const getObjectByDeepKey = <T,>(key: Key | undefined, data: DataSet<T>): T | undefined => {
if (!key) return undefined
const parts = String(key).split('.')
let out = data
for (let i = 0; i < parts.length && out; i++) {
const key = parts[i]
if (!(key in out)) return undefined // Если ключ не найдем, считаем значение null
out = out[key] as DataSet<T> // Углубляемся внутрь объекта
}
return out as T
}
export const makeColumnRenderWrapper = <T extends DataSet<any>>(key: Key | undefined, render: RenderMethod<T, T> | undefined): RenderMethod<T, T> =>
(_: any, dataset: T, index: number) => {
const renderFunc: RenderMethod<T, T> = typeof render === 'function' ? render : (record) => String(record)
return renderFunc(getObjectByDeepKey<T>(key, dataset), dataset, index)
}
const applyColumnWrappers = <T extends DataSet<any>>(columns: BaseTableColumn<T>[]): BaseTableColumn<T>[] => {
return columns.map((column) => {
if ('children' in column) {
return {
...column,
children: applyColumnWrappers(column.children),
}
}
return {
...column,
render: makeColumnRenderWrapper<T>(column.key, column.render),
}
})
}
function _Table<T extends DataSet<any>>({ columns, dataSource, tableName, showSettingsChanger, ...other }: TableContainer<T>) {
const [newColumns, setNewColumns] = useState<TableColumn<T>[]>([])
const [settings, setSettings] = useState<TableSettings>({})
const onSettingsChanged = useCallback((settings?: TableSettings | null) => {
@ -31,7 +70,7 @@ const _Table = <T extends object>({ columns, dataSource, tableName, showSettings
useEffect(() => setSettings(tableName ? getTableSettings(tableName) : {}), [tableName])
useEffect(() => setNewColumns(() => {
const newColumns = applyTableSettings(columns, settings)
const newColumns = applyTableSettings(applyColumnWrappers(columns), settings)
if (tableName && showSettingsChanger) {
const oldTitle = newColumns[0].title
newColumns[0].title = (props) => (

12
src/components/Table/TableSettingsChanger.tsx
View File

@ -1,11 +1,11 @@
import { memo, useCallback, useEffect, useState } from 'react'
import { ColumnsType } from 'antd/lib/table'
import { Button, Modal, Switch, Table } from 'antd'
import { Button, Modal, Switch } from 'antd'
import { SettingOutlined } from '@ant-design/icons'
import { TableColumnSettings, makeTableSettings, mergeTableSettings, TableSettings } from '@utils'
import { TableColumns } from './Table'
import { makeColumn } from '.'
import { Table, TableColumns } from './Table'
import { makeColumn, makeTextColumn } from '.'
const parseSettings = <T extends object>(columns?: TableColumns<T>, settings?: TableSettings | null): TableColumnSettings[] => {
const newSettings = mergeTableSettings(makeTableSettings(columns ?? []), settings ?? {})
@ -46,8 +46,8 @@ const _TableSettingsChanger = <T extends object>({ title, columns, settings, onC
useEffect(() => {
setTableColumns([
makeColumn('Название', 'title'),
makeColumn(null, 'visible', {
makeTextColumn<string>('Название', 'title'),
makeColumn<any>(null, 'visible', {
title: () => (
<>
Показать
@ -56,7 +56,7 @@ const _TableSettingsChanger = <T extends object>({ title, columns, settings, onC
</Button>
</>
),
render: (visible: boolean, _?: TableColumnSettings, index: number = NaN) => (
render: (visible, _, index = NaN) => (
<Switch
checked={visible}
checkedChildren={'Отображён'}

1
src/components/Table/index.tsx
View File

@ -1,4 +1,3 @@
export * from './sorters'
export * from './EditableTable'
export * from './DatePickerWrapper'
export * from './TimePickerWrapper'

42
src/components/Table/sorters.ts
View File

@ -1,42 +0,0 @@
import { timeToMoment } from '@utils'
import { isRawDate } from '@utils'
import { TimeDto } from '@api'
import { DataType } from './Columns'
import { CompareFn } from 'antd/lib/table/interface'
export const makeNumericSorter = <T extends unknown>(key: keyof DataType<T>): CompareFn<DataType<T>> =>
(a: DataType<T>, b: DataType<T>) => Number(a[key]) - Number(b[key])
export const makeNumericObjSorter = (key: [string, string]) =>
(a: DataType, b: DataType) => Number(a[key[0]][key[1]]) - Number(b[key[0]][key[1]])
export const makeStringSorter = <T extends unknown>(key: keyof DataType<T>) => (a?: DataType<T> | null, b?: DataType<T> | null) => {
if (!a && !b) return 0
if (!a) return 1
if (!b) return -1
return String(a[key]).localeCompare(String(b[key]))
}
export const makeDateSorter = <T extends unknown>(key: keyof DataType<T>) => (a: DataType<T>, b: DataType<T>) => {
const adate = a[key]
const bdate = b[key]
if (!isRawDate(adate) || !isRawDate(bdate))
throw new Error('Date column contains not date formatted string(s)')
const date = new Date(adate)
return date.getTime() - new Date(bdate).getTime()
}
export const makeTimeSorter = <T extends TimeDto>(key: keyof DataType<T>) => (a: DataType<T>, b: DataType<T>) => {
const elma = a[key]
const elmb = b[key]
if (!elma && !elmb) return 0
if (!elma) return 1
if (!elmb) return -1
return timeToMoment(elma).diff(timeToMoment(elmb))
}

73
src/pages/Well/WellOperations/WellDrillParams.jsx
View File

@ -1,88 +1,17 @@
import { useState, useEffect, useCallback, memo, useMemo } from 'react'
import { InputNumber } from 'antd'
import { useWell } from '@asb/context'
import {
EditableTable,
makeSelectColumn,
makeGroupColumn,
makeNumericRender,
makeNumericSorter,
RegExpIsFloat,
makeNumericAvgRange,
} from '@components/Table'
import LoaderPortal from '@components/LoaderPortal'
import { invokeWebApiWrapperAsync } from '@components/factory'
import { DrillParamsService, WellOperationService } from '@api'
import { arrayOrDefault } from '@utils'
import { makeNumericObjSorter } from '@components/Table/sorters'
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)
sectionTypes = Object.entries(sectionTypes).map(([id, value]) => ({