mirivlad
/
LMS
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Feat: Заявки - Modal для добавления элементов 

✅ Modal с TomSelect для всех полей
✅ Курс, Организация, Группа, Пользователь - всё с поиском
✅ Динамическое добавление элементов через JSON
✅ edit.blade.php с загрузкой существующих элементов

Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
This commit is contained in:
mirivlad 2026-04-02 08:50:55 +08:00
parent 69332ecea5
commit c65da15feb
3 changed files with 502 additions and 309 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

124
app/Http/Controllers/Admin/CourseRequestController.php
View File

@ -61,17 +61,15 @@ class CourseRequestController extends Controller
'organization_id' => 'nullable|exists:organizations,id', 'organization_id' => 'nullable|exists:organizations,id',
'status' => 'nullable|in:pending,approved,rejected', 'status' => 'nullable|in:pending,approved,rejected',
'note' => 'nullable|string', 'note' => 'nullable|string',
'items' => 'required|array', 'items_json' => 'required|string',
'items.*.course_id' => 'required|exists:courses,id',
'items.*.organization_id' => 'nullable|exists:organizations,id',
'items.*.user_id' => 'nullable|exists:users,id',
'items.*.user_ids' => 'nullable|string',
'items.*.group_id' => 'nullable|exists:groups,id',
'items.*.group_ids' => 'nullable|string',
'items.*.start_date' => 'required|date',
'items.*.end_date' => 'nullable|date|after:items.*.start_date',
]); ]);
// Парсим JSON
$items = json_decode($validated['items_json'], true);
if (!is_array($items) || empty($items)) {
return back()->withErrors(['items_json' => 'Добавьте хотя бы один элемент'])->withInput();
}
// Определяем статус // Определяем статус
$user = auth()->user(); $user = auth()->user();
if ($validated['status'] === 'approved' || $user->hasRole(['Administrator', 'Manager', 'Curator'])) { if ($validated['status'] === 'approved' || $user->hasRole(['Administrator', 'Manager', 'Curator'])) {
@ -97,21 +95,16 @@ class CourseRequestController extends Controller
]); ]);
// Создаём элементы заявки // Создаём элементы заявки
foreach ($validated['items'] as $itemData) { foreach ($items as $itemData) {
// Определяем тип назначения
$hasUsers = !empty($itemData['user_ids']);
$hasGroups = !empty($itemData['group_ids']);
$hasOrganization = !empty($itemData['organization_id']);
// Создаём отдельные записи для каждого пользователя // Создаём отдельные записи для каждого пользователя
if ($hasUsers) { if (!empty($itemData['user_ids'])) {
$userIds = array_map('intval', array_filter(explode(',', $itemData['user_ids']))); foreach ($itemData['user_ids'] as $userId) {
foreach ($userIds as $userId) {
CourseRequestItem::create([ CourseRequestItem::create([
'course_request_id' => $courseRequest->id, 'course_request_id' => $courseRequest->id,
'course_id' => $itemData['course_id'], 'course_id' => $itemData['course_id'],
'user_id' => $userId, 'user_id' => $userId,
'group_id' => null, 'group_id' => null,
'organization_id' => $itemData['organization_id'] ?? null,
'start_date' => $itemData['start_date'], 'start_date' => $itemData['start_date'],
'end_date' => $itemData['end_date'] ?? null, 'end_date' => $itemData['end_date'] ?? null,
]); ]);
@ -119,14 +112,14 @@ class CourseRequestController extends Controller
} }
// Создаём отдельные записи для каждой группы // Создаём отдельные записи для каждой группы
if ($hasGroups) { if (!empty($itemData['group_ids'])) {
$groupIds = array_map('intval', array_filter(explode(',', $itemData['group_ids']))); foreach ($itemData['group_ids'] as $groupId) {
foreach ($groupIds as $groupId) {
CourseRequestItem::create([ CourseRequestItem::create([
'course_request_id' => $courseRequest->id, 'course_request_id' => $courseRequest->id,
'course_id' => $itemData['course_id'], 'course_id' => $itemData['course_id'],
'user_id' => null, 'user_id' => null,
'group_id' => $groupId, 'group_id' => $groupId,
'organization_id' => $itemData['organization_id'] ?? null,
'start_date' => $itemData['start_date'], 'start_date' => $itemData['start_date'],
'end_date' => $itemData['end_date'] ?? null, 'end_date' => $itemData['end_date'] ?? null,
]); ]);
@ -134,24 +127,26 @@ class CourseRequestController extends Controller
} }
// Если только организация (без пользователей и групп) // Если только организация (без пользователей и групп)
if (!$hasUsers && !$hasGroups && $hasOrganization) { if (empty($itemData['user_ids']) && empty($itemData['group_ids']) && !empty($itemData['organization_id'])) {
CourseRequestItem::create([ CourseRequestItem::create([
'course_request_id' => $courseRequest->id, 'course_request_id' => $courseRequest->id,
'course_id' => $itemData['course_id'], 'course_id' => $itemData['course_id'],
'user_id' => null, 'user_id' => null,
'group_id' => null, 'group_id' => null,
'organization_id' => $itemData['organization_id'],
'start_date' => $itemData['start_date'], 'start_date' => $itemData['start_date'],
'end_date' => $itemData['end_date'] ?? null, 'end_date' => $itemData['end_date'] ?? null,
]); ]);
} }
// Если ничего не указано - создаём запись без привязки (для организации заявки) // Если ничего не указано - создаём запись без привязки
if (!$hasUsers && !$hasGroups && !$hasOrganization) { if (empty($itemData['user_ids']) && empty($itemData['group_ids']) && empty($itemData['organization_id'])) {
CourseRequestItem::create([ CourseRequestItem::create([
'course_request_id' => $courseRequest->id, 'course_request_id' => $courseRequest->id,
'course_id' => $itemData['course_id'], 'course_id' => $itemData['course_id'],
'user_id' => null, 'user_id' => null,
'group_id' => null, 'group_id' => null,
'organization_id' => null,
'start_date' => $itemData['start_date'], 'start_date' => $itemData['start_date'],
'end_date' => $itemData['end_date'] ?? null, 'end_date' => $itemData['end_date'] ?? null,
]); ]);
@ -208,42 +203,71 @@ class CourseRequestController extends Controller
$validated = $request->validate([ $validated = $request->validate([
'note' => 'nullable|string', 'note' => 'nullable|string',
'items' => 'required|array', 'items_json' => 'required|string',
'items.*.id' => 'nullable|exists:course_request_items,id',
'items.*.course_id' => 'required|exists:courses,id',
'items.*.organization_id' => 'nullable|exists:organizations,id',
'items.*.user_id' => 'nullable|exists:users,id',
'items.*.group_id' => 'nullable|exists:groups,id',
'items.*.start_date' => 'required|date',
'items.*.end_date' => 'nullable|date|after:items.*.start_date',
]); ]);
$items = json_decode($validated['items_json'], true);
if (!is_array($items) || empty($items)) {
return back()->withErrors(['items_json' => 'Добавьте хотя бы один элемент'])->withInput();
}
DB::beginTransaction(); DB::beginTransaction();
try { try {
$courseRequest->update(['note' => $validated['note'] ?? null]); $courseRequest->update(['note' => $validated['note'] ?? null]);
// Обновляем элементы // Удаляем старые элементы
foreach ($validated['items'] as $itemData) { $courseRequest->items()->delete();
if (!empty($itemData['id'])) {
// Обновляем существующий // Создаём новые элементы
$item = CourseRequestItem::find($itemData['id']); foreach ($items as $itemData) {
$item->update([ if (!empty($itemData['user_ids'])) {
'course_id' => $itemData['course_id'], foreach ($itemData['user_ids'] as $userId) {
'organization_id' => $itemData['organization_id'] ?? null, CourseRequestItem::create([
'user_id' => $itemData['user_id'] ?? null, 'course_request_id' => $courseRequest->id,
'group_id' => $itemData['group_id'] ?? null, 'course_id' => $itemData['course_id'],
'start_date' => $itemData['start_date'], 'user_id' => $userId,
'end_date' => $itemData['end_date'] ?? null, 'group_id' => null,
]); 'organization_id' => $itemData['organization_id'] ?? null,
} else { 'start_date' => $itemData['start_date'],
// Создаём новый 'end_date' => $itemData['end_date'] ?? null,
]);
}
}
if (!empty($itemData['group_ids'])) {
foreach ($itemData['group_ids'] as $groupId) {
CourseRequestItem::create([
'course_request_id' => $courseRequest->id,
'course_id' => $itemData['course_id'],
'user_id' => null,
'group_id' => $groupId,
'organization_id' => $itemData['organization_id'] ?? null,
'start_date' => $itemData['start_date'],
'end_date' => $itemData['end_date'] ?? null,
]);
}
}
if (empty($itemData['user_ids']) && empty($itemData['group_ids']) && !empty($itemData['organization_id'])) {
CourseRequestItem::create([ CourseRequestItem::create([
'course_request_id' => $courseRequest->id, 'course_request_id' => $courseRequest->id,
'course_id' => $itemData['course_id'], 'course_id' => $itemData['course_id'],
'organization_id' => $itemData['organization_id'] ?? null, 'user_id' => null,
'user_id' => $itemData['user_id'] ?? null, 'group_id' => null,
'group_id' => $itemData['group_id'] ?? null, 'organization_id' => $itemData['organization_id'],
'start_date' => $itemData['start_date'],
'end_date' => $itemData['end_date'] ?? null,
]);
}
if (empty($itemData['user_ids']) && empty($itemData['group_ids']) && empty($itemData['organization_id'])) {
CourseRequestItem::create([
'course_request_id' => $courseRequest->id,
'course_id' => $itemData['course_id'],
'user_id' => null,
'group_id' => null,
'organization_id' => null,
'start_date' => $itemData['start_date'], 'start_date' => $itemData['start_date'],
'end_date' => $itemData['end_date'] ?? null, 'end_date' => $itemData['end_date'] ?? null,
]); ]);

367
resources/views/admin/course-requests/create.blade.php
View File

@ -15,71 +15,19 @@
<div class="row"> <div class="row">
<div class="col-md-8 mb-4"> <div class="col-md-8 mb-4">
<div class="card shadow-sm"> <div class="card shadow-sm">
<div class="card-header bg-primary text-white"><h5 class="mb-0">Элементы заявки</h5></div> <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
<div class="card-body"> <h5 class="mb-0">Элементы заявки</h5>
<div id="items-container"> <button type="button" class="btn btn-sm btn-light" data-bs-toggle="modal" data-bs-target="#addElementModal">
<div class="item-row border rounded p-3 mb-3 bg-light">
<div class="row g-2">
<!-- Строка 1: Курс -->
<div class="col-md-12">
<label class="form-label">Курс *</label>
<select name="items[0][course_id]" class="form-select course-select" required>
<option value="">Выберите курс</option>
@foreach($courses as $id => $title)
<option value="{{ $id }}">{{ $title }}</option>
@endforeach
</select>
</div>
<!-- Строка 2: Получатели -->
<div class="col-md-4">
<label class="form-label">Организация</label>
<select name="items[0][organization_id]" class="form-select org-select">
<option value="">Не выбрано</option>
@foreach($organizations as $id => $name)
<option value="{{ $id }}">{{ $name }}</option>
@endforeach
</select>
<small class="text-muted">И</small>
</div>
<div class="col-md-4">
<label class="form-label">Группа</label>
<x-tags-input
name="items[0][group_ids]"
url="{{ route('api.groups.search') }}"
placeholder="Или выберите группы..."
badge_color="info"
/>
<small class="text-muted">И</small>
</div>
<div class="col-md-4">
<label class="form-label">Пользователь</label>
<x-tags-input
name="items[0][user_ids]"
url="{{ route('api.users.search') }}"
placeholder="Или выберите пользователей..."
badge_color="success"
/>
</div>
<!-- Строка 3: Даты -->
<div class="col-md-6">
<label class="form-label">Дата начала *</label>
<input type="date" name="items[0][start_date]" class="form-control" required>
</div>
<div class="col-md-6">
<label class="form-label">Дата окончания</label>
<input type="date" name="items[0][end_date]" class="form-control">
</div>
</div>
<button type="button" class="btn btn-sm btn-outline-danger mt-2 remove-item" style="display:none;"><i class="bi bi-trash"></i> Удалить</button>
</div>
</div>
<button type="button" class="btn btn-outline-primary btn-sm" id="add-item-btn">
<i class="bi bi-plus-lg"></i> Добавить элемент <i class="bi bi-plus-lg"></i> Добавить элемент
</button> </button>
</div> </div>
<div class="card-body">
<div id="items-container">
<!-- Сюда добавляются элементы -->
</div>
<input type="hidden" name="items_json" id="items_json" value="[]">
@error('items_json')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
</div>
</div> </div>
</div> </div>
@ -114,24 +62,80 @@
</div> </div>
</div> </div>
<!-- Modal добавления элемента -->
<div class="modal fade" id="addElementModal" tabindex="-1">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Добавить элемент заявки</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<form id="addElementForm">
<div class="row g-3">
<!-- Строка 1: Курс -->
<div class="col-md-12">
<label class="form-label">Курс *</label>
<select id="element_course_id" class="form-select" required></select>
</div>
<!-- Строка 2: Получатели -->
<div class="col-md-4">
<label class="form-label">Организация</label>
<select id="element_organization_id" class="form-select"></select>
<small class="text-muted">И</small>
</div>
<div class="col-md-4">
<label class="form-label">Группа</label>
<div id="element_group_ids"></div>
<small class="text-muted">И</small>
</div>
<div class="col-md-4">
<label class="form-label">Пользователь</label>
<div id="element_user_ids"></div>
</div>
<!-- Строка 3: Даты -->
<div class="col-md-6">
<label class="form-label">Дата начала *</label>
<input type="date" id="element_start_date" class="form-control" required>
</div>
<div class="col-md-6">
<label class="form-label">Дата окончания</label>
<input type="date" id="element_end_date" class="form-control">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Отмена</button>
<button type="button" class="btn btn-primary" id="addElementBtn">Добавить в заявку</button>
</div>
</div>
</div>
</div>
@push('scripts') @push('scripts')
<link href="https://cdn.jsdelivr.net/npm/tom-select@2.3.1/dist/css/tom-select.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/tom-select@2.3.1/dist/css/tom-select.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/tom-select@2.3.1/dist/js/tom-select.complete.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/tom-select@2.3.1/dist/js/tom-select.complete.min.js"></script>
<script> <script>
let itemCount = 1; // Данные элементов
let items = [];
let elementCounter = 0;
// Функция инициализации TomSelect для нового элемента // TomSelect экземпляры
function initTomSelectForElement(rowElement) { let courseSelect, orgSelect, groupTags, userTags;
// Инициализация для курса
const courseSelect = rowElement.querySelector('.course-select'); // Инициализация TomSelect при открытии modal
if (courseSelect && !courseSelect.tomselect) { document.getElementById('addElementModal').addEventListener('show.bs.modal', function() {
new TomSelect(courseSelect, { // Курсы
if (!courseSelect) {
courseSelect = new TomSelect('#element_course_id', {
valueField: 'id', valueField: 'id',
labelField: 'text', labelField: 'text',
searchField: 'text', searchField: 'text',
placeholder: 'Выберите курс...', placeholder: 'Выберите курс...',
preload: false, preload: false,
maxOptions: null,
load: function(query, callback) { load: function(query, callback) {
if (query.length < 2) return callback(); if (query.length < 2) return callback();
fetch('/api/courses/search?q=' + encodeURIComponent(query)) fetch('/api/courses/search?q=' + encodeURIComponent(query))
@ -142,16 +146,14 @@ function initTomSelectForElement(rowElement) {
}); });
} }
// Инициализация для организации // Организации
const orgSelect = rowElement.querySelector('.org-select'); if (!orgSelect) {
if (orgSelect && !orgSelect.tomselect) { orgSelect = new TomSelect('#element_organization_id', {
new TomSelect(orgSelect, {
valueField: 'id', valueField: 'id',
labelField: 'text', labelField: 'text',
searchField: 'text', searchField: 'text',
placeholder: 'Или оставьте пустым...', placeholder: 'Не выбрано',
preload: false, preload: false,
maxOptions: null,
load: function(query, callback) { load: function(query, callback) {
if (query.length < 2) return callback(); if (query.length < 2) return callback();
fetch('/api/organizations/search?q=' + encodeURIComponent(query)) fetch('/api/organizations/search?q=' + encodeURIComponent(query))
@ -161,83 +163,152 @@ function initTomSelectForElement(rowElement) {
} }
}); });
} }
// Группы
if (!groupTags) {
groupTags = new TomSelect('#element_group_ids', {
valueField: 'id',
labelField: 'text',
searchField: 'text',
placeholder: 'Выберите группы...',
preload: false,
load: function(query, callback) {
if (query.length < 2) return callback();
fetch('/api/groups/search?q=' + encodeURIComponent(query))
.then(response => response.json())
.then(json => callback(json))
.catch(() => callback());
}
});
}
// Пользователи
if (!userTags) {
userTags = new TomSelect('#element_user_ids', {
valueField: 'id',
labelField: 'text',
searchField: 'text',
placeholder: 'Выберите пользователей...',
preload: false,
load: function(query, callback) {
if (query.length < 2) return callback();
fetch('/api/users/search?q=' + encodeURIComponent(query))
.then(response => response.json())
.then(json => callback(json))
.catch(() => callback());
}
});
}
});
// Сброс формы при закрытии modal
document.getElementById('addElementModal').addEventListener('hidden.bs.modal', function() {
if (courseSelect) courseSelect.clear();
if (orgSelect) orgSelect.clear();
if (groupTags) groupTags.clear();
if (userTags) userTags.clear();
document.getElementById('element_start_date').value = '';
document.getElementById('element_end_date').value = '';
});
// Добавление элемента
document.getElementById('addElementBtn').addEventListener('click', function() {
const courseId = courseSelect.getValue();
const organizationId = orgSelect.getValue();
const groupIds = groupTags.getValue();
const userIds = userTags.getValue();
const startDate = document.getElementById('element_start_date').value;
const endDate = document.getElementById('element_end_date').value;
// Валидация
if (!courseId) {
alert('Выберите курс');
return;
}
if (!startDate) {
alert('Укажите дату начала');
return;
}
// Добавляем элемент
items.push({
id: elementCounter++,
course_id: courseId,
course_name: courseSelect.options[courseId]?.text || 'Курс',
organization_id: organizationId || null,
organization_name: organizationId ? orgSelect.options[organizationId]?.text : null,
group_ids: Array.isArray(groupIds) ? groupIds : (groupIds ? [groupIds] : []),
group_names: Array.isArray(groupIds) ? groupIds.map(id => groupTags.options[id]?.text) : (groupIds ? [groupTags.options[groupIds]?.text] : []),
user_ids: Array.isArray(userIds) ? userIds : (userIds ? [userIds] : []),
user_names: Array.isArray(userIds) ? userIds.map(id => userTags.options[id]?.text) : (userIds ? [userTags.options[userIds]?.text] : []),
start_date: startDate,
end_date: endDate || null
});
updateItemsDisplay();
// Закрываем modal
bootstrap.Modal.getInstance(document.getElementById('addElementModal')).hide();
});
// Обновление отображения элементов
function updateItemsDisplay() {
const container = document.getElementById('items-container');
document.getElementById('items_json').value = JSON.stringify(items);
if (items.length === 0) {
container.innerHTML = '<p class="text-muted text-center py-4">Нет элементов. Нажмите "Добавить элемент"</p>';
return;
}
container.innerHTML = items.map((item, index) => {
let recipients = [];
if (item.organization_name) recipients.push(`<span class="badge bg-primary">${item.organization_name}</span>`);
if (item.group_names && item.group_names.length > 0) {
item.group_names.forEach((name, i) => {
recipients.push(`<span class="badge bg-info">${name}</span>`);
});
}
if (item.user_names && item.user_names.length > 0) {
item.user_names.forEach((name, i) => {
recipients.push(`<span class="badge bg-success">${name}</span>`);
});
}
if (recipients.length === 0) recipients.push('<span class="text-muted">—</span>');
return `
<div class="border rounded p-3 mb-3 bg-light">
<div class="d-flex justify-content-between align-items-start">
<div class="flex-grow-1">
<div class="mb-2"><strong>Курс:</strong> ${item.course_name}</div>
<div class="mb-2"><strong>Получатели:</strong> ${recipients.join(' ')}</div>
<div><strong>Даты:</strong> ${item.start_date} ${item.end_date ? '→ ' + item.end_date : ''}</div>
</div>
<button type="button" class="btn btn-sm btn-outline-danger" onclick="removeItem(${item.id})">
<i class="bi bi-trash"></i>
</button>
</div>
</div>
`;
}).join('');
} }
// Инициализация для первого элемента при загрузке
document.addEventListener('DOMContentLoaded', function() {
const firstRow = document.querySelector('.item-row');
if (firstRow) {
initTomSelectForElement(firstRow);
}
});
document.getElementById('add-item-btn').addEventListener('click', function() {
const container = document.getElementById('items-container');
const newItem = document.createElement('div');
newItem.className = 'item-row border rounded p-3 mb-3 bg-light';
newItem.innerHTML = `
<div class="row g-2">
<!-- Строка 1: Курс -->
<div class="col-md-12">
<label class="form-label">Курс *</label>
<select name="items[${itemCount}][course_id]" class="form-select course-select" required>
<option value="">Выберите курс</option>
@foreach($courses as $id => $title)
<option value="{{ $id }}">{{ $title }}</option>
@endforeach
</select>
</div>
<!-- Строка 2: Получатели -->
<div class="col-md-4">
<label class="form-label">Организация</label>
<select name="items[${itemCount}][organization_id]" class="form-select org-select">
<option value="">Не выбрано</option>
@foreach($organizations as $id => $name)
<option value="{{ $id }}">{{ $name }}</option>
@endforeach
</select>
<small class="text-muted">И</small>
</div>
<div class="col-md-4">
<label class="form-label">Группа</label>
<input type="text" class="form-control" placeholder="ID групп (через запятую)" name="items[${itemCount}][group_ids]">
<small class="text-muted">И</small>
</div>
<div class="col-md-4">
<label class="form-label">Пользователь</label>
<input type="text" class="form-control" placeholder="ID пользователей (через запятую)" name="items[${itemCount}][user_ids]">
</div>
<!-- Строка 3: Даты -->
<div class="col-md-6">
<label class="form-label">Дата начала *</label>
<input type="date" name="items[${itemCount}][start_date]" class="form-control" required>
</div>
<div class="col-md-6">
<label class="form-label">Дата окончания</label>
<input type="date" name="items[${itemCount}][end_date]" class="form-control">
</div>
</div>
<button type="button" class="btn btn-sm btn-outline-danger mt-2 remove-item"><i class="bi bi-trash"></i> Удалить</button>
`;
container.appendChild(newItem);
// Инициализируем TomSelect для нового элемента
initTomSelectForElement(newItem);
itemCount++;
// Показываем кнопки удаления
document.querySelectorAll('.remove-item').forEach(btn => btn.style.display = 'inline-block');
});
// Удаление элемента // Удаление элемента
document.addEventListener('click', function(e) { window.removeItem = function(id) {
if (e.target.classList.contains('remove-item') || e.target.closest('.remove-item')) { items = items.filter(item => item.id !== id);
e.target.closest('.item-row').remove(); updateItemsDisplay();
};
// Отправка формы
document.getElementById('createRequestForm').addEventListener('submit', function(e) {
if (items.length === 0) {
e.preventDefault();
alert('Добавьте хотя бы один элемент');
} }
}); });
// Инициализация при загрузке
updateItemsDisplay();
</script> </script>
@endpush @endpush
@endsection @endsection

320
resources/views/admin/course-requests/edit.blade.php
View File

@ -16,63 +16,19 @@
<div class="row"> <div class="row">
<div class="col-md-8 mb-4"> <div class="col-md-8 mb-4">
<div class="card shadow-sm"> <div class="card shadow-sm">
<div class="card-header bg-primary text-white"><h5 class="mb-0">Элементы заявки</h5></div> <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
<div class="card-body"> <h5 class="mb-0">Элементы заявки</h5>
<div id="items-container"> <button type="button" class="btn btn-sm btn-light" data-bs-toggle="modal" data-bs-target="#addElementModal">
@foreach($courseRequest->items as $index => $item)
<div class="item-row border rounded p-3 mb-3 bg-light">
<input type="hidden" name="items[{{ $index }}][id]" value="{{ $item->id }}">
<div class="row g-2">
<!-- Строка 1: Курс -->
<div class="col-md-12">
<label class="form-label">Курс *</label>
<select name="items[{{ $index }}][course_id]" class="form-select" required>
@foreach($courses as $id => $title)
<option value="{{ $id }}" {{ $item->course_id == $id ? 'selected' : '' }}>{{ $title }}</option>
@endforeach
</select>
</div>
<!-- Строка 2: Получатели -->
<div class="col-md-4">
<label class="form-label">Организация</label>
<select name="items[{{ $index }}][organization_id]" class="form-select">
<option value="">Не выбрано</option>
@foreach($organizations as $id => $name)
<option value="{{ $id }}" {{ $item->organization_id == $id ? 'selected' : '' }}>{{ $name }}</option>
@endforeach
</select>
<small class="text-muted">И</small>
</div>
<div class="col-md-4">
<label class="form-label">Группа</label>
<input type="text" class="form-control" value="{{ $item->group_id }}" placeholder="ID групп" name="items[{{ $index }}][group_id]">
<small class="text-muted">И</small>
</div>
<div class="col-md-4">
<label class="form-label">Пользователь</label>
<input type="text" class="form-control" value="{{ $item->user_id }}" placeholder="ID пользователей" name="items[{{ $index }}][user_id]">
</div>
<!-- Строка 3: Даты -->
<div class="col-md-6">
<label class="form-label">Дата начала *</label>
<input type="date" name="items[{{ $index }}][start_date]" class="form-control" value="{{ $item->start_date->format('Y-m-d') }}" required>
</div>
<div class="col-md-6">
<label class="form-label">Дата окончания</label>
<input type="date" name="items[{{ $index }}][end_date]" class="form-control" value="{{ $item->end_date?->format('Y-m-d') }}">
</div>
</div>
<button type="button" class="btn btn-sm btn-outline-danger mt-2 remove-item"><i class="bi bi-trash"></i> Удалить</button>
</div>
@endforeach
</div>
<button type="button" class="btn btn-outline-primary btn-sm" id="add-item-btn">
<i class="bi bi-plus-lg"></i> Добавить элемент <i class="bi bi-plus-lg"></i> Добавить элемент
</button> </button>
</div> </div>
<div class="card-body">
<div id="items-container">
<!-- Сюда добавляются элементы -->
</div>
<input type="hidden" name="items_json" id="items_json" value="[]">
@error('items_json')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
</div>
</div> </div>
</div> </div>
@ -96,70 +52,212 @@
</div> </div>
</div> </div>
@push('scripts') <!-- Modal добавления элемента -->
<script> <div class="modal fade" id="addElementModal" tabindex="-1">
let itemCount = {{ $courseRequest->items->count() }}; <div class="modal-dialog modal-lg">
<div class="modal-content">
document.getElementById('add-item-btn').addEventListener('click', function() { <div class="modal-header">
const container = document.getElementById('items-container'); <h5 class="modal-title">Добавить элемент заявки</h5>
const newItem = document.createElement('div'); <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
newItem.className = 'item-row border rounded p-3 mb-3 bg-light';
newItem.innerHTML = `
<div class="row g-2">
<!-- Строка 1: Курс -->
<div class="col-md-12">
<label class="form-label">Курс *</label>
<select name="items[${itemCount}][course_id]" class="form-select" required>
<option value="">Выберите курс</option>
@foreach($courses as $id => $title)
<option value="{{ $id }}">{{ $title }}</option>
@endforeach
</select>
</div> </div>
<div class="modal-body">
<!-- Строка 2: Получатели --> <form id="addElementForm">
<div class="col-md-4"> <div class="row g-3">
<label class="form-label">Организация</label> <div class="col-md-12">
<select name="items[${itemCount}][organization_id]" class="form-select"> <label class="form-label">Курс *</label>
<option value="">Не выбрано</option> <select id="element_course_id" class="form-select" required></select>
@foreach($organizations as $id => $name) </div>
<option value="{{ $id }}">{{ $name }}</option> <div class="col-md-4">
@endforeach <label class="form-label">Организация</label>
</select> <select id="element_organization_id" class="form-select"></select>
<small class="text-muted">И</small> <small class="text-muted">И</small>
</div>
<div class="col-md-4">
<label class="form-label">Группа</label>
<div id="element_group_ids"></div>
<small class="text-muted">И</small>
</div>
<div class="col-md-4">
<label class="form-label">Пользователь</label>
<div id="element_user_ids"></div>
</div>
<div class="col-md-6">
<label class="form-label">Дата начала *</label>
<input type="date" id="element_start_date" class="form-control" required>
</div>
<div class="col-md-6">
<label class="form-label">Дата окончания</label>
<input type="date" id="element_end_date" class="form-control">
</div>
</div>
</form>
</div> </div>
<div class="col-md-4"> <div class="modal-footer">
<label class="form-label">Группа</label> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Отмена</button>
<input type="text" class="form-control" placeholder="ID групп" name="items[${itemCount}][group_id]"> <button type="button" class="btn btn-primary" id="addElementBtn">Добавить в заявку</button>
<small class="text-muted">И</small>
</div>
<div class="col-md-4">
<label class="form-label">Пользователь</label>
<input type="text" class="form-control" placeholder="ID пользователей" name="items[${itemCount}][user_id]">
</div>
<!-- Строка 3: Даты -->
<div class="col-md-6">
<label class="form-label">Дата начала *</label>
<input type="date" name="items[${itemCount}][start_date]" class="form-control" required>
</div>
<div class="col-md-6">
<label class="form-label">Дата окончания</label>
<input type="date" name="items[${itemCount}][end_date]" class="form-control">
</div> </div>
</div> </div>
<button type="button" class="btn btn-sm btn-outline-danger mt-2 remove-item"><i class="bi bi-trash"></i> Удалить</button> </div>
`; </div>
container.appendChild(newItem);
itemCount++;
});
// Удаление элемента @push('scripts')
document.addEventListener('click', function(e) { <link href="https://cdn.jsdelivr.net/npm/tom-select@2.3.1/dist/css/tom-select.css" rel="stylesheet">
if (e.target.classList.contains('remove-item') || e.target.closest('.remove-item')) { <script src="https://cdn.jsdelivr.net/npm/tom-select@2.3.1/dist/js/tom-select.complete.min.js"></script>
e.target.closest('.item-row').remove(); <script>
// Данные элементов
let items = @json($courseRequest->items->map(fn($item) => [
'id' => $item->id,
'course_id' => $item->course_id,
'course_name' => $item->course->title,
'organization_id' => $item->organization_id,
'organization_name' => $item->organization?->name,
'group_ids' => $item->group_id ? [$item->group_id] : [],
'group_names' => $item->group_id ? [$item->group->name] : [],
'user_ids' => $item->user_id ? [$item->user_id] : [],
'user_names' => $item->user_id ? [$item->user->name] : [],
'start_date' => $item->start_date->format('Y-m-d'),
'end_date' => $item->end_date?->format('Y-m-d')
]) ?? []);
let elementCounter = items.length;
let courseSelect, orgSelect, groupTags, userTags;
// Инициализация TomSelect при открытии modal
document.getElementById('addElementModal').addEventListener('show.bs.modal', function() {
if (!courseSelect) {
courseSelect = new TomSelect('#element_course_id', {
valueField: 'id', labelField: 'text', searchField: 'text',
placeholder: 'Выберите курс...', preload: false,
load: function(query, callback) {
if (query.length < 2) return callback();
fetch('/api/courses/search?q=' + encodeURIComponent(query))
.then(response => response.json()).then(json => callback(json)).catch(() => callback());
}
});
}
if (!orgSelect) {
orgSelect = new TomSelect('#element_organization_id', {
valueField: 'id', labelField: 'text', searchField: 'text',
placeholder: 'Не выбрано', preload: false,
load: function(query, callback) {
if (query.length < 2) return callback();
fetch('/api/organizations/search?q=' + encodeURIComponent(query))
.then(response => response.json()).then(json => callback(json)).catch(() => callback());
}
});
}
if (!groupTags) {
groupTags = new TomSelect('#element_group_ids', {
valueField: 'id', labelField: 'text', searchField: 'text',
placeholder: 'Выберите группы...', preload: false,
load: function(query, callback) {
if (query.length < 2) return callback();
fetch('/api/groups/search?q=' + encodeURIComponent(query))
.then(response => response.json()).then(json => callback(json)).catch(() => callback());
}
});
}
if (!userTags) {
userTags = new TomSelect('#element_user_ids', {
valueField: 'id', labelField: 'text', searchField: 'text',
placeholder: 'Выберите пользователей...', preload: false,
load: function(query, callback) {
if (query.length < 2) return callback();
fetch('/api/users/search?q=' + encodeURIComponent(query))
.then(response => response.json()).then(json => callback(json)).catch(() => callback());
}
});
} }
}); });
document.getElementById('addElementModal').addEventListener('hidden.bs.modal', function() {
if (courseSelect) courseSelect.clear();
if (orgSelect) orgSelect.clear();
if (groupTags) groupTags.clear();
if (userTags) userTags.clear();
document.getElementById('element_start_date').value = '';
document.getElementById('element_end_date').value = '';
});
document.getElementById('addElementBtn').addEventListener('click', function() {
const courseId = courseSelect.getValue();
const organizationId = orgSelect.getValue();
const groupIds = groupTags.getValue();
const userIds = userTags.getValue();
const startDate = document.getElementById('element_start_date').value;
const endDate = document.getElementById('element_end_date').value;
if (!courseId) { alert('Выберите курс'); return; }
if (!startDate) { alert('Укажите дату начала'); return; }
items.push({
id: elementCounter++,
course_id: courseId,
course_name: courseSelect.options[courseId]?.text || 'Курс',
organization_id: organizationId || null,
organization_name: organizationId ? orgSelect.options[organizationId]?.text : null,
group_ids: Array.isArray(groupIds) ? groupIds : (groupIds ? [groupIds] : []),
group_names: Array.isArray(groupIds) ? groupIds.map(id => groupTags.options[id]?.text) : (groupIds ? [groupTags.options[groupIds]?.text] : []),
user_ids: Array.isArray(userIds) ? userIds : (userIds ? [userIds] : []),
user_names: Array.isArray(userIds) ? userIds.map(id => userTags.options[id]?.text) : (userIds ? [userTags.options[userIds]?.text] : []),
start_date: startDate,
end_date: endDate || null
});
updateItemsDisplay();
bootstrap.Modal.getInstance(document.getElementById('addElementModal')).hide();
});
function updateItemsDisplay() {
const container = document.getElementById('items-container');
document.getElementById('items_json').value = JSON.stringify(items);
if (items.length === 0) {
container.innerHTML = '<p class="text-muted text-center py-4">Нет элементов. Нажмите "Добавить элемент"</p>';
return;
}
container.innerHTML = items.map((item, index) => {
let recipients = [];
if (item.organization_name) recipients.push(`<span class="badge bg-primary">${item.organization_name}</span>`);
if (item.group_names && item.group_names.length > 0) {
item.group_names.forEach(name => recipients.push(`<span class="badge bg-info">${name}</span>`));
}
if (item.user_names && item.user_names.length > 0) {
item.user_names.forEach(name => recipients.push(`<span class="badge bg-success">${name}</span>`));
}
if (recipients.length === 0) recipients.push('<span class="text-muted">—</span>');
return `
<div class="border rounded p-3 mb-3 bg-light">
<div class="d-flex justify-content-between align-items-start">
<div class="flex-grow-1">
<div class="mb-2"><strong>Курс:</strong> ${item.course_name}</div>
<div class="mb-2"><strong>Получатели:</strong> ${recipients.join(' ')}</div>
<div><strong>Даты:</strong> ${item.start_date} ${item.end_date ? '→ ' + item.end_date : ''}</div>
</div>
<button type="button" class="btn btn-sm btn-outline-danger" onclick="removeItem(${item.id})">
<i class="bi bi-trash"></i>
</button>
</div>
</div>
`;
}).join('');
}
window.removeItem = function(id) {
items = items.filter(item => item.id !== id);
updateItemsDisplay();
};
document.getElementById('editRequestForm').addEventListener('submit', function(e) {
if (items.length === 0) {
e.preventDefault();
alert('Добавьте хотя бы один элемент');
}
});
updateItemsDisplay();
</script> </script>
@endpush @endpush
@endsection @endsection