doc-test
This commit is contained in:
412
public/doc.html
412
public/doc.html
@@ -3,281 +3,225 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>School CRM - Управление согласованиями DOC</title>
|
||||
<title>Согласование документов</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<link rel="stylesheet" href="doc.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="login-modal" class="modal">
|
||||
<div class="modal-content">
|
||||
<h2><i class="fas fa-sign-in-alt"></i> Вход в School CRM</h2>
|
||||
<form id="login-form">
|
||||
<div class="form-group">
|
||||
<label for="login"><i class="fas fa-user"></i> Логин:</label>
|
||||
<input type="text" id="login" name="login" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="password"><i class="fas fa-lock"></i> Пароль:</label>
|
||||
<input type="password" id="password" name="password" required>
|
||||
</div>
|
||||
<button type="submit" class="btn-primary">
|
||||
<i class="fas fa-sign-in-alt"></i> Войти
|
||||
</button>
|
||||
</form>
|
||||
<div class="test-users">
|
||||
<h3><i class="fas fa-users"></i> Управление согласованиями</h3>
|
||||
<ul>
|
||||
<li><strong><i class="fas fa-school"></i> @2025</strong> МАОУ - СОШ № 25</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="doc-container">
|
||||
<header>
|
||||
<div class="header-top">
|
||||
<h1><i class="fas fa-file-signature"></i> School CRM - Управление согласованиями DOC</h1>
|
||||
<h1><i class="fas fa-file-contract"></i> Согласование документов</h1>
|
||||
<div class="user-info">
|
||||
<span id="current-user"></span>
|
||||
<button onclick="logout()" class="btn-logout">
|
||||
<i class="fas fa-sign-out-alt"></i> Выйти
|
||||
<button onclick="window.location.href = '/'" class="btn-back">
|
||||
<i class="fas fa-arrow-left"></i> Назад к задачам
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<nav>
|
||||
<button onclick="window.location.href = '/'" class="nav-btn btn-admin"><i class="fas fa-cog"></i> Главная</button>
|
||||
<button onclick="window.location.href = '/doc?action=create'" class="nav-btn btn-admin"><i class="fa-solid fa-file"></i> Согласование документов</button>
|
||||
<button onclick="window.location.href = '/help'" class="nav-btn btn-admin"><i class="fas fa-user-circle"></i> Заявки</button>
|
||||
<button onclick="window.location.href = '/admin'" class="nav-btn btn-admin"><i class="fas fa-cog"></i> Админ-панель</button>
|
||||
<nav class="doc-nav">
|
||||
<button onclick="showDocumentSection('create-document')" class="nav-btn">
|
||||
<i class="fas fa-plus-circle"></i> Создать документ
|
||||
</button>
|
||||
<button onclick="showDocumentSection('my-documents')" class="nav-btn">
|
||||
<i class="fas fa-folder"></i> Мои документы
|
||||
</button>
|
||||
<button onclick="showDocumentSection('approval-documents')" class="nav-btn" id="approval-btn">
|
||||
<i class="fas fa-check-circle"></i> На согласовании
|
||||
</button>
|
||||
<button onclick="logout()" class="btn-logout">
|
||||
<i class="fas fa-sign-out-alt"></i> Выйти
|
||||
</button>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<section id="tasks-section" class="section">
|
||||
<h2><i class="fas fa-file-signature"></i> Все согласования</h2>
|
||||
<div id="tasks-controls">
|
||||
<div class="filters">
|
||||
|
||||
</div>
|
||||
<label class="show-deleted-label" style="display: none;">
|
||||
<input type="checkbox" id="show-deleted" onchange="loadTasks()">
|
||||
<i class="fas fa-trash"></i> Показать удаленные согласования
|
||||
</label>
|
||||
</div>
|
||||
<div id="tasks-list"></div>
|
||||
</section>
|
||||
|
||||
<section id="create-task-section" class="section">
|
||||
<h2><i class="fas fa-plus-circle"></i> Создать новое согласование DOC</h2>
|
||||
<form id="create-task-form" enctype="multipart/form-data">
|
||||
<div class="form-group">
|
||||
<label for="title"><i class="fas fa-heading"></i> Название согласования:</label>
|
||||
<input type="text" id="title" name="title" required>
|
||||
<!-- Создание документа -->
|
||||
<section id="create-document-section" class="document-section active">
|
||||
<h2><i class="fas fa-plus-circle"></i> Создать новый документ</h2>
|
||||
<form id="create-document-form" enctype="multipart/form-data">
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label for="title"><i class="fas fa-heading"></i> Название документа:</label>
|
||||
<input type="text" id="title" name="title" required placeholder="Введите название документа">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="document-type"><i class="fas fa-file-alt"></i> Тип документа:</label>
|
||||
<select id="document-type" name="documentTypeId">
|
||||
<option value="">Выберите тип документа</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="description"><i class="fas fa-align-left"></i> Описание:</label>
|
||||
<textarea id="description" name="description" rows="4"></textarea>
|
||||
<textarea id="description" name="description" rows="3" placeholder="Описание документа"></textarea>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="due-date"><i class="fas fa-calendar-alt"></i> Дата и время выполнения:</label>
|
||||
<input type="datetime-local" id="due-date" name="dueDate" required>
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label for="due-date"><i class="fas fa-clock"></i> Срок согласования:</label>
|
||||
<input type="date" id="due-date" name="dueDate">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="form-group">
|
||||
<label><i class="fas fa-users"></i> Исполнители:</label>
|
||||
<small style="color: #666; display: block; margin-top: 5px;">
|
||||
<i class="fas fa-info-circle"></i> Автоматически будет назначено всем пользователям с ролью "Секретарь"
|
||||
</small>
|
||||
<label for="comment"><i class="fas fa-comment"></i> Комментарий для согласующих:</label>
|
||||
<textarea id="comment" name="comment" rows="2" placeholder="Комментарий для согласующих"></textarea>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="form-group">
|
||||
<label for="files"><i class="fas fa-paperclip"></i> Прикрепить файлы (до 15 файлов, максимум 300MB):</label>
|
||||
<label for="files"><i class="fas fa-paperclip"></i> Прикрепить файлы:</label>
|
||||
<div class="file-upload">
|
||||
<input type="file" id="files" name="files" multiple>
|
||||
<label for="files" class="file-upload-label">
|
||||
<i class="fas fa-cloud-upload-alt"></i> Выберите файлы DOC
|
||||
<i class="fas fa-cloud-upload-alt"></i> Выберите файлы
|
||||
</label>
|
||||
</div>
|
||||
<div id="file-list"></div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="form-info">
|
||||
<p><i class="fas fa-info-circle"></i> Документ будет отправлен на согласование секретарю</p>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn-primary">
|
||||
<i class="fas fa-check-circle"></i> Создать согласование
|
||||
<i class="fas fa-check-circle"></i> Отправить на согласование
|
||||
</button>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<section id="logs-section" class="section">
|
||||
<h2><i class="fas fa-history"></i> Лог активности</h2>
|
||||
<div id="logs-list"></div>
|
||||
|
||||
<!-- Мои документы -->
|
||||
<section id="my-documents-section" class="document-section">
|
||||
<div class="section-header">
|
||||
<h2><i class="fas fa-folder"></i> Мои документы</h2>
|
||||
<div class="document-filters">
|
||||
<div class="filter-group">
|
||||
<label for="search-documents"><i class="fas fa-search"></i> Поиск:</label>
|
||||
<input type="text" id="search-documents" placeholder="Поиск по названию, номеру...">
|
||||
</div>
|
||||
<div class="filter-group">
|
||||
<label for="document-status-filter"><i class="fas fa-filter"></i> Статус:</label>
|
||||
<select id="document-status-filter">
|
||||
<option value="all">Все статусы</option>
|
||||
<option value="На согласовании">На согласовании</option>
|
||||
<option value="Согласован">Согласован</option>
|
||||
<option value="Отказано">Отказано</option>
|
||||
<option value="Отозван">Отозван</option>
|
||||
<option value="Завершен">Завершен</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="my-documents-list" class="documents-list">
|
||||
<div class="loading">Загрузка документов...</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Документы на согласование -->
|
||||
<section id="approval-documents-section" class="document-section">
|
||||
<div class="section-header">
|
||||
<h2><i class="fas fa-check-circle"></i> Документы на согласование</h2>
|
||||
<div class="document-filters">
|
||||
<div class="filter-group">
|
||||
<label for="search-approval-documents"><i class="fas fa-search"></i> Поиск:</label>
|
||||
<input type="text" id="search-approval-documents" placeholder="Поиск по названию, номеру...">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="approval-documents-list" class="documents-list">
|
||||
<div class="loading">Загрузка документов...</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<!-- Модальные окна -->
|
||||
<div id="edit-task-modal" class="modal">
|
||||
<div class="modal-content">
|
||||
<span class="close" onclick="closeEditModal()">×</span>
|
||||
<h3><i class="fas fa-edit"></i> Редактировать согласование</h3>
|
||||
<form id="edit-task-form" enctype="multipart/form-data">
|
||||
<input type="hidden" id="edit-task-id">
|
||||
<div class="form-group">
|
||||
<label for="edit-title">Название согласования:</label>
|
||||
<input type="text" id="edit-title" name="title" required>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="edit-description">Описание:</label>
|
||||
<textarea id="edit-description" name="description" rows="4"></textarea>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="edit-due-date">Дата и время выполнения:</label>
|
||||
<input type="datetime-local" id="edit-due-date" name="dueDate" required>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Исполнители:</label>
|
||||
<div id="edit-users-checklist" class="checkbox-group"></div>
|
||||
<small style="color: #666; display: block; margin-top: 5px;">
|
||||
<i class="fas fa-info-circle"></i> В качестве исполнителей можно выбрать только пользователей с ролью "Секретарь"
|
||||
</small>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="edit-files">Добавить файлы:</label>
|
||||
<input type="file" id="edit-files" name="files" multiple>
|
||||
<div id="edit-file-list"></div>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn-primary">
|
||||
<i class="fas fa-save"></i> Сохранить изменения
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="copy-task-modal" class="modal">
|
||||
<div class="modal-content">
|
||||
<span class="close" onclick="closeCopyModal()">×</span>
|
||||
<h3><i class="fas fa-copy"></i> Создать копию согласования</h3>
|
||||
<form id="copy-task-form">
|
||||
<input type="hidden" id="copy-task-id">
|
||||
|
||||
<div class="form-group">
|
||||
<label for="copy-due-date">Дата и время выполнения для копии:</label>
|
||||
<input type="datetime-local" id="copy-due-date" name="dueDate" required>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Назначить секретарей для копии:</label>
|
||||
<div class="user-search">
|
||||
<input type="text" id="copy-user-search" placeholder="Поиск секретарей..." oninput="filterCopyUsers()">
|
||||
</div>
|
||||
<div id="copy-users-checklist" class="checkbox-group"></div>
|
||||
<small style="color: #666; display: block; margin-top: 5px;">
|
||||
<i class="fas fa-info-circle"></i> В качестве исполнителей можно выбрать только пользователей с ролью "Секретарь"
|
||||
</small>
|
||||
</div>
|
||||
<button type="submit" class="btn-primary">
|
||||
<i class="fas fa-copy"></i> Создать копию
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="edit-assignment-modal" class="modal">
|
||||
<div class="modal-content">
|
||||
<span class="close" onclick="closeEditAssignmentModal()">×</span>
|
||||
<h3><i class="fas fa-clock"></i> Редактировать сроки секретаря</h3>
|
||||
<form id="edit-assignment-form">
|
||||
<input type="hidden" id="edit-assignment-task-id">
|
||||
<input type="hidden" id="edit-assignment-user-id">
|
||||
<div class="form-group">
|
||||
<label for="edit-assignment-due-date">Дата и время выполнения:</label>
|
||||
<input type="datetime-local" id="edit-assignment-due-date" name="dueDate" required>
|
||||
</div>
|
||||
<button type="submit" class="btn-primary">
|
||||
<i class="fas fa-save"></i> Сохранить сроки
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="rework-task-modal" class="modal">
|
||||
<div class="modal-content">
|
||||
<span class="close" onclick="closeReworkModal()">×</span>
|
||||
<h3><i class="fas fa-redo"></i> Вернуть согласование на доработку</h3>
|
||||
<form id="rework-task-form">
|
||||
<input type="hidden" id="rework-task-id">
|
||||
<div class="form-group">
|
||||
<label for="rework-comment">Комментарий к доработке:</label>
|
||||
<textarea id="rework-comment" name="comment" rows="4" placeholder="Укажите, что нужно исправить..." required></textarea>
|
||||
</div>
|
||||
<button type="submit" class="btn-warning">
|
||||
<i class="fas fa-redo"></i> Вернуть на доработку
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="kanban-section" class="section kanban-section">
|
||||
<div class="section-header">
|
||||
<h2><i class="fas fa-columns"></i> Канбан-доска согласований</h2>
|
||||
<p>Перетаскивайте согласования между колонками для изменения статуса</p>
|
||||
<div class="kanban-controls">
|
||||
<div class="kanban-filters">
|
||||
<select id="kanban-filter" onchange="loadKanbanBoard()">
|
||||
<option value="all">Все согласования</option>
|
||||
<option value="created">Мои согласования (я создал)</option>
|
||||
<option value="assigned">Назначенные мне как секретарю</option>
|
||||
</select>
|
||||
<select id="kanban-days" onchange="loadKanbanBoard()">
|
||||
<option value="7">7 дней</option>
|
||||
<option value="14">14 дней</option>
|
||||
<option value="30">30 дней</option>
|
||||
<option value="365">Все согласования</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="kanban-board" class="kanban-board">
|
||||
<div class="loading">Загрузка Канбан-доски...</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
// В начале основного скрипта
|
||||
(function() {
|
||||
// Проверяем, нужно ли автоматически показать форму создания
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const hash = window.location.hash;
|
||||
|
||||
if (urlParams.get('action') === 'create' || hash === '#create') {
|
||||
// Ждем полной загрузки DOM
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Небольшая задержка для гарантии загрузки всех скриптов
|
||||
setTimeout(() => {
|
||||
showSection('create-task');
|
||||
<!-- Модальное окно согласования -->
|
||||
<div id="approve-modal" class="modal">
|
||||
<div class="modal-content">
|
||||
<span class="close" onclick="closeApproveModal()">×</span>
|
||||
<h3><i class="fas fa-check-circle"></i> Согласование документа</h3>
|
||||
<form id="approve-form">
|
||||
<input type="hidden" id="approve-modal-document-id">
|
||||
<input type="hidden" id="approve-modal-type">
|
||||
|
||||
// Убираем параметр из URL без перезагрузки
|
||||
if (window.history.replaceState) {
|
||||
const newUrl = window.location.pathname;
|
||||
window.history.replaceState({}, document.title, newUrl);
|
||||
}
|
||||
}, 100);
|
||||
});
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
<div class="form-group">
|
||||
<label for="approve-comment">Комментарий к согласованию:</label>
|
||||
<textarea id="approve-comment" name="comment" rows="4" placeholder="Ваш комментарий к документу..."></textarea>
|
||||
<small>Комментарий будет виден всем участникам согласования</small>
|
||||
</div>
|
||||
|
||||
<div class="form-group" id="refusal-reason" style="display: none;">
|
||||
<label for="refusal-reason-text">Причина отказа:</label>
|
||||
<textarea id="refusal-reason-text" name="refusalReason" rows="3" placeholder="Укажите причину отказа в согласовании..." required></textarea>
|
||||
</div>
|
||||
|
||||
<div class="modal-buttons">
|
||||
<button type="submit" class="btn-primary" id="approve-submit-btn">
|
||||
<i class="fas fa-check"></i> Подтвердить
|
||||
</button>
|
||||
<button type="button" class="btn-secondary" onclick="closeApproveModal()">
|
||||
<i class="fas fa-times"></i> Отмена
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="auth.js"></script>
|
||||
<script src="doc-users.js"></script>
|
||||
<script src="doc-tasks.js"></script>
|
||||
<script src="kanban.js"></script>
|
||||
<script src="files.js"></script>
|
||||
<script src="ui.js"></script>
|
||||
<script src="main.js"></script>
|
||||
<script src="doc.js"></script>
|
||||
<script>
|
||||
// Проверка аутентификации для страницы документов
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
checkAuth();
|
||||
});
|
||||
|
||||
let currentUser = null;
|
||||
|
||||
async function checkAuth() {
|
||||
try {
|
||||
const response = await fetch('/api/user');
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
currentUser = data.user;
|
||||
showMainInterface();
|
||||
} else {
|
||||
window.location.href = '/';
|
||||
}
|
||||
} catch (error) {
|
||||
window.location.href = '/';
|
||||
}
|
||||
}
|
||||
|
||||
function showMainInterface() {
|
||||
document.getElementById('current-user').textContent = `Вы вошли как: ${currentUser.name}`;
|
||||
|
||||
// Проверяем, является ли пользователь секретарем
|
||||
const isSecretary = currentUser.groups && currentUser.groups.includes('Секретарь');
|
||||
|
||||
// Показываем/скрываем кнопку согласования
|
||||
const approvalBtn = document.getElementById('approval-btn');
|
||||
if (approvalBtn) {
|
||||
if (isSecretary) {
|
||||
approvalBtn.style.display = 'inline-block';
|
||||
} else {
|
||||
approvalBtn.style.display = 'none';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function logout() {
|
||||
fetch('/api/logout', { method: 'POST' })
|
||||
.then(() => {
|
||||
window.location.href = '/';
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Ошибка выхода:', error);
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
568
public/doc.js
Normal file
568
public/doc.js
Normal file
@@ -0,0 +1,568 @@
|
||||
// doc.js - Согласование документов
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
if (window.location.pathname === '/doc') {
|
||||
loadDocumentTypes();
|
||||
setupDocumentForm();
|
||||
loadMyDocuments();
|
||||
setupDocumentFilters();
|
||||
}
|
||||
});
|
||||
|
||||
let documentTypes = [];
|
||||
let allDocuments = [];
|
||||
let filteredDocuments = [];
|
||||
|
||||
async function loadDocumentTypes() {
|
||||
try {
|
||||
const response = await fetch('/api/document-types');
|
||||
documentTypes = await response.json();
|
||||
populateDocumentTypeSelect();
|
||||
} catch (error) {
|
||||
console.error('Ошибка загрузки типов документов:', error);
|
||||
}
|
||||
}
|
||||
|
||||
function populateDocumentTypeSelect() {
|
||||
const select = document.getElementById('document-type');
|
||||
if (!select) return;
|
||||
|
||||
select.innerHTML = '<option value="">Выберите тип документа</option>';
|
||||
documentTypes.forEach(type => {
|
||||
const option = document.createElement('option');
|
||||
option.value = type.id;
|
||||
option.textContent = type.name;
|
||||
select.appendChild(option);
|
||||
});
|
||||
}
|
||||
|
||||
function setupDocumentForm() {
|
||||
const form = document.getElementById('create-document-form');
|
||||
if (!form) return;
|
||||
|
||||
form.addEventListener('submit', createDocument);
|
||||
|
||||
// Устанавливаем текущую дату для даты документа
|
||||
const today = new Date().toISOString().split('T')[0];
|
||||
const documentDateInput = document.getElementById('document-date');
|
||||
if (documentDateInput) {
|
||||
documentDateInput.value = today;
|
||||
}
|
||||
|
||||
// Устанавливаем дату выполнения (по умолчанию через 7 дней)
|
||||
const dueDate = new Date();
|
||||
dueDate.setDate(dueDate.getDate() + 7);
|
||||
const dueDateInput = document.getElementById('due-date');
|
||||
if (dueDateInput) {
|
||||
dueDateInput.value = dueDate.toISOString().split('T')[0];
|
||||
}
|
||||
}
|
||||
|
||||
async function createDocument(event) {
|
||||
event.preventDefault();
|
||||
|
||||
if (!currentUser) {
|
||||
alert('Требуется аутентификация');
|
||||
return;
|
||||
}
|
||||
|
||||
const formData = new FormData();
|
||||
|
||||
// Собираем данные формы
|
||||
const title = document.getElementById('title').value;
|
||||
const description = document.getElementById('description').value;
|
||||
const documentTypeId = document.getElementById('document-type').value;
|
||||
const documentNumber = document.getElementById('document-number').value;
|
||||
const documentDate = document.getElementById('document-date').value;
|
||||
const pagesCount = document.getElementById('pages-count').value;
|
||||
const urgencyLevel = document.getElementById('urgency-level').value;
|
||||
const dueDate = document.getElementById('due-date').value;
|
||||
const comment = document.getElementById('comment').value;
|
||||
|
||||
if (!title || title.trim() === '') {
|
||||
alert('Название документа обязательно');
|
||||
return;
|
||||
}
|
||||
|
||||
formData.append('title', title);
|
||||
formData.append('description', description || '');
|
||||
formData.append('dueDate', dueDate || '');
|
||||
formData.append('documentTypeId', documentTypeId || '');
|
||||
formData.append('documentNumber', documentNumber || '');
|
||||
formData.append('documentDate', documentDate || '');
|
||||
formData.append('pagesCount', pagesCount || '');
|
||||
formData.append('urgencyLevel', urgencyLevel || 'normal');
|
||||
formData.append('comment', comment || '');
|
||||
|
||||
// Добавляем файлы
|
||||
const files = document.getElementById('files').files;
|
||||
for (let i = 0; i < files.length; i++) {
|
||||
formData.append('files', files[i]);
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/documents', {
|
||||
method: 'POST',
|
||||
body: formData
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
const result = await response.json();
|
||||
alert(result.message || 'Документ успешно создан и отправлен на согласование!');
|
||||
|
||||
// Сбрасываем форму
|
||||
document.getElementById('create-document-form').reset();
|
||||
document.getElementById('file-list').innerHTML = '';
|
||||
|
||||
// Загружаем мои документы
|
||||
loadMyDocuments();
|
||||
|
||||
// Возвращаемся к списку документов
|
||||
showDocumentSection('my-documents');
|
||||
} else {
|
||||
const error = await response.json();
|
||||
alert(error.error || 'Ошибка создания документа');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Ошибка:', error);
|
||||
alert('Ошибка создания документа');
|
||||
}
|
||||
}
|
||||
|
||||
async function loadMyDocuments() {
|
||||
try {
|
||||
const response = await fetch('/api/documents/my');
|
||||
allDocuments = await response.json();
|
||||
filteredDocuments = [...allDocuments];
|
||||
renderMyDocuments();
|
||||
} catch (error) {
|
||||
console.error('Ошибка загрузки документов:', error);
|
||||
document.getElementById('my-documents-list').innerHTML =
|
||||
'<div class="loading">Ошибка загрузки документов</div>';
|
||||
}
|
||||
}
|
||||
|
||||
async function loadSecretaryDocuments() {
|
||||
try {
|
||||
const response = await fetch('/api/documents/secretary');
|
||||
allDocuments = await response.json();
|
||||
filteredDocuments = [...allDocuments];
|
||||
renderSecretaryDocuments();
|
||||
} catch (error) {
|
||||
console.error('Ошибка загрузки документов секретаря:', error);
|
||||
document.getElementById('secretary-documents-list').innerHTML =
|
||||
'<div class="loading">Ошибка загрузки документов</div>';
|
||||
}
|
||||
}
|
||||
|
||||
function renderMyDocuments() {
|
||||
const container = document.getElementById('my-documents-list');
|
||||
|
||||
if (filteredDocuments.length === 0) {
|
||||
container.innerHTML = '<div class="loading">Нет документов</div>';
|
||||
return;
|
||||
}
|
||||
|
||||
container.innerHTML = filteredDocuments.map(doc => {
|
||||
const status = getDocumentStatus(doc);
|
||||
const statusClass = getDocumentStatusClass(status);
|
||||
const isCancelled = doc.status === 'cancelled';
|
||||
const isClosed = doc.closed_at !== null;
|
||||
|
||||
const timeLeftInfo = getDocumentTimeLeftInfo(doc);
|
||||
|
||||
return `
|
||||
<div class="document-card ${isCancelled ? 'cancelled' : ''} ${isClosed ? 'closed' : ''}">
|
||||
<div class="document-header">
|
||||
<div class="document-title">
|
||||
<span class="document-number">Док. №${doc.document_number || doc.id}</span>
|
||||
<strong>${doc.title}</strong>
|
||||
${isCancelled ? '<span class="status-badge status-cancelled">Отозван</span>' : ''}
|
||||
${isClosed ? '<span class="status-badge status-closed">Завершен</span>' : ''}
|
||||
${timeLeftInfo ? `<span class="deadline-badge ${timeLeftInfo.class}">${timeLeftInfo.text}</span>` : ''}
|
||||
<span class="status-badge ${statusClass}">${status}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="document-content">
|
||||
<div class="document-actions">
|
||||
${!isCancelled && !isClosed ? `
|
||||
<button class="cancel-btn" onclick="cancelDocument(${doc.document_id})" title="Отозвать документ">🗑️</button>
|
||||
` : ''}
|
||||
${doc.files && doc.files.length > 0 ? `
|
||||
<button class="download-btn" onclick="downloadDocumentPackage(${doc.document_id})" title="Скачать пакет документов">📦</button>
|
||||
` : ''}
|
||||
</div>
|
||||
|
||||
<div class="document-details">
|
||||
<div><strong>Тип документа:</strong> ${doc.document_type_name || 'Не указан'}</div>
|
||||
${doc.description ? `<div><strong>Описание:</strong> ${doc.description}</div>` : ''}
|
||||
<div><strong>Статус согласования:</strong> ${doc.assignment_status || 'Не назначен'}</div>
|
||||
${doc.refusal_reason ? `<div class="refusal-reason"><strong>Причина отказа:</strong> ${doc.refusal_reason}</div>` : ''}
|
||||
${doc.comment ? `<div><strong>Комментарий создателя:</strong> ${doc.comment}</div>` : ''}
|
||||
</div>
|
||||
|
||||
<div class="document-meta">
|
||||
<div><strong>Дата документа:</strong> ${formatDate(doc.document_date)}</div>
|
||||
<div><strong>Количество страниц:</strong> ${doc.pages_count || 'Не указано'}</div>
|
||||
<div><strong>Срочность:</strong> ${getUrgencyText(doc.urgency_level)}</div>
|
||||
<div><strong>Срок согласования:</strong> ${formatDate(doc.due_date)}</div>
|
||||
</div>
|
||||
|
||||
<div class="document-files" id="files-${doc.id}">
|
||||
<strong>Файлы:</strong>
|
||||
${doc.files && doc.files.length > 0 ?
|
||||
renderDocumentFiles(doc.files) :
|
||||
'<span class="no-files">нет файлов</span>'
|
||||
}
|
||||
</div>
|
||||
|
||||
<div class="document-timeline">
|
||||
<small>Создан: ${formatDateTime(doc.created_at)}</small>
|
||||
${doc.closed_at ? `<br><small>Завершен: ${formatDateTime(doc.closed_at)}</small>` : ''}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}).join('');
|
||||
}
|
||||
|
||||
function renderSecretaryDocuments() {
|
||||
const container = document.getElementById('secretary-documents-list');
|
||||
|
||||
if (filteredDocuments.length === 0) {
|
||||
container.innerHTML = '<div class="loading">Нет документов для согласования</div>';
|
||||
return;
|
||||
}
|
||||
|
||||
container.innerHTML = filteredDocuments.map(doc => {
|
||||
const status = getDocumentStatus(doc);
|
||||
const statusClass = getDocumentStatusClass(status);
|
||||
|
||||
const timeLeftInfo = getDocumentTimeLeftInfo(doc);
|
||||
|
||||
return `
|
||||
<div class="document-card secretary">
|
||||
<div class="document-header">
|
||||
<div class="document-title">
|
||||
<span class="document-number">Док. №${doc.document_number || doc.id}</span>
|
||||
<strong>${doc.title}</strong>
|
||||
${timeLeftInfo ? `<span class="deadline-badge ${timeLeftInfo.class}">${timeLeftInfo.text}</span>` : ''}
|
||||
<span class="status-badge ${statusClass}">${status}</span>
|
||||
<span class="creator-badge">От: ${doc.creator_name}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="document-content">
|
||||
<div class="document-actions">
|
||||
<button class="approve-btn" onclick="openApproveModal(${doc.document_id})" title="Согласовать">✅</button>
|
||||
<button class="pre-approve-btn" onclick="openPreApproveModal(${doc.document_id})" title="Предварительно согласовать">📝</button>
|
||||
<button class="refuse-btn" onclick="openRefuseModal(${doc.document_id})" title="Отказать">❌</button>
|
||||
${doc.files && doc.files.length > 0 ? `
|
||||
<button class="download-btn" onclick="downloadDocumentPackage(${doc.document_id})" title="Скачать пакет документов">📦</button>
|
||||
` : ''}
|
||||
</div>
|
||||
|
||||
<div class="document-details">
|
||||
<div><strong>Тип документа:</strong> ${doc.document_type_name || 'Не указан'}</div>
|
||||
${doc.description ? `<div><strong>Описание:</strong> ${doc.description}</div>` : ''}
|
||||
${doc.comment ? `<div><strong>Комментарий создателя:</strong> ${doc.comment}</div>` : ''}
|
||||
${doc.refusal_reason ? `<div class="refusal-reason"><strong>Ранее отказано:</strong> ${doc.refusal_reason}</div>` : ''}
|
||||
</div>
|
||||
|
||||
<div class="document-meta">
|
||||
<div><strong>Дата документа:</strong> ${formatDate(doc.document_date)}</div>
|
||||
<div><strong>Номер документа:</strong> ${doc.document_number || 'Не указан'}</div>
|
||||
<div><strong>Количество страниц:</strong> ${doc.pages_count || 'Не указано'}</div>
|
||||
<div><strong>Срочность:</strong> ${getUrgencyText(doc.urgency_level)}</div>
|
||||
<div><strong>Срок согласования:</strong> ${formatDate(doc.due_date)}</div>
|
||||
</div>
|
||||
|
||||
<div class="document-files" id="files-${doc.id}">
|
||||
<strong>Файлы:</strong>
|
||||
${doc.files && doc.files.length > 0 ?
|
||||
renderDocumentFiles(doc.files) :
|
||||
'<span class="no-files">нет файлов</span>'
|
||||
}
|
||||
</div>
|
||||
|
||||
<div class="document-timeline">
|
||||
<small>Создан: ${formatDateTime(doc.created_at)}</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}).join('');
|
||||
}
|
||||
|
||||
function renderDocumentFiles(files) {
|
||||
return `
|
||||
<div class="file-icons-container">
|
||||
${files.map(file => `
|
||||
<div class="file-icon" onclick="downloadFile(${file.id})" title="${file.original_name} (${formatFileSize(file.file_size)})">
|
||||
<i class="fas fa-file"></i>
|
||||
<span>${file.original_name}</span>
|
||||
<small>${formatFileSize(file.file_size)}</small>
|
||||
</div>
|
||||
`).join('')}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
function getDocumentStatus(doc) {
|
||||
if (doc.status === 'cancelled') return 'Отозван';
|
||||
if (doc.closed_at) return 'Завершен';
|
||||
|
||||
switch(doc.assignment_status) {
|
||||
case 'pre_approved': return 'Предварительно согласован';
|
||||
case 'approved': return 'Согласован';
|
||||
case 'refused': return 'Отказано';
|
||||
case 'received': return 'Получен оригинал';
|
||||
case 'signed': return 'Подписан';
|
||||
case 'assigned': return 'На согласовании';
|
||||
default: return 'Создан';
|
||||
}
|
||||
}
|
||||
|
||||
function getDocumentStatusClass(status) {
|
||||
switch(status) {
|
||||
case 'Согласован':
|
||||
case 'Подписан':
|
||||
case 'Получен оригинал': return 'status-approved';
|
||||
case 'Предварительно согласован': return 'status-pre-approved';
|
||||
case 'Отказано': return 'status-refused';
|
||||
case 'Отозван': return 'status-cancelled';
|
||||
case 'Завершен': return 'status-closed';
|
||||
default: return 'status-pending';
|
||||
}
|
||||
}
|
||||
|
||||
function getUrgencyText(urgency) {
|
||||
switch(urgency) {
|
||||
case 'very_urgent': return 'Очень срочно';
|
||||
case 'urgent': return 'Срочно';
|
||||
default: return 'Обычная';
|
||||
}
|
||||
}
|
||||
|
||||
function getDocumentTimeLeftInfo(doc) {
|
||||
if (!doc.due_date || doc.closed_at) return null;
|
||||
|
||||
const dueDate = new Date(doc.due_date);
|
||||
const now = new Date();
|
||||
const timeLeft = dueDate.getTime() - now.getTime();
|
||||
const daysLeft = Math.floor(timeLeft / (24 * 60 * 60 * 1000));
|
||||
|
||||
if (daysLeft <= 0) return null;
|
||||
|
||||
if (daysLeft <= 1) {
|
||||
return {
|
||||
text: `Менее 1 дня`,
|
||||
class: 'deadline-urgent'
|
||||
};
|
||||
} else if (daysLeft <= 3) {
|
||||
return {
|
||||
text: `${daysLeft} дня`,
|
||||
class: 'deadline-warning'
|
||||
};
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
function formatDate(dateString) {
|
||||
if (!dateString) return 'Не указана';
|
||||
const date = new Date(dateString);
|
||||
return date.toLocaleDateString('ru-RU');
|
||||
}
|
||||
|
||||
function formatFileSize(bytes) {
|
||||
if (bytes === 0) return '0 Bytes';
|
||||
const k = 1024;
|
||||
const sizes = ['Bytes', 'KB', 'MB', 'GB'];
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
||||
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
|
||||
}
|
||||
|
||||
function downloadFile(fileId) {
|
||||
window.open(`/api/files/${fileId}/download`, '_blank');
|
||||
}
|
||||
|
||||
async function downloadDocumentPackage(documentId) {
|
||||
try {
|
||||
const response = await fetch(`/api/documents/${documentId}/package`);
|
||||
const result = await response.json();
|
||||
|
||||
if (result.success && result.downloadUrl) {
|
||||
window.open(result.downloadUrl, '_blank');
|
||||
} else {
|
||||
alert(result.message || 'Функция создания пакета документов будет реализована в следующей версии');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Ошибка скачивания пакета:', error);
|
||||
alert('Ошибка скачивания пакета документов');
|
||||
}
|
||||
}
|
||||
|
||||
async function cancelDocument(documentId) {
|
||||
if (!confirm('Вы уверены, что хотите отозвать этот документ?')) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch(`/api/documents/${documentId}/cancel`, {
|
||||
method: 'POST'
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
alert('Документ отозван!');
|
||||
loadMyDocuments();
|
||||
} else {
|
||||
const error = await response.json();
|
||||
alert(error.error || 'Ошибка отзыва документа');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Ошибка:', error);
|
||||
alert('Ошибка отзыва документа');
|
||||
}
|
||||
}
|
||||
|
||||
function openPreApproveModal(documentId) {
|
||||
document.getElementById('approve-modal-type').value = 'pre_approve';
|
||||
document.getElementById('approve-modal-document-id').value = documentId;
|
||||
document.getElementById('approve-comment').value = '';
|
||||
document.getElementById('refusal-reason').style.display = 'none';
|
||||
document.getElementById('approve-modal').style.display = 'block';
|
||||
}
|
||||
|
||||
function openApproveModal(documentId) {
|
||||
document.getElementById('approve-modal-type').value = 'approve';
|
||||
document.getElementById('approve-modal-document-id').value = documentId;
|
||||
document.getElementById('approve-comment').value = '';
|
||||
document.getElementById('refusal-reason').style.display = 'none';
|
||||
document.getElementById('approve-modal').style.display = 'block';
|
||||
}
|
||||
|
||||
function openRefuseModal(documentId) {
|
||||
document.getElementById('approve-modal-type').value = 'refuse';
|
||||
document.getElementById('approve-modal-document-id').value = documentId;
|
||||
document.getElementById('approve-comment').value = '';
|
||||
document.getElementById('refusal-reason').style.display = 'block';
|
||||
document.getElementById('approve-modal').style.display = 'block';
|
||||
}
|
||||
|
||||
function closeApproveModal() {
|
||||
document.getElementById('approve-modal').style.display = 'none';
|
||||
document.getElementById('approve-comment').value = '';
|
||||
document.getElementById('refusal-reason-text').value = '';
|
||||
}
|
||||
|
||||
async function submitDocumentStatus(event) {
|
||||
event.preventDefault();
|
||||
|
||||
const documentId = document.getElementById('approve-modal-document-id').value;
|
||||
const actionType = document.getElementById('approve-modal-type').value;
|
||||
const comment = document.getElementById('approve-comment').value;
|
||||
const refusalReason = document.getElementById('refusal-reason-text').value;
|
||||
|
||||
let status = '';
|
||||
switch(actionType) {
|
||||
case 'pre_approve': status = 'pre_approved'; break;
|
||||
case 'approve': status = 'approved'; break;
|
||||
case 'refuse': status = 'refused'; break;
|
||||
default: return;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch(`/api/documents/${documentId}/status`, {
|
||||
method: 'PUT',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
status,
|
||||
comment,
|
||||
refusalReason: actionType === 'refuse' ? refusalReason : null
|
||||
})
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
alert('Статус документа обновлен!');
|
||||
closeApproveModal();
|
||||
loadSecretaryDocuments();
|
||||
} else {
|
||||
const error = await response.json();
|
||||
alert(error.error || 'Ошибка обновления статуса');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Ошибка:', error);
|
||||
alert('Ошибка обновления статуса документа');
|
||||
}
|
||||
}
|
||||
|
||||
function setupDocumentFilters() {
|
||||
const searchInput = document.getElementById('search-documents');
|
||||
const statusFilter = document.getElementById('document-status-filter');
|
||||
|
||||
if (searchInput) {
|
||||
searchInput.addEventListener('input', filterDocuments);
|
||||
}
|
||||
|
||||
if (statusFilter) {
|
||||
statusFilter.addEventListener('change', filterDocuments);
|
||||
}
|
||||
}
|
||||
|
||||
function filterDocuments() {
|
||||
const search = document.getElementById('search-documents')?.value.toLowerCase() || '';
|
||||
const statusFilter = document.getElementById('document-status-filter')?.value || 'all';
|
||||
|
||||
filteredDocuments = allDocuments.filter(doc => {
|
||||
// Поиск по названию и номеру
|
||||
const matchesSearch =
|
||||
doc.title.toLowerCase().includes(search) ||
|
||||
(doc.document_number && doc.document_number.toLowerCase().includes(search)) ||
|
||||
(doc.description && doc.description.toLowerCase().includes(search));
|
||||
|
||||
if (!matchesSearch) return false;
|
||||
|
||||
// Фильтрация по статусу
|
||||
if (statusFilter === 'all') return true;
|
||||
|
||||
const docStatus = getDocumentStatus(doc);
|
||||
return docStatus === statusFilter;
|
||||
});
|
||||
|
||||
// Определяем, какую секцию рендерить
|
||||
const activeSection = document.querySelector('.document-section.active');
|
||||
if (activeSection && activeSection.id === 'my-documents-section') {
|
||||
renderMyDocuments();
|
||||
} else if (activeSection && activeSection.id === 'secretary-documents-section') {
|
||||
renderSecretaryDocuments();
|
||||
}
|
||||
}
|
||||
|
||||
function showDocumentSection(sectionName) {
|
||||
// Скрыть все секции
|
||||
document.querySelectorAll('.document-section').forEach(section => {
|
||||
section.classList.remove('active');
|
||||
});
|
||||
|
||||
// Скрыть все кнопки
|
||||
document.querySelectorAll('.nav-btn').forEach(btn => {
|
||||
btn.classList.remove('active');
|
||||
});
|
||||
|
||||
// Показать выбранную секцию
|
||||
document.getElementById(sectionName + '-section').classList.add('active');
|
||||
|
||||
// Активировать соответствующую кнопку
|
||||
const btn = document.querySelector(`.nav-btn[onclick*="${sectionName}"]`);
|
||||
if (btn) btn.classList.add('active');
|
||||
|
||||
// Загрузить данные для секции
|
||||
if (sectionName === 'my-documents') {
|
||||
loadMyDocuments();
|
||||
} else if (sectionName === 'secretary-documents') {
|
||||
loadSecretaryDocuments();
|
||||
}
|
||||
}
|
||||
737
public/style.css
737
public/style.css
@@ -2350,4 +2350,739 @@ small {
|
||||
.nav-btn.kanban:hover { box-shadow: 0 6px 20px rgba(243, 156, 18, 0.4); }
|
||||
.nav-btn.help:hover { box-shadow: 0 6px 20px rgba(23, 162, 184, 0.4); }
|
||||
.nav-btn.profile:hover { box-shadow: 0 6px 20px rgba(46, 204, 113, 0.4); }
|
||||
.nav-btn.admin:hover { box-shadow: 0 6px 20px rgba(231, 76, 60, 0.4); }
|
||||
.nav-btn.admin:hover { box-shadow: 0 6px 20px rgba(231, 76, 60, 0.4); }
|
||||
/* doc */
|
||||
/* doc.css */
|
||||
:root {
|
||||
--primary-color: #3498db;
|
||||
--secondary-color: #2c3e50;
|
||||
--success-color: #27ae60;
|
||||
--warning-color: #f39c12;
|
||||
--danger-color: #e74c3c;
|
||||
--light-color: #ecf0f1;
|
||||
--dark-color: #34495e;
|
||||
--text-color: #333;
|
||||
--border-color: #ddd;
|
||||
--sidebar-width: 250px;
|
||||
--header-height: 70px;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
min-height: 100vh;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.doc-container {
|
||||
max-width: 1400px;
|
||||
margin: 20px auto;
|
||||
background: white;
|
||||
border-radius: 15px;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
header {
|
||||
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
|
||||
color: white;
|
||||
padding: 15px 25px;
|
||||
border-bottom: 3px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.header-top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 15px;
|
||||
flex-wrap: wrap;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.header-top h1 {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.user-info span {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
padding: 8px 15px;
|
||||
border-radius: 20px;
|
||||
font-size: 14px;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
/* Navigation */
|
||||
.doc-nav {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
padding-top: 10px;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.nav-btn {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: white;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
padding: 10px 20px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
transition: all 0.3s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.nav-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.nav-btn.active {
|
||||
background: white;
|
||||
color: var(--primary-color);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.btn-logout {
|
||||
background: rgba(231, 76, 60, 0.2);
|
||||
color: white;
|
||||
border: 1px solid rgba(231, 76, 60, 0.3);
|
||||
padding: 10px 20px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
transition: all 0.3s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
backdrop-filter: blur(10px);
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.btn-logout:hover {
|
||||
background: rgba(231, 76, 60, 0.3);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.btn-back {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: white;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
padding: 8px 15px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
transition: all 0.3s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.btn-back:hover {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
transform: translateX(-3px);
|
||||
}
|
||||
|
||||
/* Main content */
|
||||
main {
|
||||
padding: 25px;
|
||||
min-height: 500px;
|
||||
}
|
||||
|
||||
.document-section {
|
||||
display: none;
|
||||
animation: fadeIn 0.5s ease;
|
||||
}
|
||||
|
||||
.document-section.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(10px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: var(--secondary-color);
|
||||
margin-bottom: 20px;
|
||||
font-size: 22px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 2px solid var(--light-color);
|
||||
}
|
||||
|
||||
/* Forms */
|
||||
form {
|
||||
background: var(--light-color);
|
||||
padding: 25px;
|
||||
border-radius: 12px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
margin-bottom: 20px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
flex: 1;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
font-weight: 600;
|
||||
color: var(--dark-color);
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.form-group input[type="text"],
|
||||
.form-group input[type="number"],
|
||||
.form-group input[type="date"],
|
||||
.form-group input[type="datetime-local"],
|
||||
.form-group select,
|
||||
.form-group textarea {
|
||||
width: 100%;
|
||||
padding: 12px 15px;
|
||||
border: 2px solid #ddd;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
transition: all 0.3s ease;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.form-group input:focus,
|
||||
.form-group select:focus,
|
||||
.form-group textarea:focus {
|
||||
outline: none;
|
||||
border-color: var(--primary-color);
|
||||
box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
|
||||
}
|
||||
|
||||
.form-group textarea {
|
||||
resize: vertical;
|
||||
min-height: 100px;
|
||||
}
|
||||
|
||||
/* File upload */
|
||||
.file-upload {
|
||||
position: relative;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.file-upload input[type="file"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.file-upload-label {
|
||||
display: inline-block;
|
||||
background: var(--primary-color);
|
||||
color: white;
|
||||
padding: 12px 25px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.file-upload-label:hover {
|
||||
background: #2980b9;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 5px 15px rgba(52, 152, 219, 0.3);
|
||||
}
|
||||
|
||||
#file-list {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.file-item {
|
||||
background: white;
|
||||
padding: 12px 15px;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 10px;
|
||||
border-left: 4px solid var(--primary-color);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.file-item-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.file-item-actions button {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--danger-color);
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.file-item-actions button:hover {
|
||||
color: #c0392b;
|
||||
}
|
||||
|
||||
.form-info {
|
||||
background: rgba(52, 152, 219, 0.1);
|
||||
padding: 15px;
|
||||
border-radius: 8px;
|
||||
margin: 20px 0;
|
||||
border-left: 4px solid var(--primary-color);
|
||||
}
|
||||
|
||||
.form-info p {
|
||||
margin: 5px 0;
|
||||
color: var(--dark-color);
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: linear-gradient(135deg, var(--primary-color), #2980b9);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 14px 30px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 7px 20px rgba(52, 152, 219, 0.3);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: var(--light-color);
|
||||
color: var(--dark-color);
|
||||
border: 1px solid var(--border-color);
|
||||
padding: 14px 30px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: #e0e0e0;
|
||||
}
|
||||
|
||||
/* Section header */
|
||||
.section-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
flex-wrap: wrap;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.document-filters {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.filter-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.filter-group label {
|
||||
font-weight: 600;
|
||||
color: var(--dark-color);
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.filter-group input[type="text"],
|
||||
.filter-group select {
|
||||
padding: 8px 12px;
|
||||
border: 2px solid #ddd;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
/* Documents list */
|
||||
.documents-list {
|
||||
display: grid;
|
||||
gap: 15px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.document-card {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
border-left: 4px solid var(--primary-color);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.document-card:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.document-card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.document-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: var(--secondary-color);
|
||||
margin-bottom: 5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.document-meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 15px;
|
||||
margin-bottom: 15px;
|
||||
font-size: 13px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.document-meta span {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.document-description {
|
||||
color: var(--text-color);
|
||||
margin-bottom: 15px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.document-files {
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
.document-files h4 {
|
||||
margin-bottom: 10px;
|
||||
color: var(--dark-color);
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.file-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.file-tag {
|
||||
background: var(--light-color);
|
||||
padding: 5px 10px;
|
||||
border-radius: 15px;
|
||||
font-size: 12px;
|
||||
color: var(--dark-color);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.file-tag:hover {
|
||||
background: var(--primary-color);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.document-actions {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.btn-small {
|
||||
padding: 8px 15px;
|
||||
border-radius: 6px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.btn-approve {
|
||||
background: linear-gradient(135deg, var(--success-color), #219653);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-refuse {
|
||||
background: linear-gradient(135deg, var(--danger-color), #c0392b);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-cancel {
|
||||
background: linear-gradient(135deg, #95a5a6, #7f8c8d);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-download {
|
||||
background: linear-gradient(135deg, var(--primary-color), #2980b9);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-small:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.document-status {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
padding: 5px 12px;
|
||||
border-radius: 15px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.status-created { background: #3498db; color: white; }
|
||||
.status-assigned { background: #f39c12; color: white; }
|
||||
.status-in_progress { background: #3498db; color: white; }
|
||||
.status-pre_approved { background: #9b59b6; color: white; }
|
||||
.status-approved { background: #27ae60; color: white; }
|
||||
.status-refused { background: #e74c3c; color: white; }
|
||||
.status-cancelled { background: #95a5a6; color: white; }
|
||||
.status-overdue { background: #c0392b; color: white; }
|
||||
|
||||
.loading {
|
||||
text-align: center;
|
||||
padding: 40px;
|
||||
color: #666;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.loading i {
|
||||
margin-right: 10px;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
/* Modal */
|
||||
.modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
z-index: 1000;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
backdrop-filter: blur(5px);
|
||||
animation: fadeIn 0.3s ease;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background-color: white;
|
||||
margin: 5% auto;
|
||||
padding: 30px;
|
||||
border-radius: 15px;
|
||||
width: 90%;
|
||||
max-width: 500px;
|
||||
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
|
||||
animation: slideIn 0.3s ease;
|
||||
}
|
||||
|
||||
@keyframes slideIn {
|
||||
from { transform: translateY(-50px); opacity: 0; }
|
||||
to { transform: translateY(0); opacity: 1; }
|
||||
}
|
||||
|
||||
.modal-content h3 {
|
||||
color: var(--secondary-color);
|
||||
margin-bottom: 20px;
|
||||
font-size: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.modal-content .close {
|
||||
float: right;
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
color: #aaa;
|
||||
cursor: pointer;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.modal-content .close:hover {
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.modal-buttons {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
.modal-buttons button {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 768px) {
|
||||
.doc-container {
|
||||
margin: 10px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
main {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.header-top {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.doc-nav {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.document-filters {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.filter-group {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.filter-group input[type="text"],
|
||||
.filter-group select {
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.document-card-header {
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.document-status {
|
||||
position: static;
|
||||
margin-bottom: 10px;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
margin: 20% auto;
|
||||
width: 95%;
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.nav-btn, .btn-logout, .btn-back {
|
||||
padding: 8px 12px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.header-top h1 {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.document-actions {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.btn-small {
|
||||
flex: 1;
|
||||
justify-content: center;
|
||||
min-width: 120px;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user