RSHB/DFiP_Budget_planing
9
0
Fork 0
Code Issues 35 Pull Requests 35 Actions Packages Projects Releases Wiki Activity

AURORA-1841: справочник ВСП - виртуализация строк и вынос состояния модалок #219

Open
aep wants to merge 4 commits from feat/214-aurora-1841-dict-vsp-virtual into test
pull from: feat/214-aurora-1841-dict-vsp-virtual
merge into: RSHB:test
Conversation 4 Commits 4 Files Changed 5 +141 -77
5 changed files with 141 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
web/src/pages/DictVspPage/DictVspPage.jsx
View File

@ -1,4 +1,4 @@
import { useCallback, useEffect, useState } from 'react';
import { useCallback, useEffect, useRef, useState } from 'react';
import { NameTask, TaskInfoContainer } from '../../components/common/SwitchFormTask/SwitchFormTask.style';
import { Box, CircularProgress, Stack } from '@mui/material';
@ -11,6 +11,7 @@ import { HeaderPortal } from '../../components/common/HeaderPortal';
import { ROLES_NAME_ID } from '../../constants/constants';
import { PageContainer } from '../../components/common/PageContainer';
import DictVspFilters from './components/DictVspFilters';
import DictVspModals from './components/DictVspModals';
import TableDictVsp from './components/TableDictVsp';
const DictVspInfo = () => {
@ -30,6 +31,7 @@ function DictVspPage() {
const [ssps, setSsps] = useState([]);
const [selectedSsp, setSelectedSsp] = useState(null);
const { user } = useAuth();
const modalsRef = useRef(null);
const loadData = useCallback(async () => {
if (!user) return;
@ -68,7 +70,7 @@ function DictVspPage() {
loadData();
}, [loadData]);
const handleAdd = async (formData) => {
const handleAdd = useCallback(async (formData) => {
try {
const response = await DictVspApi.create(formData);
if (response.success) {
@ -82,9 +84,9 @@ function DictVspPage() {
toast.error(error.response?.data?.message || 'Ошибка создания ВСП');
throw error;
}
};
}, []);
const handleEdit = async (formData) => {
const handleEdit = useCallback(async (formData) => {
try {
const response = await DictVspApi.update(formData.id, formData);
if (response.success) {
@ -98,9 +100,9 @@ function DictVspPage() {
toast.error(error.response?.data?.message || 'Ошибка обновления ВСП');
throw error;
}
};
}, []);
const handleDelete = async (vspId) => {
const handleDelete = useCallback(async (vspId) => {
try {
const response = await DictVspApi.delete(vspId);
if (response.success) {
@ -114,7 +116,11 @@ function DictVspPage() {
toast.error(error.response?.data?.message || 'Ошибка удаления ВСП');
throw error;
}
};
}, []);
const handleAddClick = useCallback(() => modalsRef.current?.openAdd(), []);
const handleEditClick = useCallback((item) => modalsRef.current?.openEdit(item), []);
const handleExportClick = useCallback(() => modalsRef.current?.openExport(), []);
if (isLoading) {
return (
@ -139,12 +145,18 @@ function DictVspPage() {
)}
<TableDictVsp
data={dictVspData}
ssps={ssps}
selectedSsp={selectedSsp}
onAddClick={handleAddClick}
onEditClick={handleEditClick}
onExportClick={handleExportClick}
loading={isLoading}
/>
<DictVspModals
ref={modalsRef}
ssps={ssps}
onAdd={handleAdd}
onEdit={handleEdit}
onDelete={handleDelete}
loading={isLoading}
/>
</Box>
</Stack>

65
web/src/pages/DictVspPage/components/DictVspModals.jsx Normal file
View File

@ -0,0 +1,65 @@
import { forwardRef, useCallback, useImperativeHandle, useState } from 'react';
import ModalEditAddVsp from './Modals/ModalEditAddVsp';
import ModalExport from './Modals/ModalExport';
// Состояние модалок живёт здесь, а не в таблице: открытие/закрытие не перерисовывает MRT.
const DictVspModals = forwardRef(({ onAdd, onEdit, onDelete, ssps }, ref) => {
const [modalOpen, setModalOpen] = useState(false);
const [modalExportOpen, setModalExportOpen] = useState(false);
const [editingItem, setEditingItem] = useState(null);
const [saveLoading, setSaveLoading] = useState(false);
useImperativeHandle(
ref,
() => ({
openAdd: () => {
setEditingItem(null);
setModalOpen(true);
},
openEdit: (item) => {
setEditingItem(item);
setModalOpen(true);
},
openExport: () => setModalExportOpen(true),
}),
[],
);
const handleSave = async (formData) => {
setSaveLoading(true);
try {
if (editingItem) {
await onEdit?.({ ...formData, id: editingItem.id });
} else {
await onAdd?.(formData);
}
setModalOpen(false);
} catch (error) {
console.error('Error saving:', error);
} finally {
setSaveLoading(false);
}
};
const closeEdit = useCallback(() => setModalOpen(false), []);
const closeExport = useCallback(() => setModalExportOpen(false), []);
return (
<>
<ModalEditAddVsp
open={modalOpen}
onClose={closeEdit}
onSave={handleSave}
onDelete={onDelete}
initialData={editingItem}
loading={saveLoading}
ssps={ssps}
/>
<ModalExport open={modalExportOpen} onClose={closeExport} ssps={ssps} />
</>
);
});
DictVspModals.displayName = 'DictVspModals';
export default DictVspModals;

92
web/src/pages/DictVspPage/components/TableDictVsp.jsx
View File

@ -1,55 +1,19 @@
import { Box, IconButton, Stack, Typography } from '@mui/material';
import { MaterialReactTable, useMaterialReactTable } from 'material-react-table';
import { useMemo, useRef, useState } from 'react';
import { memo, useMemo, useRef } from 'react';
import { useAuth } from '../../../app/context/AuthProvider';
import { PrimaryButton, PrimaryOutlinedButton } from '../../../components/common/Buttons/Buttons';
import { EditPenSvg } from '../../../components/common/icons/icons';
import { ROLES_NAME_ID } from '../../../constants/constants';
import ModalEditAddVsp from './Modals/ModalEditAddVsp';
import ModalExport from './Modals/ModalExport';
import { filterVspBySsp } from '../utils/filterVspBySsp';
const TableDictVsp = ({ data, onEdit, onDelete, onAdd, loading = false, ssps, selectedSsp }) => {
const ROW_ESTIMATED_HEIGHT = 54;
const TableDictVsp = ({ data, onEditClick, onAddClick, onExportClick, loading = false, selectedSsp }) => {
const { user } = useAuth();
const [modalOpen, setModalOpen] = useState(false);
const [modalExportOpen, setModalExportOpen] = useState(false);
const [editingItem, setEditingItem] = useState(null);
const [saveLoading, setSaveLoading] = useState(false);
const tableContainerRef = useRef(null);
const filteredData = useMemo(() => {
if (!selectedSsp) {
return data;
}
return data.filter((item) => item.ssp_id === selectedSsp.id);
}, [data, selectedSsp]);
const handleEdit = (item) => {
setEditingItem(item);
setModalOpen(true);
};
const handleAdd = () => {
setEditingItem(null);
setModalOpen(true);
};
const handleExport = () => [setModalExportOpen(true)];
const handleSave = async (formData) => {
setSaveLoading(true);
try {
if (editingItem) {
await onEdit?.({ ...formData, id: editingItem.id });
} else {
await onAdd?.(formData);
}
setModalOpen(false);
} catch (error) {
console.error('Error saving:', error);
} finally {
setSaveLoading(false);
}
};
const filteredData = useMemo(() => filterVspBySsp(data, selectedSsp), [data, selectedSsp]);
const columns = useMemo(
() => [
@ -70,7 +34,7 @@ const TableDictVsp = ({ data, onEdit, onDelete, onAdd, loading = false, ssps, se
{
accessorKey: 'system_code',
header: 'Код РФ',
size: 180,
size: 100,
minSize: 50,
maxSize: 100,
Cell: ({ cell }) => (
@ -98,9 +62,9 @@ const TableDictVsp = ({ data, onEdit, onDelete, onAdd, loading = false, ssps, se
{
accessorKey: 'regional_branch',
header: 'Региональный филиал/ССП',
size: 120,
size: 186,
minSize: 100,
maxSize: 150,
maxSize: 200,
Cell: ({ cell }) => <Typography variant='body2'>{cell.getValue() || '-'}</Typography>,
enableColumnActions: false,
enableSorting: false,
@ -128,7 +92,7 @@ const TableDictVsp = ({ data, onEdit, onDelete, onAdd, loading = false, ssps, se
{
accessorKey: 'approved_format',
header: 'Утверждённый формат',
size: 150,
size: 159,
minSize: 120,
maxSize: 180,
Cell: ({ cell }) => <Typography variant='body2'>{cell.getValue() || '-'}</Typography>,
@ -138,7 +102,7 @@ const TableDictVsp = ({ data, onEdit, onDelete, onAdd, loading = false, ssps, se
{
accessorKey: 'open_date',
header: 'Дата открытия ВСП',
size: 130,
size: 138,
minSize: 110,
maxSize: 150,
Cell: ({ cell }) => {
@ -151,7 +115,7 @@ const TableDictVsp = ({ data, onEdit, onDelete, onAdd, loading = false, ssps, se
{
accessorKey: 'close_date',
header: 'Дата закрытия ВСП',
size: 130,
size: 137,
minSize: 110,
maxSize: 150,
Cell: ({ cell }) => {
@ -245,6 +209,9 @@ const TableDictVsp = ({ data, onEdit, onDelete, onAdd, loading = false, ssps, se
enableGlobalFilter: false,
enableSorting: false,
enablePagination: false,
enableRowVirtualization: true,
// Высоту строк MRT измеряет сам (по умолчанию): «Примечания» многострочные (pre-wrap).
rowVirtualizerOptions: { overscan: 5, estimateSize: () => ROW_ESTIMATED_HEIGHT },
positionActionsColumn: 'last',
// Включаем изменение размера колонок для лучшего UX при горизонтальном скролле
@ -279,8 +246,8 @@ const TableDictVsp = ({ data, onEdit, onDelete, onAdd, loading = false, ssps, se
Справочник объектов
</Typography>
<Stack spacing={'.5rem'} direction={'row'}>
<PrimaryOutlinedButton onClick={handleExport}>Экспортировать</PrimaryOutlinedButton>
{user.role_id == ROLES_NAME_ID.admin && <PrimaryButton onClick={handleAdd}>+ Добавить объект</PrimaryButton>}
<PrimaryOutlinedButton onClick={onExportClick}>Экспортировать</PrimaryOutlinedButton>
{user.role_id == ROLES_NAME_ID.admin && <PrimaryButton onClick={onAddClick}>+ Добавить объект</PrimaryButton>}
</Stack>
</Box>
),
@ -307,6 +274,8 @@ const TableDictVsp = ({ data, onEdit, onDelete, onAdd, loading = false, ssps, se
size: 80,
muiTableHeadCellProps: {
align: 'center',
// В grid-раскладке th — колонка flex, align center иначе центрирует заголовок по вертикали.
sx: { justifyContent: 'flex-start' },
},
muiTableBodyCellProps: {
align: 'center',
@ -325,7 +294,7 @@ const TableDictVsp = ({ data, onEdit, onDelete, onAdd, loading = false, ssps, se
}}>
<IconButton
size='small'
onClick={() => handleEdit(row.original)}
onClick={() => onEditClick(row.original)}
sx={{
padding: '4px',
'&:hover': {
@ -479,23 +448,10 @@ const TableDictVsp = ({ data, onEdit, onDelete, onAdd, loading = false, ssps, se
});
return (
<>
<Box sx={{ position: 'relative', width: '100%' }}>
<MaterialReactTable table={table} />
</Box>
<ModalEditAddVsp
open={modalOpen}
onClose={() => setModalOpen(false)}
onSave={handleSave}
onDelete={onDelete}
initialData={editingItem}
loading={saveLoading}
ssps={ssps}
/>
<ModalExport open={modalExportOpen} onClose={() => setModalExportOpen(false)} ssps={ssps} />
</>
<Box sx={{ position: 'relative', width: '100%' }}>
<MaterialReactTable table={table} />
</Box>
);
};
export default TableDictVsp;
export default memo(TableDictVsp);

6
web/src/pages/DictVspPage/utils/filterVspBySsp.js Normal file
View File

@ -0,0 +1,6 @@
export const filterVspBySsp = (data, selectedSsp) => {
if (!selectedSsp) {
return data;
}
return data.filter((item) => item.ssp_id === selectedSsp.id);
};

25
web/src/pages/DictVspPage/utils/filterVspBySsp.test.js Normal file
View File

@ -0,0 +1,25 @@
import assert from 'node:assert/strict';
import test from 'node:test';
import { filterVspBySsp } from './filterVspBySsp.js';
const data = [
{ id: 1, ssp_id: 10 },
{ id: 2, ssp_id: 20 },
{ id: 3, ssp_id: 10 },
];
test('без выбранного ССП возвращает те же данные (ссылка не меняется)', () => {
assert.equal(filterVspBySsp(data, null), data);
assert.equal(filterVspBySsp(data, undefined), data);
});
test('с выбранным ССП оставляет только его ВСП, порядок сохраняется', () => {
assert.deepEqual(
filterVspBySsp(data, { id: 10 }).map((v) => v.id),
[1, 3],
);
});
test('ССП без ВСП даёт пустой список', () => {
assert.deepEqual(filterVspBySsp(data, { id: 99 }), []);
});