From faec59fb661da481367ba6213b82765ad79d4332 Mon Sep 17 00:00:00 2001
From: edmondsgarrett <43251554+edmondsgarrett@users.noreply.github.com>
Date: Fri, 10 Nov 2023 15:58:49 -0600
Subject: [PATCH] task/WP-381 and WP-382: Reg form updates (#248)

* 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
---
 .../registrations/css/submission_form.css     |   7 -
 .../registration_form_body.html               | 128 +++++++++---------
 .../registration_form_scripts.html            |  37 +----
 3 files changed, 67 insertions(+), 105 deletions(-)

diff --git a/apcd-cms/src/apps/registrations/static/registrations/css/submission_form.css b/apcd-cms/src/apps/registrations/static/registrations/css/submission_form.css
index 673d4a17..515746e7 100644
--- a/apcd-cms/src/apps/registrations/static/registrations/css/submission_form.css
+++ b/apcd-cms/src/apps/registrations/static/registrations/css/submission_form.css
@@ -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;
diff --git a/apcd-cms/src/apps/registrations/templates/submission_form/registration_form_body.html b/apcd-cms/src/apps/registrations/templates/submission_form/registration_form_body.html
index b5f26e12..4f0221e4 100644
--- a/apcd-cms/src/apps/registrations/templates/submission_form/registration_form_body.html
+++ b/apcd-cms/src/apps/registrations/templates/submission_form/registration_form_body.html
@@ -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>
@@ -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
                 />
 
@@ -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
                 />
 
diff --git a/apcd-cms/src/apps/registrations/templates/submission_form/registration_form_scripts.html b/apcd-cms/src/apps/registrations/templates/submission_form/registration_form_scripts.html
index a1672767..4c6edc17 100644
--- a/apcd-cms/src/apps/registrations/templates/submission_form/registration_form_scripts.html
+++ b/apcd-cms/src/apps/registrations/templates/submission_form/registration_form_scripts.html
@@ -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">
@@ -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">
@@ -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>