Добавлен столбец временной зоны на страницы управления Месторождениями/Кустами/Скважинами

This commit is contained in:
Александр Сироткин 2022-02-28 12:51:45 +05:00
parent 9ee3e89bd1
commit 43e85364b0
5 changed files with 79 additions and 7 deletions

View File

@ -1,6 +1,7 @@
import { memo, useEffect, useState, ReactNode } from 'react' import { memo, useEffect, useState, ReactNode } from 'react'
import { InputNumber, Select, Table as RawTable, Tag, SelectProps, TableProps } from 'antd' import { InputNumber, Select, Table as RawTable, Tag, SelectProps, TableProps } from 'antd'
import { DefaultOptionType, SelectValue } from 'antd/lib/select' import { DefaultOptionType, SelectValue } from 'antd/lib/select'
import { ColumnProps } from 'antd/lib/table'
import { Rule } from 'rc-field-form/lib/interface' import { Rule } from 'rc-field-form/lib/interface'
import { tryAddKeys } from './EditableTable' import { tryAddKeys } from './EditableTable'
@ -32,11 +33,11 @@ export const makeNumericRender = (fixed?: number) => (value: any, _: object): Re
) )
} }
export const makeNumericColumnOptions = (fixed?: number, sorterKey?: string) => ({ export const makeNumericColumnOptions = (fixed?: number, sorterKey?: string): columnPropsOther => ({
editable: true, editable: true,
initialValue: 0, initialValue: 0,
width: 100, width: 100,
sorter: sorterKey ? makeNumericSorter(sorterKey) : null, sorter: sorterKey ? makeNumericSorter(sorterKey) : undefined,
formItemRules: [ formItemRules: [
{ {
required: true, required: true,
@ -51,7 +52,7 @@ export const makeNumericColumnOptions = (fixed?: number, sorterKey?: string) =>
other - объект с дополнительными свойствами колонки other - объект с дополнительными свойствами колонки
поддерживаются все базовые свойства из описания https://ant.design/components/table/#Column поддерживаются все базовые свойства из описания https://ant.design/components/table/#Column
плю дополнительные для колонок EditableTable: */ плю дополнительные для колонок EditableTable: */
interface columnPropsOther { type columnPropsOther<T = any> = ColumnProps<T> & {
// редактируемая колонка // редактируемая колонка
editable?: boolean editable?: boolean
// react компонента редактора // react компонента редактора
@ -309,3 +310,69 @@ export type TableContainer = TableProps<any> & {
export const Table = memo<TableContainer>(({dataSource, children, ...other}) => ( export const Table = memo<TableContainer>(({dataSource, children, ...other}) => (
<RawTable dataSource={tryAddKeys(dataSource)} {...other}>{children}</RawTable> <RawTable dataSource={tryAddKeys(dataSource)} {...other}>{children}</RawTable>
)) ))
const rawTimezones = {
'Калининград': 2,
'Москва': 3,
'Самара': 4,
'Екатеринбург': 5,
'Омск': 6,
'Красноярск': 7,
'Новосибирск': 7,
'Иркутск': 8,
'Чита': 9,
'Владивосток': 10,
'Магадан': 11,
'Южно-Сахалинск': 11,
'Среднеколымск': 11,
'Анадырь': 12,
'Петропавловск-Камчатский': 12,
}
const timezoneOptions = Object
.entries(rawTimezones)
.sort((a, b) => a[1] - b[1])
.map(([id, hours]) => ({
label: `UTC${hours > 0 ? '+':''}${('0' + hours).slice(-2)} :: ${id}`,
value: id,
}))
export type TimezoneSelectProps = SelectProps & {
//
}
export const TimezoneSelect = memo<TimezoneSelectProps>(({ onChange, ...other }) => {
const [id, setId] = useState<keyof typeof rawTimezones | null>(null)
useEffect(() => onChange?.({
timezoneId: id,
hours: id ? rawTimezones[id] : 0,
isOverride: false,
}, []), [id, onChange])
return (<Select {...other} onChange={setId} value={id} />)
})
export const makeTimezoneColumn = (
title: string = 'Зона',
key: string = 'timezone',
defaultValue: any = null,
allowClear: boolean = true,
other?: columnPropsOther
) => makeColumn(title, key, {
width: 100,
editable: true,
render: (timezone) => {
if (!timezone) return 'UTC~?? :: Неизвестно'
const { hours, timezoneId } = timezone
return `UTC${hours > 0 ? '+':''}${hours ? ('0' + hours).slice(-2) : '~??'} :: ${timezoneId ?? 'Неизвестно'}`
},
input: (
<TimezoneSelect
allowClear={allowClear}
options={timezoneOptions}
defaultValue={defaultValue}
/>
),
...other
})

View File

@ -6,7 +6,8 @@ import {
makeSelectColumn, makeSelectColumn,
makeActionHandler, makeActionHandler,
makeStringSorter, makeStringSorter,
defaultPagination defaultPagination,
makeTimezoneColumn
} 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'
@ -36,6 +37,7 @@ export const ClusterController = memo(() => {
}), }),
makeColumn('Широта', 'latitude', { width: 150, editable: true, render: coordsFixed }), makeColumn('Широта', 'latitude', { width: 150, editable: true, render: coordsFixed }),
makeColumn('Долгота', 'longitude', { width: 150, editable: true, render: coordsFixed }), makeColumn('Долгота', 'longitude', { width: 150, editable: true, render: coordsFixed }),
makeTimezoneColumn('Зона', 'timezone', null, true, { width: 150 }),
] ]
const updateTable = () => invokeWebApiWrapperAsync( const updateTable = () => invokeWebApiWrapperAsync(

View File

@ -2,7 +2,7 @@ import { memo, useEffect, useState } from 'react'
import LoaderPortal from '@components/LoaderPortal' import LoaderPortal from '@components/LoaderPortal'
import { invokeWebApiWrapperAsync } from '@components/factory' import { invokeWebApiWrapperAsync } from '@components/factory'
import { EditableTable, makeColumn, makeActionHandler, defaultPagination } from '@components/Table' import { EditableTable, makeColumn, makeActionHandler, defaultPagination, makeTimezoneColumn } from '@components/Table'
import { AdminDepositService } from '@api' import { AdminDepositService } from '@api'
import { arrayOrDefault } from '@utils' import { arrayOrDefault } from '@utils'
import { min1 } from '@utils/validationRules' import { min1 } from '@utils/validationRules'
@ -13,7 +13,8 @@ export const coordsFixed = (coords) => coords && isFinite(coords) ? (+coords).to
const depositColumns = [ const depositColumns = [
makeColumn('Название', 'caption', { width: 200, editable: true, formItemRules: min1 }), makeColumn('Название', 'caption', { width: 200, editable: true, formItemRules: min1 }),
makeColumn('Широта', 'latitude', { width: 150, editable: true, render: coordsFixed }), makeColumn('Широта', 'latitude', { width: 150, editable: true, render: coordsFixed }),
makeColumn('Долгота', 'longitude', { width: 150, editable: true, render: coordsFixed }) makeColumn('Долгота', 'longitude', { width: 150, editable: true, render: coordsFixed }),
makeTimezoneColumn('Зона', 'timezone', null, true, { width: 150 }),
] ]
export const DepositController = memo(() => { export const DepositController = memo(() => {

View File

@ -17,6 +17,7 @@ import {
makeNumericSorter, makeNumericSorter,
makeTagColumn, makeTagColumn,
defaultPagination, defaultPagination,
makeTimezoneColumn,
} 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'
@ -94,6 +95,7 @@ export const WellController = memo(() => {
render: (telemetry) => <TelemetryView telemetry={telemetry} />, render: (telemetry) => <TelemetryView telemetry={telemetry} />,
input: <TelemetrySelect telemetry={telemetry}/>, input: <TelemetrySelect telemetry={telemetry}/>,
}, ), }, ),
makeTimezoneColumn('Зона', 'timezone', null, true, { width: 170 }),
makeTagColumn('Компании', 'companies', companies, 'id', 'caption', { makeTagColumn('Компании', 'companies', companies, 'id', 'caption', {
editable: true, editable: true,
render: (company) => <CompanyView company={company} />, render: (company) => <CompanyView company={company} />,

View File

@ -82,7 +82,7 @@ export const CategoryRender = memo(({ idWell, partData, onUpdate, onEdit, onHist
const onUploadError = useCallback((e) => { const onUploadError = useCallback((e) => {
notify(e?.message ?? 'Ошибка загрузки файла', 'error') notify(e?.message ?? 'Ошибка загрузки файла', 'error')
setIsUploading(false) setIsUploading(false)
}) }, [])
return ( return (
<LoaderPortal show={isUploading}> <LoaderPortal show={isUploading}>