Merge pull request #96 from AppliedIS/feature-valsub

More validation work. Implemented Review and Submit page.

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

@@ -89,10 +89,6 @@ app.config(function($routeProvider, $compileProvider) {
 });
 
 app.run(function($rootScope, $location) {
-    $rootScope.loadImage = function(image) {
-        return require('../images/' + image);
-    };
-
     //TODO: remove dev_flag check
     if (!env.dev_flag === true) {
         // watch for route changes and redirect non-public routes if not logged in

DOL.WHD.Section14c.Web/src/modules/components/formFooterControls/formFooterControlsController.js

@@ -1,7 +1,7 @@
 'use strict';
 
 module.exports = function(ngModule) {
-    ngModule.controller('formFooterControlsController', function($scope, $location, $route, navService, autoSaveService) {
+    ngModule.controller('formFooterControlsController', function($scope, $location, $route, navService, autoSaveService, validationService) {
         'ngInject';
         'use strict';
 
@@ -45,9 +45,6 @@ module.exports = function(ngModule) {
             if (this.hasNext) {
                 navService.goNext();
             }
-            else {
-                //TODO: do submit
-            }
         }
 
         this.onBackClick = function() {

DOL.WHD.Section14c.Web/src/modules/components/formFooterControls/formFooterControlsTemplate.html

@@ -1,3 +1,3 @@
-<div class="form-footer-controls">
+<div class="form-footer-controls" ng-show="vm.hasNext">
     <button class="back-button" ng-show="vm.hasBack" ng-click="vm.onBackClick()">{{ vm.backLabel }}</button><span class="pull-right"><button class="save-button" ng-click="vm.onSaveClick()">Save &amp; Continue Later</button><button class="next-button" ng-click="vm.onNextClick()">{{ vm.nextLabel }}</button></span>
 </div>

DOL.WHD.Section14c.Web/src/modules/components/formSection/formSectionDirective.js

@@ -21,7 +21,6 @@ module.exports = function(ngModule) {
             replace: true,
             link: function(scope, element, attrs) {
                 element.bind('click', function() {
-                    console.log("clicked");
                     element.next().toggleClass('show');
                 })
             }

DOL.WHD.Section14c.Web/src/modules/components/index.js

@@ -12,9 +12,10 @@ module.exports = function(ngModule) {
     require('./sectionAppInfo')(ngModule);
     require('./sectionAssurances')(ngModule);
     require('./sectionEmployer')(ngModule);
-    require('./sectionWorkSites')(ngModule);
+    require('./sectionReview')(ngModule);
     require('./sectionWageData')(ngModule);
     require('./sectionWioa')(ngModule);
+    require('./sectionWorkSites')(ngModule);
     require('./userLoginForm')(ngModule);
     require('./userRegistrationForm')(ngModule);
 };

DOL.WHD.Section14c.Web/src/modules/components/mainHeaderControl/mainHeaderControlController.js

@@ -1,16 +1,13 @@
 'use strict';
 
 module.exports = function(ngModule) {
-    ngModule.controller('mainHeaderControlController', function($scope, $rootScope, $location, stateService, apiService, autoSaveService) {
+    ngModule.controller('mainHeaderControlController', function($scope, $rootScope, $location, assetService, stateService, apiService, autoSaveService) {
         'ngInject';
         'use strict';
 
         var vm = this;
         vm.stateService = stateService;
-
-        // Manually passing loadImage function through since scope is redefined
-        // in the directive
-        $scope.loadImage = $rootScope.loadImage;
+        vm.assetService = assetService;
 
         this.userClick = function() {
             $location.path("/");

DOL.WHD.Section14c.Web/src/modules/components/mainHeaderControl/mainHeaderControlTemplate.html

@@ -5,13 +5,13 @@ <h2>OMB NO: 1235-0001</h2>
         <h2>REVXX/20XX</h2>
     </div>
     <div class="header-logo">
-        <img ng-src="{{ loadImage('dol_seal.svg') }}" />
-        <img ng-src="{{ loadImage('whd_logo.jpg') }}" />
+        <img ng-src="{{ vm.assetService.loadImage('dol_seal.svg') }}" />
+        <img ng-src="{{ vm.assetService.loadImage('whd_logo.jpg') }}" />
     </div>
 </div>
 <div class="header-status-bar" ng-show="vm.stateService.user.email">
     <p class="pull-left">EIN: <span class="header-ein">{{ vm.stateService.ein ? vm.stateService.ein : "XX-XXXXXXX" }}</span></p>
-    
+
     <p class="pull-right"><a href="" ng-click="vm.userClick()">{{ vm.stateService.user.email ? vm.stateService.user.email : "Username" }}</a> | <a href="" ng-click="vm.saveClick()">Save Work & Sign Out</a></p>
 </div>
 <main-navigation-control></main-navigation-control>
@@ -21,4 +21,4 @@ <h2>REVXX/20XX</h2>
 <p>
 <p class="pull-right" ng-show="vm.stateService.formData.lastSaved === 0">
     Error Saving Form
-<p>
+<p>

DOL.WHD.Section14c.Web/src/modules/components/mainNavigationControl/mainNavigationControlTemplate.html

@@ -5,4 +5,5 @@
     <div class="nav-button {{ vm.current === 'wage-data' ? 'active' : '' }}" data-sectionid="wage-data" ng-click="vm.onNavClick($event)">Wage Data</div>
     <div class="nav-button {{ vm.current === 'work-sites' ? 'active' : '' }}" data-sectionid="work-sites" ng-click="vm.onNavClick($event)">Work Sites &amp; Employees</div>
     <div class="nav-button {{ vm.current === 'wioa' ? 'active' : '' }}" data-sectionid="wioa" ng-click="vm.onNavClick($event)">WIOA</div>
+    <div class="nav-button {{ vm.current === 'review' ? 'active' : '' }}" data-sectionid="review" ng-click="vm.onNavClick($event)" ng-show="vm.stateService.inReview">Review &amp; Submit</div>
 </div>

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

@@ -1,5 +1,5 @@
 <div class="form-page">
-    <h2 class="form-section-header">Application Type</h2>
+    <h3>Application Type</h3>
     <hr />
     <div class="form-question-block" ng-class="validate('applicationType') ? 'usa-input-error' : ''">
         <div class="form-question-text">What type of application is this?</div>
@@ -73,7 +73,7 @@ <h2 class="form-section-header">Application Type</h2>
         </fieldset>
     </div>
 
-    <h2 class="form-section-header">Application Contact Person</h2>
+    <h3>Application Contact Person</h3>
     <div class="form-question-subtext">This should be a person who can best answer questions concerning information contained on this application.</div>
     <hr />
 

DOL.WHD.Section14c.Web/src/modules/components/sectionEmployer/sectionEmployerTemplate.html

@@ -1,6 +1,6 @@
 <a href="" ng-click="vm.showAllHelp = !vm.showAllHelp">Show Help for All Items</a>
 <div class="form-page">
-    <h2 class="form-section-header">Employer Information</h2>
+    <h3>Employer Information</h3>
     <hr />
     <div class="form-question-block">
         <div class="form-question-text">Legal Name of Employer</div>
@@ -319,7 +319,7 @@ <h2 class="form-section-header">Employer Information</h2>
             </ul>
         </fieldset>
     </div>
-    <h2 class="form-section-header">Number of Workers With Disabilities</h2>
+    <h3>Number of Workers With Disabilities</h3>
     <hr />
     <div class="form-question-block" ng-class="validate('employer.fiscalQuarterEndDate') ? 'usa-input-error' : ''">
         <div class="form-question-text">When did the Employer's most recently completed fiscal quarter end?
@@ -370,7 +370,7 @@ <h2 class="form-section-header">Number of Workers With Disabilities</h2>
             </div>
         </div>
     </div>
-    <h2 class="form-section-header">Government Contracts</h2>
+    <h3>Government Contracts</h3>
     <hr />
     <div class="form-question-block" ng-class="validate('employer.pca') ? 'usa-input-error' : ''">
         <div class="form-question-text">Does this employer manufacture items for the Federal Government under the Walsh-Healey Public Contracts Act (PCA)?</div>
@@ -434,7 +434,7 @@ <h2 class="form-section-header">Government Contracts</h2>
             </ul>
         </fieldset>
     </div>
-    <h2 class="form-section-header">Label for Section?</h2>
+    <h3>Label for Section?</h3>
     <hr />
     <div class="form-question-block" ng-class="validate('employer.representativePayee') ? 'usa-input-error' : ''">
         <div class="form-question-text">Was the employer a representative payee Social Security Benefits during the most recently completed fiscal quarter?</div>

DOL.WHD.Section14c.Web/src/modules/components/sectionReview/index.js

@@ -0,0 +1,6 @@
+'use strict';
+
+module.exports = function(ngModule) {
+    require('./sectionReviewController')(ngModule);
+    require('./sectionReviewDirective')(ngModule);
+};

DOL.WHD.Section14c.Web/src/modules/components/sectionReview/sectionReviewController.js

@@ -0,0 +1,19 @@
+'use strict';
+
+module.exports = function(ngModule) {
+    ngModule.controller('sectionReviewController', function($scope, apiService, stateService, navService, validationService) {
+        'ngInject';
+        'use strict';
+
+        stateService.inReview = true;
+        $scope.isValid = validationService.validateForm();
+        $scope.validation = $scope.isValid ? {} : validationService.getValidationErrors();
+        $scope.navService = navService;
+
+        let vm = this;
+
+        this.onSubmit = function() {
+            //TODO: submit the application
+        }
+    });
+}

DOL.WHD.Section14c.Web/src/modules/components/sectionReview/sectionReviewDirective.js

@@ -0,0 +1,28 @@
+'use strict';
+
+module.exports = function(ngModule) {
+  ngModule.directive('sectionReview', function() {
+
+      'use strict';
+
+      return {
+          restrict: 'EA',
+          template: require('./sectionReviewTemplate.html'),
+          controller: 'sectionReviewController',
+          scope: { },
+          controllerAs: 'vm'
+      };
+  });
+
+  ngModule.directive('reviewbar', function() {
+      'use strict'
+
+      return {
+          template: '<div class="reviewbar {{ errorstate ? \'error\' : \'\'}}"><div class="reviewbar-container"><div class="reviewbar-bar"></div><div class="reviewbar-circle"></div></div></div>',
+          replace: true,
+          scope: {
+              errorstate: '@'
+          }
+      }
+  });
+}

DOL.WHD.Section14c.Web/src/modules/components/sectionReview/sectionReviewTemplate.html

@@ -0,0 +1,69 @@
+<div class="form-page-full">
+    <h2>Review & Submit</h2>
+    <p>We've checked your responses from each section to make sure there were no errors or missing information before submission.</p>
+    <p>Below is a summary of the results:</p>
+
+    <div class="section-results">
+        <h3>Application Info</h3>
+        <reviewbar errorstate="{{ validation.__appinfo }}"></reviewbar>
+        <div ng-hide="validation.__appinfo">
+            <a href="" ng-click="navService.gotoSection('app-info')">Review Application Info</a>
+        </div>
+        <button ng-click="navService.gotoSection('app-info')" ng-show="validation.__appinfo">Edit Responses</button>
+    </div>
+
+    <hr>
+
+    <div class="section-results">
+        <h3>Employer</h3>
+        <reviewbar errorstate="{{ validation.__employer }}"></reviewbar>
+        <div ng-hide="validation.__employer">
+            <a href="" ng-click="navService.gotoSection('employer')">Review Application Info</a>
+        </div>
+        <button ng-click="navService.gotoSection('employer')" ng-show="validation.__employer">Edit Responses</button>
+    </div>
+
+    <hr>
+
+    <div class="section-results">
+        <h3>Wage Data</h3>
+        <reviewbar errorstate="{{ validation.__wagedata }}"></reviewbar>
+        <div ng-hide="validation.__wagedata">
+            <a href="" ng-click="navService.gotoSection('wage-data')">Review Application Info</a>
+        </div>
+        <button ng-click="navService.gotoSection('wage-data')" ng-show="validation.__wagedata">Edit Responses</button>
+    </div>
+
+    <hr>
+
+    <div class="section-results">
+        <h3>Work Sites &amp; Employees</h3>
+        <reviewbar errorstate="{{ validation.__worksites }}"></reviewbar>
+        <div ng-hide="validation.__worksites">
+            <a href="" ng-click="navService.gotoSection('work-sites')">Review Application Info</a>
+        </div>
+        <button ng-click="navService.gotoSection('work-sites')" ng-show="validation.__worksites">Edit Responses</button>
+    </div>
+
+    <hr>
+
+    <div class="section-results">
+        <h3>WIOA</h3>
+        <reviewbar errorstate="{{ validation.__wioa }}"></reviewbar>
+        <div ng-hide="validation.__wioa">
+            <a href="" ng-click="navService.gotoSection('wioa')">Review Application Info</a>
+        </div>
+        <button ng-click="navService.gotoSection('wioa')" ng-show="validation.__wioa">Edit Responses</button>
+    </div>
+
+    <div class="clearer submit-button">
+        <button class="pull-right" ng-class="$scope.isValid ? '' : 'disabled'" ng-click="vm.onSubmit()" ng-disabled="!$scope.isValid">Submit 14(c) Certificate Application</button>
+    </div>
+
+    <div>
+        <h3>Public Burden Statement</h3>
+        <hr>
+        <p>According to the Paperwork Reduction Act of 1995, no persons are required to respond to a collection of information unless such collection displays a valid OMB control number. The Department of Labor estimates that the public reporting burden for this collection of information will average 50 minutes per response for the initial applicant and 75 minutes per response for the renewal applicant, including time for reviewing instructions, searching existing data sources, gathering and maintaining the data needed, and completing and reviewing the collection of information. The obligation to respond to this collection is mandatory in order to obtain the authority to pay less than the applicable minimum wage. 29 C.F.R. §§ 525.7-9, 12-13. Send comments regarding the burden estimate or any other aspect of this collection of information, including suggestions for reducing this burden, to the Administrator, Wage and Hour Division, U.S. Department of Labor, Room S-3502, 200 Constitution Avenue, N.W., Washington, DC 20210 and reference the OMB Control Number.</p>
+    </div>
+
+</div>

DOL.WHD.Section14c.Web/src/modules/components/sectionWioa/sectionWioaTemplate.html

@@ -1,5 +1,5 @@
 <div class="form-page">
-    <h2 class="form-section-header">Workforce Innovation and Opportunity Act (WIOA)</h2>
+    <h3>Workforce Innovation and Opportunity Act (WIOA)</h3>
     <hr />
     <p>WIOA requirements are effective July 22, 2016. <a href ng-click="vm.toggleLearnMore()">Learn More</a></p>
     <div ng-show="showWIOAReqs" class="em-block">

DOL.WHD.Section14c.Web/src/modules/pages/appReviewPageController.js

@@ -0,0 +1,10 @@
+'use strict';
+
+module.exports = function(ngModule) {
+    ngModule.controller('appReviewPageController', function($scope, apiService, stateService, validationService) {
+        'ngInject';
+        'use strict';
+
+        $scope.validation = validationService.validateForm() ? undefined : validationService.getValidationErrors();
+    });
+}

DOL.WHD.Section14c.Web/src/modules/services/assetService.js

@@ -0,0 +1,11 @@
+'use strict';
+
+module.exports = function(ngModule) {
+    ngModule.service('assetService', function() {
+        'use strict';
+
+        this.loadImage = function(image) {
+            return require('../../images/' + image);
+        }
+    });
+}

DOL.WHD.Section14c.Web/src/modules/services/index.js

@@ -2,6 +2,7 @@
 
 module.exports = function(ngModule) {
   require('./apiService')(ngModule);
+  require('./assetService')(ngModule);
   require('./responsesService')(ngModule);
   require('./stateService')(ngModule);
   require('./navService')(ngModule);

DOL.WHD.Section14c.Web/src/modules/services/navService.js

@@ -5,7 +5,7 @@ module.exports = function(ngModule) {
         'ngInject';
         'use strict';
 
-        const sectionArray = ['assurances', 'app-info', 'employer', 'wage-data', 'work-sites', 'wioa'];
+        const sectionArray = ['assurances', 'app-info', 'employer', 'wage-data', 'work-sites', 'wioa', 'review'];
 
         let state = {
             backStack: []