добавить фильтрацию задач и переходы из свода
This commit is contained in:
PotapovaA
parent
db1df61f37
commit
d5017e7d91
@ -1,9 +1,6 @@
|
||||
import api from './client';
|
||||
|
||||
export const TasksApi = {
|
||||
getById(taskId) {
|
||||
return api.get(`/form/${taskId}`).then((r) => r.data);
|
||||
},
|
||||
list(params = {}) {
|
||||
return api.get('/form/', { params }).then((r) => r.data);
|
||||
},
|
||||
|
||||
@ -1,25 +1,36 @@
|
||||
import { Box, Typography } from '@mui/material';
|
||||
import { useEffect, useMemo, useState, useCallback } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { useCallback, useEffect, useMemo, useState } from 'react';
|
||||
import { useNavigate, useSearchParams } from 'react-router-dom';
|
||||
import { toast } from 'react-toastify';
|
||||
import { ProjectsApi } from '../../api/projects';
|
||||
import { SspApi } from '../../api/ssp';
|
||||
import { useAuth } from '../../app/context/AuthProvider';
|
||||
import { HeaderSwitch } from '../../components/HeaderMenu/HeaderSwitch';
|
||||
import { DangerOutlinedButton, PrimaryButton } from '../../components/common/Buttons/Buttons';
|
||||
import { WhitePlus } from '../../components/common/icons/icons';
|
||||
import Modal from '../../components/common/Modal/Modal';
|
||||
import { WhitePlus } from '../../components/common/icons/icons';
|
||||
import { ROLES_NAME_ID } from '../../constants/constants';
|
||||
import { DEFAULT_PROJECT_CONFIG } from '../../constants/projectConfig';
|
||||
import { ModalCreateProject } from '../ProjectsPage/ModalCreateProject';
|
||||
import EditModal from './components/EditModal/EditModal';
|
||||
import ProjectsTable from './components/ProjectsTable/ProjectsTable';
|
||||
import ProjectSummaryTable from './components/ProjectSummaryTable/ProjectSummaryTable';
|
||||
import ProjectsTable from './components/ProjectsTable/ProjectsTable';
|
||||
import TableFilters from './components/TableFilters/TableFilters'; // Импортируем компонент фильтров
|
||||
import { handleNavigateClick } from './utils/tableHandlers';
|
||||
import { useAuth } from '../../app/context/AuthProvider';
|
||||
import { ROLES_NAME_ID } from '../../constants/constants';
|
||||
|
||||
const NavigationProjectPage = () => {
|
||||
const navigate = useNavigate();
|
||||
const [searchParams, setSearchParams] = useSearchParams();
|
||||
const branchIdsParam = searchParams.get('branch_ids') || '';
|
||||
const branchIds = useMemo(
|
||||
() =>
|
||||
branchIdsParam
|
||||
.split(',')
|
||||
.filter(Boolean)
|
||||
.map(Number)
|
||||
.filter((value) => Number.isInteger(value) && value > 0),
|
||||
[branchIdsParam],
|
||||
);
|
||||
|
||||
const [selectedRow, setSelectedRow] = useState(null);
|
||||
const [editModalOpen, setEditModalOpen] = useState(false);
|
||||
@ -40,7 +51,7 @@ const NavigationProjectPage = () => {
|
||||
const { user } = useAuth();
|
||||
|
||||
// Состояния для фильтров
|
||||
const [selectedBranch, setSelectedBranch] = useState('');
|
||||
const [selectedBranches, setSelectedBranches] = useState([]);
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [selectedStatus, setSelectedStatus] = useState('');
|
||||
const [archivedData, setArchivedData] = useState([]);
|
||||
@ -59,22 +70,16 @@ const NavigationProjectPage = () => {
|
||||
const isAdmin = user.role_id === ROLES_NAME_ID.admin;
|
||||
|
||||
if (isAdmin) {
|
||||
const sspResponse = await (
|
||||
SspApi.getAll({ is_active: true })
|
||||
);
|
||||
const sspResponse = await SspApi.getAll({ is_active: true });
|
||||
if (!sspResponse.success) {
|
||||
toast.error('Ошибка загрузки списка ССП');
|
||||
return;
|
||||
}
|
||||
setOrgUnits(sspResponse.result);
|
||||
setOrgUnitNames(
|
||||
Object.fromEntries((sspResponse.result || []).map((orgUnit) => [orgUnit.id, orgUnit.title])),
|
||||
);
|
||||
setOrgUnitNames(Object.fromEntries((sspResponse.result || []).map((orgUnit) => [orgUnit.id, orgUnit.title])));
|
||||
} else {
|
||||
setOrgUnits(user.org_units ?? []);
|
||||
setOrgUnitNames(
|
||||
Object.fromEntries((user.org_units || []).map((orgUnit) => [orgUnit.id, orgUnit.title])),
|
||||
);
|
||||
setOrgUnitNames(Object.fromEntries((user.org_units || []).map((orgUnit) => [orgUnit.id, orgUnit.title])));
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error loading data:', error);
|
||||
@ -88,13 +93,20 @@ const NavigationProjectPage = () => {
|
||||
loadData();
|
||||
}, [loadData]);
|
||||
|
||||
const createProjectConfig = useMemo(() => ({
|
||||
useEffect(() => {
|
||||
setSelectedBranches(orgUnits.filter(({ id }) => branchIds.includes(id)));
|
||||
}, [branchIds, orgUnits]);
|
||||
|
||||
const createProjectConfig = useMemo(
|
||||
() => ({
|
||||
...DEFAULT_PROJECT_CONFIG,
|
||||
'ССП/РФ': {
|
||||
...DEFAULT_PROJECT_CONFIG['ССП/РФ'],
|
||||
options: orgUnits,
|
||||
},
|
||||
}), [orgUnits]);
|
||||
}),
|
||||
[orgUnits],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
let active = true;
|
||||
@ -103,7 +115,7 @@ const NavigationProjectPage = () => {
|
||||
const loadProjects = async () => {
|
||||
setIsProjectsLoading(true);
|
||||
try {
|
||||
const response = await ProjectsApi.listWithReports({ limit: 1000 });
|
||||
const response = await ProjectsApi.listWithReports();
|
||||
if (active) setTableData(response.result || []);
|
||||
} catch (requestError) {
|
||||
console.error('Error loading projects with reports:', requestError);
|
||||
@ -130,7 +142,7 @@ const NavigationProjectPage = () => {
|
||||
status_in: 'archived',
|
||||
offset,
|
||||
limit: archivedPagination.pageSize,
|
||||
...(selectedBranch?.id ? { branch_id: selectedBranch.id } : {}),
|
||||
...(selectedBranches.length ? { branch_ids: selectedBranches.map(({ id }) => id).join(',') } : {}),
|
||||
...(searchQuery.trim() ? { search: searchQuery.trim() } : {}),
|
||||
};
|
||||
|
||||
@ -160,7 +172,7 @@ const NavigationProjectPage = () => {
|
||||
user,
|
||||
isLoading,
|
||||
isArchiveMode,
|
||||
selectedBranch,
|
||||
selectedBranches,
|
||||
searchQuery,
|
||||
archivedPagination.pageIndex,
|
||||
archivedPagination.pageSize,
|
||||
@ -180,7 +192,7 @@ const NavigationProjectPage = () => {
|
||||
setIsSummaryLoading(true);
|
||||
try {
|
||||
const response = await ProjectsApi.getSummary(selectedRow.original.id);
|
||||
if (active) setSummaryData(response.result.filter(v => v.row_type !== 'PROJECT') || []);
|
||||
if (active) setSummaryData(response.result.filter((v) => v.row_type !== 'PROJECT') || []);
|
||||
} catch (requestError) {
|
||||
console.error('Error loading project summary:', requestError);
|
||||
if (active) {
|
||||
@ -202,7 +214,7 @@ const NavigationProjectPage = () => {
|
||||
return archivedData;
|
||||
}
|
||||
|
||||
if (!selectedBranch && !searchQuery && !selectedStatus) {
|
||||
if (selectedBranches.length === 0 && !searchQuery && !selectedStatus) {
|
||||
return tableData;
|
||||
}
|
||||
|
||||
@ -214,8 +226,8 @@ const NavigationProjectPage = () => {
|
||||
return false;
|
||||
}
|
||||
// Фильтр по филиалу (только для корневых)
|
||||
if (selectedBranch) {
|
||||
return item.org_unit_id === selectedBranch.id;
|
||||
if (selectedBranches.length > 0) {
|
||||
return selectedBranches.some(({ id }) => item.org_unit_id === id);
|
||||
}
|
||||
return true;
|
||||
})
|
||||
@ -243,7 +255,7 @@ const NavigationProjectPage = () => {
|
||||
|
||||
return parentMatches || hasMatchingChildren;
|
||||
});
|
||||
}, [archivedData, isArchiveMode, searchQuery, selectedBranch, selectedStatus, tableData]);
|
||||
}, [archivedData, isArchiveMode, searchQuery, selectedBranches, selectedStatus, tableData]);
|
||||
|
||||
const onEdit = useCallback((row) => {
|
||||
const isSmeta = row.depth > 0;
|
||||
@ -258,9 +270,12 @@ const NavigationProjectPage = () => {
|
||||
setEditModalOpen(true);
|
||||
}, []);
|
||||
|
||||
const onNavigate = useCallback((row) => {
|
||||
const onNavigate = useCallback(
|
||||
(row) => {
|
||||
handleNavigateClick(row, navigate);
|
||||
}, [navigate]);
|
||||
},
|
||||
[navigate],
|
||||
);
|
||||
|
||||
const handleDeleteProject = async () => {
|
||||
if (!projectToDelete?.id) return;
|
||||
@ -286,7 +301,8 @@ const NavigationProjectPage = () => {
|
||||
setIsSaving(true);
|
||||
try {
|
||||
if (formData._rowType === 'smeta') {
|
||||
const { is_in_plan, is_in_plan_q2, is_in_plan_q3, is_in_plan_q4, development_block, reserve_to_prrs_ahr, reserve_to_prrs_kv } = formData;
|
||||
const { is_in_plan, is_in_plan_q2, is_in_plan_q3, is_in_plan_q4, development_block, reserve_to_prrs_ahr, reserve_to_prrs_kv } =
|
||||
formData;
|
||||
await ProjectsApi.updateSmeta(formData._projectId, formData.year, {
|
||||
is_in_plan,
|
||||
is_in_plan_q2,
|
||||
@ -297,7 +313,23 @@ const NavigationProjectPage = () => {
|
||||
reserve_to_prrs_kv: reserve_to_prrs_kv === '' ? null : reserve_to_prrs_kv,
|
||||
});
|
||||
} else {
|
||||
const { name, status, technical_number, project_type, vsp_format, placement_type, object_address, staff_count, total_area, org_unit_id, krf_decision_date, fk_decision_date, board_decision_date, open_relocate_close_date, funding_by_ko_decision } = formData;
|
||||
const {
|
||||
name,
|
||||
status,
|
||||
technical_number,
|
||||
project_type,
|
||||
vsp_format,
|
||||
placement_type,
|
||||
object_address,
|
||||
staff_count,
|
||||
total_area,
|
||||
org_unit_id,
|
||||
krf_decision_date,
|
||||
fk_decision_date,
|
||||
board_decision_date,
|
||||
open_relocate_close_date,
|
||||
funding_by_ko_decision,
|
||||
} = formData;
|
||||
await ProjectsApi.update(formData._projectId, {
|
||||
name,
|
||||
status: status || null,
|
||||
@ -330,7 +362,13 @@ const NavigationProjectPage = () => {
|
||||
const handleBranchChange = (value) => {
|
||||
setSelectedRow(null);
|
||||
setSummaryData([]);
|
||||
setSelectedBranch(value);
|
||||
setSelectedBranches(value);
|
||||
setSearchParams((currentParams) => {
|
||||
const nextParams = new URLSearchParams(currentParams);
|
||||
if (value.length > 0) nextParams.set('branch_ids', value.map(({ id }) => id).join(','));
|
||||
else nextParams.delete('branch_ids');
|
||||
return nextParams;
|
||||
});
|
||||
setArchivedPagination((current) => ({ ...current, pageIndex: 0 }));
|
||||
};
|
||||
|
||||
@ -379,11 +417,10 @@ const NavigationProjectPage = () => {
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
}}>
|
||||
<Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 1, }}>
|
||||
|
||||
<Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 1 }}>
|
||||
{/* Компонент фильтров */}
|
||||
<TableFilters
|
||||
selectedBranch={selectedBranch}
|
||||
selectedBranches={selectedBranches}
|
||||
onBranchChange={handleBranchChange}
|
||||
searchQuery={searchQuery}
|
||||
onSearchChange={handleSearchChange}
|
||||
@ -410,14 +447,17 @@ const NavigationProjectPage = () => {
|
||||
orgUnitNames={orgUnitNames}
|
||||
/>
|
||||
|
||||
<ProjectSummaryTable
|
||||
data={summaryData}
|
||||
isLoading={isSummaryLoading}
|
||||
selectedRow={selectedRow}
|
||||
/>
|
||||
<ProjectSummaryTable data={summaryData} isLoading={isSummaryLoading} selectedRow={selectedRow} />
|
||||
|
||||
{/* Модалка редактирования */}
|
||||
<EditModal open={editModalOpen} onClose={() => setEditModalOpen(false)} rowData={selectedRowData} onSave={onSaveEdit} isSaving={isSaving} orgUnitNames={orgUnitNames} />
|
||||
<EditModal
|
||||
open={editModalOpen}
|
||||
onClose={() => setEditModalOpen(false)}
|
||||
rowData={selectedRowData}
|
||||
onSave={onSaveEdit}
|
||||
isSaving={isSaving}
|
||||
orgUnitNames={orgUnitNames}
|
||||
/>
|
||||
<ModalCreateProject
|
||||
open={createModalOpen}
|
||||
onClose={() => setCreateModalOpen(false)}
|
||||
@ -439,13 +479,10 @@ const NavigationProjectPage = () => {
|
||||
</DangerOutlinedButton>
|
||||
</>
|
||||
}>
|
||||
<Typography>
|
||||
Проект «{projectToDelete?.name}» будет удалён без возможности восстановления.
|
||||
</Typography>
|
||||
<Typography>Проект «{projectToDelete?.name}» будет удалён без возможности восстановления.</Typography>
|
||||
</Modal>
|
||||
</Box>
|
||||
</>
|
||||
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -1,21 +1,14 @@
|
||||
import { Search } from '@mui/icons-material';
|
||||
import { Autocomplete, Box, Chip, CircularProgress, MenuItem, Paper, TextField } from '@mui/material';
|
||||
import { useEffect, useState, useCallback } from 'react';
|
||||
import { useCallback, useEffect, useState } from 'react';
|
||||
import { toast } from 'react-toastify';
|
||||
import { SspApi } from '../../../../api/ssp';
|
||||
import { useAuth } from '../../../../app/context/AuthProvider';
|
||||
import { toast } from 'react-toastify';
|
||||
import { PROJECT_STATUSES, ROLES_NAME_ID } from '../../../../constants/constants';
|
||||
|
||||
const FILTER_PROJECT_STATUSES = ['created', 'agreed', 'archived'];
|
||||
|
||||
const TableFilters = ({
|
||||
onBranchChange,
|
||||
onSearchChange,
|
||||
onStatusChange,
|
||||
selectedBranch,
|
||||
selectedStatus,
|
||||
searchQuery,
|
||||
}) => {
|
||||
const TableFilters = ({ onBranchChange, onSearchChange, onStatusChange, selectedBranches, selectedStatus, searchQuery }) => {
|
||||
const [branches, setBranches] = useState([]);
|
||||
const [branchInputValue, setBranchInputValue] = useState('');
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
@ -28,18 +21,14 @@ const TableFilters = ({
|
||||
const isAdmin = user.role_id === ROLES_NAME_ID.admin;
|
||||
|
||||
if (isAdmin) {
|
||||
const sspResponse = await (
|
||||
SspApi.getAll({ is_active: true })
|
||||
);
|
||||
const sspResponse = await SspApi.getAll({ is_active: true });
|
||||
if (!sspResponse.success) {
|
||||
toast.error('Ошибка загрузки списка ССП');
|
||||
return;
|
||||
}
|
||||
setBranches(sspResponse.result);
|
||||
|
||||
} else {
|
||||
setBranches(user.org_units ?? []);
|
||||
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error loading data:', error);
|
||||
@ -49,15 +38,10 @@ const TableFilters = ({
|
||||
}
|
||||
}, [user]);
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
loadData();
|
||||
}, [loadData]);
|
||||
|
||||
useEffect(() => {
|
||||
setBranchInputValue(selectedBranch?.title || '');
|
||||
}, [selectedBranch]);
|
||||
|
||||
return (
|
||||
<Paper
|
||||
elevation={0}
|
||||
@ -74,29 +58,46 @@ const TableFilters = ({
|
||||
maxHeight: '4.5vh',
|
||||
}}>
|
||||
<Autocomplete
|
||||
multiple
|
||||
disableCloseOnSelect
|
||||
size='small'
|
||||
sx={{
|
||||
minWidth: 250,
|
||||
maxWidth: 300,
|
||||
minWidth: 420,
|
||||
maxWidth: 520,
|
||||
flex: '1 1 auto',
|
||||
'& .MuiAutocomplete-inputRoot': {
|
||||
flexWrap: 'nowrap',
|
||||
},
|
||||
'& .MuiAutocomplete-input': {
|
||||
minWidth: '0 !important',
|
||||
},
|
||||
}}
|
||||
options={branches}
|
||||
loading={isLoading}
|
||||
getOptionLabel={(option) => option.title || ''}
|
||||
getOptionKey={(option) => option.id}
|
||||
value={selectedBranch || null}
|
||||
value={selectedBranches}
|
||||
inputValue={branchInputValue}
|
||||
onInputChange={(event, newInputValue) => {
|
||||
onInputChange={(_event, newInputValue) => {
|
||||
setBranchInputValue(newInputValue);
|
||||
}}
|
||||
onChange={(event, newValue) => {
|
||||
onBranchChange(newValue || '');
|
||||
onChange={(_event, newValue) => {
|
||||
onBranchChange(newValue);
|
||||
}}
|
||||
renderValue={(value, getItemProps) =>
|
||||
value
|
||||
.slice(0, 2)
|
||||
.map((option, index) => {
|
||||
const { key, ...itemProps } = getItemProps({ index });
|
||||
return <Chip {...itemProps} key={option.id || key} label={option.title} size='small' />;
|
||||
})
|
||||
.concat(value.length > 2 ? [<Chip key='more' label={`+${value.length - 2}`} size='small' />] : [])
|
||||
}
|
||||
renderInput={(params) => {
|
||||
return (
|
||||
<TextField
|
||||
{...params}
|
||||
placeholder='Региональные филиалы'
|
||||
placeholder={selectedBranches.length ? '' : 'Региональные филиалы'}
|
||||
variant='outlined'
|
||||
size='small'
|
||||
slotProps={{
|
||||
@ -168,14 +169,14 @@ const TableFilters = ({
|
||||
))}
|
||||
</TextField>
|
||||
|
||||
{(selectedBranch || searchQuery || selectedStatus) && (
|
||||
{(selectedBranches.length > 0 || searchQuery || selectedStatus) && (
|
||||
<Box sx={{ display: 'flex', gap: 1, ml: 'auto' }}>
|
||||
<Chip
|
||||
label='Сбросить фильтры'
|
||||
size='small'
|
||||
onClick={() => {
|
||||
setBranchInputValue('');
|
||||
onBranchChange('');
|
||||
onBranchChange([]);
|
||||
onSearchChange('');
|
||||
onStatusChange('');
|
||||
}}
|
||||
|
||||
@ -2,6 +2,7 @@ import RefreshRoundedIcon from '@mui/icons-material/RefreshRounded';
|
||||
import { Alert, Box, Button, Paper, Tab, Tabs, Typography } from '@mui/material';
|
||||
import { MaterialReactTable, useMaterialReactTable } from 'material-react-table';
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { HeaderSwitch } from '../../components/HeaderMenu/HeaderSwitch';
|
||||
import { blueColumn } from '../../components/RealtimeTable/constants/columnColors';
|
||||
import { sectionCodeColor } from '../../components/RealtimeTable/constants/columnConfig';
|
||||
@ -173,6 +174,7 @@ const filterSummaryTree = (tree, query) =>
|
||||
const countSummaryTree = (tree) => tree.reduce((count, row) => count + 1 + countSummaryTree(row.subRows), 0);
|
||||
|
||||
export default function SvodPage() {
|
||||
const navigate = useNavigate();
|
||||
const { getSheetFilters, updateSheetFilters, getSummary, invalidateSummary } = useSvod();
|
||||
const [sheet, setSheet] = useState('MAIN');
|
||||
const [rows, setRows] = useState([]);
|
||||
@ -225,6 +227,22 @@ export default function SvodPage() {
|
||||
loadSummary();
|
||||
}, [invalidateSummary, loadSummary, selectedOrganizations, sheet, year]);
|
||||
|
||||
const openFilteredTasks = useCallback(() => {
|
||||
const params = new URLSearchParams({ year: String(year) });
|
||||
const organizationIds = selectedOrganizations.map(({ id }) => id);
|
||||
if (organizationIds.length > 0) params.set('org_units', organizationIds.join(','));
|
||||
if (sheet !== 'MAIN') params.set('form_type', sheet);
|
||||
navigate(`/tasks?${params.toString()}`);
|
||||
}, [navigate, selectedOrganizations, sheet, year]);
|
||||
|
||||
const openFilteredProjects = useCallback(() => {
|
||||
const params = new URLSearchParams();
|
||||
const organizationIds = selectedOrganizations.map(({ id }) => id);
|
||||
if (organizationIds.length > 0) params.set('branch_ids', organizationIds.join(','));
|
||||
const query = params.toString();
|
||||
navigate(query ? `/projects?${query}` : '/projects');
|
||||
}, [navigate, selectedOrganizations]);
|
||||
|
||||
const filteredRows = useMemo(() => {
|
||||
const normalizedSearch = search.trim().toLowerCase();
|
||||
const tree = buildSummaryTree(rows);
|
||||
@ -356,13 +374,22 @@ export default function SvodPage() {
|
||||
{`Найдено ${filteredRowsCount.toLocaleString('ru-RU')} из ${rows.length.toLocaleString('ru-RU')} строк`}
|
||||
</Typography>
|
||||
)}
|
||||
{sheet === 'FORM_3' ? (
|
||||
<Button variant='contained' onClick={openFilteredProjects} sx={{ ml: 'auto', height: '2.5rem', flexShrink: 0 }}>
|
||||
Перейти к проектам
|
||||
</Button>
|
||||
) : (
|
||||
<Button variant='contained' onClick={openFilteredTasks} sx={{ ml: 'auto', height: '2.5rem', flexShrink: 0 }}>
|
||||
Перейти к задачам
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
variant='outlined'
|
||||
color='default'
|
||||
startIcon={<RefreshRoundedIcon />}
|
||||
disabled={loading}
|
||||
onClick={refreshSummary}
|
||||
sx={{ ml: 'auto', height: '2.5rem', flexShrink: 0 }}>
|
||||
sx={{ height: '2.5rem', flexShrink: 0 }}>
|
||||
Обновить
|
||||
</Button>
|
||||
</SvodFilters>
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
import { Autocomplete, Button, FormControl, FormLabel, MenuItem, Select, TextField } from '@mui/material';
|
||||
import { useEffect, useMemo, useState } from 'react';
|
||||
import { useNavigate } from 'react-router';
|
||||
import { Autocomplete, Box, Button, FormControl, FormLabel, MenuItem, Select, TextField } from '@mui/material';
|
||||
import { useCallback, useEffect, useMemo, useState } from 'react';
|
||||
import { useSearchParams } from 'react-router-dom';
|
||||
import { toast } from 'react-toastify';
|
||||
import { SspApi } from '../../api/ssp';
|
||||
import { TasksApi } from '../../api/tasks';
|
||||
import { useAuth } from '../../app/context/AuthProvider';
|
||||
import { HeaderSwitch } from '../../components/HeaderMenu/HeaderSwitch';
|
||||
import { PrimaryButton } from '../../components/common/Buttons/Buttons';
|
||||
import { PrimaryButton, PrimaryOutlinedButton } from '../../components/common/Buttons/Buttons';
|
||||
import Modal from '../../components/common/Modal/Modal';
|
||||
import { OrgUnitsAutocompletePaper } from '../../components/common/OrgUnitsAutocompletePaper/OrgUnitsAutocompletePaper';
|
||||
import { renderOrgUnitValue } from '../../components/common/OrgUnitsAutocompletePaper/renderOrgUnitValue';
|
||||
@ -14,7 +14,6 @@ import { PaginatedList } from '../../components/common/PaginatedList';
|
||||
import { TaskCardComponent } from '../../components/common/TaskCardComponent';
|
||||
import { WhitePlus } from '../../components/common/icons/icons';
|
||||
import { FORM_TYPE_OPTIONS, FORM_TYPE_TRANSLATE, ORG_UNIT_TYPE_OPTIONS, ROLES_NAME_ID } from '../../constants/constants';
|
||||
import { exportBulkForms, exportSingleForm } from '../../utils/exportFile';
|
||||
import { PageContainer } from '../StyledForPage';
|
||||
|
||||
const modalSelectMenuProps = {
|
||||
@ -29,19 +28,30 @@ const modalSelectSx = {
|
||||
};
|
||||
|
||||
export default function TasksPage() {
|
||||
const navigate = useNavigate();
|
||||
const [searchParams, setSearchParams] = useSearchParams();
|
||||
|
||||
const [items, setItems] = useState([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [loadingUpdate, setLoadingUpdate] = useState(false);
|
||||
const [modalOpen, setModalOpen] = useState(false);
|
||||
const [query, setQuery] = useState('');
|
||||
|
||||
const yearFilter = searchParams.get('year') || '';
|
||||
const formTypeFilter = searchParams.get('form_type') || '';
|
||||
const orgUnitsFilter = searchParams.get('org_units') || '';
|
||||
const orgUnitIdsFilter = useMemo(
|
||||
() =>
|
||||
orgUnitsFilter
|
||||
.split(',')
|
||||
.filter(Boolean)
|
||||
.map(Number)
|
||||
.filter((value) => Number.isInteger(value) && value > 0),
|
||||
[orgUnitsFilter],
|
||||
);
|
||||
|
||||
// Pagination state
|
||||
const [page, setPage] = useState(1);
|
||||
const [limit, setLimit] = useState(20);
|
||||
const [totalCount, setTotalCount] = useState(0);
|
||||
const [isLoadAll, setisLoadAll] = useState(false);
|
||||
|
||||
const [sspList, setSspList] = useState([]);
|
||||
const [formData, setFormData] = useState({
|
||||
@ -51,6 +61,13 @@ export default function TasksPage() {
|
||||
formTypeCode: '',
|
||||
});
|
||||
|
||||
const yearOptions = useMemo(() => {
|
||||
const currentYear = new Date().getFullYear();
|
||||
return Array.from({ length: 8 }, (_, index) => currentYear - 5 + index);
|
||||
}, []);
|
||||
|
||||
const selectedOrgUnits = useMemo(() => sspList.filter((unit) => orgUnitIdsFilter.includes(unit.id)), [sspList, orgUnitIdsFilter]);
|
||||
|
||||
const filteredOrgUnits = useMemo(() => {
|
||||
if (!formData.orgUnitType) return [];
|
||||
const isSsp = formData.orgUnitType === 'ssp';
|
||||
@ -67,8 +84,18 @@ export default function TasksPage() {
|
||||
|
||||
const { user } = useAuth();
|
||||
|
||||
const [exportMode, setExportMode] = useState(false);
|
||||
const [exportList, setExportList] = useState([]);
|
||||
const updateFilter = (name, value) => {
|
||||
setSearchParams((currentParams) => {
|
||||
const nextParams = new URLSearchParams(currentParams);
|
||||
if (value) {
|
||||
nextParams.set(name, value);
|
||||
} else {
|
||||
nextParams.delete(name);
|
||||
}
|
||||
return nextParams;
|
||||
});
|
||||
};
|
||||
|
||||
const openModal = () => {
|
||||
setModalOpen(true);
|
||||
};
|
||||
@ -134,14 +161,17 @@ export default function TasksPage() {
|
||||
handleFormChange('org_unit_id', checked ? filteredOrgUnits.map((unit) => unit.id) : []);
|
||||
};
|
||||
|
||||
const loadTasks = async (currentPage = page, currentLimit = limit) => {
|
||||
if (isLoadAll) return;
|
||||
const loadTasks = useCallback(
|
||||
async (currentPage, currentLimit) => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const skip = (currentPage - 1) * currentLimit;
|
||||
const params = {
|
||||
offset: skip,
|
||||
limit: currentLimit,
|
||||
...(yearFilter && { year: Number(yearFilter) }),
|
||||
...(formTypeFilter && { form_type: formTypeFilter }),
|
||||
...(orgUnitIdsFilter.length > 0 && { org_units: orgUnitIdsFilter.join(',') }),
|
||||
};
|
||||
|
||||
const res = await TasksApi.list(params);
|
||||
@ -149,68 +179,60 @@ export default function TasksPage() {
|
||||
|
||||
setItems(data);
|
||||
setTotalCount(res.count);
|
||||
} catch (error) {
|
||||
} catch (_error) {
|
||||
toast.error('Ошибка загрузки задач');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
},
|
||||
[yearFilter, formTypeFilter, orgUnitIdsFilter],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
setPage(1);
|
||||
}, [query]);
|
||||
|
||||
const handlePageChange = (event, value) => {
|
||||
const handlePageChange = (_event, value) => {
|
||||
setPage(value);
|
||||
loadTasks(value, limit);
|
||||
};
|
||||
|
||||
const handleLimitChange = (event) => {
|
||||
const newLimit = event.target.value;
|
||||
setLimit(newLimit);
|
||||
setPage(1);
|
||||
loadTasks(1, newLimit);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (modalOpen) {
|
||||
SspApi.getAll({ is_active: true }).then((data) => {
|
||||
if (!user) return;
|
||||
if (user.role_id !== ROLES_NAME_ID.admin) {
|
||||
setSspList(user.org_units || []);
|
||||
return;
|
||||
}
|
||||
SspApi.getAll({ is_active: true })
|
||||
.then((data) => {
|
||||
if (data.result) {
|
||||
setSspList(data.result);
|
||||
}
|
||||
});
|
||||
}
|
||||
}, [modalOpen]);
|
||||
})
|
||||
.catch(() => toast.error('Ошибка загрузки подразделений'));
|
||||
}, [user]);
|
||||
|
||||
useEffect(() => {
|
||||
loadTasks(page, limit);
|
||||
}, []);
|
||||
}, [page, limit, loadTasks]);
|
||||
|
||||
useEffect(() => {
|
||||
setExportList([]);
|
||||
}, [exportMode]);
|
||||
|
||||
const handleChangeToExportList = (taskId, checked) => {
|
||||
if (checked) {
|
||||
setExportList((prev) => [...prev, taskId]);
|
||||
} else {
|
||||
const newExportList = exportList.filter((t) => t != taskId);
|
||||
setExportList(newExportList);
|
||||
}
|
||||
const handleFilterChange = (name, value) => {
|
||||
setPage(1);
|
||||
updateFilter(name, value);
|
||||
};
|
||||
|
||||
const handleBulkExport = async () => {
|
||||
await exportBulkForms(exportList);
|
||||
setExportMode(false);
|
||||
const handleClearFilters = () => {
|
||||
setPage(1);
|
||||
setSearchParams((currentParams) => {
|
||||
const nextParams = new URLSearchParams(currentParams);
|
||||
nextParams.delete('year');
|
||||
nextParams.delete('form_type');
|
||||
nextParams.delete('org_units');
|
||||
return nextParams;
|
||||
});
|
||||
};
|
||||
|
||||
const handleSingleExport = (taskId, taskTitle) => {
|
||||
exportSingleForm(taskId, taskTitle);
|
||||
};
|
||||
|
||||
// Calculate total pages
|
||||
const totalPages = Math.ceil(totalCount / limit);
|
||||
|
||||
if (!user) return;
|
||||
|
||||
return (
|
||||
@ -242,6 +264,56 @@ export default function TasksPage() {
|
||||
</PrimaryButton>
|
||||
)
|
||||
}
|
||||
filterActions={
|
||||
<Box sx={{ display: 'flex', gap: 1.5, flexWrap: 'wrap', alignItems: 'center', minHeight: '2.5rem' }}>
|
||||
<Select
|
||||
size='small'
|
||||
displayEmpty
|
||||
value={yearFilter}
|
||||
onChange={(event) => handleFilterChange('year', event.target.value)}
|
||||
sx={{ width: 130 }}>
|
||||
<MenuItem value=''>Все годы</MenuItem>
|
||||
{yearOptions.map((year) => (
|
||||
<MenuItem key={year} value={year}>
|
||||
{year}
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
|
||||
<Select
|
||||
size='small'
|
||||
displayEmpty
|
||||
value={formTypeFilter}
|
||||
onChange={(event) => handleFilterChange('form_type', event.target.value)}
|
||||
sx={{ width: 210 }}>
|
||||
<MenuItem value=''>Все формы</MenuItem>
|
||||
{FORM_TYPE_OPTIONS.map((formType) => (
|
||||
<MenuItem key={formType} value={formType}>
|
||||
{FORM_TYPE_TRANSLATE[formType]}
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
|
||||
<Autocomplete
|
||||
multiple
|
||||
size='small'
|
||||
options={sspList}
|
||||
disableCloseOnSelect
|
||||
noOptionsText='Не найдено'
|
||||
getOptionLabel={(option) => option.title || ''}
|
||||
isOptionEqualToValue={(option, value) => option.id === value.id}
|
||||
value={selectedOrgUnits}
|
||||
onChange={(_event, newValue) => handleFilterChange('org_units', newValue.map((unit) => unit.id).join(','))}
|
||||
renderValue={renderOrgUnitValue}
|
||||
renderInput={(params) => <TextField {...params} placeholder={selectedOrgUnits.length ? '' : 'Все подразделения'} />}
|
||||
sx={{ width: 480, maxWidth: '100%' }}
|
||||
/>
|
||||
|
||||
<PrimaryOutlinedButton onClick={handleClearFilters} sx={{ height: '2.5rem' }}>
|
||||
Сбросить
|
||||
</PrimaryOutlinedButton>
|
||||
</Box>
|
||||
}
|
||||
/>
|
||||
</PageContainer>
|
||||
<Modal
|
||||
@ -326,7 +398,7 @@ export default function TasksPage() {
|
||||
isOptionEqualToValue={(option, value) => option.id === value.id}
|
||||
renderValue={renderOrgUnitValue}
|
||||
value={filteredOrgUnits.filter((ssp) => formData.org_unit_id.includes(ssp.id))}
|
||||
onChange={(event, newValue) => {
|
||||
onChange={(_event, newValue) => {
|
||||
handleFormChange(
|
||||
'org_unit_id',
|
||||
newValue.map((ssp) => ssp.id),
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user