Skip to content

Commit

Permalink
job income inline fixes (#4848)
Browse files Browse the repository at this point in the history 
* replace onclick with propagated listener in js

* refactor to have checkDate accept inputs

* remove onchange, refactor bs4 check in warning helper, store id on form

* use data keydown for job income partial

* replace kb handlers in index

* replace keydown handler

* remove logs, updated selector to use new attr

* remove onclick from self employed

---------

Co-authored-by: Brad Bodine <[email protected]>
  • Loading branch information
@charlienparker @bbodine1
charlienparker and bbodine1 committed Dec 25, 2024
1 parent 5078375 commit 5148fac
Show file tree
Hide file tree
Showing 7 changed files with 36 additions and 27 deletions.
19 changes: 15 additions & 4 deletions components/financial_assistance/app/assets/javascripts/financial_assistance/income.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,16 +59,27 @@ function startEditingIncome(income_kind) {
}

function checkDate(income_id) {
var startDate = $('#start_on_' + income_id).datepicker('getDate');
var endDate = $('#end_on_' + income_id).datepicker('getDate');
var startDate = $('#start_on_' + income_id)
var endDate = $('#end_on_' + income_id)

if (endDate != '' && endDate != null && endDate < startDate) {
if (endDate && new Date(endDate.val()) <= new Date(startDate.val())) {
alert('The end date must be after the start date.');
$('#end_on_' + income_id)[0].value = '';
endDate.val('');
window.event.preventDefault();
}
}

$(document).on('submit', 'form[data-income-id]', function() {
checkDate($(this).data('income-id'));
});

$(document).on('change', 'form[data-income-id] input[type="date"]', function () {
var form = $(this).parents('form');
if (form.data('income-and-deduction-date-warning-flag')) {
validateDateWarnings(form.data('income-id'))
}
});

function currentlyEditing() {
return (
$('.interaction-click-control-continue').hasClass('disabled') ||
Expand Down
7 changes: 4 additions & 3 deletions components/financial_assistance/app/assets/javascripts/financial_assistance/shared.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,12 @@ function getDateFieldDate(id) {
return dateValue ? new Date(dateValue) : null;
};

function validateDateWarnings(id, use_bs4 = false) {
function validateDateWarnings(id) {
var useBs4 = document.documentElement.dataset.bs4
const startDateId = "#start_on_" + id;
const endDateId = ("#end_on_" + id);
var startDate = use_bs4 ? getDateFieldDate(startDateId) : $(startDateId).datepicker('getDate');
var endDate = use_bs4 ? getDateFieldDate(endDateId) : $(endDateId).datepicker('getDate');
var startDate = useBs4 ? getDateFieldDate(startDateId) : $(startDateId).datepicker('getDate');
var endDate = useBs4 ? getDateFieldDate(endDateId) : $(endDateId).datepicker('getDate');
var today = new Date();
var requiresStartDateWarning = startDate > today
var requiresEndDateWarning = endDate
Expand Down
6 changes: 2 additions & 4 deletions components/financial_assistance/app/helpers/financial_assistance/application_helper.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -115,16 +115,14 @@ def state_options
%w[AL AK AZ AR CA CO CT DE DC FL GA HI ID IL IN IA KS KY LA ME MD MA MI MN MS MO MT NE NV NH NJ NM NY NC ND OH OK OR PA PR RI SC SD TN TX UT VA VI VT WA WV WI WY]
end

def income_form_for(application, applicant, income)
def income_form_for(application, applicant, income, &block)
url = if income.new_record?
application_applicant_incomes_path(application, applicant)
else
application_applicant_income_path(@application, @applicant, income)
end

form_for income, url: url, remote: true do |f|
yield f
end
form_for income, url: url, remote: true, data: {income_id: income.id.to_s, income_and_deduction_date_warning_flag: FinancialAssistanceRegistry[:income_and_deduction_date_warning].enabled?}, &block
end

def benefit_form_for(application, applicant, benefit)
Expand Down
4 changes: 2 additions & 2 deletions components/financial_assistance/app/views/financial_assistance/incomes/_job_income.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,8 +50,8 @@
</div>

<div class="mt-3 pb-2">
<a tabindex="0" onkeydown="handleButtonKeyDown(event, 'income-delete-<%= dom_id income %>')" id="income-delete-<%= dom_id income %>" class="button outline error mr-1 mb-2 income-delete"><%= l10n("faa.other_incomes.remove") %></a>
<a tabindex="0" onkeydown="handleButtonKeyDown(event, 'income-edit-<%= dom_id income %>')" id="income-edit-<%= dom_id income %>" class="button mb-2 income-edit"><%=l10n("edit")%></a>
<a tabindex="0" data-keydown-id='income-delete-<%= dom_id income %>' id="income-delete-<%= dom_id income %>" class="button outline error mr-1 mb-2 income-delete"><%= l10n("faa.other_incomes.remove") %></a>
<a tabindex="0" data-keydown-id='income-edit-<%= dom_id income %>' id="income-edit-<%= dom_id income %>" class="button mb-2 income-edit"><%=l10n("edit")%></a>
</div>
</div>
<div class="income-edit-form hidden">
Expand Down
9 changes: 4 additions & 5 deletions ...nts/financial_assistance/app/views/financial_assistance/incomes/_job_income_form.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
<%= income_form_for @application, @applicant, income do |f| %>
<%= hidden_field_tag :bs4, true %>
<% income_id = income.id %>
<% onchange_date = FinancialAssistanceRegistry[:income_and_deduction_date_warning].enabled? ? (raw "validateDateWarnings('#{income_id}', true)") : "" %>
<% new_form = local_assigns[:new_form].present? ? local_assigns[:new_form] : false %>
<% dummy_income_id = "#{income_id}#{new_form ? 'dummy' : ''}" # needed to prevent Multiple Form Label accessibility error %>
<%= f.hidden_field :kind, value: 'wages_and_salaries' %>
Expand Down Expand Up @@ -38,19 +37,19 @@
</div>
<div class="w-100 col px-0 pr-4">
<%= f.label :start_on, l10n("faa.other_incomes.start_date"), class: "required", for: "start_on_#{dummy_income_id}" %>
<%= f.date_field :start_on, min: 110.years.ago, max:"9999-12-31", required: true, id: "start_on_#{dummy_income_id}", onchange: onchange_date, class: "w-100" %>
<%= f.date_field :start_on, min: 110.years.ago, max:"9999-12-31", required: true, id: "start_on_#{dummy_income_id}", class: "w-100" %>
</div>
<div class="w-100 col px-0">
<%= f.label :end_on, l10n("faa.other_incomes.end_date"), for: "end_on_#{dummy_income_id}" %>
<%= f.date_field :end_on, min: 110.years.ago, max:"9999-12-31", id: "end_on_#{dummy_income_id}", onchange: onchange_date, class: "w-100 end-on-field" %>
<%= f.date_field :end_on, min: 110.years.ago, max:"9999-12-31", id: "end_on_#{dummy_income_id}", class: "w-100 end-on-field" %>
</div>
</div>
</div>
<div class="row mb-2">
<div class="pull-right mt-1 mb-2 pl-3">
<a tabindex="0" onkeydown="handleCancelButtonKeyDown(event, 'income-cancel-<%= income_id %>', 'hidden-income-form')" id="income-cancel-<%= income_id %>" class="button btn-default outline income-cancel">Cancel</a>
<%= f.submit l10n("faa.other_incomes.save"), class: 'button btn-save ml-1', :data => { :cuke => "job-income-save-button" }, onclick: "checkDate('#{income_id}')" %>
<a tabindex="0" data-keydown-id='income-cancel-<%= income_id %>', id="income-cancel-<%= income_id %>" class="button btn-default outline income-cancel">Cancel</a>
<%= f.submit l10n("faa.other_incomes.save"), class: 'button btn-save ml-1', :data => { :cuke => "job-income-save-button" } %>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion ...inancial_assistance/app/views/financial_assistance/incomes/_self_employed_income_form.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@
<div class="row mb-2">
<div class="pull-right mt-1 mb-2 pl-3">
<a tabindex="0" data-keydown-id='self-employed-income-cancel-<%= income_id %>' id="self-employed-income-cancel-<%= income_id %>" class="button btn-default outline income-cancel"><%= l10n("cancel") %></a>
<%= f.submit l10n("faa.other_incomes.save"), class: "button btn-save ml-1", :data => { :cuke => "self-employed-income-save-button" }, onclick: "checkDate('#{income_id}')" %>
<%= f.submit l10n("faa.other_incomes.save"), class: "button btn-save ml-1", :data => { :cuke => "self-employed-income-save-button" } %>
</div>
</div>
</div>
Expand Down
16 changes: 8 additions & 8 deletions components/financial_assistance/app/views/financial_assistance/incomes/index.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
<%= radio_button_tag("has_job_income", true, @applicant.has_job_income, class: "radio", required: true) %>
<span class="yes_no_pair"><%= l10n("yes") %></span>
</label>
<label for="has_job_income_false" tabindex="0" onkeydown="handleRadioKeyDown(event, 'has_job_income_false')" class="radio">
<label for="has_job_income_false" tabindex="0" data-keydown-id='has_job_income_false' class="radio">
<%= radio_button_tag("has_job_income", false, @applicant.has_job_income == false, class: "required", required: true) %>
<span class="yes_no_pair"><%= l10n("no") %></span>
</label>
Expand All @@ -37,7 +37,7 @@
<% end %>
</div>
<div class="add-more-link mt-3">
<button tabindex="0" onkeydown="handleButtonKeyDown(event, 'new-income')" id="new-income" class='<%= 'hidden' unless @applicant.incomes.jobs.present? %> new-income new-income-job button'><%= l10n("faa.other_incomes.add", kind: "") %></a>
<button tabindex="0" data-keydown-id='new-income' id="new-income" class='<%= 'hidden' unless @applicant.incomes.jobs.present? %> new-income new-income-job button'><%= l10n("faa.other_incomes.add", kind: "") %></a>
</div>
<div id='new-income-form' class='new-income-form my-4 hidden'>
<%= render partial: 'financial_assistance/incomes/job_income_form', locals: { income: @applicant.incomes.build, new_form: true } %>
Expand All @@ -56,7 +56,7 @@
<%= radio_button_tag("has_self_employment_income", true, @applicant.has_self_employment_income, class: "radio", required: true) %>
<span class="yes_no_pair"><%= l10n("yes") %></span>
</label>
<label for="has_self_employment_income_false" tabindex="0" onkeydown="handleRadioKeyDown(event, 'has_self_employment_income_false')" class="radio">
<label for="has_self_employment_income_false" tabindex="0" data-keydown-id='has_self_employment_income_false' class="radio">
<%= radio_button_tag("has_self_employment_income", false, @applicant.has_self_employment_income == false, class: "required", required: true) %>
<span class="yes_no_pair"><%= l10n("no") %></span>
</label>
Expand All @@ -74,7 +74,7 @@
<% end %>
</div>
<div class="add-more-link mt-3">
<button tabindex="0" onkeydown="handleButtonKeyDown(event, 'self-employed-income', 'new-income-form')" id="self-employed-income" class='<%= 'hidden' unless @applicant.incomes.self_employment.present? %> new-income new-income-self-employed button'><%= l10n("faa.other_incomes.add", kind: l10n("faa.incomes.self_employed_income")) %></a>
<button tabindex="0" data-keydown-id='self-employed-income' id="self-employed-income" class='<%= 'hidden' unless @applicant.incomes.self_employment.present? %> new-income new-income-self-employed button'><%= l10n("faa.other_incomes.add", kind: l10n("faa.incomes.self_employed_income")) %></a>
</div>
<div id='new-self-employed-income-form' class='new-income-form my-4 hidden'>
<%= render partial: 'financial_assistance/incomes/self_employed_income_form', locals: { income: @applicant.incomes.build, new_form: true } %>
Expand Down Expand Up @@ -125,7 +125,7 @@
<div class="mt-1 mb-1">
<h4 class="modal-title darkblue" id="myModalLabel"><%= l10n("faa.edit.confirm_deletion") %></h4>
</div>
<span tabindex="0" onkeydown="handleButtonKeyDown(event, 'unsaved-delete')" id="unsaved-delete" class="glyphicon glyphicon-remove close" aria-hidden="true" data-dismiss="modal" aria-label="Close"></span>
<span tabindex="0" data-keydown-id='unsaved-delete' id="unsaved-delete" class="glyphicon glyphicon-remove close" aria-hidden="true" data-dismiss="modal" aria-label="Close"></span>
</div>
<div class="pl-3">
<%= l10n("faa.edit.sure_remove", income_type: l10n('faa.incomes.job_income').downcase) %>
Expand All @@ -152,7 +152,7 @@
<div class="mt-1 mb-1">
<h4 class="modal-title darkblue" id="myModalLabel"><%= l10n("faa.edit.confirm_deletion") %></h4>
</div>
<span tabindex="0" onkeydown="handleButtonKeyDown(event, 'unsaved-delete')" id="unsaved-delete" class="glyphicon glyphicon-remove close" aria-hidden="true" data-dismiss="modal" aria-label="Close"></span>
<span tabindex="0" data-keydown-id='unsaved-delete' id="unsaved-delete" class="glyphicon glyphicon-remove close" aria-hidden="true" data-dismiss="modal" aria-label="Close"></span>
</div>
<div class="pl-3">
<%= l10n("faa.edit.sure_remove", income_type: l10n('faa.incomes.income')) %>
Expand All @@ -179,7 +179,7 @@
<div class="mt-1 mb-1">
<h4 class="modal-title darkblue" id="myModalLabel"><%= l10n("faa.edit.confirm_deletion") %></h4>
</div>
<span tabindex="0" onkeydown="handleButtonKeyDown(event, 'unsaved-delete')" id="unsaved-delete" class="glyphicon glyphicon-remove close" aria-hidden="true" data-dismiss="modal" aria-label="Close"></span>
<span tabindex="0" data-keydown-id='unsaved-delete' id="unsaved-delete" class="glyphicon glyphicon-remove close" aria-hidden="true" data-dismiss="modal" aria-label="Close"></span>
</div>
<div class="pl-3">
<%= l10n("faa.edit.sure_remove_all", income_type: l10n('faa.incomes.job_income').downcase) %>
Expand All @@ -206,7 +206,7 @@
<div class="mt-1 mb-1">
<h4 class="modal-title darkblue" id="myModalLabel"><%= l10n("faa.edit.confirm_deletion") %></h4>
</div>
<span tabindex="0" onkeydown="handleButtonKeyDown(event, 'unsaved-delete')" id="unsaved-delete" class="glyphicon glyphicon-remove close" aria-hidden="true" data-dismiss="modal" aria-label="Close"></span>
<span tabindex="0" data-keydown-id='unsaved-delete' id="unsaved-delete" class="glyphicon glyphicon-remove close" aria-hidden="true" data-dismiss="modal" aria-label="Close"></span>
</div>
<div class="pl-3">
<%= l10n("faa.edit.sure_remove_all", income_type: l10n('faa.incomes.income').downcase) %>
Expand Down

0 comments on commit 5148fac

Please sign in to comment.