From 69332ecea55bbb695ca9087ada90698bbc3e3c4f Mon Sep 17 00:00:00 2001
From: mirivlad <mirivlad@lms.local>
Date: Wed, 1 Apr 2026 16:31:39 +0800
Subject: [PATCH] =?UTF-8?q?Fix:=20searchable-select=20=D0=B4=D0=BB=D1=8F?=
 =?UTF-8?q?=20=D0=B4=D0=B8=D0=BD=D0=B0=D0=BC=D0=B8=D1=87=D0=B5=D1=81=D0=BA?=
 =?UTF-8?q?=D0=B8=D1=85=20=D1=8D=D0=BB=D0=B5=D0=BC=D0=B5=D0=BD=D1=82=D0=BE?=
 =?UTF-8?q?=D0=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

✅ initTomSelectForElement() для инициализации новых элементов
✅ TomSelect для курсов и организаций
✅ Ручная инициализация при добавлении элемента

Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
---
 .../admin/course-requests/create.blade.php    | 84 ++++++++++++++++---
 1 file changed, 71 insertions(+), 13 deletions(-)

diff --git a/resources/views/admin/course-requests/create.blade.php b/resources/views/admin/course-requests/create.blade.php
index 74463ac..3c33e54 100644
--- a/resources/views/admin/course-requests/create.blade.php
+++ b/resources/views/admin/course-requests/create.blade.php
@@ -23,22 +23,23 @@
                                             <!-- Строка 1: Курс -->
                                             <div class="col-md-12">
                                                 <label class="form-label">Курс *</label>
-                                                <x-searchable-select
-                                                    name="items[0][course_id]"
-                                                    url="{{ route('api.courses.search') }}"
-                                                    placeholder="Выберите курс..."
-                                                    :required="true"
-                                                />
+                                                <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>
-                                                <x-searchable-select
-                                                    name="items[0][organization_id]"
-                                                    url="{{ route('api.organizations.search') }}"
-                                                    placeholder="Или оставьте пустым..."
-                                                />
+                                                <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">
@@ -114,9 +115,62 @@
 </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;
 
+// Функция инициализации TomSelect для нового элемента
+function initTomSelectForElement(rowElement) {
+    // Инициализация для курса
+    const courseSelect = rowElement.querySelector('.course-select');
+    if (courseSelect && !courseSelect.tomselect) {
+        new TomSelect(courseSelect, {
+            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))
+                    .then(response => response.json())
+                    .then(json => callback(json))
+                    .catch(() => callback());
+            }
+        });
+    }
+    
+    // Инициализация для организации
+    const orgSelect = rowElement.querySelector('.org-select');
+    if (orgSelect && !orgSelect.tomselect) {
+        new TomSelect(orgSelect, {
+            valueField: 'id',
+            labelField: 'text',
+            searchField: 'text',
+            placeholder: 'Или оставьте пустым...',
+            preload: false,
+            maxOptions: null,
+            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());
+            }
+        });
+    }
+}
+
+// Инициализация для первого элемента при загрузке
+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');
@@ -126,7 +180,7 @@ document.getElementById('add-item-btn').addEventListener('click', function() {
             <!-- Строка 1: Курс -->
             <div class="col-md-12">
                 <label class="form-label">Курс *</label>
-                <select name="items[${itemCount}][course_id]" class="form-select" required>
+                <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>
@@ -137,7 +191,7 @@ document.getElementById('add-item-btn').addEventListener('click', function() {
             <!-- Строка 2: Получатели -->
             <div class="col-md-4">
                 <label class="form-label">Организация</label>
-                <select name="items[${itemCount}][organization_id]" class="form-select">
+                <select name="items[${itemCount}][organization_id]" class="form-select org-select">
                     <option value="">Не выбрано</option>
                     @foreach($organizations as $id => $name)
                     <option value="{{ $id }}">{{ $name }}</option>
@@ -168,6 +222,10 @@ document.getElementById('add-item-btn').addEventListener('click', function() {
         <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++;
     
     // Показываем кнопки удаления