Updated Participant to auto default to yes radio button option and then if no is selected auto fill possible employers from database entry after 2 characters are entered. Also changed destroy options within this model.

This commit is contained in:
Ben 2024-01-20 00:05:36 -06:00
parent 2de94bd706
commit 02d8612409
3 changed files with 58 additions and 28 deletions

View File

@ -31,15 +31,21 @@
</div>
<div class="mb-3">
<%= form.label :is_employer, 'Is this participant also an employer?', class: 'form-label' %>
<div>
<%= radio_button_tag 'is_employer', 'yes', false, class: 'form-check-input' %>
<%= label_tag 'is_employer_yes', 'Yes', class: 'form-check-label' %>
<%= radio_button_tag 'is_employer', 'no', true, class: 'form-check-input' %>
<%= label_tag 'is_employer_no', 'No', class: 'form-check-label' %>
<%= form.label :is_employer, 'Is this participant also an employer?', class: 'form-label' %>
<div>
<%= radio_button_tag 'is_employer', 'yes', true, class: 'form-check-input' %>
<%= label_tag 'is_employer_yes', 'Yes', class: 'form-check-label' %>
<%= radio_button_tag 'is_employer', 'no', false, class: 'form-check-input' %>
<%= label_tag 'is_employer_no', 'No', class: 'form-check-label' %>
</div>
</div>
</div>
<div id="employer-input" class="mb-3" style="display: none;">
<%= label_tag :employer_name, 'Employer Name', class: 'form-label' %>
<%= text_field_tag :employer_name, nil, id: 'employer-autocomplete', class: 'form-control', placeholder: 'Start typing employer name...' %>
<!-- Optionally, add a hidden field to store the selected employer's ID -->
<%= hidden_field_tag :employer_id, nil, id: 'selected-employer-id' %>
</div>
<div class="mb-3">
<%= form.label :mci, 'MCI', class: 'form-label' %>
@ -154,25 +160,48 @@
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
<script>
$(document).ready(function() {
$('#employer-autocomplete').autocomplete({
source: function(request, response) {
$.ajax({
url: '/employers/search', // Rails endpoint for searching employers
dataType: "json",
data: { term: request.term },
success: function(data) {
response(data);
}
});
},
minLength: 2, // Minimum characters to trigger the search
select: function(event, ui) {
// Function to handle selection
$('#employer-autocomplete').val(ui.item.label); // ui.item.label should contain the name of the employer
// You might want to set a hidden field with employer ID if needed
return false;
}
});
$(document).ready(function() {
$('#employer-autocomplete').autocomplete({
source: function(request, response) {
$.ajax({
url: '/employers/search', // Rails endpoint for searching employers
dataType: "json",
data: { term: request.term },
success: function(data) {
response(data);
}
});
},
minLength: 2, // Minimum characters to trigger the search
select: function(event, ui) {
// Function to handle selection
$('#employer-autocomplete').val(ui.item.label); // ui.item.label should contain the name of the employer
$('#selected-employer-id').val(ui.item.value); // Set the employer ID in the hidden field
return false;
}
});
});
</script>
<%# This is to change the Employer input field on Radio Button selection %>
<script>
document.addEventListener('DOMContentLoaded', function() {
const employerInputDiv = document.getElementById('employer-input');
const radioButtons = document.getElementsByName('is_employer');
for (const radioButton of radioButtons) {
radioButton.addEventListener('change', function() {
if (this.value === 'no') {
employerInputDiv.style.display = 'block';
} else {
employerInputDiv.style.display = 'none';
}
});
}
});
</script>

View File

@ -8,6 +8,7 @@
<div class="mt-3 d-flex justify-content-between">
<%= link_to 'Show', @participant, class: "btn btn-info" %>
<%= link_to 'Back to List', participants_path, class: "btn btn-secondary" %>
<%= link_to 'Delete', @participant, method: :delete, data: { confirm: 'Are you sure?' }, class: "btn btn-danger" %>
</div>
</div>
</div>

View File

@ -30,7 +30,7 @@
<td><%= participant.gender %></td>
<td><%= link_to 'Show', participant, class: 'btn btn-sm btn-info' %></td>
<td><%= link_to 'Edit', edit_participant_path(participant), class: 'btn btn-sm btn-primary' %></td>
<td><%= link_to 'Destroy', participant, method: :delete, data: { confirm: 'Are you sure?' }, class: 'btn btn-sm btn-danger' %></td>
</tr>
<% end %>
</tbody>