Подготовка к обновлению AntD и мелкие исправления

src/components/ChangePassword.tsx

@@ -63,7 +63,7 @@ export const ChangePassword = memo<ChangePasswordProps>(({ user, visible, onCanc
                     {user && <>&nbsp;(<UserView user={user} />)</>}
                 </>
             )}
-            visible={visible}
+            open={visible}
             onCancel={onModalCancel}
             onOk={() => form.submit()}
             okText={'Сохранить'}

src/components/ColorPicker.tsx

@@ -106,7 +106,7 @@ export const ColorPicker = memo<ColorPickerProps>(({ value = '#AA33BB', onChange
     return (
         <Popover
             trigger={'click'}
-            onVisibleChange={onClose}
+            onOpenChange={onClose}
             content={(
                 <div className={'asb-color-picker-content'}>
                     <div className={'asb-color-picker-sliders'}>

src/components/Table/TableSettingsChanger.tsx

@@ -84,7 +84,7 @@ const _TableSettingsChanger = <T extends object>({ title, columns, settings, onC
         <>
             <Modal
                 centered
-                visible={visible}
+                open={visible}
                 onCancel={onModalCancel}
                 onOk={onModalOk}
                 title={title ?? 'Настройка отображения таблицы'}

src/components/d3/monitoring/D3MonitoringEditor.tsx

@@ -135,7 +135,7 @@ const _D3MonitoringEditor = <DataType extends BaseDataType>({
         <Modal
             centered
             width={800}
-            visible={visible}
+            open={visible}
             title={'Настройка групп графиков'}
             onCancel={onCancel}
             footer={(

src/components/selectors/Poprompt.tsx

@@ -39,8 +39,8 @@ export const Poprompt = memo<PopromptProps>(({ formProps, buttonProps, footer, c
             )}
             trigger={'click'}
             {...other}
-            visible={visible}
+            open={visible}
-            onVisibleChange={(visible) => setVisible(visible)}
+            onOpenChange={(visible) => setVisible(visible)}
         >
             <Button {...buttonProps}>{text}</Button>
         </Popover>

src/components/widgets/WidgetSettingsWindow.tsx

@@ -20,7 +20,7 @@ export const WidgetSettingsWindow = memo<WidgetSettingsWindowProps>(({ settings,
     return (
         <Modal
             {...other}
-            visible={!!settings}
+            open={!!settings}
             title={(
                 <>
                     Настройка виджета {settings?.label ? `"${settings?.label}"` : ''}

src/pages/AdminPanel/AdminNavigationMenu.jsx

@@ -36,7 +36,6 @@ export const AdminNavigationMenu = memo((props) => (
         {...props}
         items={menuItems}
         rootPath={'/admin'}
-        inlineCollapsed={true}
         selectable={false}
         mode={'inline'}
         theme={'dark'}

src/pages/Cluster/ClusterWells.jsx

@@ -179,7 +179,7 @@ const ClusterWells = memo(({ statsWells }) => {
       <Modal
         title={'TVD'}
         centered
-        visible={isTVDModalVisible}
+        open={isTVDModalVisible}
         onCancel={() => setIsTVDModalVisible(false)}
         width={1500}
         footer={null}
@@ -192,7 +192,7 @@ const ClusterWells = memo(({ statsWells }) => {
       <Modal
         title={'Операции'}
         centered
-        visible={isOpsModalVisible}
+        open={isOpsModalVisible}
         onCancel={() => setIsOpsModalVisible(false)}
         width={1500}
         footer={null}
@@ -205,7 +205,7 @@ const ClusterWells = memo(({ statsWells }) => {
       <Modal
           title={'Участники'}
           centered
-          visible={isCompaniesModalVisible}
+          open={isCompaniesModalVisible}
           onCancel={() => setIsCompaniesModalVisible(false)}
           width={1500}
           footer={null}

src/pages/Cluster/CompaniesTable.jsx

@@ -1,10 +1,10 @@
 import { memo, useMemo } from 'react'
 import { BankOutlined } from '@ant-design/icons'
 
-import { makeTextColumn, Table } from '@components/Table'
+import { makeColumn, makeTextColumn, Table } from '@components/Table'
 
 const columns = [
-    makeTextColumn('', 'logo'),
+    makeColumn('', 'logo'),
     makeTextColumn('Название компании', 'caption'),
     makeTextColumn('Тип компании', 'companyTypeCaption'),
 ]
@@ -12,7 +12,11 @@ const columns = [
 const CompaniesTable = memo(({ companies }) => {
     const dataCompanies = useMemo(() => companies?.map((company) => ({
         key: company.id,
-        logo: company?.logo ? <img src={company.logo}/> : <BankOutlined/>,
+        logo: (
+            <div className={'centered'}>
+                {company?.logo ? <img src={company.logo}/> : <BankOutlined/>}
+            </div>
+        ),
         caption: company.caption,
         companyTypeCaption: company.companyTypeCaption,
     })), [companies])

src/pages/Cluster/WellOperationsTable.jsx

@@ -7,8 +7,8 @@ import { getPrecision } from '@utils/functions'
 const columns = [
     makeTextColumn('Конструкция секции', 'sectionType'),
     makeTextColumn('Операция', 'operationName'),
-    makeNumericColumnPlanFact('Глубина забоя', 'depth', null, null, getPrecision),
+    makeNumericColumnPlanFact('Глубина забоя', 'depth', null, null, (number) => getPrecision(number)),
-    makeNumericColumnPlanFact('Часы', 'durationHours', null, null, getPrecision),
+    makeNumericColumnPlanFact('Часы', 'durationHours', null, null, (number) => getPrecision(number)),
     makeNumericColumnPlanFact('Комментарий', 'comment', null, null, (text) => text ?? '-')
 ]
 

src/pages/Well/Analytics/WellCompositeEditor/NewParamsTable.jsx

@@ -7,7 +7,7 @@ import LoaderPortal from '@components/LoaderPortal'
 import { invokeWebApiWrapperAsync } from '@components/factory'
 import { DrillParamsService } from '@api'
 
-import { getColumns } from '@asb/pages/Well/WellOperations/WellDrillParams'
+import { getColumns } from '@pages/Well/WellOperations/WellDrillParams'
 
 export const NewParamsTable = memo(({ selectedWellsKeys }) => {
     const [params, setParams] = useState([])
@@ -54,7 +54,7 @@ export const NewParamsTable = memo(({ selectedWellsKeys }) => {
             <Modal
                 title={'Заполнить режимы текущей скважины'}
                 centered
-                visible={isParamsModalVisible}
+                open={isParamsModalVisible}
                 onCancel={() => setIsParamsModalVisible(false)}
                 width={1700}
                 footer={(

src/pages/Well/Analytics/WellCompositeEditor/WellCompositeSections.jsx

@@ -1,7 +1,7 @@
 import { Link, useLocation } from 'react-router-dom'
-import { useState, useEffect, memo, useMemo } from 'react'
+import { useState, useEffect, memo, useMemo, lazy, Suspense } from 'react'
 import { LineChartOutlined, ProfileOutlined, TeamOutlined } from '@ant-design/icons'
-import { Table, Tag, Button, Badge, Divider, Modal, Row, Col } from 'antd'
+import { Table, Button, Badge, Divider, Modal, Row, Col } from 'antd'
 
 import { useWell } from '@asb/context'
 import LoaderPortal from '@components/LoaderPortal'
@@ -16,10 +16,12 @@ import {
   getOperations
 } from '@utils'
 
-import Tvd from '@asb/pages/Well/WellOperations/Tvd'
-import WellOperationsTable from '@pages/Cluster/WellOperationsTable'
 import NewParamsTable from './NewParamsTable'
-import CompaniesTable from '@pages/Cluster/CompaniesTable'
+import SuspenseFallback from '@asb/components/SuspenseFallback'
+
+const Tvd = lazy(() => import('@pages/Well/WellOperations/Tvd'))
+const CompaniesTable = lazy(() => import('@pages/Cluster/CompaniesTable'))
+const WellOperationsTable = lazy(() => import('@pages/Cluster/WellOperationsTable'))
 
 const filtersMinMax = [
   { text: 'min', value: 'min' },
@@ -222,38 +224,44 @@ const WellCompositeSections = memo(({ statsWells, selectedSections }) => {
       <Modal
         title={'TVD'}
         centered
-        visible={isTVDModalVisible}
+        open={isTVDModalVisible}
         onCancel={() => setIsTVDModalVisible(false)}
         width={1500}
         footer={null}
       >
+        <Suspense fallback={<SuspenseFallback style={{ minHeight: '100%' }} />}>
           <Tvd well={selectedWell} style={{ height: '80vh' }} />
+        </Suspense>
       </Modal>
 
       <Modal
         title={'Операции'}
         centered
-        visible={isOpsModalVisible}
+        open={isOpsModalVisible}
         onCancel={() => setIsOpsModalVisible(false)}
         width={1500}
         footer={null}
       >
+        <Suspense fallback={<SuspenseFallback style={{ minHeight: '100%' }} />}>
           <LoaderPortal show={showLoader}>
             <WellOperationsTable wellOperations={wellOperations} />
           </LoaderPortal>
+        </Suspense>
       </Modal>
 
       <Modal
           title={'Участники'}
           centered
-          visible={isCompaniesModalVisible}
+          open={isCompaniesModalVisible}
           onCancel={() => setIsCompaniesModalVisible(false)}
           width={1500}
           footer={null}
       >
+        <Suspense fallback={<SuspenseFallback style={{ minHeight: '100%' }} />}>
           <LoaderPortal show={showLoader}>
             <CompaniesTable companies={companies} />
           </LoaderPortal>
+        </Suspense>
       </Modal>
     </>
   )

src/pages/Well/Analytics/WellCompositeEditor/index.jsx

@@ -1,17 +1,18 @@
 import { Navigate, Route, Routes } from 'react-router-dom'
-import { useState, useEffect, memo, Suspense } from 'react'
+import { useState, useEffect, memo, Suspense, lazy } from 'react'
 import { Row } from 'antd'
 
 import { useWell } from '@asb/context'
 import LoaderPortal from '@components/LoaderPortal'
+import SuspenseFallback from '@components/SuspenseFallback'
 import WellSelector from '@components/selectors/WellSelector'
 import { invokeWebApiWrapperAsync } from '@components/factory'
 import { arrayOrDefault, NoAccessComponent, wrapPrivateComponent } from '@utils'
 import { OperationStatService, WellCompositeService } from '@api'
 
-import ClusterWells from '@pages/Cluster/ClusterWells'
 import WellCompositeSections from './WellCompositeSections'
-import SuspenseFallback from '@asb/components/SuspenseFallback'
+
+const ClusterWells = lazy(() => import('@pages/Cluster/ClusterWells'))
 
 const properties = {
     requirements: ['OperationStat.get', 'WellComposite.get'],
@@ -64,16 +65,16 @@ const WellCompositeEditor = memo(() => {
 
     return (
         <LoaderPortal show={showLoader}>
-            <Row align={'middle'} justify={'space-between'} wrap={false} style={{ backgroundColor: 'white' }}>
+            <Row align={'middle'} justify={'space-between'} wrap={false} style={{ backgroundColor: 'white', marginBottom: '15px' }}>
                 <WellSelector onChange={setSelectedIdWells} value={selectedIdWells} />
             </Row>
             <Suspense fallback={<SuspenseFallback style={{ minHeight: '100%' }} />}>
                 <Routes>
-                    <Route index element={<Navigate to={ClusterWells.route} replace/>} />
+                    <Route index element={<Navigate to={'wells'} replace/>} />
                     <Route path={'*'} element={<NoAccessComponent />} />
 
-                    <Route path={ClusterWells.route} element={<ClusterWells statsWells={statsWells} />} />
+                    <Route path={'wells'} element={<ClusterWells statsWells={statsWells} />} />
-                    <Route path={WellCompositeSections.route} element={<WellCompositeSections statsWells={statsWells} selectedSections={selectedSections} />} />
+                    <Route path={'sections'} element={<WellCompositeSections statsWells={statsWells} selectedSections={selectedSections} />} />
                 </Routes>
             </Suspense>
         </LoaderPortal>

src/pages/Well/DrillingProgram/CategoryEditor.jsx

@@ -159,7 +159,7 @@ export const CategoryEditor = memo(({ visible, category, onClosed }) => {
         <Modal
             centered
             width={1000}
-            visible={visible}
+            open={visible}
             footer={null}
             onCancel={onModalClosed}
             title={`Редактирование пользователей категории ${title}`}

src/pages/Well/DrillingProgram/CategoryHistory.jsx

@@ -94,7 +94,7 @@ export const CategoryHistory = ({ idCategory, visible, onClose }) => {
             title={'История категории'}
             width={1200}
             centered
-            visible={!!visible}
+            open={!!visible}
             onCancel={onClose}
             footer={(
                 <Button onClick={onClose}>Закрыть</Button>

src/pages/Well/Measure/InclinometryTable.jsx

@@ -35,7 +35,7 @@ export const InclinometryTable = memo(({ group, visible, onClose }) => {
         <Modal
             title={group?.title}
             centered
-            visible={visible}
+            open={visible}
             onCancel={onClose}
             width={1900}
             footer={null}

src/pages/Well/NavigationMenu.jsx

@@ -68,7 +68,6 @@ export const NavigationMenu = memo((props) => (
         {...props}
         items={menuItems}
         rootPath={'/well/{wellId}'}
-        inlineCollapsed={true}
         mode={'inline'}
         theme={'dark'}
         style={{ backgroundColor: 'transparent' }}

src/pages/Well/Reports/DailyReport/ReportEditor.jsx

@@ -374,7 +374,7 @@ export const ReportEditor = memo(({ visible, data, onDone, onCancel, checkIsDate
         <Modal
             centered
             width={1200}
-            visible={visible}
+            open={visible}
             onCancel={onCancel}
             okText={'Сохранить'}
             title={data ? (

src/pages/Well/Telemetry/Operations/DrillerList.jsx

@@ -53,7 +53,7 @@ export const DrillerList = memo(({ loading, drillers, onChange }) => {
                 centered
                 width={500}
                 footer={null}
-                visible={showModal}
+                open={showModal}
                 onCancel={onModalCancel}
                 title={'Список бурильщиков'}
             >

src/pages/Well/Telemetry/Operations/DrillerSchedule.jsx

@@ -100,7 +100,7 @@ export const DrillerSchedule = memo(({ drillers, loading, onChange }) => {
                 centered
                 width={1600}
                 footer={null}
-                visible={modalVisible}
+                open={modalVisible}
                 onCancel={onModalCancel}
                 title={'Настройка бурильщиков и расписаний'}
             >

src/pages/Well/Telemetry/Operations/TargetEditor.jsx

@@ -96,7 +96,7 @@ export const TargetEditor = memo(({ loading, onChange }) => {
                 centered
                 width={1000}
                 footer={null}
-                visible={showModal}
+                open={showModal}
                 onCancel={onModalCancel}
                 title={'Цели бурения'}
             >

src/pages/Well/Telemetry/TelemetryView/Setpoints/SetpointSender.jsx

@@ -80,7 +80,7 @@ export const SetpointSender = memo(({ onClose, visible, setpointNames }) => {
         <Modal
             width={800}
             title={'Рекомендовать уставки'}
-            visible={visible}
+            open={visible}
             onCancel={onClose}
             onOk={onModalOk}
             okText={'Отправить'}

src/pages/Well/Telemetry/TelemetryView/Setpoints/SetpointViewer.jsx

@@ -38,7 +38,7 @@ export const SetpointViewer = memo(({ setpoint, visible, onClose, setpointNames
             width={800}
             title={`Уставка от ${date}`}
             onCancel={onClose}
-            visible={visible}
+            open={visible}
             footer={null}
         >
             <Grid>

src/pages/Well/Telemetry/TelemetryView/Setpoints/index.jsx

@@ -89,7 +89,7 @@ export const Setpoints = memo(({ ...other }) => {
                         </Button>
                     </>
                 )}
-                visible={isModalVisible}
+                open={isModalVisible}
                 onCancel={() => setIsModalVisible(false)}
                 footer={null}
             >

src/pages/Well/Telemetry/TelemetryView/WirelineRunOut.jsx

@@ -33,7 +33,7 @@ export const WirelineRunOut = memo(() => {
     return (
         <WirelineView
             wireline={twro}
-            onVisibleChange={onTooltipVisibleChanged}
+            onOpenChange={onTooltipVisibleChanged}
             buttonProps={{ loading: isLoading }}
         />
     )

src/pages/Well/WellCase/WellCaseEditor.jsx

@@ -117,7 +117,7 @@ export const WellCaseEditor = memo(({ categories: currentCategories, show, onClo
         <Modal
             centered
             width={1000}
-            visible={show}
+            open={show}
             onOk={onModalOk}
             onCancel={onModalCancel}
             okText={'Сохранить'}

src/pages/Well/WellCase/index.jsx

@@ -62,7 +62,7 @@ const WellCase = memo(() => {
         }),
         makeDateColumn('Дата загрузки', 'uploadDate'),
         makeColumn('Ответственные', 'publishers', {
-            render: (publishers) => publishers?.map((user) => <UserView user={user} style={{ marginLeft: 10 }} />),
+            render: (publishers) => publishers?.map((user, i) => <UserView key={`${i}`} user={user} style={{ marginLeft: 10 }} />),
         }),
     ], [well, updateTable])
 

src/pages/Well/WellOperations/ImportExportBar.jsx

@@ -48,7 +48,7 @@ export const ImportExportBar = memo(({ well: givenWell, onImported, disabled })
 
       <Modal
         title={'Импорт операций'}
-        visible={isImportModalVisible}
+        open={isImportModalVisible}
         onCancel={() => setIsImportModalVisible(false)}
         footer={null}
       >

src/pages/Well/index.jsx

@@ -49,8 +49,6 @@ const Well = memo(() => {
 
     const setLayoutProps = useLayoutProps()
 
-    useEffect(() => console.log(well), [well])
-
     const updateWell = useCallback((data) => invokeWebApiWrapperAsync(
         async () => {
             const newWell = { ...well, ...data }

src/styles/App.less

@@ -109,3 +109,11 @@ tr.table_row_size {
         display: none;
     }
 }
+
+.centered {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    justify-content: center;
+    align-items: center;
+}