Merge pull request #89 from AppliedIS/feature-ui

Front-end updates for validation...

DOL.WHD.Section14c.Web/.eslintrc.js

@@ -49,7 +49,7 @@ module.exports = {
         //Best Practices
         "accessor-pairs": 2,
         "block-scoped-var": 0,
-        "complexity": [2, 6],
+        "complexity": [2, 12],
         "consistent-return": 0,
         "curly": 0,
         "default-case": 0,
@@ -154,7 +154,7 @@ module.exports = {
         "max-len": 0,
         "max-nested-callbacks": 0,
         "max-params": 0,
-        "max-statements": [2, 30],
+        "max-statements": [2, 50],
         "new-cap": 0,
         "new-parens": 0,
         "newline-after-var": 0,

DOL.WHD.Section14c.Web/package.json

@@ -61,6 +61,7 @@
     "angular-sanitize": "^1.5.8",
     "jquery": "^3.1.1",
     "lodash": "^4.16.1",
-    "moment": "^2.15.2"
+    "moment": "^2.15.2",
+    "ng-mask": "^3.1.1"
   }
 }

DOL.WHD.Section14c.Web/src/modules/app.js

@@ -17,6 +17,7 @@ import ngRoute from 'angular-route';
 import ngSanitize from 'angular-sanitize';
 import vcRecaptcha from 'angular-recaptcha';
 import angularMoment from 'angular-moment';
+import ngMask from 'ng-mask';
 
 // Styles
 import '../styles/main.scss';
@@ -28,7 +29,8 @@ let app = angular.module('14c', [
     ngRoute,
     ngSanitize,
     'vcRecaptcha',
-    'angularMoment'
+    'angularMoment',
+    'ngMask'
 ]);
 
 // Environment config loaded from env.js
