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

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

Browse Source 
✅ 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
co-authored by Qwen-Coder
parent 69332ecea5
commit c65da15feb
3 changed files with 502 additions and 309 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/admin/course-requests/create.blade.php
+219 -148
View File
@@ -15,71 +15,19 @@
<div class="row">
<div class="col-md-8 mb-4">
<div class="card shadow-sm">
<div class="card-header bg-primary text-white"><h5 class="mb-0">Элементы заявки</h5></div>
<div class="card-body">
<div id="items-container">
<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">
<div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
<h5 class="mb-0">Элементы заявки</h5>
<button type="button" class="btn btn-sm btn-light" data-bs-toggle="modal" data-bs-target="#addElementModal">
<i class="bi bi-plus-lg"></i> Добавить элемент
</button>
</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>
@@ -114,24 +62,80 @@
</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')
<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>
let itemCount = 1;
// Данные элементов
let items = [];
let elementCounter = 0;
// Функция инициализации TomSelect для нового элемента
function initTomSelectForElement(rowElement) {
// Инициализация для курса
const courseSelect = rowElement.querySelector('.course-select');
if (courseSelect && !courseSelect.tomselect) {
new TomSelect(courseSelect, {
// TomSelect экземпляры
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,
maxOptions: null,
load: function(query, callback) {
if (query.length < 2) return callback();
fetch('/api/courses/search?q=' + encodeURIComponent(query))
@@ -142,16 +146,14 @@ function initTomSelectForElement(rowElement) {
});
}
// Инициализация для организации
const orgSelect = rowElement.querySelector('.org-select');
if (orgSelect && !orgSelect.tomselect) {
new TomSelect(orgSelect, {
// Организации
if (!orgSelect) {
orgSelect = new TomSelect('#element_organization_id', {
valueField: 'id',
labelField: 'text',
searchField: 'text',
placeholder: 'Или оставьте пустым...',
placeholder: 'Не выбрано',
preload: false,
maxOptions: null,
load: function(query, callback) {
if (query.length < 2) return callback();
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) {
if (e.target.classList.contains('remove-item') || e.target.closest('.remove-item')) {
e.target.closest('.item-row').remove();
window.removeItem = function(id) {
items = items.filter(item => item.id !== id);
updateItemsDisplay();
};
// Отправка формы
document.getElementById('createRequestForm').addEventListener('submit', function(e) {
if (items.length === 0) {
e.preventDefault();
alert('Добавьте хотя бы один элемент');
}
});
// Инициализация при загрузке
updateItemsDisplay();
</script>
@endpush
@endsection