Merge pull request #98 from AppliedIS/feature-valsub2

More validation and UI updates. Added section alerts.
ais-open · Nov 3, 2016 · bb45661 · bb45661
2 parents 28c223b + 51b8851
commit bb45661
Show file tree

Hide file tree

Showing 10 changed files with 75 additions and 29 deletions.
diff --git a/....Section14c.Web/src/modules/components/formFooterControls/formFooterControlsController.js b/....Section14c.Web/src/modules/components/formFooterControls/formFooterControlsController.js
@@ -28,7 +28,7 @@ module.exports = function(ngModule) {
         });
 
         this.setNextLabel = function(label) {
-            vm.nextLabel = label ? label : vm.hasNext ? "Next" : "Submit Form";
+            vm.nextLabel = label ? label : navService.getNextSection() === "review" ? "Review & Submit Application" : "Next";
         }
 
         this.setBackLabel = function(label) {

diff --git a/DOL.WHD.Section14c.Web/src/modules/components/formSection/formSectionTemplate.html b/DOL.WHD.Section14c.Web/src/modules/components/formSection/formSectionTemplate.html
@@ -1,5 +1,5 @@
 <main-header-control></main-header-control>
-<div class="main-content">
+<div class="main-content form-content">
     <ng-transclude></ng-transclude>
 </div>
 <form-footer-controls></form-footer-controls>
diff --git a/DOL.WHD.Section14c.Web/src/modules/components/sectionAppInfo/sectionAppInfoTemplate.html b/DOL.WHD.Section14c.Web/src/modules/components/sectionAppInfo/sectionAppInfoTemplate.html
@@ -1,3 +1,8 @@
+<div class="usa-alert usa-alert-error" role="alert" ng-show="validate('__appinfo')">
+    <div class="usa-alert-body">
+        <p class="usa-alert-text">Please review this page. There are errors or missing information that we need to collect before you can submit the form.</p>
+    </div>
+</div>
 <div class="form-page">
     <h3>Application Type</h3>
     <hr />

diff --git a/DOL.WHD.Section14c.Web/src/modules/components/sectionEmployer/sectionEmployerTemplate.html b/DOL.WHD.Section14c.Web/src/modules/components/sectionEmployer/sectionEmployerTemplate.html
@@ -1,3 +1,8 @@
+<div class="usa-alert usa-alert-error" role="alert" ng-show="validate('__employer')">
+    <div class="usa-alert-body">
+        <p class="usa-alert-text">Please review this page. There are errors or missing information that we need to collect before you can submit the form.</p>
+    </div>
+</div>
 <a href="" ng-click="vm.showAllHelp = !vm.showAllHelp">Show Help for All Items</a>
 <div class="form-page">
     <h3>Employer Information</h3>

diff --git a/DOL.WHD.Section14c.Web/src/modules/components/sectionWageData/sectionWageDataController.js b/DOL.WHD.Section14c.Web/src/modules/components/sectionWageData/sectionWageDataController.js
@@ -1,11 +1,12 @@
 'use strict';
 
 module.exports = function(ngModule) {
-    ngModule.controller('sectionWageDataController', function($scope, $location, stateService, navService, responsesService) {
+    ngModule.controller('sectionWageDataController', function($scope, $location, stateService, navService, responsesService, validationService) {
         'ngInject';
         'use strict';
 
         $scope.formData = stateService.formData;
+        $scope.validate = validationService.getValidationErrors;
 
         // multiple choice responses
         let questionKeys = [ 'PayType' ];

diff --git a/DOL.WHD.Section14c.Web/src/modules/components/sectionWageData/sectionWageDataTemplate.html b/DOL.WHD.Section14c.Web/src/modules/components/sectionWageData/sectionWageDataTemplate.html
@@ -1,3 +1,8 @@
+<div class="usa-alert usa-alert-error" role="alert" ng-show="validate('__wagedata')">
+    <div class="usa-alert-body">
+        <p class="usa-alert-text">Please review this page. There are errors or missing information that we need to collect before you can submit the form.</p>
+    </div>
+</div>
 <div class="form-page">
     <div class="form-question-block">
         <div class="form-question-text">How did the employer pay subminimum wage rates to workers with disabilities in the most recent fiscal quarter?</div>

diff --git a/DOL.WHD.Section14c.Web/src/modules/components/sectionWioa/sectionWioaTemplate.html b/DOL.WHD.Section14c.Web/src/modules/components/sectionWioa/sectionWioaTemplate.html
@@ -1,3 +1,8 @@
+<div class="usa-alert usa-alert-error" role="alert" ng-show="validate('__wioa')">
+    <div class="usa-alert-body">
+        <p class="usa-alert-text">Please review this page. There are errors or missing information that we need to collect before you can submit the form.</p>
+    </div>
+</div>
 <div class="form-page">
     <h3>Workforce Innovation and Opportunity Act (WIOA)</h3>
     <hr />

diff --git a/DOL.WHD.Section14c.Web/src/modules/components/sectionWorkSites/sectionWorkSitesController.js b/DOL.WHD.Section14c.Web/src/modules/components/sectionWorkSites/sectionWorkSitesController.js
@@ -5,11 +5,12 @@ import merge from 'lodash/merge'
 import find from 'lodash/find'
 
 module.exports = function(ngModule) {
-    ngModule.controller('sectionWorkSitesController', function($scope, $location, navService, responsesService, stateService) {
+    ngModule.controller('sectionWorkSitesController', function($scope, $location, navService, responsesService, stateService, validationService) {
         'ngInject';
         'use strict';
 
         $scope.formData = stateService.formData;
+        $scope.validate = validationService.getValidationErrors;
 
         if (!$scope.formData.workSites) {
             $scope.formData.workSites = [];

diff --git a/DOL.WHD.Section14c.Web/src/modules/components/sectionWorkSites/sectionWorkSitesTemplate.html b/DOL.WHD.Section14c.Web/src/modules/components/sectionWorkSites/sectionWorkSitesTemplate.html
@@ -1,13 +1,20 @@
+<div class="usa-alert usa-alert-error" role="alert" ng-show="validate('__worksites')">
+    <div class="usa-alert-body">
+        <p class="usa-alert-text">Please review this page. There are errors or missing information that we need to collect before you can submit the form.</p>
+    </div>
+</div>
 <div class="form-page-full">
-    <div class="form-question-block">
+    <div class="form-question-block" ng-class="validate('totalNumWorkSites') ? 'usa-input-error' : ''">
         <div class="form-question-text">What is the total number of establishments and work sites to be covered by this certificate?</div>
+        <span class="usa-input-error-message" role="alert" ng-show="validate('totalNumWorkSites')">{{ validate('totalNumWorkSites') }}</span>
         <div class="form-question-answer">
             <input id="numWorkSites" name="numWorkSites" type="number" class="numeric7" min="0" step="1" ng-model="formData.totalNumWorkSites">
         </div>
     </div>
 
-    <div class="form-question-block">
+    <div class="form-question-block" ng-class="validate('workSites') ? 'usa-input-error' : ''">
         <div class="form-question-text">We'll need to collect information about each worksite and its employees.</div>
+        <span class="usa-input-error-message" role="alert" ng-show="validate('workSites')">{{ validate('workSites') }}</span>
         <button ng-click="vm.addWorkSite()" ng-hide="vm.addingWorkSite">Add Work Site &amp; Employee(s)</button>
     </div>
 
@@ -316,28 +323,30 @@
         </div>
     </div>
 
-    <table class="usa-table-borderless" ng-show="!vm.addingWorkSite && formData.workSites.length">
-        <thead>
-            <tr>
-                <th scope="col">Work Site Name</th>
-                <th scope="col">Number of Workers</th>
-                <th scope="col"></th>
-            </tr>
-        </thead>
-        <tbody>
-            <tr class="expanding-row {{ $index % 2 !== 0 ? 'greyed' : ''}}" ng-repeat-start="site in formData.workSites">
-                <th scope="row"><a href="" ng-click="vm.siteRowClicked($event)"><div class="arrow-expander"></div></a> {{ site.name }}</th>
-                <td>{{ site.numEmployees }}</td>
-                <td><button class="green-button" ng-click="vm.editWorkSite($index)">Edit</button><button class="usa-button-secondary" ng-click="vm.deleteWorkSite($index)">Delete</button></td>
-            </tr>
-            <tr class="expanded-row {{ $index % 2 !== 0 ? 'greyed' : ''}}" ng-repeat-end>
-                <td colspan="3">
-                    <div ng-repeat="employee in site.employees">
-                        {{ employee.name }}
-                    </div>
-                </td>
-            </tr>
-        </tbody>
-    </table>
+    <!--<div ng-class="validate('workSites', true) ? 'usa-input-error' : ''">-->
+        <table class="usa-table-borderless" ng-show="!vm.addingWorkSite && formData.workSites.length">
+            <thead>
+                <tr>
+                    <th scope="col">Work Site Name</th>
+                    <th scope="col">Number of Workers</th>
+                    <th scope="col"></th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr class="expanding-row {{ $index % 2 !== 0 ? 'greyed' : ''}}" ng-repeat-start="site in formData.workSites">
+                    <th scope="row"><a href="" ng-click="vm.siteRowClicked($event)"><div class="arrow-expander"></div></a> {{ site.name }}</th>
+                    <td>{{ site.numEmployees }}</td>
+                    <td><button class="green-button" ng-click="vm.editWorkSite($index)">Edit</button><button class="usa-button-secondary" ng-click="vm.deleteWorkSite($index)">Delete</button></td>
+                </tr>
+                <tr class="expanded-row {{ $index % 2 !== 0 ? 'greyed' : ''}}" ng-repeat-end>
+                    <td colspan="3">
+                        <div ng-repeat="employee in site.employees">
+                            {{ employee.name }}
+                        </div>
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+    <!--</div>-->
 
 </div>
diff --git a/DOL.WHD.Section14c.Web/src/styles/forms.scss b/DOL.WHD.Section14c.Web/src/styles/forms.scss
@@ -11,6 +11,11 @@
     }
 
     .form-page, .form-page-full {
+        margin-top: 40px;
+
+        & > h3:first-of-type {
+            margin-top: 0px;
+        }
 
         .em-block {
             background-color: $form-em-grey;
@@ -372,4 +377,14 @@
             }
         }
     }
+
+    .form-content {
+        div.usa-alert-error {
+            @include clearfix;
+
+            div.usa-alert-body {
+                @include span(8);
+            }
+        }
+    }
 }