CSI-KJSCE/Faculty-Documentation
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Feat: Implement Select2 for User Dropdowns

Browse Source
This commit is contained in:
Sallu9007
2025-04-17 09:56:38 +05:30
parent 559e0f7658
commit e0985d0c4f
6 changed files with 168 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
app/Http/Controllers/UserController.php
View File

@@ -6,9 +6,15 @@ use Illuminate\Http\Request;
class UserController extends Controller class UserController extends Controller
{ {
/**
* Fetch all user names.
*
* @return \Illuminate\Http\JsonResponse
*/
public function index() public function index()
{ {
return User::with(['role', 'department'])->get(); $users = User::select('name')->get();
return response()->json($users);
} }
public function store(Request $request) public function store(Request $request)

74
resources/views/activities-organised/edit.blade.php
View File

@@ -1,4 +1,3 @@
```blade
@extends('layouts.app') @extends('layouts.app')
@section('content') @section('content')
@@ -35,7 +34,8 @@
<!-- Resource Person Name --> <!-- Resource Person Name -->
<div> <div>
<label for="resource_person_name" class="block text-sm font-medium text-gray-700">Resource Person Name</label> <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> </div>
<!-- Resource Person Organization --> <!-- Resource Person Organization -->
@@ -190,6 +190,36 @@
@section('scripts') @section('scripts')
<script> <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 // Auto-calculate number of days when start and end dates change
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function() {
const startDateField = document.getElementById('start_date'); const startDateField = document.getElementById('start_date');
@@ -213,7 +243,45 @@
startDateField.addEventListener('change', calculateDays); startDateField.addEventListener('change', calculateDays);
endDateField.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> </script>
@endsection @endsection
```

59
resources/views/activities-organised/index.blade.php
View File

@@ -13,22 +13,19 @@
<table id="responses-table" class="table-auto w-full table-striped border-collapse border border-gray-200 rounded-lg"> <table id="responses-table" class="table-auto w-full table-striped border-collapse border border-gray-200 rounded-lg">
<thead class="bg-gray-100"> <thead class="bg-gray-100">
<tr> <tr>
<th class="px-4 py-2 border border-gray-200">ID</th> <th class="px-4 py-1 border border-gray-200">ID</th>
<th class="px-4 py-2 border border-gray-200">Title</th> <th class="px-1 py-1 border border-gray-200">Title</th>
<th class="px-4 py-2 border border-gray-200">Resource Person</th> <th class="px-1 py-1 border border-gray-200">Resource Person</th>
<th class="px-4 py-2 border border-gray-200">Organisation</th> <th class="px-1 py-1 border border-gray-200">Organisation</th>
<th class="px-4 py-2 border border-gray-200">Target Audience</th> <th class="px-1 py-1 border border-gray-200">Target Audience</th>
<th class="px-4 py-2 border border-gray-200">Department</th> <th class="px-1 py-1 border border-gray-200">Department</th>
<th class="px-4 py-2 border border-gray-200">Faculty</th> <th class="px-1 py-1 border border-gray-200">Faculty</th>
<th class="px-4 py-2 border border-gray-200">Start Date</th> <th class="px-1 py-1 border border-gray-200">Venue</th>
<th class="px-4 py-2 border border-gray-200">End Date</th> <th class="px-1 py-1 border border-gray-200">Activity Type</th>
<th class="px-4 py-2 border border-gray-200">Num Days</th> <th class="px-1 py-1 border border-gray-200">Category</th>
<th class="px-4 py-2 border border-gray-200">Venue</th> <th class="px-1 py-1 border border-gray-200">Level</th>
<th class="px-4 py-2 border border-gray-200">Activity Type</th> <th class="px-1 py-1 border border-gray-200">Participants</th>
<th class="px-4 py-2 border border-gray-200">Category</th> <th class="px-5 py-1 border border-gray-200">Actions</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>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@@ -98,21 +95,21 @@
name: 'user_name', name: 'user_name',
orderable: false orderable: false
}, },
{ // {
data: 'start_date', // data: 'start_date',
name: 'start_date', // name: 'start_date',
orderable: false // orderable: false
}, // },
{ // {
data: 'end_date', // data: 'end_date',
name: 'end_date', // name: 'end_date',
orderable: false // orderable: false
}, // },
{ // {
data: 'num_days', // data: 'num_days',
name: 'num_days', // name: 'num_days',
orderable: false // orderable: false
}, // },
{ {
data: 'venue', data: 'venue',
name: 'venue', name: 'venue',

54
resources/views/faculty/activities-organised-form.blade.php
View File

@@ -27,7 +27,8 @@
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4"> <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div> <div>
<label for="resource_person_name" class="block text-sm font-medium text-gray-700">Resource Person Name</label> <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>
<div> <div>
<label for="resource_person_organization" class="block text-sm font-medium text-gray-700">Resource Person Organization</label> <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.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> </script>
@endsection @endsection

6
resources/views/layouts/app.blade.php
View File

@@ -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/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"> <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 --> <!-- Custom CSS -->
<style> <style>
:root { :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.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.2.3/js/buttons.print.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') @yield('scripts')
</body> </body>
</html> </html>

2
routes/web.php
View File

@@ -269,4 +269,6 @@ Route::apiResources([
'users' => UserController::class, 'users' => UserController::class,
]); ]);
Route::get('/api/users', [UserController::class, 'index'])->name('api.users.index');
require __DIR__ . '/auth.php'; require __DIR__ . '/auth.php';