Feat: Searchable Select для групп пользователя

✅ TomSelect с мультивыбором (теги как в WordPress)
✅ API /api/groups/search для поиска групп
✅ Обновлён edit.blade.php пользователя
✅ Обновлён show.blade.php пользователя
✅ Компонент поддерживает multiple=true

Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>

app/Http/Controllers/Admin/UserController.php

@@ -92,23 +92,7 @@ class UserController extends Controller
 
         $user->load(['organization', 'roles', 'groups']);
 
-        // Получаем доступные группы для пользователя
+        return view('admin.users.show', compact('user'));
-        if ($user->organization_id) {
-            $availableGroups = Group::whereNull('organization_id')
-                ->orWhere('organization_id', $user->organization_id)
-                ->whereDoesntHave('users', function($q) use ($user) {
-                    $q->where('users.id', $user->id);
-                })
-                ->get();
-        } else {
-            $availableGroups = Group::whereNull('organization_id')
-                ->whereDoesntHave('users', function($q) use ($user) {
-                    $q->where('users.id', $user->id);
-                })
-                ->get();
-        }
-
-        return view('admin.users.show', compact('user', 'availableGroups'));
     }
 
     public function edit(User $user)

app/Http/Controllers/Api/GroupSearchController.php

@@ -0,0 +1,30 @@
+<?php
+
+namespace App\Http\Controllers\Api;
+
+use App\Http\Controllers\Controller;
+use App\Models\Group;
+use Illuminate\Http\Request;
+
+class GroupSearchController extends Controller
+{
+    public function __invoke(Request $request)
+    {
+        $query = $request->get('q', '');
+        
+        $groups = Group::query()
+            ->with('organization')
+            ->where('name', 'like', "%{$query}%")
+            ->orderBy('name')
+            ->limit(50)
+            ->get()
+            ->map(function($group) {
+                return [
+                    'id' => $group->id,
+                    'text' => $group->name . ($group->organization ? " ({$group->organization->name})" : ' (Общая)'),
+                ];
+            });
+        
+        return response()->json($groups);
+    }
+}

resources/views/admin/users/edit.blade.php

@@ -63,12 +63,14 @@
                                 @if($allGroups->count() > 0)
                                 <div class="mb-3">
                                     <label class="form-label">Группы</label>
-                                    @foreach($allGroups as $group)
+                                    <x-searchable-select
-                                    <div class="form-check">
+                                        name="groups[]"
-                                        <input type="checkbox" name="groups[]" value="{{ $group->id }}" class="form-check-input" {{ in_array($group->id, $userGroups) ? 'checked' : '' }}>
+                                        url="{{ route('admin.groups.search') }}"
-                                        <label class="form-check-label">{{ $group->name }}</label>
+                                        placeholder="Начните вводить название группы..."
-                                    </div>
+                                        :value="$userGroups"
-                                    @endforeach
+                                        :multiple="true"
+                                    />
+                                    <small class="text-muted">Выберите группы</small>
                                 </div>
                                 @endif
                                 <div class="form-check mb-3">

resources/views/admin/users/show.blade.php

@@ -38,24 +38,24 @@
                         </div>
                         <div class="card-body">
                             @if($user->groups->count() > 0)
-                            <ul class="list-group list-group-flush">
+                            <div class="mb-3">
-                                @foreach($user->groups as $group)
+                                <x-searchable-select
-                                <li class="list-group-item d-flex justify-content-between align-items-center">
+                                    name="groups[]"
-                                    <div>
+                                    url="{{ route('api.groups.search') }}"
-                                        <a href="{{ route('admin.groups.show', $group) }}" class="text-decoration-none">{{ $group->name }}</a>
+                                    placeholder="Начните вводить название группы..."
-                                        <small class="text-muted d-block">{{ $group->organization?->name ?? 'Общая группа' }}</small>
+                                    :value="$user->groups->pluck('id')->toArray()"
-                                    </div>
+                                    :multiple="true"
-                                    @can('update', $group)
+                                />
-                                    <form action="{{ route('admin.groups.users.remove', [$group, $user]) }}" method="POST" class="d-inline" onsubmit="return confirm('Удалить пользователя из группы?')">
+                            </div>
-                                        @csrf @method('DELETE')
-                                        <button class="btn btn-sm btn-outline-danger"><i class="bi bi-x-lg"></i></button>
-                                    </form>
-                                    @endcan
-                                </li>
-                                @endforeach
-                            </ul>
                             @else
