kalugin66/minicrm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

r

Browse Source
This commit is contained in:
kalugin66
2025-12-14 16:41:43 +05:00
parent 849e835422
commit 4a8ee3c46c
3 changed files with 132 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
public/index.html
View File

@@ -47,7 +47,7 @@
</header>
<main>
<section id="tasks-section" class="section">
<section id="tasks-section" class="section">
<h2>Все задачи</h2>
<div id="tasks-controls">
<div class="filters">

44
public/script.js
View File

@@ -2,7 +2,7 @@ let currentUser = null;
let users = [];
let tasks = [];
let filteredUsers = [];
let expandedTasks = new Set();
document.addEventListener('DOMContentLoaded', function() {
checkAuth();
setupEventListeners();
@@ -284,6 +284,7 @@ function renderTasks() {
}
container.innerHTML = filteredTasks.map(task => {
const isExpanded = expandedTasks.has(task.id);
const overallStatus = getTaskOverallStatus(task);
const statusClass = getStatusClass(overallStatus);
const isDeleted = task.status === 'deleted';
@@ -296,6 +297,25 @@ function renderTasks() {
return `
<div class="task-card ${isDeleted ? 'deleted' : ''} ${isClosed ? 'closed' : ''}">
<div class="task-header">
<div class="task-title" onclick="toggleTask(${task.id})" style="cursor: pointer; display: flex; justify-content: space-between; align-items: center;">
<div style="flex: 1;">
<span class="task-number">Задача №${task.id}</span>
<strong>${task.title}</strong>
${isDeleted ? '<span class="deleted-badge">Удалена</span>' : ''}
${isClosed ? '<span class="closed-badge">Закрыта</span>' : ''}
${isCopy ? '<span class="copy-badge">Копия</span>' : ''}
${timeLeftInfo ? `<span class="deadline-badge ${timeLeftInfo.class}">${timeLeftInfo.text}</span>` : ''}
<span class="role-badge ${getRoleBadgeClass(userRole)}">${userRole}</span>
</div>
<div class="task-status ${statusClass}">${getStatusText(overallStatus)}</div>
<div class="expand-icon" style="margin-left: 10px; transition: transform 0.3s; transform: rotate(${isExpanded ? '180deg' : '0deg'});">
▼
</div>
</div>
</div>
<div class="task-content" style="display: ${isExpanded ? 'block' : 'none'};">
<div class="task-actions">
${!isDeleted && !isClosed ? `
${canEdit ? `<button class="edit-btn" onclick="openEditModal(${task.id})" title="Редактировать">✏️</button>` : ''}
@@ -312,18 +332,6 @@ function renderTasks() {
` : ''}
</div>
<div class="task-header">
<div class="task-title">
${task.title}
${isDeleted ? '<span class="deleted-badge">Удалена</span>' : ''}
${isClosed ? '<span class="closed-badge">Закрыта</span>' : ''}
${isCopy ? '<span class="copy-badge">Копия</span>' : ''}
${timeLeftInfo ? `<span class="deadline-badge ${timeLeftInfo.class}">${timeLeftInfo.text}</span>` : ''}
<span class="role-badge ${getRoleBadgeClass(userRole)}">${userRole}</span>
</div>
<div class="task-status ${statusClass}">${getStatusText(overallStatus)}</div>
</div>
${isCopy && task.original_task_title ? `
<div class="task-original">
<small>Оригинал: "${task.original_task_title}" (создал: ${task.original_creator_name})</small>
@@ -364,10 +372,18 @@ function renderTasks() {
${task.closed_at ? `<br><small>Закрыта: ${formatDateTime(task.closed_at)}</small>` : ''}
</div>
</div>
</div>
`;
}).join('');
}
function toggleTask(taskId) {
if (expandedTasks.has(taskId)) {
expandedTasks.delete(taskId);
} else {
expandedTasks.add(taskId);
}
renderTasks();
}
function getTimeLeftInfo(task) {
if (!task.due_date || task.closed_at) return null;

54
public/style.css
View File

@@ -1274,3 +1274,57 @@ button.reopen-btn:hover {
border-left: 5px solid #e74c3c;
text-align: center;
}
.task-number {
background: #3498db;
color: white;
padding: 3px 8px;
border-radius: 12px;
font-size: 0.8rem;
margin-right: 10px;
font-weight: bold;
}
.task-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 0;
gap: 20px;
}
.task-header .task-title {
font-size: 1.2rem;
font-weight: 700;
color: #2c3e50;
flex: 1;
line-height: 1.4;
cursor: pointer;
padding: 15px;
border-radius: 10px;
background: linear-gradient(135deg, rgba(52, 152, 219, 0.1), rgba(52, 152, 219, 0.05));
transition: all 0.3s ease;
}
.task-header .task-title:hover {
background: linear-gradient(135deg, rgba(52, 152, 219, 0.15), rgba(52, 152, 219, 0.1));
transform: translateY(-2px);
}
.task-header .task-title .expand-icon {
font-size: 0.8rem;
color: #6c757d;
margin-left: auto;
padding-left: 15px;
}
.task-content {
padding: 20px;
border-top: 1px solid #e9ecef;
margin-top: 10px;
animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(-10px); }
to { opacity: 1; transform: translateY(0); }
}