Fool-Stack/Kanban-Front
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: добавлено отображение Статуса, дедлайна и названия доски на Mainpage.js

Browse Source 
fix: пофикшен Mainpage.css, в частности адаптивность и отображение всего что есть на странице
This commit is contained in:
Dozzy7528
2026-03-29 17:40:55 +03:00
parent ea45e360a6
commit b343d33184
2 changed files with 250 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
src/Mainpage.js
View File

@@ -25,7 +25,6 @@ const Mainpage = () => {
setLoading(false);
}
};
checkSession();
}, []);
@@ -34,10 +33,13 @@ const Mainpage = () => {
const formatDeadline = (deadline) => {
if (!deadline) return 'Отсутствует';
const d = new Date(deadline);
const day = String(d.getDate()).padStart(2, '0');
const month = String(d.getMonth() + 1).padStart(2, '0');
const year = d.getFullYear();
return `${day}.${month}.${year}`;
const day = String(d.getDate()).padStart(2, '0');
const month = String(d.getMonth() + 1).padStart(2, '0');
const year = d.getFullYear();
const hours = String(d.getHours()).padStart(2, '0');
const minutes = String(d.getMinutes()).padStart(2, '0');
// Формат: 01.04.2026 · 12:00
return `${day}.${month}.${year} ${hours}:${minutes}`;
};
const handleTaskClick = (boardId) => {
@@ -48,55 +50,61 @@ const Mainpage = () => {
return (
<>
<Header/>
<Header />
<div className="mainpage">
<div className="mainpage__intro">
<div className="left-content">
<h1>Kanban-доска Fool-Stack</h1>
<h1>Добро пожаловать в Kanban!</h1>
<p>
Kanban-доска помогает видеть весь процесс целиком: что запланировано, что уже в работе и что
готово.
Перетаскивайте карточки между колонками, фиксируйте договорённости и не теряйте контекст —
всё в одном месте.
Kanban-доска помогает видеть весь процесс целиком: что запланировано,
что уже в работе и что готово. Перетаскивайте карточки между колонками, фиксируйте договорённости и не теряйте контекст — всё в одном месте.
</p>
</div>
<div className="tasks-container">
<h2 className="tasks-title">Мои задачи ({count})</h2>
{loading ? (
<>
<h3 className="tasks-title">Ваши задачи</h3>
<p>Загрузка...</p>
</>
<p className="tasks-loading">Загрузка...</p>
) : isAuthenticated ? (
<>
<h3 className="tasks-title">Ваши задачи</h3>
{count === 0 ? (
<p>Нет задач</p>
{tasks.length === 0 ? (
<p className="tasks-empty">Нет задач</p>
) : (
<div
className={`tasks-list-wrapper ${showScrollbar ? 'scrollable' : ''}`}
>
<ul className="tasks-list">
{tasks.map((task) => (
<li
key={task.id}
className="task-item"
onClick={() => handleTaskClick(task.board_id)}
>
<div><strong>{task.title}</strong></div>
<div><strong>Доска:</strong> {task.board_title}</div>
<div><strong>Дедлайн:</strong> {formatDeadline(task.deadline)}</div>
</li>
))}
</ul>
</div>
<ul className={`tasks-list${showScrollbar ? ' tasks-list--scroll' : ''}`}>
{tasks.map((task) => (
<li
key={task.id}
className="task-item"
onClick={() => handleTaskClick(task.board_id)}
>
<div className="task-item__title">{task.title}</div>
{task.category_title && (
<div className="task-item__meta">
<span className="task-item__label">Статус:</span>
<span className="task-item__badge">{task.category_title}</span>
</div>
)}
{task.board_title && (
<div className="task-item__meta">
<span className="task-item__label">Доска:</span>
<span className="task-item__value task-item__value--truncate">{task.board_title}</span>
</div>
)}
<div className="task-item__meta">
<span className="task-item__label">Дедлайн:</span>
<span className={`task-item__value${!task.deadline ? ' task-item__value--muted' : ''}`}>
{formatDeadline(task.deadline)}
</span>
</div>
</li>
))}
</ul>
)}
</>
) : (
<>
<h3 className="tasks-title">Ваши задачи</h3>
<p>Войдите, чтобы увидеть свои задачи.</p>
</>
<p className="tasks-empty">Войдите, чтобы увидеть свои задачи.</p>
)}
</div>
</div>
@@ -105,5 +113,4 @@ const Mainpage = () => {
);
};
export default Mainpage;
//TODO: проверка правильности отображения даты в отображении, приоритет задачи, отображение категории
export default Mainpage;