From 11c5dcaf48332933a64e098f3c7bf0aff97889fe Mon Sep 17 00:00:00 2001
From: mirivlad <mirivlad@lms.local>
Date: Mon, 30 Mar 2026 12:23:05 +0800
Subject: [PATCH] =?UTF-8?q?Feat:=20Tags=20Input=20=D0=BA=D0=BE=D0=BC=D0=BF?=
 =?UTF-8?q?=D0=BE=D0=BD=D0=B5=D0=BD=D1=82=20=D0=B4=D0=BB=D1=8F=20=D0=B3?=
 =?UTF-8?q?=D1=80=D1=83=D0=BF=D0=BF=20(WordPress=20style)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

✅ Новый компонент x-tags-input
✅ Поле ввода + бейджи ниже
✅ Typeahead поиск групп
✅ Крестик для удаления
✅ Синие бейджи как в WordPress
✅ Отдельный компонент (не влияет на searchable-select)

Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
---
 app/Http/Controllers/Admin/UserController.php |  21 +--
 resources/views/admin/users/edit.blade.php    |   5 +-
 .../views/components/tags-input.blade.php     | 151 ++++++++++++++++++
 3 files changed, 164 insertions(+), 13 deletions(-)
 create mode 100644 resources/views/components/tags-input.blade.php

