From e0985d0c4f00bfc8a76cba555940ea639b08cec0 Mon Sep 17 00:00:00 2001
From: Sallu9007 <sallumoghul007@gmail.com>
Date: Thu, 17 Apr 2025 09:56:38 +0530
Subject: [PATCH] Feat: Implement Select2 for User Dropdowns

---
 app/Http/Controllers/UserController.php       |  8 +-
 .../views/activities-organised/edit.blade.php | 76 ++++++++++++++++++-
 .../activities-organised/index.blade.php      | 59 +++++++-------
 .../activities-organised-form.blade.php       | 54 ++++++++++++-
 resources/views/layouts/app.blade.php         |  6 ++
 routes/web.php                                |  2 +
 6 files changed, 168 insertions(+), 37 deletions(-)

diff --git a/app/Http/Controllers/UserController.php b/app/Http/Controllers/UserController.php
index eac0c39..969570a 100644
--- a/app/Http/Controllers/UserController.php
+++ b/app/Http/Controllers/UserController.php
@@ -6,9 +6,15 @@ use Illuminate\Http\Request;
 
 class UserController extends Controller
 {
+    /**
+     * Fetch all user names.
+     *
+     * @return \Illuminate\Http\JsonResponse
+     */
     public function index()
     {
-        return User::with(['role', 'department'])->get();
+        $users = User::select('name')->get();
+        return response()->json($users);
     }
 
     public function store(Request $request)
diff --git a/resources/views/activities-organised/edit.blade.php b/resources/views/activities-organised/edit.blade.php
index 9ee4805..9c47cea 100644
--- a/resources/views/activities-organised/edit.blade.php
+++ b/resources/views/activities-organised/edit.blade.php
@@ -1,4 +1,3 @@
-```blade
 @extends('layouts.app')
 
 @section('content')
@@ -35,7 +34,8 @@
                     <!-- Resource Person Name -->
                     <div>
                         <label for="resource_person_name" class="block text-sm font-medium text-gray-700">Resource Person Name</label>
-                        <input type="text" name="resource_person_name" id="resource_person_name" value="{{ old('resource_person_name', $response->resource_person_name) }}" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md" required>
+                        <select id="resource_person_name" name="resource_person_name[]" class="block w-full mt-1 border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" multiple="multiple"></select>
+                        <input type="hidden" id="resource_person_name_hidden" name="resource_person_name" />
                     </div>
 
                     <!-- Resource Person Organization -->
@@ -190,6 +190,36 @@
 
 @section('scripts')
 <script>
+    document.addEventListener('DOMContentLoaded', function () {
+        const oldData = {!! json_encode(explode(', ', old('resource_person_name', $response->resource_person_name))) !!};
+
+        $('#resource_person_name').select2({
+            tags: true,
+            tokenSeparators: [','],
+            ajax: {
+                url: '{{ route('api.users.index') }}',
+                dataType: 'json',
+                delay: 250,
+                processResults: function (data) {
+                    return {
+                        results: data.map(user => ({ id: user.name, text: user.name }))
+                    };
+                },
+                cache: true
+            }
+        });
+
+        // Prepopulate with old data
+        oldData.forEach(function (item) {
+            const option = new Option(item, item, true, true);
+            $('#resource_person_name').append(option).trigger('change');
+        });
+
+        $('#resource_person_name').on('change', function () {
+            const selectedValues = $(this).val();
+            document.getElementById('resource_person_name_hidden').value = selectedValues.join(', ');
+        });
+    });
     // Auto-calculate number of days when start and end dates change
     document.addEventListener('DOMContentLoaded', function() {
         const startDateField = document.getElementById('start_date');
@@ -213,7 +243,45 @@
 
         startDateField.addEventListener('change', calculateDays);
         endDateField.addEventListener('change', calculateDays);
+
+        // Initialize Select2 for activity_type, category, and level
+        $('#activity_type').select2({
+            placeholder: 'Select Activity Type',
+            allowClear: true
+        });
+
+        $('#category').select2({
+            placeholder: 'Select Category',
+            allowClear: true
+        });
+
+        $('#level').select2({
+            placeholder: 'Select Level',
+            allowClear: true
+        });
+    });
+
+    
+
+    document.addEventListener('DOMContentLoaded', function () {
+        const resourcePersonNameSelect = document.getElementById('resource_person_name');
+        const resourcePersonNameHidden = document.getElementById('resource_person_name_hidden');
+
+        // Populate hidden input with existing values on page load
+        if (resourcePersonNameSelect) {
+            const existingValues = $(resourcePersonNameSelect).val();
+            resourcePersonNameHidden.value = existingValues ? existingValues.join(', ') : '';
+            // console.log('Existing values:', existingValues);
+            // console.log('Hidden input value:', resourcePersonNameHidden.value);
+        }
+
+        const form = document.querySelector('form');
+        form.addEventListener('submit', function () {
+            if (resourcePersonNameSelect) {
+                const selectedValues = $(resourcePersonNameSelect).val();
+                resourcePersonNameHidden.value = selectedValues ? selectedValues.join(', ') : '';
+            }
+        });
     });
 </script>
-@endsection
-```
\ No newline at end of file
+@endsection
\ No newline at end of file
diff --git a/resources/views/activities-organised/index.blade.php b/resources/views/activities-organised/index.blade.php
index e5f92b4..2d5d054 100644
--- a/resources/views/activities-organised/index.blade.php
+++ b/resources/views/activities-organised/index.blade.php
@@ -13,22 +13,19 @@
                 <table id="responses-table" class="table-auto w-full table-striped border-collapse border border-gray-200 rounded-lg">
                     <thead class="bg-gray-100">
                         <tr>
-                            <th class="px-4 py-2 border border-gray-200">ID</th>
-                            <th class="px-4 py-2 border border-gray-200">Title</th>
-                            <th class="px-4 py-2 border border-gray-200">Resource Person</th>
-                            <th class="px-4 py-2 border border-gray-200">Organisation</th>
-                            <th class="px-4 py-2 border border-gray-200">Target Audience</th>
-                            <th class="px-4 py-2 border border-gray-200">Department</th>
-                            <th class="px-4 py-2 border border-gray-200">Faculty</th>
-                            <th class="px-4 py-2 border border-gray-200">Start Date</th>
-                            <th class="px-4 py-2 border border-gray-200">End Date</th>
-                            <th class="px-4 py-2 border border-gray-200">Num Days</th>
-                            <th class="px-4 py-2 border border-gray-200">Venue</th>
-                            <th class="px-4 py-2 border border-gray-200">Activity Type</th>
-                            <th class="px-4 py-2 border border-gray-200">Category</th>
-                            <th class="px-4 py-2 border border-gray-200">Level</th>
-                            <th class="px-4 py-2 border border-gray-200">Participants</th>
-                            <th class="px-4 py-2 border border-gray-200">Actions</th>
+                            <th class="px-4 py-1 border border-gray-200">ID</th>
+                            <th class="px-1 py-1 border border-gray-200">Title</th>
+                            <th class="px-1 py-1 border border-gray-200">Resource Person</th>
+                            <th class="px-1 py-1 border border-gray-200">Organisation</th>
+                            <th class="px-1 py-1 border border-gray-200">Target Audience</th>
+                            <th class="px-1 py-1 border border-gray-200">Department</th>
+                            <th class="px-1 py-1 border border-gray-200">Faculty</th>
+                            <th class="px-1 py-1 border border-gray-200">Venue</th>
+                            <th class="px-1 py-1 border border-gray-200">Activity Type</th>
+                            <th class="px-1 py-1 border border-gray-200">Category</th>
+                            <th class="px-1 py-1 border border-gray-200">Level</th>
+                            <th class="px-1 py-1 border border-gray-200">Participants</th>
+                            <th class="px-5 py-1 border border-gray-200">Actions</th>
                         </tr>
                     </thead>
                     <tbody>
@@ -98,21 +95,21 @@
                         name: 'user_name',
                         orderable: false
                     },
