ia.novokshanov/asb_cloud_front
1
0
Fork 0
forked from ddrilling/asb_cloud_front
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Александр Сироткин 2022-10-24 07:12:36 +05:00
parent e52013a685
commit e852ede73c
18 changed files with 43 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/pages/AdminPanel/AdminNavigationMenu.jsx
View File

@ -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

1
src/pages/AdminPanel/ClusterController.jsx
View File

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

1
src/pages/AdminPanel/CompanyController.jsx
View File

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

1
src/pages/AdminPanel/CompanyTypeController.jsx
View File

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

1
src/pages/AdminPanel/DepositController.jsx
View File

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

1
src/pages/AdminPanel/PermissionController.jsx
View File

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

1
src/pages/AdminPanel/RoleController.jsx
View File

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

1
src/pages/AdminPanel/Telemetry/TelemetryViewer.jsx
View File

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

1
src/pages/AdminPanel/UserController/index.jsx
View File

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

1
src/pages/AdminPanel/VisitLog.jsx
View File

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

1
src/pages/Cluster/ClusterWells.jsx
View File

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

1
src/pages/Well/Documents/DocumentsTemplate.jsx
View File

@ -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>
)

39
src/pages/Well/Reports/DiagramReport/Reports.jsx
View File

@ -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 = [
{
title: 'Название',
dataIndex: 'name',
key: 'name',
makeColumn('Название', 'name', {
render: (name, report) => (
<Button
type={'link'}
@ -29,31 +26,14 @@ const columns = [
{name}
</Button>
),
}, {
title: <Tooltip title={'Дата формирования'}>Сформирован</Tooltip>,
dataIndex: 'date',
key: 'date',
sorter: makeDateSorter('date'),
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',
}),
makeDateColumn(<Tooltip title={'Дата формирования'}>Сформирован</Tooltip>, 'date'),
makeDateColumn(<Tooltip title={'Дата начала периода рапорта'}>С</Tooltip>, 'begin'),
makeDateColumn(<Tooltip title={'Дата окончания периода рапорта'}>По</Tooltip>, 'end'),
makeColumn(<Tooltip title={'шаг сетки графиков'}>шаг, сек</Tooltip>, '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>
)

4
src/pages/Well/Telemetry/Messages.jsx
View File

@ -33,7 +33,8 @@ export const makeMessageColumns = (idWell) => [
<Tooltip title={'Нажмите для перехода в архив'}>
<Link
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;
{depth.toFixed(2)}
@ -139,6 +140,7 @@ const Messages = memo(() => {
}}
rowKey={(record) => record.id}
tableName={'messages'}
scroll={{ x: true }}
/>
</LoaderPortal>
</>

2
src/pages/Well/Telemetry/Operations/OperationsTable.jsx
View File

@ -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>
))

13
src/pages/Well/Telemetry/Operations/index.jsx
View File

@ -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, {
requirements: [
'DetectedOperation.get',
'TelemetryDataSaub.get',
],
title: 'Операции',
route: 'operations',
})
export default wrapPrivateComponent(Operations, { requirements: ['DetectedOperation.get', 'TelemetryDataSaub.get'] })

7
src/pages/Well/WellCase/index.jsx
View File

@ -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} />

2
src/pages/Well/index.jsx
View File

@ -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>