Feat: Enhance publications form and edit view with Select2 for authors and organizing institutes

This commit is contained in:
Sallu9007
2025-04-20 23:30:32 +05:30
parent 1c978d14cb
commit e455d98fc5
4 changed files with 184 additions and 12 deletions

View File

@@ -62,8 +62,11 @@ class FacultyController extends Controller
public function PublicationsForm()
{
$organisingInstitutes = Publication::select('organizing_institute')
->distinct()
->pluck('organizing_institute');
// Logic to show the response form
return view('faculty.publications-form');
return view('faculty.publications-form', compact('organisingInstitutes'));
}
public function viewPublicationsResponses()

View File

@@ -12,8 +12,11 @@ class PublicationsController extends Controller
public function edit($id)
{
$publication = Publication::findOrFail($id);
$organisingInstitutes = Publication::select('organizing_institute')
->distinct()
->pluck('organizing_institute');
return view('pages.publications.edit', compact('publication'));
return view('pages.publications.edit', compact('publication', 'organisingInstitutes'));
}
public function update(Request $request, $id)

View File

@@ -21,11 +21,13 @@
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div>
<label for="first_author_name" class="block text-sm font-medium text-gray-700">First Author Name</label>
<input type="text" name="first_author_name" id="first_author_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="first_author_name" name="first_author_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="first_author_name_hidden" name="first_author_name" />
</div>
<div>
<label for="co_authors" class="block text-sm font-medium text-gray-700">Co-Authors (if any)</label>
<input type="text" name="co_authors" id="co_authors" class="block w-full mt-1 border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" placeholder="Separate names with commas">
<select id="co_authors" name="co_authors[]" 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="co_authors_hidden" name="co_authors" />
</div>
</div>
@@ -42,8 +44,13 @@
<input type="text" name="affiliation" id="affiliation" 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>
</div>
<div>
<label for="organizing_institute" class="block text-sm font-medium text-gray-700">Organizing Institute</label>
<input type="text" name="organizing_institute" id="organizing_institute" 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>
<label for="organizing_institute" class="block text-sm font-medium text-gray-700">Organising Institute/Company</label>
<select name="organizing_institute" id="organizing_institute" class="block w-full mt-1 border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm select2" style="width: 100%;" required>
<option value="">Select or type...</option>
@foreach($organisingInstitutes as $institute)
<option value="{{ $institute }}" {{ old('organizing_institute') == $institute ? 'selected' : '' }}>{{ $institute }}</option>
@endforeach
</select>
</div>
</div>
@@ -162,5 +169,64 @@
document.getElementById('num_days').value = numDays;
}
}
document.addEventListener('DOMContentLoaded', function() {
// Initialize Select2 for first_author_name
$('#first_author_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
}
});
$('#first_author_name').on('change', function() {
const selectedValues = $(this).val();
document.getElementById('first_author_name_hidden').value = selectedValues.join(', ');
});
// Initialize Select2 for co_authors
$('#co_authors').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
}
});
$('#co_authors').on('change', function() {
const selectedValues = $(this).val();
document.getElementById('co_authors_hidden').value = selectedValues.join(', ');
});
$('#organizing_institute').select2({
tags: true,
placeholder: "Select or type...",
allowClear: true
});
});
</script>
@endsection

View File

@@ -28,11 +28,13 @@
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div>
<label for="first_author_name" class="block text-sm font-medium text-gray-700">First Author Name</label>
<input type="text" name="first_author_name" id="first_author_name" value="{{ old('first_author_name', $publication->first_author_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="first_author_name" name="first_author_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="first_author_name_hidden" name="first_author_name" />
</div>
<div>
<label for="co_authors" class="block text-sm font-medium text-gray-700">Co-Authors (if any)</label>
<input type="text" name="co_authors" id="co_authors" value="{{ old('co_authors', $publication->co_authors) }}" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md" placeholder="Separate names with commas">
<select id="co_authors" name="co_authors[]" 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="co_authors_hidden" name="co_authors" />
</div>
</div>
@@ -49,8 +51,13 @@
<input type="text" name="affiliation" id="affiliation" value="{{ old('affiliation', $publication->affiliation) }}" 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>
</div>
<div>
<label for="organizing_institute" class="block text-sm font-medium text-gray-700">Organizing Institute</label>
<input type="text" name="organizing_institute" id="organizing_institute" value="{{ old('organizing_institute', $publication->organizing_institute) }}" 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>
<label for="organizing_institute" class="block text-sm font-medium text-gray-700">Organising Institute</label>
<select name="organizing_institute" id="organizing_institute" class="mt-1 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md select2" style="width: 100%;">
<option value="">Select or type...</option>
@foreach($organisingInstitutes as $institute)
<option value="{{ $institute }}" {{ old('organizing_institute', $publication->organizing_institute) == $institute ? 'selected' : '' }}>{{ $institute }}</option>
@endforeach
</select>
</div>
</div>
@@ -184,6 +191,99 @@
// Calculate days on page load
document.addEventListener('DOMContentLoaded', function() {
calculateDays();
const OldFirstAuthorNameData = {!! json_encode(explode(', ', old('first_author_name', $publication->first_author_name))) !!};
$('#first_author_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
}
});
$('#organizing_institute').select2({
tags: true,
placeholder: "Select or Type...",
allowClear: true
});
// Prepopulate with old data
OldFirstAuthorNameData.forEach(function (item) {
const option = new Option(item, item, true, true);
$('#first_author_name').append(option).trigger('change');
});
$('#first_author_name').on('change', function () {
const selectedValues = $(this).val();
document.getElementById('first_author_name_hidden').value = selectedValues.join(', ');
});
const OldCoAuthorData = {!! json_encode(explode(', ', old('co_authors', $publication->co_authors))) !!};
$('#co_authors').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
OldCoAuthorData.forEach(function (item) {
const option = new Option(item, item, true, true);
$('#co_authors').append(option).trigger('change');
});
$('#co_authors').on('change', function () {
const selectedValues = $(this).val();
document.getElementById('co_authors_hidden').value = selectedValues.join(', ');
});
});
document.addEventListener('DOMContentLoaded', function () {
const firstAuthorNameSelect = document.getElementById('first_author_name');
const firstAuthorNameHidden = document.getElementById('first_author_name_hidden');
const CoAuthorsNameSelect = document.getElementById('co_authors');
const CoAuthorsNameHidden = document.getElementById('co_authors_hidden');
// Populate hidden input with existing values on page load
if (firstAuthorNameSelect) {
const existingValues = $(firstAuthorNameSelect).val();
firstAuthorNameHidden.value = existingValues ? existingValues.join(', ') : '';
}
if (CoAuthorsNameSelect) {
const existingValues = $(CoAuthorsNameSelect).val();
CoAuthorsNameHidden.value = existingValues ? existingValues.join(', ') : '';
}
const form = document.querySelector('form');
form.addEventListener('submit', function () {
if (firstAuthorNameSelect) {
const selectedValues = $(firstAuthorNameSelect).val();
firstAuthorNameHidden.value = selectedValues ? selectedValues.join(', ') : '';
}
if (CoAuthorsNameSelect) {
const selectedValues = $(CoAuthorsNameSelect).val();
CoAuthorsNameHidden.value = selectedValues ? selectedValues.join(', ') : '';
}
});
});
</script>
@endsection