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

2022-10-13 18:49:26 +05:00 · 2022-10-13 18:49:26 +05:00 · d14513e249
commit d14513e249
parent 718d32f2b9
30 changed files with 74 additions and 57 deletions
--- a/src/components/ChangePassword.tsx
+++ b/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={'Сохранить'}
--- a/src/components/ColorPicker.tsx
+++ b/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'}>
--- a/src/components/Table/TableSettingsChanger.tsx
+++ b/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 ?? 'Настройка отображения таблицы'}
--- a/src/components/d3/monitoring/D3MonitoringEditor.tsx
+++ b/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={(
--- a/src/components/selectors/Poprompt.tsx
+++ b/src/components/selectors/Poprompt.tsx
@ -39,8 +39,8 @@ export const Poprompt = memo<PopromptProps>(({ formProps, buttonProps, footer, c
            )}
            trigger={'click'}
            {...other}
-            visible={visible}
-            onVisibleChange={(visible) => setVisible(visible)}
+            open={visible}
+            onOpenChange={(visible) => setVisible(visible)}
        >
            <Button {...buttonProps}>{text}</Button>
        </Popover>
--- a/src/components/widgets/WidgetSettingsWindow.tsx
+++ b/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}"` : ''}
--- a/src/pages/AdminPanel/AdminNavigationMenu.jsx
+++ b/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'}
--- a/src/pages/Cluster/ClusterWells.jsx
+++ b/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}
--- a/src/pages/Cluster/CompaniesTable.jsx
+++ b/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])
--- a/src/pages/Cluster/WellOperationsTable.jsx
+++ b/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('Часы', 'durationHours', null, null, getPrecision),
+    makeNumericColumnPlanFact('Глубина забоя', 'depth', null, null, (number) => getPrecision(number)),
+    makeNumericColumnPlanFact('Часы', 'durationHours', null, null, (number) => getPrecision(number)),
    makeNumericColumnPlanFact('Комментарий', 'comment', null, null, (text) => text ?? '-')
 ]

--- a/src/pages/Well/Analytics/WellCompositeEditor/NewParamsTable.jsx
+++ b/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={(
--- a/src/pages/Well/Analytics/WellCompositeEditor/WellCompositeSections.jsx
+++ b/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}
      >
-        <Tvd well={selectedWell} style={{ height: '80vh' }} />
+        <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}
      >
-        <LoaderPortal show={showLoader}>
-          <WellOperationsTable wellOperations={wellOperations} />
-        </LoaderPortal>
+        <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}
      >
-        <LoaderPortal show={showLoader}>
-          <CompaniesTable companies={companies} />
-        </LoaderPortal>
+        <Suspense fallback={<SuspenseFallback style={{ minHeight: '100%' }} />}>
+          <LoaderPortal show={showLoader}>
+            <CompaniesTable companies={companies} />
+          </LoaderPortal>
+        </Suspense>
      </Modal>
    </>
  )
--- a/src/pages/Well/Analytics/WellCompositeEditor/index.jsx
+++ b/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={WellCompositeSections.route} element={<WellCompositeSections statsWells={statsWells} selectedSections={selectedSections} />} />
+                    <Route path={'wells'} element={<ClusterWells statsWells={statsWells} />} />
+                    <Route path={'sections'} element={<WellCompositeSections statsWells={statsWells} selectedSections={selectedSections} />} />
                </Routes>
            </Suspense>
        </LoaderPortal>
--- a/src/pages/Well/DrillingProgram/CategoryEditor.jsx
+++ b/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}`}
--- a/src/pages/Well/DrillingProgram/CategoryHistory.jsx
+++ b/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>
--- a/src/pages/Well/Measure/InclinometryTable.jsx
+++ b/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}
--- a/src/pages/Well/NavigationMenu.jsx
+++ b/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' }}
--- a/src/pages/Well/Reports/DailyReport/ReportEditor.jsx
+++ b/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 ? (
--- a/src/pages/Well/Telemetry/Operations/DrillerList.jsx
+++ b/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={'Список бурильщиков'}
            >
--- a/src/pages/Well/Telemetry/Operations/DrillerSchedule.jsx
+++ b/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={'Настройка бурильщиков и расписаний'}
            >
--- a/src/pages/Well/Telemetry/Operations/TargetEditor.jsx
+++ b/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={'Цели бурения'}
            >
--- a/src/pages/Well/Telemetry/TelemetryView/Setpoints/SetpointSender.jsx
+++ b/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={'Отправить'}
--- a/src/pages/Well/Telemetry/TelemetryView/Setpoints/SetpointViewer.jsx
+++ b/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>
--- a/src/pages/Well/Telemetry/TelemetryView/Setpoints/index.jsx
+++ b/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}
            >
--- a/src/pages/Well/Telemetry/TelemetryView/WirelineRunOut.jsx
+++ b/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 }}
        />
    )
--- a/src/pages/Well/WellCase/WellCaseEditor.jsx
+++ b/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={'Сохранить'}
--- a/src/pages/Well/WellCase/index.jsx
+++ b/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])

--- a/src/pages/Well/WellOperations/ImportExportBar.jsx
+++ b/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}
      >
--- a/src/pages/Well/index.jsx
+++ b/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 }
--- a/src/styles/App.less
+++ b/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;
+}