-                    {
-                        data: 'start_date',
-                        name: 'start_date',
-                        orderable: false
-                    },
-                    {
-                        data: 'end_date',
-                        name: 'end_date',
-                        orderable: false
-                    },
-                    {
-                        data: 'num_days',
-                        name: 'num_days',
-                        orderable: false
-                    },
+                    // {
+                    //     data: 'start_date',
+                    //     name: 'start_date',
+                    //     orderable: false
+                    // },
+                    // {
+                    //     data: 'end_date',
+                    //     name: 'end_date',
+                    //     orderable: false
+                    // },
+                    // {
+                    //     data: 'num_days',
+                    //     name: 'num_days',
+                    //     orderable: false
+                    // },
                     {
                         data: 'venue',
                         name: 'venue',
diff --git a/resources/views/faculty/activities-organised-form.blade.php b/resources/views/faculty/activities-organised-form.blade.php
index 67bc648..39be9bc 100644
--- a/resources/views/faculty/activities-organised-form.blade.php
+++ b/resources/views/faculty/activities-organised-form.blade.php
@@ -27,7 +27,8 @@
                         <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                             <div>
                                 <label for="resource_person_name" class="block text-sm font-medium text-gray-700">Resource Person Name</label>
-                                <input type="text" name="resource_person_name" id="resource_person_name" class="block w-full mt-1 border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" required>
+                                <select id="resource_person_name" name="resource_person_name[]" class="block w-full mt-1 border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" multiple="multiple"></select>
+                                <input type="hidden" id="resource_person_name_hidden" name="resource_person_name" />
                             </div>
                             <div>
                                 <label for="resource_person_organization" class="block text-sm font-medium text-gray-700">Resource Person Organization</label>
@@ -172,5 +173,56 @@
             document.getElementById('num_days').value = numDays;
         }
     }
