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

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