Merged in fix/fixed-display-data-in-table-on-page-modes (pull request #9)

Fix/fixed display data in table on page modes

Approved-by: Никита Фролов

src/components/Table/Columns/index.ts

@@ -12,7 +12,6 @@ export {
     makeNumericColumnPlanFact,
     makeNumericStartEnd,
     makeNumericMinMax,
-    makeNumericAvgRange
 } from './numeric'
 export { makeColumnsPlanFact } from './plan_fact'
 export { makeSelectColumn } from './select'

src/components/Table/Columns/numeric.tsx

@@ -94,18 +94,4 @@ export const makeNumericMinMax = (
     makeNumericColumn('макс', dataIndex + 'Max', filters, filterDelegate, renderDelegate, width, makeNumericColumnOptions(fixed, dataIndex + 'Max')),
 ])
 
-export const makeNumericAvgRange = (
-    title: ReactNode,
-    dataIndex: string,
-    fixed: number,
-    filters: object[],
-    filterDelegate: (key: string | number) => any,
-    renderDelegate: (_: any, row: object) => any,
-    width: string
-) => makeGroupColumn(title, [
-    makeNumericColumn('мин', dataIndex + 'Min', filters, filterDelegate, renderDelegate, width, makeNumericColumnOptions(fixed, dataIndex + 'Min')),
-    makeNumericColumn('сред', dataIndex + 'Avg', filters, filterDelegate, renderDelegate, width, makeNumericColumnOptions(fixed, dataIndex + 'Avg')),
-    makeNumericColumn('макс', dataIndex + 'Max', filters, filterDelegate, renderDelegate, width, makeNumericColumnOptions(fixed, dataIndex + 'Max'))
-])
-
 export default makeNumericColumn

src/components/Table/index.tsx

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

src/components/Table/sorters.ts

@@ -7,6 +7,9 @@ import { DataType } from './Columns'
 export const makeNumericSorter = <T extends unknown>(key: keyof 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

src/pages/WellOperations/WellDrillParams.jsx

@@ -1,17 +1,87 @@
 import { useState, useEffect, useCallback, memo, useMemo } from 'react'
+import { InputNumber } from 'antd'
 
 import { useWell } from '@asb/context'
 import {
     EditableTable,
     makeSelectColumn,
-    makeNumericAvgRange,
+    makeGroupColumn,
+    makeNumericRender,
     makeNumericSorter,
+    RegExpIsFloat,
 } 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)

src/styles/index.css

@@ -142,3 +142,15 @@ code {
   height: 32px;
   padding: 4px 15px;
 }
+
+.ant-table-cell:has(.color-pale-green) {
+  background-color: #98fb98;
+}
+
+.ant-table-tbody > tr > td.ant-table-cell-row-hover:has( > div.color-pale-green) {
+  background: #98fb98;
+}
+
+.color-pale-green {
+  background-color: #98fb98;
+}