Skip to content

Commit

Permalink
task/WP-381 and WP-382: Reg form updates (#248)
Browse files Browse the repository at this point in the history 
* Convert entity license + NAIC fields to str inputs with regex restricting successful input to ints

* Simplify state drop down - now show full state abbreviation + name
  • Loading branch information
@edmondsgarrett
edmondsgarrett authored Nov 10, 2023
1 parent 1836fbf commit faec59f
Show file tree
Hide file tree
Showing 3 changed files with 67 additions and 105 deletions.
7 changes: 0 additions & 7 deletions apcd-cms/src/apps/registrations/static/registrations/css/submission_form.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,6 @@ input[name^="zip_code"] {
width: 10ch;
box-sizing: content-box;
}
select[name^="state"] {
--length: 2.5ch;
--ui-buffer: 2.5ch; /* to make room for dropdown arrows */

width: calc( var(--length) + var(--ui-buffer) );
box-sizing: content-box;
}
/* for a Contact */
input[name^="contact_phone"] {
width: 17ch;
Expand Down
128 changes: 63 additions & 65 deletions apcd-cms/src/apps/registrations/templates/submission_form/registration_form_body.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -161,72 +161,72 @@
name="state"
required="required"
class="choicefield"
id="state{% if r %}_{{r.reg_id}}{% endif%}"
id="state"
>
{% if r.view_modal_content %}
{% for state in r.view_modal_content.us_state_list %}
<option data-display-value='{{ state|slice:":2"}}' value="{{ state }}" {% if r.view_modal_content.state == state|slice:":2" %}selected{% endif %}>
{% if r.view_modal_content.state == state|slice:":2" %}{{ state|slice:":2" }}{% else %}{{ state }}{% endif %}
<option value="{{ state }}" {% if r.view_modal_content.state == state|slice:":2" %}selected{% endif %}>
{{ state }}
</option>
{% endfor %}
{% else %}
<option hidden selected> </option>
<option data-display-value="AL" value="AL - Alabama">AL - Alabama</option>
<option data-display-value="AK" value="AK - Alaska">AK - Alaska</option>
<option data-display-value="AS" value="AS - American Samoa">AS - American Samoa</option>
<option data-display-value="AZ" value="AZ - Arizona">AZ - Arizona</option>
<option data-display-value="AR" value="AR - Arkansas">AR - Arkansas</option>
<option data-display-value="CA" value="CA - California">CA - California</option>
<option data-display-value="CO" value="CO - Colorado">CO - Colorado</option>
<option data-display-value="CT" value="CT - Connecticut">CT - Connecticut</option>
<option data-display-value="DE" value="DE - Delaware">DE - Delaware</option>
<option data-display-value="DC" value="DC - District of Columbia">DC - District of Columbia</option>
<option data-display-value="FL" value="FL - Florida">FL - Florida</option>
<option data-display-value="GA" value="GA - Georgia">GA - Georgia</option>
<option data-display-value="GU" value="GU - Guam">GU - Guam</option>
<option data-display-value="HI" value="HI - Hawaii">HI - Hawaii</option>
<option data-display-value="ID" value="ID - Idaho">ID - Idaho</option>
<option data-display-value="IL" value="IL - Illinois">IL - Illinois</option>
<option data-display-value="IN" value="IN - Indiana">IN - Indiana</option>
<option data-display-value="IA" value="IA - Iowa">IA - Iowa</option>
<option data-display-value="KS" value="KS - Kansas">KS - Kansas</option>
<option data-display-value="KY" value="KY - Kentucky">KY - Kentucky</option>
<option data-display-value="LA" value="LA - Louisiana">LA - Louisiana</option>
<option data-display-value="ME" value="ME - Maine">ME - Maine</option>
<option data-display-value="MD" value="MD - Maryland">MD - Maryland</option>
<option data-display-value="MA" value="MA - Massachusetts">MA - Massachusetts</option>
<option data-display-value="MI" value="MI - Michigan">MI - Michigan</option>
<option data-display-value="MN" value="MN - Minnesota">MN - Minnesota</option>
<option data-display-value="MS" value="MS - Mississippi">MS - Mississippi</option>
<option data-display-value="MO" value="MO - Missouri">MO - Missouri</option>
<option data-display-value="MT" value="MT - Montana">MT - Montana</option>
<option data-display-value="NE" value="NE - Nebraska">NE - Nebraska</option>
<option data-display-value="NV" value="NV - Nevada">NV - Nevada</option>
<option data-display-value="NH" value="NH - New hampshire">NH - New hampshire</option>
<option data-display-value="NJ" value="NJ - New Jersey">NJ - New Jersey</option>
<option data-display-value="NM" value="NM - New Mexico">NM - New Mexico</option>
<option data-display-value="NY" value="NY - New York">NY - New York</option>
<option data-display-value="NC" value="NC - North Carolina">NC - North Carolina</option>
<option data-display-value="ND" value="ND - North Dakota">ND - North Dakota</option>
<option data-display-value="MP" value="MP - Northern Mariana Islands">MP - Northern Mariana Islands</option>
<option data-display-value="OH" value="OH - Ohio">OH - Ohio</option>
<option data-display-value="OK" value="OK - Oklahoma">OK - Oklahoma</option>
<option data-display-value="OR" value="OR - Oregon">OR - Oregon</option>
<option data-display-value="PA" value="PA - Pennsylvania">PA - Pennsylvania</option>
<option data-display-value="PR" value="PR - Puerto Rico">PR - Puerto Rico</option>
<option data-display-value="RI" value="RI - Rhode Island">RI - Rhode Island</option>
<option data-display-value="SC" value="SC - South Carolina">SC - South Carolina</option>
<option data-display-value="SD" value="SD - South Dakota">SD - South Dakota</option>
<option data-display-value="TN" value="TN - Tennessee">TN - Tennessee</option>
<option data-display-value="TX" value="TX - Texas">TX - Texas</option>
<option data-display-value="UT" value="UT - Utah">UT - Utah</option>
<option data-display-value="VT" value="VT - Vermont">VT - Vermont</option>
<option data-display-value="VA" value="VA - Virginia">VA - Virginia</option>
<option data-display-value="VI" value="VI - Virgin Islands">VI - Virgin Islands</option>
<option data-display-value="WA" value="WA - Washington">WA - Washington</option>
<option data-display-value="WV" value="WV - West Virginia">WV - West Virginia</option>
<option data-display-value="WI" value="WI - Wisconsin">WI - Wisconsin</option>
<option data-display-value="WY" value="WY - Wyoming">WY - Wyoming</option>
<option value="AL - Alabama">AL - Alabama</option>
<option value="AK - Alaska">AK - Alaska</option>
<option value="AS - American Samoa">AS - American Samoa</option>
<option value="AZ - Arizona">AZ - Arizona</option>
<option value="AR - Arkansas">AR - Arkansas</option>
<option value="CA - California">CA - California</option>
<option value="CO - Colorado">CO - Colorado</option>
<option value="CT - Connecticut">CT - Connecticut</option>
<option value="DE - Delaware">DE - Delaware</option>
<option value="DC - District of Columbia">DC - District of Columbia</option>
<option value="FL - Florida">FL - Florida</option>
<option value="GA - Georgia">GA - Georgia</option>
<option value="GU - Guam">GU - Guam</option>
<option value="HI - Hawaii">HI - Hawaii</option>
<option value="ID - Idaho">ID - Idaho</option>
<option value="IL - Illinois">IL - Illinois</option>
<option value="IN - Indiana">IN - Indiana</option>
<option value="IA - Iowa">IA - Iowa</option>
<option value="KS - Kansas">KS - Kansas</option>
<option value="KY - Kentucky">KY - Kentucky</option>
<option value="LA - Louisiana">LA - Louisiana</option>
<option value="ME - Maine">ME - Maine</option>
<option value="MD - Maryland">MD - Maryland</option>
<option value="MA - Massachusetts">MA - Massachusetts</option>
<option value="MI - Michigan">MI - Michigan</option>
<option value="MN - Minnesota">MN - Minnesota</option>
<option value="MS - Mississippi">MS - Mississippi</option>
<option value="MO - Missouri">MO - Missouri</option>
<option value="MT - Montana">MT - Montana</option>
<option value="NE - Nebraska">NE - Nebraska</option>
<option value="NV - Nevada">NV - Nevada</option>
<option value="NH - New hampshire">NH - New hampshire</option>
<option value="NJ - New Jersey">NJ - New Jersey</option>
<option value="NM - New Mexico">NM - New Mexico</option>
<option value="NY - New York">NY - New York</option>
<option value="NC - North Carolina">NC - North Carolina</option>
<option value="ND - North Dakota">ND - North Dakota</option>
<option value="MP - Northern Mariana Islands">MP - Northern Mariana Islands</option>
<option value="OH - Ohio">OH - Ohio</option>
<option value="OK - Oklahoma">OK - Oklahoma</option>
<option value="OR - Oregon">OR - Oregon</option>
<option value="PA - Pennsylvania">PA - Pennsylvania</option>
<option value="PR - Puerto Rico">PR - Puerto Rico</option>
<option value="RI - Rhode Island">RI - Rhode Island</option>
<option value="SC - South Carolina">SC - South Carolina</option>
<option value="SD - South Dakota">SD - South Dakota</option>
<option value="TN - Tennessee">TN - Tennessee</option>
<option value="TX - Texas">TX - Texas</option>
<option value="UT - Utah">UT - Utah</option>
<option value="VT - Vermont">VT - Vermont</option>
<option value="VA - Virginia">VA - Virginia</option>
<option value="VI - Virgin Islands">VI - Virgin Islands</option>
<option value="WA - Washington">WA - Washington</option>
<option value="WV - West Virginia">WV - West Virginia</option>
<option value="WI - Wisconsin">WI - Wisconsin</option>
<option value="WY - Wyoming">WY - Wyoming</option>
{% endif %}
</select>
</div>
Expand Down Expand Up @@ -559,14 +559,13 @@ <h4>
<label for="license_number_1"> License Number </label>

<input
type="number"
type="text"
name="license_number_1"
placeholder="1234567890"
class="integerfield"
id="license_number_1"
inputmode="numeric"
min="0"
max="2147483648"
pattern="^[1-9]+[0-9]*$"
required
/>

Expand All @@ -580,14 +579,13 @@ <h4>
<label for="naic_company_code_1"> NAIC<sup>3</sup> Company Code </label>

<input
type="number"
type="text"
name="naic_company_code_1"
placeholder="12345"
class="integerfield"
id="naic_company_code_1"
inputmode="numeric"
min="0"
max="2147483648"
pattern="^[1-9]+[0-9]*$"
required
/>

Expand Down
37 changes: 4 additions & 33 deletions apcd-cms/src/apps/registrations/templates/submission_form/registration_form_scripts.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -154,14 +154,13 @@
<div class="field-errors" style="display: none"></div>
<label for="license_number_${entities}${reg_id_substr}"> License Number </label>
<input
type="number"
type="text"
name="license_number_${entities}${reg_id_substr}"
placeholder="1234567890"
class="integerfield"
id="license_number_${entities}${reg_id_substr}"
inputmode="numeric"
min="0"
max="2147483648"
pattern="^[1-9]+[0-9]*$"
required
/>
<div id="help-text-license_number_${entities}" class="help-text">
Expand All @@ -172,14 +171,13 @@
<div class="field-errors" style="display: none"></div>
<label for="naic_company_code_${entities}${reg_id_substr}"> NAIC<sup>3</sup> Company Code </label>
<input
type="number"
type="text"
name="naic_company_code_${entities}${reg_id_substr}"
placeholder="12345"
class="integerfield"
id="naic_company_code_${entities}${reg_id_substr}"
inputmode="numeric"
min="0"
max="2147483648"
pattern="^[1-9]+[0-9]*$"
required
/>
<div id="help-text-naic_company_code_${entities}" class="help-text">
Expand Down Expand Up @@ -530,31 +528,4 @@ <h6>
btnStatus();
});
</script>
<script id="state-dropdown-text-handler">
function stateOptionText (stateSelectDropdown, action) {
var selectedState, selectedStateValue, selectedStateDisplayVal;
selectedState = stateSelectDropdown.selectedOptions[0];
selectedStateValue = selectedState.value;
selectedStateDisplayVal = selectedState.getAttribute("data-display-value");
if (action === 'reset') {
selectedState.innerHTML = selectedStateValue;
}
else if (action === 'select') {
selectedState.innerHTML = selectedStateDisplayVal; /* sets dropdown to display state abbreviation only */
}
}
var regStrEnd, stateSelectDropdowns;
regStrEnd =
{% if r %}
"_{{r.reg_id}}"
{% else %}
""
{% endif %}
;
stateSelectDropdowns = document.querySelectorAll(`select[id=state${regStrEnd}]`);
stateSelectDropdowns.forEach(selector => {
selector.addEventListener('input', (event) => stateOptionText(event.target, 'select')),
selector.addEventListener('focus', (event) => stateOptionText(event.target, 'reset')) /* assumes user will click away before interacting again */
});
</script>
</aside>

0 comments on commit faec59f

Please sign in to comment.