Merge branch 'dev' into feature/merging-telemetry-view-and-archive

This commit is contained in:
Александр Сироткин 2022-11-08 08:13:33 +05:00
commit 6375db5a0b
30 changed files with 321 additions and 379 deletions

13
package-lock.json generated
View File

@ -17,8 +17,7 @@
"react-dom": "^18.1.0",
"react-router-dom": "^6.3.0",
"rxjs": "^7.5.5",
"usehooks-ts": "^2.6.0",
"web-vitals": "^2.1.4"
"usehooks-ts": "^2.6.0"
},
"devDependencies": {
"@babel/core": "^7.18.2",
@ -14786,11 +14785,6 @@
"minimalistic-assert": "^1.0.0"
}
},
"node_modules/web-vitals": {
"version": "2.1.4",
"resolved": "https://registry.npmjs.org/web-vitals/-/web-vitals-2.1.4.tgz",
"integrity": "sha512-sVWcwhU5mX6crfI5Vd2dC4qchyTqxV8URinzt25XqVh+bHEPGH4C3NPrNionCP7Obx59wrYEbNlw4Z8sjALzZg=="
},
"node_modules/webidl-conversions": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
@ -26492,11 +26486,6 @@
"minimalistic-assert": "^1.0.0"
}
},
"web-vitals": {
"version": "2.1.4",
"resolved": "https://registry.npmjs.org/web-vitals/-/web-vitals-2.1.4.tgz",
"integrity": "sha512-sVWcwhU5mX6crfI5Vd2dC4qchyTqxV8URinzt25XqVh+bHEPGH4C3NPrNionCP7Obx59wrYEbNlw4Z8sjALzZg=="
},
"webidl-conversions": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",

View File

@ -42,7 +42,7 @@ export const App = memo(() => (
{/* User pages */}
<Route element={<UserOutlet />}>
<Route path={'/file_download/:idWell/:idFile/*'} element={<FileDownload />} />
<Route path={'/file_download/:idFile/*'} element={<FileDownload />} />
<Route element={<LayoutPortal />}>
{/* Admin pages */}

View File

@ -114,7 +114,7 @@ const _LayoutPortal = memo(() => {
<a style={{ userSelect: 'none' }} onClick={() => setWellsTreeOpen((prev) => !prev)}>{currentWell}</a>
</Breadcrumb.Item>
)}
{breadcrumb}
{breadcrumb !== true && breadcrumb}
</Breadcrumb>
)}
{topRightBlock}

View File

@ -1,10 +1,9 @@
import { Breadcrumb, BreadcrumbItemProps } from 'antd'
import { Link, useLocation } from 'react-router-dom'
import { memo, useMemo } from 'react'
import { Link } from 'react-router-dom'
import { join } from 'path'
import { PrivateWellMenuItem } from '@components/PrivateWellMenu'
import { FunctionalValue, useFunctionalValue } from '@utils'
import { FunctionalValue, getFunctionalValue, } from '@utils'
export const makeBreadcrumbItems = (items: PrivateWellMenuItem[], pathParts: string[], root: string = '/') => {
const out = []
@ -22,35 +21,26 @@ export const makeBreadcrumbItems = (items: PrivateWellMenuItem[], pathParts: str
return out
}
export type MenuBreadcrumbItemsProps = {
menuItems: PrivateWellMenuItem[]
pathRoot?: RegExp
itemsProps?: FunctionalValue<(item: PrivateWellMenuItem) => BreadcrumbItemProps>
itemRender?: (item: PrivateWellMenuItem) => JSX.Element
export const makeMenuBreadcrumbItems = (
menuItems: PrivateWellMenuItem[],
path: string,
pathRoot: RegExp = /^\//,
itemsProps?: FunctionalValue<(item: PrivateWellMenuItem) => BreadcrumbItemProps>,
itemRender?: (item: PrivateWellMenuItem) => JSX.Element,
) => {
const getItemProps = getFunctionalValue(itemsProps)
const rootPart = pathRoot.exec(path)
if (!rootPart || rootPart.length <= 0) return []
const root = rootPart[0]
const parts = path.trim().slice(root.length).split('/')
const items = makeBreadcrumbItems(menuItems, parts, root)
return items.map((item) => (
<Breadcrumb.Item key={item.route} {...getItemProps(item)}>
{itemRender ? itemRender(item) : (
<Link to={item.route}>{item.title}</Link>
)}
</Breadcrumb.Item>
))
}
export const MenuBreadcrumbItems = memo<MenuBreadcrumbItemsProps>(({ menuItems, pathRoot = /^\//, itemsProps, itemRender }) => {
const location = useLocation()
const getItemProps = useFunctionalValue(itemsProps)
const items = useMemo(() => {
const path = location.pathname
const rootPart = pathRoot.exec(path)
if (!rootPart || rootPart.length <= 0) return []
const root = rootPart[0]
const parts = path.trim().slice(root.length).split('/')
return makeBreadcrumbItems(menuItems, parts, root)
}, [location, menuItems, pathRoot])
return (
<>
{items.map((item) => (
<Breadcrumb.Item key={item.route} {...getItemProps(item)}>
{itemRender ? itemRender(item) : (
<Link to={item.route}>{item.title}</Link>
)}
</Breadcrumb.Item>
))}
</>
)
})

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

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,

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

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

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 ?? '--'
}
})

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

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,

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

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}