@@ -40,6 +42,7 @@ if (window && window.__env) {
 app.constant('_env', env);
 
 // Load Application Components
+require('./constants')(app);
 require('./components')(app);
 require('./pages')(app);
 require('./services')(app);

DOL.WHD.Section14c.Web/src/modules/components/sectionAppInfo/sectionAppInfoController.js

@@ -1,27 +1,31 @@
 'use strict';
 
 module.exports = function(ngModule) {
-    ngModule.controller('sectionAppInfoController', function($scope, stateService, responsesService) {
+    ngModule.controller('sectionAppInfoController', function($scope, stateService, responsesService, validationService) {
         'ngInject';
         'use strict';
 
         $scope.formData = stateService.formData;
+        $scope.validate = validationService.getValidationErrors;
 
-        if(!$scope.formData.establishmentType) $scope.formData.establishmentType = [];
+        if (!$scope.formData.establishmentType) {
+            $scope.formData.establishmentType = [];
+        }
 
         // multiple choice responses
         let questionKeys = [ 'ApplicationType', 'EstablishmentType' ];
         responsesService.getQuestionResponses(questionKeys).then((responses) => { $scope.responses = responses; });
 
-        $scope.toggleEstablishmentType = function(id) {
-            var idx = $scope.formData.establishmentType.indexOf(id);
-            if (idx > -1) {
-                $scope.formData.establishmentType.splice(idx, 1);
+        let vm = this;
+
+        this.toggleEstablishmentType = function(id) {
+            let index = $scope.formData.establishmentType.indexOf(id);
+            if (index > -1) {
+                $scope.formData.establishmentType.splice(index, 1);
             }
             else {
                 $scope.formData.establishmentType.push(id);
             }
         }
-
     });
 }

DOL.WHD.Section14c.Web/src/modules/components/sectionAppInfo/sectionAppInfoTemplate.html

@@ -1,9 +1,10 @@
 <div class="form-page">
     <h2 class="form-section-header">Application Type</h2>
     <hr />
-    <div class="form-question-block">
+    <div class="form-question-block" ng-class="validate('applicationType') ? 'usa-input-error' : ''">
         <div class="form-question-text">What type of application is this?</div>
         <div class="form-question-subtext">If the employer currently holds a valid 14(c) certificate, choose Renewal. If not, choose Initial.</div>
+        <span class="usa-input-error-message" role="alert" ng-show="validate('applicationType')">{{ validate('applicationType') }}</span>
         <fieldset class="usa-fieldset-inputs form-question-answer">
             <ul class="usa-unstyled-list">
                 <li ng-repeat="response in responses.ApplicationType">
@@ -14,53 +15,57 @@ <h2 class="form-section-header">Application Type</h2>
         </fieldset>
     </div>
 
-    <div class="form-question-block">
+    <div class="form-question-block" ng-class="validate('hasPreviousApplication') ? 'usa-input-error' : ''">
         <div class="form-question-text">Has this employer ever applied for a 14(c) certificate?</div>
+        <span class="usa-input-error-message" role="alert" ng-show="validate('hasPreviousApplication')">{{ validate('hasPreviousApplication') }}</span>
         <fieldset class="usa-fieldset-inputs form-question-answer">
             <ul class="usa-unstyled-list">
                 <li>
-                    <input id="hasPreviousApplication_1" type="radio" name="hasPreviousApplication" value="1" ng-model="formData.hasPreviousApplication">
+                    <input id="hasPreviousApplication_1" type="radio" name="hasPreviousApplication" ng-value="true" ng-model="formData.hasPreviousApplication">
                     <label for="hasPreviousApplication_1">Yes</label>
                 </li>
                 <li>
-                    <input id="hasPreviousApplication_0" type="radio" name="hasPreviousApplication" value="0" ng-model="formData.hasPreviousApplication">
+                    <input id="hasPreviousApplication_0" type="radio" name="hasPreviousApplication" ng-value="false" ng-model="formData.hasPreviousApplication">
                     <label for="hasPreviousApplication_0">No</label>
                 </li>
             </ul>
         </fieldset>
     </div>
 
-    <div class="form-question-block">
+    <div class="form-question-block" ng-class="validate('hasPreviousCertificate') ? 'usa-input-error' : ''">
         <div class="form-question-text">Has this employer ever previously held a 14(c) certificate?</div>
+        <span class="usa-input-error-message" role="alert" ng-show="validate('hasPreviousCertificate')">{{ validate('hasPreviousCertificate') }}</span>
         <fieldset class="usa-fieldset-inputs form-question-answer">
             <ul class="usa-unstyled-list">
                 <li>
-                    <input id="hasPreviousCertificate_1" type="radio" name="hasPreviousCertificate" ng-value="1" ng-model="formData.hasPreviousCertificate">
+                    <input id="hasPreviousCertificate_1" type="radio" name="hasPreviousCertificate" ng-value="true" ng-model="formData.hasPreviousCertificate">
                     <label for="hasPreviousCertificate_1">Yes</label>
                 </li>
                 <li>
-                    <input id="hasPreviousCertificate_0" type="radio" name="hasPreviousCertificate" ng-value="0" ng-model="formData.hasPreviousCertificate">
+                    <input id="hasPreviousCertificate_0" type="radio" name="hasPreviousCertificate" ng-value="false" ng-model="formData.hasPreviousCertificate">
                     <label for="hasPreviousCertificate_0">No</label>
                 </li>
             </ul>
         </fieldset>
     </div>
 
-    <div class="form-question-block" ng-show="formData.hasPreviousCertificate === 1">
+    <div class="form-question-block" ng-show="formData.hasPreviousCertificate === true" ng-class="validate('certificateNumber') ? 'usa-input-error' : ''">
         <div class="form-question-text">What is the most recently held certificate number for the main establishment?</div>
+        <span class="usa-input-error-message" role="alert" ng-show="validate('certificateNumber')">{{ validate('certificateNumber') }}</span>
         <div class="form-question-answer">
-            <input id="certificateNumber" name="certificateNumber" type="text" class="sidelabeled certificateno" ng-model="formData.certificateNumber">
+            <input id="certificateNumber" name="certificateNumber" type="text" class="sidelabeled certificateno" mask="99-99999-A-999" ng-model="formData.certificateNumber">
             <label class="example">Example: 12-34567-H-890</label>
         </div>
     </div>
 
-    <div class="form-question-block">
+    <div class="form-question-block" ng-class="validate('establishmentType') ? 'usa-input-error' : ''">
         <div class="form-question-text">What type of establishment(s) is this request for authority to employ workers with disabilities for?</div>
         <div class="form-question-subtext">Select all that apply</div>
+        <span class="usa-input-error-message" role="alert" ng-show="validate('establishmentType')">{{ validate('establishmentType') }}</span>
         <fieldset class="usa-fieldset-inputs form-question-answer">
             <ul class="usa-unstyled-list">
                 <li ng-repeat="response in responses.EstablishmentType">
-                    <input id="establishmentType_{{ response.id }}" type="checkbox" name="stablishmentType_{{ response.id }}" ng-value="response.id" ng-checked="formData.establishmentType.indexOf(response.id) > -1" ng-click="toggleEstablishmentType(response.id)">
+                    <input id="establishmentType_{{ response.id }}" type="checkbox" name="establishmentType" ng-value="response.id" ng-checked="formData.establishmentType.indexOf(response.id) > -1" ng-click="vm.toggleEstablishmentType(response.id)">
                     <label for="establishmentType_{{ response.id }}">{{ response.display }}</label>
                     <div class="underlabel checkbox-indent">{{ response.subDisplay }}</div>
                 </li>
@@ -72,32 +77,36 @@ <h2 class="form-section-header">Application Contact Person</h2>
     <div class="form-question-subtext">This should be a person who can best answer questions concerning information contained on this application.</div>
     <hr />
 
-    <div class="form-question-block">
+    <div class="form-question-block" ng-class="validate('contactName') ? 'usa-input-error' : ''">
         <div class="form-question-answer">
             <label for="contactName">Full Name</label>
+            <span class="usa-input-error-message" role="alert" ng-show="validate('contactName')">{{ validate('contactName') }}</span>
             <input id="contactName" name="contactName" type="text" ng-model="formData.contactName"></input>
         </div>
     </div>
 
-    <div class="form-question-block">
+    <div class="form-question-block" ng-class="validate('contactPhone') ? 'usa-input-error' : ''">
         <div class="form-question-answer">
             <label for="contactPhone">Telephone Number</label>
-            <input id="contactPhone" name="contactPhone" type="tel" ng-model="formData.contactPhone" class="sidelabeled phoneno"></input>
+            <span class="usa-input-error-message" role="alert" ng-show="validate('contactPhone')">{{ validate('contactPhone') }}</span>
+            <input id="contactPhone" name="contactPhone" type="tel" mask="999-999-9999" ng-model="formData.contactPhone" class="sidelabeled phoneno"></input>
             <label class="example">Example: 123-456-7890</label>
         </div>
     </div>
 
-    <div class="form-question-block">
+    <div class="form-question-block" ng-class="validate('contactFax') ? 'usa-input-error' : ''">
         <div class="form-question-answer">
             <label for="contactFax">Fax Number</label>
-            <input id="contactFax" name="contactFax" type="tel" ng-model="formData.contactFax" class="sidelabeled phoneno"></input>
+            <span class="usa-input-error-message" role="alert" ng-show="validate('contactFax')">{{ validate('contactFax') }}</span>
+            <input id="contactFax" name="contactFax" type="tel" mask="999-999-9999" ng-model="formData.contactFax" class="sidelabeled phoneno"></input>
             <label class="example">Example: 123-456-7890</label>
         </div>
     </div>
 
-    <div class="form-question-block">
+    <div class="form-question-block" ng-class="validate('contactEmail') ? 'usa-input-error' : ''">
         <div class="form-question-answer">
             <label for="contactEmail">Email Address</label>
+            <span class="usa-input-error-message" role="alert" ng-show="validate('contactEmail')">{{ validate('contactEmail') }}</span>
             <input id="contactEmail" name="contactEmail" type="email" ng-model="formData.contactEmail" class="sidelabeled email"></input>
             <label class="example">Example: contact.name@company.com</label>
         </div>

DOL.WHD.Section14c.Web/src/modules/components/sectionEmployer/sectionEmployerController.js

@@ -1,15 +1,29 @@
 'use strict';
 
 module.exports = function(ngModule) {
-    ngModule.controller('sectionEmployerController', function($scope, stateService, apiService, responsesService) {
+    ngModule.controller('sectionEmployerController', function($scope, stateService, apiService, responsesService, validationService) {
         'ngInject';
         'use strict';
 
         $scope.formData = stateService.formData;
+        $scope.validate = validationService.getValidationErrors;
 
-
-        if(!$scope.formData.employerInfo) {
-            $scope.formData.employerInfo = { providingFacilitiesDeductionType: [] };
+        if (!$scope.formData.employer) {
+            $scope.formData.employer = {};
+        }
+
+        if (!$scope.formData.employer.numSubminimalWageWorkers) {
+            $scope.formData.employer.numSubminimalWageWorkers = {
+                total: 0,
+                workCenter: 0,
+                patientWorkers: 0,
+                swep: 0,
+                businessEstablishment: 0
+            };
+        }
+
+        if (!$scope.formData.employer.providingFacilitiesDeductionTypeId) {
+            $scope.formData.employer.providingFacilitiesDeductionTypeId = [];
         }
 
         // multiple choice responses
@@ -19,20 +33,30 @@ module.exports = function(ngModule) {
         var vm = this;
         vm.showAllHelp = false;
         vm.attachmentApiURL = apiService.attachmentApiURL + stateService.ein;
-        vm.access_token = stateService.access_token;    
+        vm.access_token = stateService.access_token;
 
         this.onHasTradeNameChange = function() {
-            $scope.formData.employerInfo.tradeName = '';
+            $scope.formData.employer.tradeName = '';
         }
 
         this.onHasLegalNameChange = function() {
-            $scope.formData.employerInfo.priorLegalName = '';
+            $scope.formData.employer.priorLegalName = '';
+        }
+
+        this.toggleDeductionType = function(id) {
+            let index = $scope.formData.employer.providingFacilitiesDeductionTypeId.indexOf(id);
+            if (index > -1) {
+                $scope.formData.employer.providingFacilitiesDeductionTypeId.splice(index, 1);
+            }
+            else {
+                $scope.formData.employer.providingFacilitiesDeductionTypeId.push(id);
+            }
         }
 
         this.onSCAAttachmentSelected = function(fileinput) {
             if(fileinput.files.length > 0){
                 apiService.uploadAttachment(stateService.access_token, stateService.ein, fileinput.files[0]).then(function (result){
-                    $scope.formData.employerInfo.SCAAttachment = result.data[0];
+                    $scope.formData.employer.SCAAttachment = result.data[0];
                     fileinput.value = '';
                 }, function(error){
                     //TODO: Display error
@@ -43,21 +67,11 @@ module.exports = function(ngModule) {
 
         this.deleteSCAAttachment = function(id){
             apiService.deleteAttachment(stateService.access_token, stateService.ein, id).then(function (result){
-               $scope.formData.employerInfo.SCAAttachment = undefined;
+               $scope.formData.employer.SCAAttachment = undefined;
             }, function(error){
                 //TODO: Display error
-                $scope.formData.employerInfo.SCAAttachment = undefined;
+                $scope.formData.employer.SCAAttachment = undefined;
             })
-        }      
-
-        this.toggleProvidingFacilitiesDeductionType = function(id) {
-            var idx = $scope.formData.employerInfo.providingFacilitiesDeductionType.indexOf(id);
-            if (idx > -1) {
-                $scope.formData.employerInfo.providingFacilitiesDeductionType.splice(idx, 1);
-            }
-            else {
-                $scope.formData.employerInfo.providingFacilitiesDeductionType.push(id);
-            }
         }
   });
 }