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

resources/views/faculty/publications-form.blade.php

@@ -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,9 +44,14 @@
                                 <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>
-                            </div>
+                            <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>
 
                         <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

resources/views/pages/publications/edit.blade.php

@@ -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,9 +51,14 @@
                             <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>
-                        </div>
+                        <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>
 
                     <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