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

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

@@ -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
```
@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">
<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',

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>
<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

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/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>