diff --git a/app/Http/Controllers/Admin/UserController.php b/app/Http/Controllers/Admin/UserController.php
index 868c49d..cfa7f2f 100755
--- a/app/Http/Controllers/Admin/UserController.php
+++ b/app/Http/Controllers/Admin/UserController.php
@@ -118,7 +118,7 @@ class UserController extends Controller
     public function update(Request $request, User $user)
     {
         Gate::authorize('update', $user);
-        
+
         $validated = $request->validate([
             'name' => 'required|string|max:255',
             'email' => 'required|string|email|max:255|unique:users,email,' . $user->id,
@@ -126,10 +126,10 @@ class UserController extends Controller
             'phone' => 'nullable|string|max:20',
             'organization_id' => 'nullable|exists:organizations,id',
             'role' => 'required|exists:roles,name',
-            'groups' => 'array|exists:groups,id',
+            'groups' => 'nullable|string',
             'is_active' => 'boolean',
         ]);
-        
+
         $user->update([
             'name' => $validated['name'],
             'email' => $validated['email'],
@@ -137,23 +137,24 @@ class UserController extends Controller
             'organization_id' => $validated['organization_id'] ?? null,
             'is_active' => $validated['is_active'] ?? true,
         ]);
-        
+
         // Обновление пароля
         if (!empty($validated['password'])) {
             $user->password = Hash::make($validated['password']);
             $user->save();
         }
-        
+
         // Обновление роли
         $user->syncRoles([$validated['role']]);
-        
-        // Обновление групп
-        if (isset($validated['groups'])) {
-            $user->groups()->sync($validated['groups']);
+
+        // Обновление групп (строка "1,2,3" → массив)
+        if (!empty($validated['groups'])) {
+            $groupIds = array_map('intval', array_filter(explode(',', $validated['groups'])));
+            $user->groups()->sync($groupIds);
         } else {
             $user->groups()->detach();
         }
-        
+
         return redirect()->route('admin.users.show', $user)
             ->with('success', 'Пользователь успешно обновлён.');
     }
diff --git a/resources/views/admin/users/edit.blade.php b/resources/views/admin/users/edit.blade.php
index 7ed6b16..e75a712 100644
--- a/resources/views/admin/users/edit.blade.php
+++ b/resources/views/admin/users/edit.blade.php
@@ -63,12 +63,11 @@
                                 @if($allGroups->count() > 0)
                                 <div class="mb-3">
                                     <label class="form-label">Группы</label>
-                                    <x-searchable-select
-                                        name="groups[]"
+                                    <x-tags-input
+                                        name="groups"
                                         url="{{ route('api.groups.search') }}"
                                         placeholder="Начните вводить название группы..."
                                         :value="$userGroups"
-                                        :multiple="true"
                                     />
                                     <small class="text-muted">Выберите группы</small>
                                 </div>
diff --git a/resources/views/components/tags-input.blade.php b/resources/views/components/tags-input.blade.php
new file mode 100644
index 0000000..1d2c1c9
--- /dev/null
+++ b/resources/views/components/tags-input.blade.php
@@ -0,0 +1,151 @@
+@props(['name', 'url', 'placeholder' => 'Начните вводить...', 'value' => []])
+
+<div class="tags-input-container">
+    <input type="text" class="form-control" id="{{ $name }}-input" placeholder="{{ $placeholder }}" autocomplete="off">
+    <input type="hidden" name="{{ $name }}" id="{{ $name }}" value="{{ is_array($value) ? implode(',', $value) : '' }}">
+    <div id="{{ $name }}-tags" class="tags-container mt-2"></div>
+</div>
+
+@push('scripts')
+<link href="https://cdn.jsdelivr.net/npm/tom-select@2.3.1/dist/css/tom-select.css" rel="stylesheet">
+<style>
+.tags-input-container {
+    position: relative;
+}
+.tags-container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    min-height: 40px;
+    padding: 0.5rem;
+    border: 1px solid #dee2e6;
+    border-radius: 0.25rem;
+    background: #fff;
+}
+.tags-container:has(input:focus) {
+    border-color: #0d6efd;
+    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
+}
+.tag-badge {
+    background: #0d6efd;
+    color: white;
+    padding: 0.35rem 0.65rem;
+    border-radius: 0.25rem;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 0.875rem;
+}
+.tag-badge .remove-tag {
+    cursor: pointer;
+    font-size: 1.1rem;
+    line-height: 1;
+    opacity: 0.7;
+}
+.tag-badge .remove-tag:hover {
+    opacity: 1;
+    color: #ffc107;
+}
+</style>
+<script src="https://cdn.jsdelivr.net/npm/tom-select@2.3.1/dist/js/tom-select.complete.min.js"></script>
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    const input = document.getElementById('{{ $name }}-input');
+    const tagsContainer = document.getElementById('{{ $name }}-tags');
+    const hiddenInput = document.getElementById('{{ $name }}');
+    let selectedTags = new Set({{ json_encode(array_map('strval', is_array($value) ? $value : [])) }});
+    
+    // Инициализация TomSelect
+    const select = new TomSelect(input, {
+        valueField: 'id',
+        labelField: 'text',
+        searchField: 'text',
+        placeholder: '{{ $placeholder }}',
+        preload: false,
+        maxOptions: null,
+        persist: false,
+        hideSelected: true,
+        create: false,
+        load: function(query, callback) {
+            if (query.length < 2) return callback();
+            
+            fetch('{{ $url }}?q=' + encodeURIComponent(query))
+                .then(response => response.json())
+                .then(json => {
+                    // Фильтруем уже выбранные
+                    const filtered = json.filter(item => !selectedTags.has(String(item.id)));
+                    callback(filtered);
+                }).catch(() => {
+                    callback();
+                });
+        },
+        render: {
+            option: function(data, escape) {
+                return '<div>' + escape(data.text) + '</div>';
+            },
+            item: function(data, escape) {
+                return '<div>' + escape(data.text) + '</div>';
+            }
+        },
+        onChange: function(value) {
+            if (value) {
+                addTag(value, select.options[value]);
+                select.clear();
+            }
+        }
+    });
+    
+    // Добавление тега
+    function addTag(id, data) {
+        if (selectedTags.has(String(id))) return;
+        
+        selectedTags.add(String(id));
+        updateHiddenInput();
+        
+        const tag = document.createElement('div');
+        tag.className = 'tag-badge';
+        tag.dataset.id = id;
+        tag.innerHTML = `
+            <span>${escapeHtml(data.text)}</span>
+            <span class="remove-tag" onclick="removeTag(${id}, this)">&times;</span>
+        `;
+        tagsContainer.appendChild(tag);
+    }
+    
+    // Удаление тега
+    window.removeTag = function(id, element) {
+        selectedTags.delete(String(id));
+        updateHiddenInput();
+        element.parentElement.remove();
+        select.clear();
+    };
+    
+    // Обновление скрытого input
+    function updateHiddenInput() {
+        hiddenInput.value = Array.from(selectedTags).join(',');
+    }
+    
+    // Экранирование HTML
+    function escapeHtml(text) {
+        const div = document.createElement('div');
+        div.textContent = text;
+        return div.innerHTML;
+    }
+    
+    // Загрузка существующих тегов
+    @if(count($value) > 0)
+    fetch('{{ $url }}?q=')
+        .then(response => response.json())
+        .then(items => {
+            selectedTags.forEach(id => {
+                const item = items.find(i => String(i.id) === id);
+                if (item) {
+                    select.addOption(item);
+                    addTag(id, item);
+                }
+            });
+        });
+    @endif
+});
+</script>
+@endpush