Добавлен горизонтальный скролл для таблиц (+адаптивности на малых мониторах)

src/pages/AdminPanel/AdminNavigationMenu.jsx

@@ -13,6 +13,7 @@ import {
 } from '@ant-design/icons'
 
 import { makeItem, PrivateWellMenu } from '@components/PrivateWellMenu'
+import { isDev } from '@asb/utils'
 
 const menuItems = [
     makeItem('Месторождения', 'deposit', [], <FolderOutlined />),
@@ -28,8 +29,8 @@ const menuItems = [
         makeItem('Объединение', 'merger', [], <BranchesOutlined />),
     ]),
     makeItem('Журнал посещений', 'visit_log', [], <FileSearchOutlined />),
-    makeItem('API', '/swagger/index.html', [], <ApiOutlined />),
+    isDev() && makeItem('API', '/swagger/index.html', [], <ApiOutlined />),
-]
+].filter(Boolean)
 
 export const AdminNavigationMenu = memo((props) => (
     <PrivateWellMenu

src/pages/AdminPanel/ClusterController.jsx

@@ -106,6 +106,7 @@ const ClusterController = memo(() => {
                 onRowEdit={tableHandlers.edit}
                 onRowDelete={tableHandlers.delete}
                 tableName={'admin_cluster_controller'}
+                scroll={{ x: true }}
             />
         </>
     )

src/pages/AdminPanel/CompanyController.jsx

@@ -97,6 +97,7 @@ const CompanyController = memo(() => {
                 onRowEdit={tableHandlers.edit}
                 onRowDelete={tableHandlers.delete}
                 tableName={'admin_company_controller'}
+                scroll={{ x: true }}
             />
         </>
     )

src/pages/AdminPanel/CompanyTypeController.jsx

@@ -75,6 +75,7 @@ const CompanyTypeController = memo(() => {
                 onRowEdit={tableHandlers.edit}
                 onRowDelete={tableHandlers.delete}
                 tableName={'admin_company_type_controller'}
+                scroll={{ x: true }}
             />
         </>
     )

src/pages/AdminPanel/DepositController.jsx

@@ -75,6 +75,7 @@ const DepositController = memo(() => {
                 onRowEdit={tableHandlers.edit}
                 onRowDelete={tableHandlers.delete}
                 tableName={'admin_deposit_controller'}
+                scroll={{ x: true }}
             />
         </>
     )

src/pages/AdminPanel/PermissionController.jsx

@@ -82,6 +82,7 @@ const PermissionController = memo(() => {
                 onRowEdit={tableHandlers.edit}
                 onRowDelete={tableHandlers.delete}
                 tableName={'admin_permission_controller'}
+                scroll={{ x: true }}
             />
         </>
     )

src/pages/AdminPanel/RoleController.jsx

@@ -89,6 +89,7 @@ const RoleController = memo(() => {
                 onRowEdit={tableHandlers.edit}
                 onRowDelete={tableHandlers.delete}
                 tableName={'admin_role_controller'}
+                scroll={{ x: true }}
             />
         </>
     )

src/pages/AdminPanel/Telemetry/TelemetryViewer.jsx

@@ -115,6 +115,7 @@ const TelemetryController = memo(() => {
                 pagination={defaultPagination}
                 dataSource={filteredTelemetryData}
                 tableName={'admin_telemetry_controller'}
+                scroll={{ x: true }}
             />
         </>
     )

src/pages/AdminPanel/UserController/index.jsx

@@ -214,6 +214,7 @@ const UserController = memo(() => {
                     buttonsWidth={120}
                     pagination={defaultPagination}
                     tableName={'admin_user_controller'}
+                    scroll={{ x: true }}
                 />
             </LoaderPortal>
             <ChangePassword

src/pages/AdminPanel/VisitLog.jsx

@@ -59,6 +59,7 @@ const VisitLog = memo(() => {
                 dataSource={filteredLogData}
                 pagination={defaultPagination}
                 tableName={'visit_log'}
+                scroll={{ x: true }}
             />
         </>
     )

src/pages/Cluster/ClusterWells.jsx

@@ -174,6 +174,7 @@ const ClusterWells = memo(({ statsWells }) => {
         pagination={false}
         rowKey={(record) => record.caption}
         tableName={'cluster'}
+        scroll={{ x: true }}
       />
 
       <Modal

src/pages/Well/Documents/DocumentsTemplate.jsx

@@ -158,6 +158,7 @@ export const DocumentsTemplate = ({ idCategory, well: givenWell, mimeTypes, head
         onRowDelete={handleFileDelete}
         rowKey={(record) => record.id}
         tableName={tableName ?? `file_${idCategory}`}
+        scroll={{ x: true }}
       />
     </LoaderPortal>
   )

src/pages/Well/Reports/DiagramReport/Reports.jsx

@@ -4,9 +4,9 @@ import { FilePdfOutlined, FileTextOutlined } from '@ant-design/icons'
 
 import { useWell } from '@asb/context'
 import LoaderPortal from '@components/LoaderPortal'
-import { Table, makeDateSorter, makeNumericSorter } from '@components/Table'
+import { Table, makeNumericSorter, makeColumn, makeDateColumn } from '@components/Table'
 import { invokeWebApiWrapperAsync, downloadFile } from '@components/factory'
-import { formatDate, periodToString } from '@utils'
+import { periodToString } from '@utils'
 import { ReportService } from '@api'
 
 const imgPaths = {
@@ -15,10 +15,7 @@ const imgPaths = {
 }
 
 const columns = [
-  {
+  makeColumn('Название', 'name', {
-    title: 'Название',
-    dataIndex: 'name',
-    key: 'name',
     render: (name, report) => (
       <Button
         type={'link'}
@@ -29,31 +26,14 @@ const columns = [
         {name}
       </Button>
     ),
-  }, {
+  }),
-    title: <Tooltip title={'Дата формирования'}>Сформирован</Tooltip>,
+  makeDateColumn(<Tooltip title={'Дата формирования'}>Сформирован</Tooltip>, 'date'),
-    dataIndex: 'date',
+  makeDateColumn(<Tooltip title={'Дата начала периода рапорта'}>С</Tooltip>, 'begin'),
-    key: 'date',
+  makeDateColumn(<Tooltip title={'Дата окончания периода рапорта'}>По</Tooltip>, 'end'),
-    sorter: makeDateSorter('date'),
+  makeColumn(<Tooltip title={'шаг сетки графиков'}>шаг, сек</Tooltip>, 'step', {
-    render: (date) => formatDate(date),
-  }, {
-    title: <Tooltip title={'Дата начала периода рапорта'}>С</Tooltip>,
-    dataIndex: 'begin',
-    key: 'begin',
-    sorter: makeDateSorter('begin'),
-    render: (date) => formatDate(date),
-  }, {
-    title: <Tooltip title={'Дата окончания периода рапорта'}>По</Tooltip>,
-    dataIndex: 'end',
-    key: 'end',
-    sorter: makeDateSorter('end'),
-    render: (date) => formatDate(date),
-  }, {
-    title: <Tooltip title={'шаг сетки графиков'}>шаг, сек</Tooltip>,
-    dataIndex: 'step',
-    key: 'step',
     sorter: makeNumericSorter('step'),
     render: step => periodToString(step),
-  },
+  }),
 ]
 
 export const Reports = memo(() => {
@@ -84,6 +64,7 @@ export const Reports = memo(() => {
         dataSource={reports}
         pagination={{ pageSize: 13 }}
         tableName={'reports'}
+        scroll={{ x: true }}
       />
     </LoaderPortal>
   )

src/pages/Well/Telemetry/Messages.jsx

@@ -31,13 +31,14 @@ export const makeMessageColumns = (idWell) => [
   makeDateColumn('Дата', 'date', undefined, undefined, { width: '10rem' }),
   makeNumericColumn('Глубина, м', 'wellDepth', null, null, (depth, item) => (
     <Tooltip title={'Нажмите для перехода в архив'}>
-      <Link 
+      <Link
-        style={{ color: 'inherit'}} 
+        style={{ color: 'inherit'}}
-        to={`/well/${idWell}/telemetry/archive?range=1800&start=${moment(item?.date).subtract(3, 'minute').local().toISOString()}`}>          
+        to={`/well/${idWell}/telemetry/archive?range=1800&start=${moment(item?.date).subtract(3, 'minute').local().toISOString()}`}
-          <LinkOutlined />
+      >
-          &nbsp;
+        <LinkOutlined />
-          {depth.toFixed(2)}
+        &nbsp;
-        </Link>
+        {depth.toFixed(2)}
+      </Link>
     </Tooltip>
   ), '7rem'),
   makeColumn('Категория', 'categoryId', {
@@ -139,6 +140,7 @@ const Messages = memo(() => {
           }}
           rowKey={(record) => record.id}
           tableName={'messages'}
+          scroll={{ x: true }}
         />
       </LoaderPortal>
     </>

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

@@ -42,7 +42,7 @@ export const OperationsTable = memo(({ data, height, ...other }) => (
             columns={columns}
             dataSource={data}
             tableName={'well_telemetry_detected_operations'}
-            scroll={{ y: height ?? '70vh', scrollToFirstRowOnChange: true }}
+            scroll={{ x: true, y: height ?? '70vh', scrollToFirstRowOnChange: true }}
         />
     </div>
 ))

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

@@ -1,11 +1,12 @@
 import { memo, useCallback, useEffect, useMemo, useState } from 'react'
-import { Empty, InputNumber, Select } from 'antd'
+import { InputNumber, Select } from 'antd'
 import moment from 'moment'
 
 import { useWell } from '@asb/context'
 import LoaderPortal from '@components/LoaderPortal'
 import { DateRangeWrapper } from '@components/Table'
 import { invokeWebApiWrapperAsync } from '@components/factory'
+import { unique } from '@utils/filters'
 import { getPermissions, arrayOrDefault, range, wrapPrivateComponent, pretify } from '@utils'
 import { DetectedOperationService, DrillerService, TelemetryDataSaubService } from '@api'
 
@@ -16,7 +17,6 @@ import OperationsChart from './OperationsChart'
 import OperationsTable from './OperationsTable'
 
 import '@styles/detected_operations.less'
-import { unique } from '@asb/utils/filters'
 
 const Operations = memo(() => {
     const [isLoading, setIsLoading] = useState(false)
@@ -161,11 +161,4 @@ const Operations = memo(() => {
     )
 })
 
-export default wrapPrivateComponent(Operations, {
+export default wrapPrivateComponent(Operations, { requirements: ['DetectedOperation.get', 'TelemetryDataSaub.get'] })
-    requirements: [
-        'DetectedOperation.get',
-        'TelemetryDataSaub.get',
-    ],
-    title: 'Операции',
-    route: 'operations',
-})

src/pages/Well/WellCase/index.jsx

@@ -43,7 +43,7 @@ const WellCase = memo(() => {
     }, [well])
 
     const columns = useMemo(() => [
-        makeTextColumn('Категория', 'nameCategory'),
+        makeTextColumn('Категория', 'nameCategory', undefined, undefined, undefined, { width: 300 }),
         makeColumn('Файл', 'file', {
             render: (file, category) => (
                 <div className={'file-cell'}>
@@ -59,10 +59,12 @@ const WellCase = memo(() => {
                     )}
                 </div>
             ),
+            width: 300,
         }),
-        makeDateColumn('Дата загрузки', 'uploadDate'),
+        makeDateColumn('Дата загрузки', 'uploadDate', undefined, undefined, { width: 150 }),
         makeColumn('Ответственные', 'publishers', {
             render: (publishers) => publishers?.map((user, i) => <UserView key={`${i}`} user={user} style={{ marginLeft: 10 }} />),
+            width: 200,
         }),
     ], [well, updateTable])
 
@@ -92,6 +94,7 @@ const WellCase = memo(() => {
                     pagination={false}
                     dataSource={categories}
                     expandable={expandable}
+                    scroll={{ x: true }}
                 />
             </LoaderPortal>
             <WellCaseEditor categories={categories} show={showEdit} onClose={onEditClose} />

src/pages/Well/index.jsx

@@ -87,7 +87,7 @@ const Well = memo(() => {
                         <Route path={'telemetry'} element={<TelemetryView />} />
                         <Route path={'messages'} element={<Messages />} />
                         <Route path={'archive'} element={<Archive />} />
-                        <Route path={'dashboard_nnb'} element={<DashboardNNB />} />
+                        <Route path={'dashboard_nnb/*'} element={<DashboardNNB />} />
                         <Route path={'operations'} element={<Operations />} />
                         <Route path={'operation_time'} element={<OperationTime />} />
                     </Route>