+
+    document.addEventListener('DOMContentLoaded', function () {
+        // Initialize Select2 for resource_person_name
+        $('#resource_person_name').select2({
+            tags: true,
+            tokenSeparators: [','],
+            ajax: {
+                url: '{{ route('api.users.index') }}', // Adjust this route to fetch user names
+                dataType: 'json',
+                delay: 250,
+                processResults: function (data) {
+                    return {
+                        results: data.map(user => ({ id: user.name, text: user.name }))
+                    };
+                },
+                cache: true
+            }
+        });
+
+        $('#resource_person_name').on('change', function () {
+            const selectedValues = $(this).val();
+            document.getElementById('resource_person_name_hidden').value = selectedValues.join(', ');
+        });
+
+        // Initialize Select2 for activity_type, category, and level
+        $('#activity_type').select2({
+            placeholder: 'Select Activity Type',
+            allowClear: true
+        });
+
+        $('#category').select2({
+            placeholder: 'Select Category',
+            allowClear: true
+        });
+
+        $('#level').select2({
+            placeholder: 'Select Level',
+            allowClear: true
+        });
+
+        // const form = document.querySelector('form');
+        // form.addEventListener('submit', function () {
+        //     const resourcePersonNameSelect = document.getElementById('resource_person_name');
+        //     const resourcePersonNameHidden = document.getElementById('resource_person_name_hidden');
+
+        //     if (resourcePersonNameSelect) {
+        //         const selectedValues = $(resourcePersonNameSelect).val();
+        //         resourcePersonNameHidden.value = selectedValues ? selectedValues.join(', ') : '';
+        //     }
+        // });
+    });
 </script>
 @endsection
\ No newline at end of file
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index b30d13a..951f0a5 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -22,6 +22,9 @@
     <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.1/css/dataTables.bootstrap5.min.css">
     <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/2.2.3/css/buttons.bootstrap5.min.css">
     
+    <!-- Select2 CSS -->
+    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
+    
     <!-- Custom CSS -->
     <style>
         :root {
@@ -203,6 +206,9 @@
     <script src="https://cdn.datatables.net/buttons/2.2.3/js/buttons.html5.min.js"></script>
     <script src="https://cdn.datatables.net/buttons/2.2.3/js/buttons.print.min.js"></script>
     
+    <!-- Select2 JS -->
+    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
+    
     @yield('scripts')
 </body>
 </html>
\ No newline at end of file
diff --git a/routes/web.php b/routes/web.php
index 5f02569..a201e87 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -269,4 +269,6 @@ Route::apiResources([
     'users' => UserController::class,
 ]);
 
+Route::get('/api/users', [UserController::class, 'index'])->name('api.users.index');
+
 require __DIR__ . '/auth.php';