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