-                            <p class="text-muted mb-0">Не состоит в группах</p>
+                            <div class="mb-3">
+                                <x-searchable-select
+                                    name="groups[]"
+                                    url="{{ route('api.groups.search') }}"
+                                    placeholder="Начните вводить название группы..."
+                                    :multiple="true"
+                                />
+                            </div>
                             @endif
                         </div>
                     </div>
@@ -64,34 +64,4 @@
         </main>
     </div>
 </div>
-
-<!-- Modal добавления в группу -->
-<div class="modal fade" id="addGroupModal" tabindex="-1">
-    <div class="modal-dialog">
-        <div class="modal-content">
-            <form action="{{ route('admin.groups.users.add', $user) }}" method="POST">
-                @csrf
-                <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">
-                    <div class="mb-3">
-                        <label class="form-label">Выберите группу</label>
-                        <select name="group_id" class="form-select" required>
-                            <option value="">Выберите группу</option>
-                            @foreach($availableGroups as $group)
-                            <option value="{{ $group->id }}">{{ $group->name }} @if($group->organization_id)({{ $group->organization?->name }})@else(Общая)@endif</option>
-                            @endforeach
-                        </select>
-                    </div>
-                </div>
-                <div class="modal-footer">
-                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Отмена</button>
-                    <button type="submit" class="btn btn-primary">Добавить</button>
-                </div>
-            </form>
-        </div>
-    </div>
-</div>
 @endsection

resources/views/components/searchable-select.blade.php

@@ -1,7 +1,7 @@
-@props(['name', 'url', 'placeholder' => 'Начните вводить...', 'value' => null, 'required' => false])
+@props(['name', 'url', 'placeholder' => 'Начните вводить...', 'value' => null, 'required' => false, 'multiple' => false])
 
-<input type="hidden" name="{{ $name }}" id="{{ $name }}" value="{{ $value }}" {{ $required ? 'required' : '' }}>
+<input type="hidden" name="{{ $name }}" id="{{ $name }}" value="{{ is_array($value) ? implode(',', $value) : $value }}" {{ $required ? 'required' : '' }}>
-<select id="{{ $name }}-select" class="form-select @error($name) is-invalid @enderror" {{ $required ? 'required' : '' }}></select>
+<select id="{{ $name }}-select" class="form-select @error($name) is-invalid @enderror" {{ $required ? 'required' : '' }} {{ $multiple ? 'multiple' : '' }}></select>
 
 @push('scripts')
 <link href="https://cdn.jsdelivr.net/npm/tom-select@2.3.1/dist/css/tom-select.css" rel="stylesheet">
@@ -15,6 +15,7 @@ document.addEventListener('DOMContentLoaded', function() {
         placeholder: '{{ $placeholder }}',
         preload: false,
         maxOptions: null,
+        {{ $multiple ? 'persist: false, hideSelected: true,' : '' }}
         load: function(query, callback) {
             if (query.length < 2) return callback();
             
@@ -35,7 +36,7 @@ document.addEventListener('DOMContentLoaded', function() {
             }
         },
         onChange: function(value) {
-            document.getElementById('{{ $name }}').value = value;
+            document.getElementById('{{ $name }}').value = {{ $multiple ? 'Array.isArray(value) ? value.join(",") : value' : 'value' }};
         }
     });
     
@@ -43,11 +44,14 @@ document.addEventListener('DOMContentLoaded', function() {
     fetch('{{ $url }}?q=')
         .then(response => response.json())
         .then(items => {
-            const item = items.find(i => i.id == '{{ $value }}');
+            const values = {{ is_array($value) ? json_encode($value) : "['" . $value . "']" }};
-            if (item) {
+            values.forEach(val => {
-                select.addOption(item);
+                const item = items.find(i => i.id == val);
-                select.setValue('{{ $value }}');
+                if (item) {
-            }
+                    select.addOption(item);
+                }
+            });
+            select.setValue(values);
         });
     @endif
 });

routes/web.php

@@ -12,6 +12,7 @@ use App\Http\Controllers\Admin\QuestionController;
 use App\Http\Controllers\Admin\CourseAssignmentController;
 use App\Http\Controllers\Admin\GroupUserController;
 use App\Http\Controllers\Api\OrganizationSearchController;
+use App\Http\Controllers\Api\GroupSearchController;
 use App\Http\Controllers\DashboardController;
 use Illuminate\Support\Facades\Route;
 
@@ -58,5 +59,6 @@ Route::middleware('auth')->group(function () {
     // API для поиска (требуется аутентификация)
     Route::middleware('auth')->group(function() {
         Route::get('/api/organizations/search', OrganizationSearchController::class)->name('api.organizations.search');
+        Route::get('/api/groups/search', GroupSearchController::class)->name('api.groups.search');
     });
 });