список проектов
This commit is contained in:
PotapovaA
parent
3c1722293c
commit
e28f6a3887
39
web/src/api/projects.js
Normal file
39
web/src/api/projects.js
Normal file
@ -0,0 +1,39 @@
|
||||
import api from "./client";
|
||||
|
||||
export const ProjectsApi = {
|
||||
list: (params) => {
|
||||
return api.get(`/projects`, { params }).then((r) => r.data);
|
||||
},
|
||||
|
||||
get: (id) => {
|
||||
return api.get(`/projects/${id}`).then((r) => r.data);
|
||||
},
|
||||
|
||||
create: (data) => {
|
||||
return api.post("/projects", data).then((r) => r.data);
|
||||
},
|
||||
|
||||
update: (id, data) => {
|
||||
return api.put(`/projects/${id}`, data).then((r) => r.data);
|
||||
},
|
||||
|
||||
delete: (id) => {
|
||||
return api.delete(`/projects/${id}`).then((r) => r.data);
|
||||
},
|
||||
|
||||
getTasks: (projectId) => {
|
||||
return api.get(`/projects/${projectId}/tasks`).then((r) => r.data);
|
||||
},
|
||||
|
||||
addTask: (projectId, taskId) => {
|
||||
return api
|
||||
.post(`/projects/${projectId}/tasks/${taskId}`)
|
||||
.then((r) => r.data);
|
||||
},
|
||||
|
||||
removeTask: (projectId, taskId) => {
|
||||
return api
|
||||
.delete(`/projects/${projectId}/tasks/${taskId}`)
|
||||
.then((r) => r.data);
|
||||
},
|
||||
};
|
||||
@ -17,6 +17,7 @@ import { CircularProgress } from '@mui/material';
|
||||
import NewTablePage from '../pages/NewTablePage.jsx';
|
||||
import TablesTest from '../pages/TablesTest.jsx';
|
||||
import NewFormTablePage from '../pages/NewFormTablePage.jsx'
|
||||
import ProjectsPage from '../pages/ProjectsPage/ProjectsPage.jsx';
|
||||
|
||||
export const PrivateRoute = () => {
|
||||
const { isAuthenticated, loading } = useAuth();
|
||||
@ -37,6 +38,7 @@ export const AppRoutes = () => {
|
||||
<Route element={<PrivateRoute />}>
|
||||
<Route path="/" element={<TasksPage />} />
|
||||
<Route path="/tasks" element={<TasksPage />} />
|
||||
<Route path="/projects" element={<ProjectsPage />}/>
|
||||
<Route path="/forms" element={<FormsPage />} />
|
||||
<Route path="/task/:taskId" element={<TaskPage />} />
|
||||
<Route path="/table/:tableId" element={<TablePage />} />
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { forwardRef } from 'react';
|
||||
import { Box, Paper, Typography } from '@mui/material';
|
||||
import { CustomCheckbox } from '../../components/common/StyledCheckbox';
|
||||
import { CustomCheckbox } from '../StyledCheckbox';
|
||||
|
||||
export const OrgUnitsAutocompletePaper = forwardRef(
|
||||
function OrgUnitsAutocompletePaper(
|
||||
247
web/src/components/common/PaginatedList.jsx
Normal file
247
web/src/components/common/PaginatedList.jsx
Normal file
@ -0,0 +1,247 @@
|
||||
// src/components/common/PaginatedList/PaginatedList.jsx
|
||||
import { useState, useEffect } from 'react';
|
||||
import {
|
||||
Box,
|
||||
Pagination,
|
||||
PaginationItem,
|
||||
Select,
|
||||
MenuItem,
|
||||
Typography,
|
||||
Stack,
|
||||
} from '@mui/material';
|
||||
import { CardsSkeleton } from './Skeleton';
|
||||
import {
|
||||
ExportExitButton,
|
||||
ExportWithTextButton,
|
||||
} from './Buttons/ButtonsActions';
|
||||
import { exportBulkForms, exportSingleForm } from '../../utils/exportForm';
|
||||
|
||||
/**
|
||||
* Универсальный компонент для отображения списка с пагинацией и экспортом
|
||||
*
|
||||
* @param {Object} props
|
||||
* @param {Array} props.items - Массив элементов для отображения
|
||||
* @param {boolean} props.loading - Состояние загрузки
|
||||
* @param {number} props.totalCount - Общее количество элементов
|
||||
* @param {number} props.page - Текущая страница
|
||||
* @param {number} props.limit - Количество элементов на странице
|
||||
* @param {Function} props.onPageChange - Обработчик изменения страницы
|
||||
* @param {Function} props.onLimitChange - Обработчик изменения лимита
|
||||
* @param {Function} props.renderItem - Функция рендеринга элемента
|
||||
* @param {Function} props.getItemId - Функция получения ID элемента
|
||||
* @param {Function} props.getItemTitle - Функция получения заголовка элемента
|
||||
* @param {string} props.entityName - Название сущности (для текстов)
|
||||
* @param {string} props.emptyMessage - Сообщение при пустом списке
|
||||
* @param {number} props.skeletonCount - Количество скелетонов
|
||||
* @param {Object} props.extraActions - Дополнительные действия справа
|
||||
* @param {boolean} props.enableExport - Включить экспорт
|
||||
* @param {Array} props.limitOptions - Опции для выбора лимита
|
||||
* @param {number} props.maxHeight - Максимальная высота контейнера со скроллом
|
||||
* @param {boolean} props.enableScroll - Включить скролл для списка
|
||||
*/
|
||||
export function PaginatedList({
|
||||
items = [],
|
||||
loading = false,
|
||||
totalCount = 0,
|
||||
page = 1,
|
||||
limit = 20,
|
||||
onPageChange,
|
||||
onLimitChange,
|
||||
renderItem,
|
||||
getItemId,
|
||||
getItemTitle = (item) => `Элемент ${getItemId(item)}`,
|
||||
entityName = 'элементов',
|
||||
emptyMessage = 'Элементы не найдены',
|
||||
skeletonCount = 20,
|
||||
extraActions = null,
|
||||
enableExport = true,
|
||||
limitOptions = [10, 20, 50, 100, 200],
|
||||
maxHeight = 'calc(110vh - 300px)',
|
||||
enableScroll = true,
|
||||
}) {
|
||||
const [exportMode, setExportMode] = useState(false);
|
||||
const [exportList, setExportList] = useState([]);
|
||||
|
||||
// Сброс списка экспорта при переключении режима
|
||||
useEffect(() => {
|
||||
setExportList([]);
|
||||
}, [exportMode]);
|
||||
|
||||
const handleAddToExport = (itemId, checked) => {
|
||||
if (checked) {
|
||||
setExportList((prev) => [...prev, itemId]);
|
||||
} else {
|
||||
setExportList((prev) => prev.filter((id) => id !== itemId));
|
||||
}
|
||||
};
|
||||
|
||||
const handleBulkExport = async () => {
|
||||
await exportBulkForms(exportList);
|
||||
setExportMode(false);
|
||||
};
|
||||
|
||||
const handleSingleExport = (itemId) => {
|
||||
const item = items.find((item) => getItemId(item) === itemId);
|
||||
const title = item ? getItemTitle(item) : `Элемент ${itemId}`;
|
||||
exportSingleForm(itemId, title);
|
||||
};
|
||||
|
||||
// Если включен экспорт, передаем его пропсы в дочерние элементы
|
||||
const renderItemWithExport = (item) => {
|
||||
if (enableExport) {
|
||||
return renderItem(item, {
|
||||
exportMode,
|
||||
onAddForExport: (checked) => {
|
||||
handleAddToExport(getItemId(item), checked);
|
||||
},
|
||||
onExportClick: () => {
|
||||
handleSingleExport(getItemId(item));
|
||||
},
|
||||
isSelected: exportList.includes(getItemId(item)),
|
||||
});
|
||||
}
|
||||
return renderItem(item);
|
||||
};
|
||||
|
||||
return (
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
|
||||
{/* Верхняя панель с экспортом и дополнительными действиями */}
|
||||
{enableExport && (
|
||||
<Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 2, flexShrink: 0 }}>
|
||||
{exportMode && (
|
||||
<Typography variant="body2" color="textSecondary">
|
||||
Выделено {entityName}: {exportList.length}
|
||||
</Typography>
|
||||
)}
|
||||
<Box sx={{ flex: 1 }} />
|
||||
<Stack direction="row" spacing="0.5rem">
|
||||
{!exportMode ? (
|
||||
<>
|
||||
<ExportWithTextButton
|
||||
text="Пакетный экспорт"
|
||||
onClick={() => setExportMode(true)}
|
||||
/>
|
||||
{extraActions}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<ExportWithTextButton
|
||||
text="Экспортировать"
|
||||
onClick={handleBulkExport}
|
||||
disabled={exportList.length === 0}
|
||||
/>
|
||||
<ExportExitButton onClick={() => setExportMode(false)} />
|
||||
</>
|
||||
)}
|
||||
</Stack>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{/* Контейнер со скроллом для списка */}
|
||||
<Box
|
||||
sx={{
|
||||
flex: 1,
|
||||
overflow: enableScroll ? 'auto' : 'visible',
|
||||
maxHeight: enableScroll ? maxHeight : 'none',
|
||||
'&::-webkit-scrollbar': {
|
||||
width: '8px',
|
||||
},
|
||||
'&::-webkit-scrollbar-track': {
|
||||
background: '#f1f1f1',
|
||||
borderRadius: '4px',
|
||||
},
|
||||
'&::-webkit-scrollbar-thumb': {
|
||||
background: '#888',
|
||||
borderRadius: '4px',
|
||||
},
|
||||
'&::-webkit-scrollbar-thumb:hover': {
|
||||
background: '#555',
|
||||
},
|
||||
}}
|
||||
>
|
||||
{/* Список элементов */}
|
||||
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: '1rem' }}>
|
||||
{loading ? (
|
||||
<CardsSkeleton count={skeletonCount} />
|
||||
) : items.length === 0 ? (
|
||||
<Box sx={{ textAlign: 'center', py: 4, width: '100%' }}>
|
||||
<Typography variant="body1" color="textSecondary">
|
||||
{emptyMessage}
|
||||
</Typography>
|
||||
</Box>
|
||||
) : (
|
||||
items.map((item) => renderItemWithExport(item))
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* Пагинация */}
|
||||
{!loading && items.length > 0 && (
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
pt: 2,
|
||||
pb: 2,
|
||||
borderTop: '1px solid',
|
||||
borderColor: 'divider',
|
||||
flexShrink: 0,
|
||||
mt: 2,
|
||||
}}
|
||||
>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||
<Typography variant="body2" color="textSecondary">
|
||||
Показать на странице:
|
||||
</Typography>
|
||||
<Select
|
||||
value={limit}
|
||||
onChange={onLimitChange}
|
||||
size="small"
|
||||
sx={{ minWidth: 70 }}
|
||||
disabled={loading}
|
||||
>
|
||||
{limitOptions.map((option) => (
|
||||
<MenuItem key={option} value={option}>
|
||||
{option}
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</Box>
|
||||
<Typography variant="body2" color="textSecondary">
|
||||
Всего: {totalCount}
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Pagination
|
||||
count={Math.ceil(totalCount / limit)}
|
||||
page={page}
|
||||
onChange={onPageChange}
|
||||
color="primary"
|
||||
size="large"
|
||||
showFirstButton
|
||||
showLastButton
|
||||
disabled={loading}
|
||||
renderItem={(item) => (
|
||||
<PaginationItem
|
||||
{...item}
|
||||
sx={{
|
||||
'&.Mui-selected': {
|
||||
backgroundColor: 'primary.main',
|
||||
color: 'white',
|
||||
'&:hover': {
|
||||
backgroundColor: 'primary.dark',
|
||||
},
|
||||
},
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
|
||||
<Box sx={{ width: 120 }} />
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
332
web/src/pages/ProjectsPage/ProjectCard.jsx
Normal file
332
web/src/pages/ProjectsPage/ProjectCard.jsx
Normal file
@ -0,0 +1,332 @@
|
||||
// src/components/common/ProjectCardComponent/ProjectCardComponent.jsx
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import styled from '@emotion/styled';
|
||||
import {
|
||||
Button,
|
||||
TextField,
|
||||
FormControl,
|
||||
FormLabel,
|
||||
Box,
|
||||
Stack,
|
||||
Chip,
|
||||
} from '@mui/material';
|
||||
import { ProjectsApi } from '../../api/projects';
|
||||
import { toast } from 'react-toastify';
|
||||
import {
|
||||
CheckBoxCheckSvg,
|
||||
CheckBoxUncheckSvg,
|
||||
DateIcon,
|
||||
Edit,
|
||||
ExportSvg,
|
||||
UserIcon,
|
||||
BuildingIcon,
|
||||
LocationIcon,
|
||||
} from '../../components/common/icons/icons';
|
||||
import { IconWithContent } from '../../components/common/IconWithContent';
|
||||
import { ExportButton } from '../../components/common/Buttons/ButtonsActions';
|
||||
|
||||
const ProjectCard = styled.div`
|
||||
width: 26.8rem;
|
||||
height: 15rem;
|
||||
display: flex;
|
||||
padding: 1.25rem;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
box-sizing: border-box;
|
||||
border: 0.06rem solid var(--Stroke, rgba(0, 0, 0, 0.1));
|
||||
border-radius: 1rem;
|
||||
box-shadow:
|
||||
0rem 2rem 4rem -2rem rgba(0, 0, 0, 0.02),
|
||||
0rem 4rem 6rem -1rem rgba(0, 0, 0, 0.02);
|
||||
background: var(--White, rgba(255, 255, 255, 1));
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
`;
|
||||
|
||||
const CardHeader = styled.div`
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
`;
|
||||
|
||||
const ProjectId = styled.div`
|
||||
font-size: 0.75rem;
|
||||
font-weight: 400;
|
||||
line-height: 1rem;
|
||||
letter-spacing: 0rem;
|
||||
text-align: left;
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
`;
|
||||
|
||||
const CardBody = styled.div`
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.8125rem;
|
||||
justify-content: flex-end;
|
||||
height: 100%;
|
||||
`;
|
||||
|
||||
const ProjectTitle = styled.div`
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
color: var(--Text-Primary, #333);
|
||||
line-height: 1.63;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
`;
|
||||
|
||||
const StatusChip = styled(Chip)`
|
||||
font-size: 0.7rem;
|
||||
height: 1.5rem;
|
||||
background-color: ${({ status }) => {
|
||||
switch (status) {
|
||||
case 'active': return '#4caf50';
|
||||
case 'completed': return '#2196f3';
|
||||
case 'paused': return '#ff9800';
|
||||
case 'archived': return '#9e9e9e';
|
||||
default: return '#9e9e9e';
|
||||
}
|
||||
}};
|
||||
color: white;
|
||||
`;
|
||||
|
||||
const LevelChip = styled(Chip)`
|
||||
font-size: 0.6rem;
|
||||
height: 1.25rem;
|
||||
background-color: rgba(0, 0, 0, 0.08);
|
||||
color: rgba(0, 0, 0, 0.7);
|
||||
`;
|
||||
|
||||
const ProjectInfoGrid = styled.div`
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
margin-top: 0.25rem;
|
||||
`;
|
||||
|
||||
const InfoChip = styled(Chip)`
|
||||
font-size: 0.6rem;
|
||||
height: 1.25rem;
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
color: rgba(0, 0, 0, 0.7);
|
||||
`;
|
||||
|
||||
const getStatusLabel = (status) => {
|
||||
const statusMap = {
|
||||
active: 'Активный',
|
||||
completed: 'Завершен',
|
||||
paused: 'Приостановлен',
|
||||
archived: 'Архивирован',
|
||||
};
|
||||
return statusMap[status] || status || 'Не указан';
|
||||
};
|
||||
|
||||
const getLevelLabel = (level) => {
|
||||
const levelMap = {
|
||||
project: 'Проект',
|
||||
subproject: 'Подпроект',
|
||||
task: 'Задача',
|
||||
};
|
||||
return levelMap[level] || level || 'Не указан';
|
||||
};
|
||||
|
||||
export const ProjectCardComponent = ({
|
||||
project,
|
||||
exportMode = false,
|
||||
isLoadingFile = false,
|
||||
onAddForExport,
|
||||
onExportClick,
|
||||
}) => {
|
||||
const navigate = useNavigate();
|
||||
const {
|
||||
id,
|
||||
name,
|
||||
org_unit_name,
|
||||
year,
|
||||
status,
|
||||
level,
|
||||
project_type,
|
||||
vsp_format,
|
||||
placement_type,
|
||||
object_address,
|
||||
staff_count,
|
||||
total_area,
|
||||
report_count,
|
||||
parent_id,
|
||||
} = project;
|
||||
|
||||
const [isEditModalOpen, setEditModalOpen] = useState(false);
|
||||
const [editedName, setEditedName] = useState('');
|
||||
const [currentName, setCurrentName] = useState(name || '');
|
||||
const [isChecked, setIsChecked] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setIsChecked(false);
|
||||
}, [exportMode]);
|
||||
|
||||
const handleOpenEdit = (event) => {
|
||||
event.stopPropagation();
|
||||
setEditedName(currentName);
|
||||
setEditModalOpen(true);
|
||||
};
|
||||
|
||||
const handleCloseEdit = () => {
|
||||
setEditModalOpen(false);
|
||||
};
|
||||
|
||||
const handleCheckboxClick = (event) => {
|
||||
event.stopPropagation();
|
||||
if (!isLoadingFile) {
|
||||
setIsChecked(!isChecked);
|
||||
onAddForExport(!isChecked);
|
||||
} else {
|
||||
toast.warning('Файл формируется!');
|
||||
}
|
||||
};
|
||||
|
||||
const handleExportProject = (event) => {
|
||||
event.stopPropagation();
|
||||
onExportClick?.(id, name);
|
||||
};
|
||||
|
||||
const handleNavigate = () => {
|
||||
if (!exportMode) {
|
||||
navigate(`/project/${id}`);
|
||||
}
|
||||
};
|
||||
|
||||
const updateProject = async (nextName) => {
|
||||
try {
|
||||
await ProjectsApi.update(id, { name: nextName });
|
||||
setCurrentName(nextName);
|
||||
setEditModalOpen(false);
|
||||
toast.success('Название проекта обновлено');
|
||||
} catch (error) {
|
||||
toast.error(
|
||||
error?.response?.data?.detail || 'Не удалось обновить название проекта',
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSaveName = async () => {
|
||||
const nextName = editedName.trim();
|
||||
if (!nextName) {
|
||||
toast.error('Название не может быть пустым');
|
||||
return;
|
||||
}
|
||||
if (nextName === currentName) {
|
||||
setEditModalOpen(false);
|
||||
return;
|
||||
}
|
||||
await updateProject(nextName);
|
||||
};
|
||||
|
||||
const getInitials = (name) => {
|
||||
if (!name) return '?';
|
||||
const words = name.split(' ');
|
||||
if (words.length >= 2) {
|
||||
return `${words[0][0]}${words[1][0]}`.toUpperCase();
|
||||
}
|
||||
return name.substring(0, 2).toUpperCase();
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<ProjectCard onClick={handleNavigate} key={id}>
|
||||
<Box sx={{ width: '100%' }}>
|
||||
<CardHeader>
|
||||
<ProjectId>ID: {id}</ProjectId>
|
||||
<Stack direction={'row'} spacing={'.5rem'} alignItems="center">
|
||||
{!exportMode && (
|
||||
<>
|
||||
{status && (
|
||||
<StatusChip
|
||||
status={status}
|
||||
label={getStatusLabel(status)}
|
||||
size="small"
|
||||
/>
|
||||
)}
|
||||
<ExportButton onClick={handleExportProject} />
|
||||
<Edit onClick={handleOpenEdit} />
|
||||
</>
|
||||
)}
|
||||
</Stack>
|
||||
</CardHeader>
|
||||
|
||||
<ProjectTitle>{currentName}</ProjectTitle>
|
||||
|
||||
<ProjectInfoGrid>
|
||||
{level && (
|
||||
<LevelChip label={getLevelLabel(level)} size="small" />
|
||||
)}
|
||||
{project_type && (
|
||||
<InfoChip label={`Тип: ${project_type}`} size="small" />
|
||||
)}
|
||||
{report_count !== undefined && report_count !== null && (
|
||||
<InfoChip label={`Отчетов: ${report_count}`} size="small" />
|
||||
)}
|
||||
{parent_id && (
|
||||
<InfoChip label={`Родитель: ${parent_id}`} size="small" />
|
||||
)}
|
||||
</ProjectInfoGrid>
|
||||
</Box>
|
||||
|
||||
<Stack
|
||||
sx={{
|
||||
direction: 'row',
|
||||
justifyContent: 'space-between',
|
||||
width: '100%',
|
||||
alignItems: 'end',
|
||||
}}
|
||||
>
|
||||
<CardBody>
|
||||
<IconWithContent icon={<DateIcon />}>
|
||||
{year || 'Год не указан'}
|
||||
</IconWithContent>
|
||||
<IconWithContent icon={<UserIcon />}>
|
||||
{org_unit_name || 'Организация не указана'}
|
||||
</IconWithContent>
|
||||
{object_address && (
|
||||
<IconWithContent >
|
||||
{object_address}
|
||||
</IconWithContent>
|
||||
)}
|
||||
{(staff_count || total_area) && (
|
||||
<IconWithContent >
|
||||
{staff_count && `👥 ${staff_count}`}
|
||||
{staff_count && total_area && ' | '}
|
||||
{total_area && `📐 ${total_area} м²`}
|
||||
</IconWithContent>
|
||||
)}
|
||||
</CardBody>
|
||||
|
||||
{exportMode && (
|
||||
<div>
|
||||
{isChecked ? (
|
||||
<CheckBoxCheckSvg size="1.625rem" />
|
||||
) : (
|
||||
<CheckBoxUncheckSvg size="1.625rem" />
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</Stack>
|
||||
</ProjectCard>
|
||||
</>
|
||||
);
|
||||
};
|
||||
293
web/src/pages/ProjectsPage/ProjectsPage.jsx
Normal file
293
web/src/pages/ProjectsPage/ProjectsPage.jsx
Normal file
@ -0,0 +1,293 @@
|
||||
// src/pages/ProjectsPage/ProjectsPage.jsx
|
||||
import { useEffect, useMemo, useState } from 'react';
|
||||
import { ProjectsApi } from '../../api/projects';
|
||||
import { CardsSkeleton } from '../../components/common/Skeleton';
|
||||
import SearchComponent from '../../components/common/SearchComponent';
|
||||
import { ProjectCardComponent } from './ProjectCard';
|
||||
import { HeaderSwitch } from '../../components/HeaderMenu/HeaderSwitch';
|
||||
import { PageContainer, TasksContainer } from '../StyledForPage';
|
||||
import {
|
||||
Box,
|
||||
FormControl,
|
||||
Button,
|
||||
Stack,
|
||||
Pagination,
|
||||
PaginationItem,
|
||||
Select,
|
||||
MenuItem,
|
||||
Typography,
|
||||
IconButton,
|
||||
Tooltip,
|
||||
} from '@mui/material';
|
||||
import { toast } from 'react-toastify';
|
||||
import { ModalCreateProject } from './ModalCreateProject';
|
||||
import {
|
||||
ROLES_NAME_ID,
|
||||
} from '../../constants';
|
||||
import { useAuth } from '../../app/context/AuthProvider';
|
||||
import { PrimaryButton } from '../../components/common/Buttons/Buttons';
|
||||
import {
|
||||
ExportExitButton,
|
||||
ExportWithTextButton,
|
||||
} from '../../components/common/Buttons/ButtonsActions';
|
||||
import { exportBulkForms, exportSingleForm } from '../../utils/exportForm';
|
||||
import { WhitePlus } from '../../components/common/icons/icons';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { PaginatedList } from '../../components/common/PaginatedList';
|
||||
|
||||
|
||||
// Конфигурация для создания проекта
|
||||
const defaultProjectConfig = {
|
||||
'Тип проекта развития': {
|
||||
type: 'multiselect',
|
||||
options: [
|
||||
'Открытие ВСП',
|
||||
'Закрытие ВСП',
|
||||
'Переезд ВСП',
|
||||
'Реновация РФ',
|
||||
'Открытие УРМ',
|
||||
],
|
||||
placeholder: 'Выберите тип проекта',
|
||||
defaultValue: null,
|
||||
},
|
||||
'Название проекта': {
|
||||
type: 'text',
|
||||
placeholder: 'Введите название проекта',
|
||||
defaultValue: '',
|
||||
},
|
||||
'Формат ВСП': {
|
||||
type: 'multiselect',
|
||||
options: [
|
||||
'Фланговый',
|
||||
'Типовой',
|
||||
'Розничный',
|
||||
'МСБ',
|
||||
'Лёгкий',
|
||||
'Мини',
|
||||
'Розничный-киоск',
|
||||
'МБО',
|
||||
'Офис самообслуживания',
|
||||
'Другое',
|
||||
],
|
||||
placeholder: 'Выберите формат ВСП',
|
||||
defaultValue: null,
|
||||
},
|
||||
'Адрес объекта': {
|
||||
type: 'text',
|
||||
placeholder: 'Введите адрес объекта',
|
||||
defaultValue: '',
|
||||
},
|
||||
'Целевая численность, чел.': {
|
||||
type: 'number',
|
||||
placeholder: 'Введите число',
|
||||
defaultValue: 0,
|
||||
min: 0,
|
||||
step: 1,
|
||||
},
|
||||
'Тип размещения': {
|
||||
type: 'multiselect',
|
||||
options: ['Собственность', 'Аренда', 'Субаренда'],
|
||||
placeholder: 'Выберите тип размещения',
|
||||
defaultValue: null,
|
||||
},
|
||||
'Площадь размещения, м2': {
|
||||
type: 'number',
|
||||
placeholder: 'Введите число',
|
||||
defaultValue: 0,
|
||||
min: 0,
|
||||
step: 1,
|
||||
},
|
||||
};
|
||||
|
||||
export default function ProjectsPage() {
|
||||
const navigate = useNavigate();
|
||||
const [items, setItems] = useState([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [modalOpen, setModalOpen] = useState(false);
|
||||
const [query, setQuery] = useState('');
|
||||
const [statusFilter, setStatusFilter] = useState('');
|
||||
const [levelFilter, setLevelFilter] = useState('');
|
||||
|
||||
// Pagination state
|
||||
const [page, setPage] = useState(1);
|
||||
const [limit, setLimit] = useState(20);
|
||||
const [totalCount, setTotalCount] = useState(0);
|
||||
|
||||
const { user } = useAuth();
|
||||
|
||||
const [exportMode, setExportMode] = useState(false);
|
||||
const [exportList, setExportList] = useState([]);
|
||||
|
||||
const openModal = () => {
|
||||
setModalOpen(true);
|
||||
};
|
||||
|
||||
// Маппинг полей из модалки в API
|
||||
const mapFormDataToApi = (formData) => {
|
||||
const apiData = {
|
||||
name: formData['Название проекта'] || '',
|
||||
project_type: formData['Тип проекта развития'] || null,
|
||||
vsp_format: formData['Формат ВСП'] || null,
|
||||
object_address: formData['Адрес объекта'] || '',
|
||||
staff_count: formData['Целевая численность, чел.'] || 0,
|
||||
placement_type: formData['Тип размещения'] || null,
|
||||
total_area: formData['Площадь размещения, м2'] || 0,
|
||||
// Добавляем значения по умолчанию для обязательных полей
|
||||
year: new Date().getFullYear(),
|
||||
org_unit_id: user?.org_unit_id || null,
|
||||
form_type_code: 'project', // или другое значение по умолчанию
|
||||
status: 'active',
|
||||
level: 'project',
|
||||
};
|
||||
return apiData;
|
||||
};
|
||||
|
||||
const handleCreateProject = async (formData) => {
|
||||
try {
|
||||
const apiData = mapFormDataToApi(formData);
|
||||
|
||||
await ProjectsApi.create(apiData);
|
||||
|
||||
setPage(1);
|
||||
loadProjects(1, limit);
|
||||
|
||||
setModalOpen(false);
|
||||
toast.success('Проект успешно создан');
|
||||
} catch (error) {
|
||||
toast.error(
|
||||
error.response?.data?.detail ||
|
||||
error.response?.data?.message ||
|
||||
'Ошибка при создании проекта',
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
const loadProjects = async (currentPage = page, currentLimit = limit) => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const skip = (currentPage - 1) * currentLimit;
|
||||
const params = {
|
||||
offset: skip,
|
||||
limit: currentLimit,
|
||||
};
|
||||
|
||||
const res = await ProjectsApi.list(params);
|
||||
const data = res.result;
|
||||
|
||||
setItems(data);
|
||||
setTotalCount(res.count);
|
||||
|
||||
} catch (error) {
|
||||
toast.error('Ошибка загрузки проектов');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
setPage(1);
|
||||
loadProjects(1, limit);
|
||||
}, [query, statusFilter, levelFilter]);
|
||||
|
||||
const handlePageChange = (event, value) => {
|
||||
setPage(value);
|
||||
loadProjects(value, limit);
|
||||
};
|
||||
|
||||
const handleLimitChange = (event) => {
|
||||
const newLimit = event.target.value;
|
||||
setLimit(newLimit);
|
||||
setPage(1);
|
||||
loadProjects(1, newLimit);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
loadProjects(page, limit);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
setExportList([]);
|
||||
}, [exportMode]);
|
||||
|
||||
const handleChangeToExportList = (projectId, checked) => {
|
||||
if (checked) {
|
||||
setExportList((prev) => [...prev, projectId]);
|
||||
} else {
|
||||
const newExportList = exportList.filter((t) => t != projectId);
|
||||
setExportList(newExportList);
|
||||
}
|
||||
};
|
||||
|
||||
const handleBulkExport = async () => {
|
||||
await exportBulkForms(exportList);
|
||||
setExportMode(false);
|
||||
};
|
||||
|
||||
const handleSingleExport = (projectId, projectTitle) => {
|
||||
exportSingleForm(projectId, projectTitle);
|
||||
};
|
||||
|
||||
const handleNavigateToTasks = () => {
|
||||
navigate('/tasks');
|
||||
};
|
||||
|
||||
const handleRefresh = () => {
|
||||
loadProjects(page, limit);
|
||||
toast.info('Список проектов обновлен');
|
||||
};
|
||||
|
||||
if (!user) return null;
|
||||
|
||||
return (
|
||||
<>
|
||||
<PageContainer>
|
||||
<HeaderSwitch />
|
||||
|
||||
{/* Навигация */}
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 2, mb: 2 }}>
|
||||
<Button variant="outlined" size="small" onClick={handleNavigateToTasks}>
|
||||
← К задачам
|
||||
</Button>
|
||||
<Typography variant="h6" color="primary" sx={{ fontWeight: 500 }}>
|
||||
Управление проектами
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<PaginatedList
|
||||
items={items}
|
||||
loading={loading}
|
||||
totalCount={totalCount}
|
||||
page={page}
|
||||
limit={limit}
|
||||
onPageChange={handlePageChange}
|
||||
onLimitChange={handleLimitChange}
|
||||
entityName="проектов"
|
||||
emptyMessage="Проекты не найдены"
|
||||
renderItem={(project, exportProps) => (
|
||||
<ProjectCardComponent
|
||||
key={project.id}
|
||||
project={project}
|
||||
{...exportProps}
|
||||
/>
|
||||
)}
|
||||
getItemId={(project) => project.id}
|
||||
getItemTitle={(project) => project.name || 'Проект'}
|
||||
extraActions={
|
||||
user.role_id === ROLES_NAME_ID.admin && (
|
||||
<PrimaryButton onClick={openModal} startIcon={<WhitePlus />}>
|
||||
Создать проект
|
||||
</PrimaryButton>
|
||||
)
|
||||
}
|
||||
/>
|
||||
</PageContainer>
|
||||
|
||||
<ModalCreateProject
|
||||
open={modalOpen}
|
||||
onClose={() => setModalOpen(false)}
|
||||
onCreate={handleCreateProject}
|
||||
config={defaultProjectConfig}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -18,7 +18,6 @@ import { toast } from 'react-toastify';
|
||||
import { SettingModal as SettingStageModal } from '../../components/Stages/SettingModal';
|
||||
import { PrimaryOutlinedButton } from '../../components/common/Buttons/Buttons';
|
||||
import { FormsApi } from '../../api/forms';
|
||||
import { ModalCreateProject } from './ModalCreateProject';
|
||||
import { ExportWithTextButton } from '../../components/common/Buttons/ButtonsActions';
|
||||
import { exportSingleForm } from '../../utils/exportForm';
|
||||
import TablesList from '../../components/common/TableList/TableList';
|
||||
|
||||
@ -37,8 +37,9 @@ import {
|
||||
} from '../../components/common/Buttons/ButtonsActions';
|
||||
import { exportBulkForms, exportSingleForm } from '../../utils/exportForm';
|
||||
import { WhitePlus } from '../../components/common/icons/icons';
|
||||
import { OrgUnitsAutocompletePaper } from './OrgUnitsAutocompletePaper';
|
||||
import { renderOrgUnitValue } from './renderOrgUnitValue';
|
||||
import { OrgUnitsAutocompletePaper } from '../../components/common/OrgUnitsAutocompletePaper/OrgUnitsAutocompletePaper';
|
||||
import { renderOrgUnitValue } from '../../components/common/OrgUnitsAutocompletePaper/renderOrgUnitValue';
|
||||
import { PaginatedList } from '../../components/common/PaginatedList';
|
||||
|
||||
const modalSelectMenuProps = {
|
||||
sx: { zIndex: 1301 },
|
||||
@ -255,128 +256,35 @@ export default function TasksPage() {
|
||||
<>
|
||||
<PageContainer>
|
||||
<HeaderSwitch />
|
||||
<Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
|
||||
{exportMode && <span>Выделено задач: {exportList.length}</span>}
|
||||
</Box>
|
||||
<Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 2 }}>
|
||||
<div style={{ width: '20rem' }}>
|
||||
{/* <SearchComponent
|
||||
placeholder="Поиск по названию задачи"
|
||||
value={query}
|
||||
onChange={setQuery}
|
||||
/> */}
|
||||
</div>
|
||||
<Stack direction={'row'} spacing={'.5rem'}>
|
||||
{!exportMode ? (
|
||||
<>
|
||||
<ExportWithTextButton
|
||||
text={'Пакетный экспорт'}
|
||||
onClick={() => {
|
||||
setExportMode(true);
|
||||
}}
|
||||
></ExportWithTextButton>
|
||||
{user.role_id == ROLES_NAME_ID.admin && (
|
||||
<PrimaryButton onClick={openModal} startIcon={<WhitePlus />}>
|
||||
Создать задачу
|
||||
</PrimaryButton>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<ExportWithTextButton
|
||||
text={'Экспортировать'}
|
||||
onClick={handleBulkExport}
|
||||
disabled={exportList.length === 0}
|
||||
/>
|
||||
<ExportExitButton onClick={() => setExportMode(false)} />
|
||||
</>
|
||||
)}
|
||||
</Stack>
|
||||
</Box>
|
||||
<HeaderSwitch />
|
||||
|
||||
{/* TODO: вернуть, когда будет реализовано на бэке */}
|
||||
{/* <FilterComponent statusFilter={statusFilter} setStatusFilter={setStatusFilter} /> */}
|
||||
<TasksContainer>
|
||||
{loading ? (
|
||||
<CardsSkeleton count={limit} />
|
||||
) : (
|
||||
<>
|
||||
{items.map((t) => (
|
||||
<TaskCardComponent
|
||||
exportMode={exportMode}
|
||||
taskForm={t}
|
||||
key={t.id + '-task-id'}
|
||||
onAddForExport={(checked) => {
|
||||
handleChangeToExportList(t.id, checked);
|
||||
}}
|
||||
onExportClick={handleSingleExport}
|
||||
/>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
</TasksContainer>
|
||||
|
||||
{/* Pagination Footer */}
|
||||
{!loading && items.length > 0 && (
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
pt: 2,
|
||||
pb: 2,
|
||||
borderTop: '1px solid',
|
||||
borderColor: 'divider',
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||
<Typography variant="body2" color="textSecondary">
|
||||
Показать на странице:
|
||||
</Typography>
|
||||
<Select
|
||||
value={limit}
|
||||
onChange={handleLimitChange}
|
||||
size="small"
|
||||
sx={{ minWidth: 70 }}
|
||||
disabled={loading}
|
||||
>
|
||||
<MenuItem value={10}>10</MenuItem>
|
||||
<MenuItem value={20}>20</MenuItem>
|
||||
<MenuItem value={50}>50</MenuItem>
|
||||
<MenuItem value={100}>100</MenuItem>
|
||||
<MenuItem value={200}>200</MenuItem>
|
||||
</Select>
|
||||
</Box>
|
||||
</Box>
|
||||
<Pagination
|
||||
count={Math.ceil(totalCount / limit)}
|
||||
page={page}
|
||||
onChange={handlePageChange}
|
||||
color="primary"
|
||||
size="large"
|
||||
showFirstButton
|
||||
showLastButton
|
||||
disabled={loading}
|
||||
renderItem={(item) => (
|
||||
<PaginationItem
|
||||
{...item}
|
||||
sx={{
|
||||
'&.Mui-selected': {
|
||||
backgroundColor: 'primary.main',
|
||||
color: 'white',
|
||||
'&:hover': {
|
||||
backgroundColor: 'primary.dark',
|
||||
},
|
||||
},
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
<PaginatedList
|
||||
items={items}
|
||||
loading={loading}
|
||||
totalCount={totalCount}
|
||||
page={page}
|
||||
limit={limit}
|
||||
onPageChange={handlePageChange}
|
||||
onLimitChange={handleLimitChange}
|
||||
entityName="задач"
|
||||
emptyMessage="Задачи не найдены"
|
||||
renderItem={(task, exportProps) => (
|
||||
<TaskCardComponent
|
||||
key={task.id}
|
||||
taskForm={task}
|
||||
{...exportProps}
|
||||
/>
|
||||
<Box sx={{ width: 120 }} /> {/* Spacer for symmetry */}
|
||||
</Box>
|
||||
)}
|
||||
)}
|
||||
getItemId={(task) => task.id}
|
||||
getItemTitle={(task) => task.title || 'Задача'}
|
||||
extraActions={
|
||||
user.role_id === ROLES_NAME_ID.admin && (
|
||||
<PrimaryButton onClick={openModal} startIcon={<WhitePlus />}>
|
||||
Создать задачу
|
||||
</PrimaryButton>
|
||||
)
|
||||
}
|
||||
/>
|
||||
</PageContainer>
|
||||
<Modal
|
||||
open={modalOpen}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user