ben
/
obdev
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
app/views/participants/_form.html.erb
View File

@ -31,15 +31,21 @@
</div> </div>
<div class="mb-3"> <div class="mb-3">
<%= form.label :is_employer, 'Is this participant also an employer?', class: 'form-label' %> <%= form.label :is_employer, 'Is this participant also an employer?', class: 'form-label' %>
<div> <div>
<%= radio_button_tag 'is_employer', 'yes', false, class: 'form-check-input' %> <%= radio_button_tag 'is_employer', 'yes', true, class: 'form-check-input' %>
<%= label_tag 'is_employer_yes', 'Yes', class: 'form-check-label' %> <%= label_tag 'is_employer_yes', 'Yes', class: 'form-check-label' %>
<%= radio_button_tag 'is_employer', 'no', true, class: 'form-check-input' %> <%= radio_button_tag 'is_employer', 'no', false, class: 'form-check-input' %>
<%= label_tag 'is_employer_no', 'No', class: 'form-check-label' %> <%= label_tag 'is_employer_no', 'No', class: 'form-check-label' %>
</div>
</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"> <div class="mb-3">
<%= form.label :mci, 'MCI', class: 'form-label' %> <%= 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"> <link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
<script> <script>
$(document).ready(function() { $(document).ready(function() {
$('#employer-autocomplete').autocomplete({ $('#employer-autocomplete').autocomplete({
source: function(request, response) { source: function(request, response) {
$.ajax({ $.ajax({
url: '/employers/search', // Rails endpoint for searching employers url: '/employers/search', // Rails endpoint for searching employers
dataType: "json", dataType: "json",
data: { term: request.term }, data: { term: request.term },
success: function(data) { success: function(data) {
response(data); response(data);
} }
}); });
}, },
minLength: 2, // Minimum characters to trigger the search minLength: 2, // Minimum characters to trigger the search
select: function(event, ui) { select: function(event, ui) {
// Function to handle selection // Function to handle selection
$('#employer-autocomplete').val(ui.item.label); // ui.item.label should contain the name of the employer $('#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 $('#selected-employer-id').val(ui.item.value); // Set the employer ID in the hidden field
return false; 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> </script>

1
app/views/participants/edit.html.erb
View File

@ -8,6 +8,7 @@
<div class="mt-3 d-flex justify-content-between"> <div class="mt-3 d-flex justify-content-between">
<%= link_to 'Show', @participant, class: "btn btn-info" %> <%= link_to 'Show', @participant, class: "btn btn-info" %>
<%= link_to 'Back to List', participants_path, class: "btn btn-secondary" %> <%= 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> </div>
</div> </div>

2
app/views/participants/index.html.erb
View File

@ -30,7 +30,7 @@
<td><%= participant.gender %></td> <td><%= participant.gender %></td>
<td><%= link_to 'Show', participant, class: 'btn btn-sm btn-info' %></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 '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> </tr>
<% end %> <% end %>
</tbody> </tbody>