Task/wp 338 339 apcd fix dates except exten (#237)

* WP-339 Fix expiration date not longer than 1 year

* WP 338 Extension Set requested date no longer than
year

* - Create query to get app data periods based on
submitter_id
- Added field to templates
- Updated styles to make Submission date row aligned
- Added app_data_periods to view context

* -Disabled Current expected date so its view only
-Need to use a get request to populate based on app_data-period
selection

* Updated app data period format in select

* -Added query to get target date
- Added view function to pass app data period to get target date
- Added path for view function get request
- Added select option to display -- Select period -- in template

* Dynamically update Current expected date on extension form

* Add restrict requested date to less than a year to
all extension blocks

* Extension updates
-Updated query to submit applicable data period and current
expected date.
-Updated template to have dynamic display of expected due date and a hidden
input to submit that in the form with the extension request
-Updated button on error page - using old wrong element so the button
wasn't getting the correct styles
-Clean up comments

* Remove unneeded changes

* Undoing unneeded changes

* Revert diff

* Revert diff

* Revert diff

* Revert diff

* Revert diff

* Update exception_other_form.html

* revert diff

* Undo change for a different task. Will be a follow on PR

* Only restict future dates for other exception form

* Changed logic of threshold restricted date

* Fix typo

* Bug on added current expected date input field ids

apcd-cms/src/apps/exception/templates/exception_submission_form/exception_other_form.html

@@ -160,9 +160,6 @@ <h4>Acknowledgment of Terms</h4>
                   month = '0' + month.toString();
               if(day < 10)
                   day = '0' + day.toString();
-
-              var minDate = dtToday.toISOString().substr(0, 10);
-              $('#expiration-date').attr('min', minDate);
               year = year + 1;
               var maxDate = year + '-' + month + '-' + day;    
               $('#expiration-date').attr('max', maxDate);

apcd-cms/src/apps/exception/templates/exception_submission_form/exception_threshold_form.html

@@ -75,7 +75,7 @@ <h4>Requested Threshold Reduction</h4>
               <div class="field-wrapper numberinput required">
                 <div class="field-errors" style="display: none"></div>
 
-                <label name="date-row" for="expiration-date_1">Expiriation Date<sup>*</sup><span class="asterisk">*</span> </label>
+                <label name="date-row" for="expiration-date_1">Expiration Date<sup>*</sup><span class="asterisk">*</span> </label>
 
                 <input type="date" name="expiration-date_1" class="numeric" id="expiration-date_1" inputmode="numeric"
                   pattern="\d{4}-\d{2}-\d{2}" required />
@@ -218,24 +218,22 @@ <h4>Acknowledgment of Terms</h4>
           noEmptyInputs(formTextInputs);          
         </script> 
         <!-- To require exception is not longer than a year -->
-        <script id="form-exception_length_less_than_year" type="module">
-          $(function () {
-            var dtToday = new Date();
-
-            var month = dtToday.getMonth() + 1;
-            var day = dtToday.getDate();
-            var year = dtToday.getFullYear();
-            if (month < 10)
-              month = '0' + month.toString();
-            if (day < 10)
-              day = '0' + day.toString();
-
-            var minDate = dtToday.toISOString().substr(0, 10);
-            $('#expiration-date').attr('min', minDate);
-            year = year + 1;
-            var maxDate = year + '-' + month + '-' + day;
-            $('#expiration-date').attr('max', maxDate);
-          });
+        <script>
+        function restrictExpirationDate(field, exceptions) {
+          var dtToday = new Date();
+
+          var month = dtToday.getMonth() + 1;
+          var day = dtToday.getDate();
+          var year = dtToday.getFullYear();
+          if (month < 10)
+            month = '0' + month.toString();
+          if (day < 10)
+            day = '0' + day.toString();
+
+          year = year + 1;
+          var maxDate = year + '-' + month + '-' + day;
+          $(`#expiration-date_${exceptions}`).attr('max', maxDate);
+        };
         </script>
         <!-- Broke out functions necessary for dynamic drop down and help text related to CDLs-->
         <script>
@@ -398,12 +396,21 @@ <h4>Acknowledgment of Terms</h4>
             let exceptions = 1;
             btnStatus(exceptions);
 
+            $('[id^="expiration-date"]').click(function() {
+              let field = $(this).attr('id');
+              restrictExpirationDate(field, exceptions);
+            });
+
             $('#exception-add-btn').click(function() {
 
               addException(exceptions);
             // To track how many exception blocks there are for button logic
               exceptions = addException(exceptions);
               btnStatus(exceptions);
+              $('[id^="expiration-date"]').click(function() {
+              let field = $(this).attr('id');
+              restrictExpirationDate(field, exceptions);
+            });
             // Gets help text for additional added blocks
               $('[id^="field-threshold-exception"]').change(function() {
                 let fieldSelection = $(this).val();

apcd-cms/src/apps/extension/static/forms/css/extension_submission_form.css

@@ -5,11 +5,10 @@ select {
     text-overflow: ellipsis;
   }
 
-input[name^="requested-target-date"] {
-    --length: 25ch;
-    box-sizing: content-box;
+/* to make submission date inputs the same size*/
+select[name^="applicable-data-period"] {
+  max-width: 20ch;
 }
-
 /* Text alignment */
 /* To make required text line up with helper text for justification text area*/
 #justification-asterisk {
@@ -19,10 +18,30 @@ input[name^="requested-target-date"] {
 
 
 /* Field Layouts */
+/* To put required for extension dates on another line to avoid cutting off text */
+label[name^="extension-date-asterisk"] {
+  padding: 0;
+  margin-left:0;
+}
+/* To make sure sup values are not cut off when set as a label*/
+label[name^="date-row"] {
+  margin-top: 1rem;
+}
 /* To make (radio/check)box sets take up less vertical space */
 #on-behalf-of {
     display: flex;
     flex-wrap: wrap;
     column-gap: 1em;
     row-gap: 0.5em;
-}
+}
+
+[id^="extension-block_"] {
+
+  /* Expectations:
+      - automatically enough columns
+      - maximum column count of 3 (i.e. minimum column width of 33%)
+      - equal width columns*/
+  display: grid;
+  grid-template-columns: repeat( auto-fill, var(--max-col-width));
+  max-width: calc( var(--global-space--grid-gap) + var(--max-col-width) *3 ); 
+}

apcd-cms/src/apps/extension/templates/extension_submission_form/extension_submission_error.html

@@ -12,7 +12,7 @@ <h1>Request to Submit Extension</h1>
     <p class="c-message c-message--error">
         An error occurred during your extension request submission. For help, <a href="/workbench/dashboard">submit a ticket</a>.
     </p>
-    <a class="c-button c-button--primary" href="/submissions/extension-request/">Go Back to Extensions</a>
+    <button class="c-button c-button--primary" href="/submissions/extension-request/" type="link">Go Back to Extensions</button>
 </div>
 
 {% endblock %}