View File

@ -1,44 +1,54 @@
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> & {
editing?: boolean
dataIndex?: NamePath
input?: ReactNode
isRequired?: boolean
title: string
formItemClass?: string
formItemRules?: Rule[]
children: ReactNode
initialValue: any
export type EditableCellProps = React.DetailedHTMLProps<React.TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement> & {
editing?: boolean
dataIndex?: Key
input?: ReactNode
isRequired?: boolean
formItemClass?: string
formItemRules?: Rule[]
children: ReactNode
initialValue: any
}
const itemStyle = { margin: 0 }
export const EditableCell = memo<EditableCellProps>(({
editing,
dataIndex,
input,
isRequired,
formItemClass,
formItemRules,
children,
initialValue,
...other
}) => (
<td style={editing ? { padding: 0 } : undefined} {...other}>
{!editing ? children : (
<Form.Item
name={dataIndex}
style={{ margin: 0 }}
className={formItemClass}
rules={formItemRules ?? [{
required: isRequired,
message: `Это обязательное поле!`,
}]}
initialValue={initialValue}
>
{input ?? <Input/>}
</Form.Item>
)}
</td>
))
editing,
dataIndex,
input,
isRequired,
formItemClass,
formItemRules,
children,
initialValue,
...other
}) => {
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 />}
</Form.Item>
), [name, rules, formItemClass, initialValue, input])
return (
<td style={tdStyle} {...other}>
{editing ? edititngItem : children}
</td>
)
})

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) => (

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={'Отображён'}

View File

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

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

View File

@ -1,9 +1,9 @@
import { Navigate, Route, Routes } from 'react-router-dom'
import { lazy, memo, useMemo } from 'react'
import { Navigate, Route, Routes, useLocation } from 'react-router-dom'
import { lazy, memo, useEffect, useMemo } from 'react'
import { RootPathContext, useLayoutProps, useRootPath } from '@asb/context'
import { FastRunMenu } from '@components/FastRunMenu'
import { MenuBreadcrumbItems } from '@components/MenuBreadcrumb'
import { makeMenuBreadcrumbItems } from '@components/MenuBreadcrumb'
import { NoAccessComponent, withPermissions } from '@utils'
import { AdminNavigationMenu, menuItems } from './AdminNavigationMenu'
@ -21,18 +21,21 @@ const TelemetryViewer = lazy(() => import('./Telemetry/TelemetryViewer'))
const TelemetryMerger = lazy(() => import('./Telemetry/TelemetryMerger'))
const VisitLog = lazy(() => import('./VisitLog'))
const layoutProps = {
sider: <AdminNavigationMenu />,
title: 'Администраторская панель',
isAdmin: true,
breadcrumb: <MenuBreadcrumbItems menuItems={menuItems} pathRoot={/^\/admin\//} />,
}
const AdminPanel = memo(() => {
const location = useLocation()
const root = useRootPath()
const rootPath = useMemo(() => `${root}/admin`, [root])
useLayoutProps(layoutProps)
const setLayoutProps = useLayoutProps()
useEffect(() => {
setLayoutProps({
sider: <AdminNavigationMenu />,
title: 'Администраторская панель',
isAdmin: true,
breadcrumb: makeMenuBreadcrumbItems(menuItems, location.pathname, /^\/admin\//),
})
}, [location.pathname])
return (
<RootPathContext.Provider value={rootPath}>

View File

@ -1,7 +1,6 @@
import { memo, useMemo } from 'react'
import { Table } from 'antd'
import { makeTextColumn, makeNumericColumnPlanFact } from '@components/Table'
import { Table, makeTextColumn, makeNumericColumnPlanFact } from '@components/Table'
import { getPrecision } from '@utils/functions'
const columns = [

View File

@ -1,40 +1,30 @@
import { Link, useNavigate, useParams } from 'react-router-dom'
import { memo, useCallback, useEffect, useState } from 'react'
import { Link, useLocation, useNavigate, useParams } from 'react-router-dom'
import { memo, useCallback, useEffect, useMemo, useState } from 'react'
import { InfoCircleFilled, CloseCircleOutlined } from '@ant-design/icons'
import { Button, Result, Typography } from 'antd'
import { downloadFile, invokeWebApiWrapperAsync } from '@components/factory'
import { withPermissions } from '@utils'
import { FileService, WellService } from '@api'
import { FileService } from '@api'
const { Paragraph, Text } = Typography
export const getLinkToFile = (fileInfo) => `/file_download/${fileInfo.idWell}/${fileInfo.id}`
export const getLinkToFile = (fileInfo) => `/file_download/${fileInfo.id}`
const FileDownload = memo(function FileDownload() {
const { idWell, idFile } = useParams()
const [well, setWell] = useState({})
const { idFile } = useParams()
const [file, setFile] = useState({})
const [isError, setIsError] = useState(false)
const navigate = useNavigate()
useEffect(() => {
invokeWebApiWrapperAsync(
async () => setWell(await WellService.get(idWell)),
null,
'Не удалось получить информацию о скважине',
{ actionName: 'Получение данных о скважине' }
)
}, [idWell])
const location = useLocation()
const isFirstOpenApp = useMemo(() => location.key === 'default', [location])
useEffect(() => {
invokeWebApiWrapperAsync(
async () => {
const files = await FileService.getFilesInfo(idWell)
// TODO Получается только одна категория файлов.
// Поменять при появлении метода получения инфы о конкретном файле
setFile(files.items.find((file) => file.id === idFile) ?? { id: idFile, idWell, name: `File_${idWell}_${idFile}` })
const file = await FileService.getFileInfo(idFile)
setFile(file)
},
null,
() => {
@ -43,10 +33,10 @@ const FileDownload = memo(function FileDownload() {
},
{ actionName: 'Получение информации о файле' }
)
}, [idWell, idFile])
}, [idFile])
const download = useCallback(async () => {
if (!await downloadFile(file))
if (!file || !await downloadFile(file))
setIsError(true)
}, [file])
@ -58,13 +48,16 @@ const FileDownload = memo(function FileDownload() {
<>
Вы перешли к странице загрузки файла!
<br />
Файл "{file.name ?? ('№' + idFile)}", скважина "{well.caption ?? ('№' + idWell)}".
Файл "{file?.name ?? ('№' + idFile)}".
</>
)}
// subTitle={}
extra={(
<>
<Button type={'ghost'} onClick={() => navigate('/')}>Вернуться на главную</Button>
{isFirstOpenApp
? <Button type={'ghost'} onClick={() => navigate('/')}>Вернуться на главную</Button>
: <Button type={'ghost'} onClick={() => navigate(-1)}>Вернуться на страницу документов</Button>
}
<Button type={'primary'} onClick={download}>Загрузить</Button>
</>
)}

View File

@ -1,12 +1,12 @@
import { Link, useLocation } from 'react-router-dom'
import { useState, useEffect, memo, useMemo, lazy, Suspense } from 'react'
import { LineChartOutlined, ProfileOutlined, TeamOutlined } from '@ant-design/icons'
import { Table, Button, Badge, Divider, Modal, Row, Col } from 'antd'
import { Button, Badge, Divider, Modal, Row, Col } from 'antd'
import { useWell } from '@asb/context'
import LoaderPortal from '@components/LoaderPortal'
import { invokeWebApiWrapperAsync } from '@components/factory'
import { makeTextColumn, makeNumericColumnPlanFact, makeNumericColumn } from '@components/Table'
import { Table, makeTextColumn, makeNumericColumnPlanFact, makeNumericColumn } from '@components/Table'
import { WellCompositeService } from '@api'
import {
hasPermission,

View File

@ -1,15 +1,15 @@
import { DatePicker, Descriptions, Form, Input, InputNumber, Modal, Table, Tabs } from 'antd'
import { DatePicker, Descriptions, Form, Input, InputNumber, Modal, Table as RawTable, Tabs } from 'antd'
import { memo, useCallback, useEffect, useState } from 'react'
import moment from 'moment'
import { useWell } from '@asb/context'
import LoaderPortal from '@components/LoaderPortal'
import { invokeWebApiWrapperAsync } from '@components/factory'
import { makeColumn, makeGroupColumn } from '@components/Table'
import { Table, makeColumn, makeGroupColumn } from '@components/Table'
import { DailyReportService } from '@api'
const { Item: RawItem } = Form
const { Summary } = Table
const { Summary } = RawTable
const { TabPane } = Tabs
const Item = memo(({ style, ...other }) => <RawItem style={{ margin: 0, ...style }} {...other} />)

View File

@ -72,8 +72,7 @@ const DailyReport = memo(() => {
const filteredData = useMemo(() => {
if (!searchDate) return data
const endDate = moment(searchDate[1]).add(1, 'd')
return data.filter((row) => moment(row.reportDate).isBetween(searchDate[0], endDate, 'ms', '[)'))
return data.filter((row) => moment(row.reportDate).isBetween(searchDate[0], searchDate[1], 'day', '[]'))
}, [data, searchDate])
return (

View File

@ -1,7 +1,7 @@
import { Table } from 'antd'
import { useState, useEffect, useCallback, memo, useMemo } from 'react'
import { useWell } from '@asb/context'
import { Table } from '@components/Table'
import LoaderPortal from '@components/LoaderPortal'
import { invokeWebApiWrapperAsync } from '@components/factory'
import { Subscribe } from '@services/signalr'
@ -22,7 +22,7 @@ export const ActiveMessagesOnline = memo(({ well: givenWell }) => {
if (messages)
setMessages(messages.items.splice(0, 4))
}, [])
const columns = useMemo(() => makeMessageColumns(well.id), [well.id])
useEffect(() => {

View File

@ -1,5 +1,5 @@
import { memo, useCallback, useEffect, useMemo, useState } from 'react'
import { Alert, Button, Typography } from 'antd'
import { Alert, Button } from 'antd'
import { useWell } from '@asb/context'
import { UserView } from '@components/views'

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]) => ({

View File

@ -4,7 +4,7 @@ import { Navigate, Route, Routes, useLocation, useParams } from 'react-router-do
import { WellContext, RootPathContext, useRootPath, useLayoutProps, TopRightBlockContext } from '@asb/context'
import { FastRunMenu } from '@components/FastRunMenu'
import { invokeWebApiWrapperAsync } from '@components/factory'
import { MenuBreadcrumbItems } from '@components/MenuBreadcrumb'
import { makeMenuBreadcrumbItems } from '@components/MenuBreadcrumb'
import { NoAccessComponent, withPermissions } from '@utils'
import { WellService } from '@api'
@ -78,9 +78,9 @@ const Well = memo(() => {
useEffect(() => setLayoutProps({
sider: <NavigationMenu idWell={well.id} />,
breadcrumb: <MenuBreadcrumbItems menuItems={menuItems} pathRoot={/^\/well\/[0-9]+\//} />,
breadcrumb: makeMenuBreadcrumbItems(menuItems, location.pathname, /^\/well\/[0-9]+\//),
topRightBlock: topRightBlock,
}), [well, setLayoutProps, topRightBlock])
}), [well, location.pathname, setLayoutProps, topRightBlock])
useEffect(() => setTopRightBlock(undefined), [location])

View File

@ -1 +0,0 @@
/// <reference types="react-scripts" />

View File

@ -1,12 +0,0 @@
import { getCLS, getFID, getFCP, getLCP, getTTFB, ReportHandler } from 'web-vitals'
export const reportWebVitals = (onPerfEntry?: ReportHandler) => {
if (!onPerfEntry) return
getCLS(onPerfEntry)
getFID(onPerfEntry)
getFCP(onPerfEntry)
getLCP(onPerfEntry)
getTTFB(onPerfEntry)
}
export default reportWebVitals