Merge pull request #93 from AppliedIS/feature-datecomponent

add a date component
ais-open · Nov 2, 2016 · 77c0f34 · 77c0f34
2 parents 5bf9655 + c21c515
commit 77c0f34
Show file tree

Hide file tree

Showing 7 changed files with 89 additions and 17 deletions.
diff --git a/DOL.WHD.Section14c.Web/src/modules/components/dateField/dateFieldController.js b/DOL.WHD.Section14c.Web/src/modules/components/dateField/dateFieldController.js
@@ -0,0 +1,35 @@
+'use strict';
+import * as _ from 'lodash';
+
+module.exports = function(ngModule) {
+    ngModule.controller('dateFieldController', function($scope, moment) {
+        'ngInject';
+        'use strict';
+
+        var vm = this;
+
+        function updateLocalScope() {
+            if(moment.isDate($scope.dateVal)) {
+                const dateValMoment = moment($scope.dateVal);
+                // parse out values
+                vm.month = dateValMoment.month() + 1; // month is zero-based
+                vm.day = dateValMoment.date();
+                vm.year = dateValMoment.year();
+            }
+        }
+
+        $scope.$watch('dateVal', function(newValue, oldValue) {
+            if(moment.isDate(newValue) && !moment(newValue).isSame(oldValue)) {
+                updateLocalScope();
+            }
+        });
+
+        $scope.$watchGroup(['vm.year', 'vm.month', 'vm.day'], function(newValues, oldValues) {
+            if(_.difference(newValues, oldValues).length > 0 && vm.year && vm.month && vm.day) {
+                $scope.dateVal = new Date(vm.year, vm. month - 1, vm.day);
+            }
+        });
+
+        updateLocalScope();
+    });
+}
diff --git a/DOL.WHD.Section14c.Web/src/modules/components/dateField/dateFieldDirective.js b/DOL.WHD.Section14c.Web/src/modules/components/dateField/dateFieldDirective.js
@@ -0,0 +1,18 @@
+'use strict';
+
+module.exports = function(ngModule) {
+  ngModule.directive('dateField', function() {
+
+      'use strict';
+
+      return {
+          restrict: 'EA',
+          template: require('./dateFieldTemplate.html'),
+          controller: 'dateFieldController',
+          scope: {
+              dateVal: '='
+          },
+          controllerAs: 'vm'
+      };
+  });
+}
diff --git a/DOL.WHD.Section14c.Web/src/modules/components/dateField/dateFieldTemplate.html b/DOL.WHD.Section14c.Web/src/modules/components/dateField/dateFieldTemplate.html
@@ -0,0 +1,14 @@
+<div class="usa-date-of-birth">
+    <div class="usa-form-group usa-form-group-month">
+    <label for="{{::$id}}_Month">Month</label>
+    <input class="usa-input-inline" aria-describedby="dobHint" class="usa-form-control" id="{{::$id}}_Month" name="{{::$id}}_Month" pattern="0?[1-9]|1[012]" type="number" min="1" max="12" value="" ng-model="vm.month">
+    </div>
+    <div class="usa-form-group usa-form-group-day">
+    <label for="{{::$id}}_Day">Day</label>
+    <input class="usa-input-inline" aria-describedby="dobHint" class="usa-form-control" id="{{::$id}}_Day" name="{{::$id}}_Day" pattern="0?[1-9]|1[0-9]|2[0-9]|3[01]" type="number" min="1" max="31" value="" ng-model="vm.day">
+    </div>
+    <div class="usa-form-group usa-form-group-year">
+    <label for="{{::$id}}_Year">Year</label>
+    <input class="usa-input-inline" aria-describedby="dobHint" class="usa-form-control" id="{{::$id}}_Year" name="{{::$id}}_Year" pattern="[0-9]{4}" type="number" min="1900" max="3000" value="" ng-model="vm.year">
+    </div>
+</div>
diff --git a/DOL.WHD.Section14c.Web/src/modules/components/dateField/index.js b/DOL.WHD.Section14c.Web/src/modules/components/dateField/index.js
@@ -0,0 +1,6 @@
+'use strict';
+
+module.exports = function(ngModule) {
+    require('./dateFieldController')(ngModule);
+    require('./dateFieldDirective')(ngModule);
+};
diff --git a/DOL.WHD.Section14c.Web/src/modules/components/index.js b/DOL.WHD.Section14c.Web/src/modules/components/index.js
@@ -3,6 +3,7 @@
 module.exports = function(ngModule) {
     require('./accountManagementControls')(ngModule);
     require('./changePasswordForm')(ngModule);
+    require('./dateField')(ngModule);
     require('./formFooterControls')(ngModule);
     require('./formSection')(ngModule);
     require('./mainHeaderControl')(ngModule);

diff --git a/DOL.WHD.Section14c.Web/src/modules/components/sectionEmployer/sectionEmployerTemplate.html b/DOL.WHD.Section14c.Web/src/modules/components/sectionEmployer/sectionEmployerTemplate.html
@@ -321,27 +321,14 @@ <h2 class="form-section-header">Employer Information</h2>
     </div>
     <h2 class="form-section-header">Number of Workers With Disabilities</h2>
     <hr />
-    <div class="form-question-block" ng-class="validate(['employer.fiscalQuarterEndDate.month', 'employer.fiscalQuarterEndDate.day', 'employer.fiscalQuarterEndDate.year']) ? 'usa-input-error' : ''">
+    <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?
             <helplink></helplink>
             <helptext>Provide the ending date of the employer’s most recently completed three-month fiscal quarter. For example, if the fiscal year begins on January 1, provide the date of the most recently completed quarter (March 31, June 30, September 30, or December 31).</helptext>
         </div>
-        <span class="usa-input-error-message" role="alert" ng-show="validate(['employer.fiscalQuarterEndDate.month', 'employer.fiscalQuarterEndDate.day', 'employer.fiscalQuarterEndDate.year'])">{{ validate(['employer.fiscalQuarterEndDate.month', 'employer.fiscalQuarterEndDate.day', 'employer.fiscalQuarterEndDate.year']) }}</span>
+        <span class="usa-input-error-message" role="alert" ng-show="validate('employer.fiscalQuarterEndDate')">{{ validate('employer.fiscalQuarterEndDate') }}</span>
         <fieldset>
-            <div class="usa-date-of-birth">
-                <div class="usa-form-group usa-form-group-month">
-                <label for="fiscalQuarterEndMonth">Month</label>
-                <input class="usa-input-inline" aria-describedby="dobHint" class="usa-form-control" id="fiscalQuarterEndMonth" name="fiscalQuarterEndMonth" pattern="0?[1-9]|1[012]" type="number" min="1" max="12" value="" ng-model="formData.employer.fiscalQuarterEndDate.month">
-                </div>
-                <div class="usa-form-group usa-form-group-day">
-                <label for="fiscalQuarterEndDay">Day</label>
-                <input class="usa-input-inline" aria-describedby="dobHint" class="usa-form-control" id="fiscalQuarterEndDay" name="fiscalQuarterEndDay" pattern="0?[1-9]|1[0-9]|2[0-9]|3[01]" type="number" min="1" max="31" value="" ng-model="formData.employer.fiscalQuarterEndDate.day">
-                </div>
-                <div class="usa-form-group usa-form-group-year">
-                <label for="fiscalQuarterEndYear">Year</label>
-                <input class="usa-input-inline" aria-describedby="dobHint" class="usa-form-control" id="fiscalQuarterEndYear" name="fiscalQuarterEndYear" pattern="[0-9]{4}" type="number" min="1900" max="3000" value="" ng-model="formData.employer.fiscalQuarterEndDate.year">
-                </div>
-            </div>
+            <date-field date-val="formData.employer.fiscalQuarterEndDate" />
             <label class="example">Example: 04 30 2016</label>
         </fieldset>
     </div>

diff --git a/DOL.WHD.Section14c.Web/src/modules/services/validationService.js b/DOL.WHD.Section14c.Web/src/modules/services/validationService.js
@@ -143,6 +143,17 @@ module.exports = function(ngModule) {
             this.checkRequiredNumber(yearPath, "Please enter a valid year", 1900);
         }
 
+        this.checkRequiredDateComponent = function(propPath) {
+            let val = this.checkRequiredValue(propPath);
+            if(!this.validateDate(val)) {
+                this.setValidationError(propPath, "Please enter a valid date");
+            }
+        }
+
+        this.validateDate = function(date) {
+            return Object.prototype.toString.call(date) === "[object Date]" && ! isNaN(date.getTime());
+        }
+
         this.validateZipCode = function(zip) {
             let re = /^[0-9]{5}(?:-[0-9]{4})?$/i;
             let match = re.exec(zip);
@@ -238,7 +249,7 @@ module.exports = function(ngModule) {
             }
 
             this.checkRequiredMultipleChoice("employer.isEducationalAgency");
-            this.checkRequiredDate("employer.fiscalQuarterEndDate.month", "employer.fiscalQuarterEndDate.day", "employer.fiscalQuarterEndDate.year");
+            this.checkRequiredDateComponent("employer.fiscalQuarterEndDate");
             this.checkRequiredNumber("employer.numSubminimalWageWorkers.total", undefined, 0);
             this.checkRequiredNumber("employer.numSubminimalWageWorkers.workCenter", undefined, 0);
             this.checkRequiredNumber("employer.numSubminimalWageWorkers.patientWorkers", undefined, 0);