Merge pull request #97 from AppliedIS/feature-attachmentcomponent

add component for uploading attachments
ais-open · Nov 3, 2016 · 28c223b · 28c223b
2 parents 04bfb37 + 3dcc7a9
commit 28c223b
Show file tree

Hide file tree

Showing 8 changed files with 74 additions and 34 deletions.
diff --git a/DOL.WHD.Section14c.Web/src/modules/components/attachmentField/attachmentFieldController.js b/DOL.WHD.Section14c.Web/src/modules/components/attachmentField/attachmentFieldController.js
@@ -0,0 +1,36 @@
+'use strict';
+
+module.exports = function(ngModule) {
+    ngModule.controller('attachmentFieldController', function($scope, apiService, stateService) {
+        'ngInject';
+        'use strict';
+
+        var vm = this;
+        vm.attachmentApiURL = apiService.attachmentApiURL + stateService.ein;
+        vm.access_token = stateService.access_token;
+
+        this.onAttachmentSelected = function(fileinput) {
+            if(fileinput.files.length > 0){
+                apiService.uploadAttachment(stateService.access_token, stateService.ein, fileinput.files[0]).then(function (result){
+                    $scope.attachmentId = result.data[0].id;
+                    $scope.attachmentName = result.data[0].originalFileName;
+                    fileinput.value = '';
+                }, function(error){
+                    //TODO: Display error
+                    fileinput.value = '';
+                })
+            }
+        };
+
+        this.deleteAttachment = function(id){
+            apiService.deleteAttachment(stateService.access_token, stateService.ein, id).then(function (result){
+               $scope.attachmentId = undefined;
+               $scope.attachmentName = undefined;
+            }, function(error){
+                //TODO: Display error
+                $scope.attachmentId = undefined;
+                $scope.attachmentName = undefined;
+            })
+        };
+    });
+}
diff --git a/DOL.WHD.Section14c.Web/src/modules/components/attachmentField/attachmentFieldDirective.js b/DOL.WHD.Section14c.Web/src/modules/components/attachmentField/attachmentFieldDirective.js
@@ -0,0 +1,19 @@
+'use strict';
+
+module.exports = function(ngModule) {
+  ngModule.directive('attachmentField', function() {
+
+      'use strict';
+
+      return {
+          restrict: 'EA',
+          template: require('./attachmentFieldTemplate.html'),
+          controller: 'attachmentFieldController',
+          scope: {
+              attachmentId: '=',
+              attachmentName: '='
+          },
+          controllerAs: 'vm'
+      };
+  });
+}
diff --git a/DOL.WHD.Section14c.Web/src/modules/components/attachmentField/attachmentFieldTemplate.html b/DOL.WHD.Section14c.Web/src/modules/components/attachmentField/attachmentFieldTemplate.html
@@ -0,0 +1,9 @@
+<div ng-show="attachmentId == undefined">
+    <input id="{{::$id}}_FileUpload" class="upload-file-input" type="file" ng-hide="true" onchange="angular.element(this).scope().vm.onAttachmentSelected(this)" accept=".doc,.docx,.xls,.xlsx,.pdf,.jpg,.jpeg,.png">
+    <label for="{{::$id}}_FileUpload" class="upload-label usa-button-primary">Browse</label><input id="{{::$id}}" name="{{::$id}}" class="upload-input" type="text" disabled>
+    <label class="underlabel" for="{{::$id}}">File types accepted: PDF, Word, Excel, JPG, PNG</label>
+</div>
+<div ng-show="attachmentId != undefined">
+    <a ng-href="{{vm.attachmentApiURL}}/{{scaAttachmentId}}?access_token={{vm.access_token}}">{{attachmentName}}</a>
+    <button class="usa-button-secondary" ng-click="vm.deleteAttachment(attachmentId)">Delete</button>
+</div>
diff --git a/DOL.WHD.Section14c.Web/src/modules/components/attachmentField/index.js b/DOL.WHD.Section14c.Web/src/modules/components/attachmentField/index.js
@@ -0,0 +1,6 @@
+'use strict';
+
+module.exports = function(ngModule) {
+    require('./attachmentFieldController')(ngModule);
+    require('./attachmentFieldDirective')(ngModule);
+};
diff --git a/DOL.WHD.Section14c.Web/src/modules/components/index.js b/DOL.WHD.Section14c.Web/src/modules/components/index.js
@@ -2,6 +2,7 @@
 
 module.exports = function(ngModule) {
     require('./accountManagementControls')(ngModule);
+    require('./attachmentField')(ngModule);
     require('./changePasswordForm')(ngModule);
     require('./dateField')(ngModule);
     require('./formFooterControls')(ngModule);

diff --git a/DOL.WHD.Section14c.Web/src/modules/components/sectionEmployer/sectionEmployerController.js b/DOL.WHD.Section14c.Web/src/modules/components/sectionEmployer/sectionEmployerController.js
@@ -32,8 +32,6 @@ module.exports = function(ngModule) {
 
         var vm = this;
         vm.showAllHelp = false;
-        vm.attachmentApiURL = apiService.attachmentApiURL + stateService.ein;
-        vm.access_token = stateService.access_token;
 
         this.onHasTradeNameChange = function() {
             $scope.formData.employer.tradeName = '';
@@ -52,26 +50,5 @@ module.exports = function(ngModule) {
                 $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.employer.SCAAttachment = result.data[0];
-                    fileinput.value = '';
-                }, function(error){
-                    //TODO: Display error
-                    fileinput.value = '';
-                })
-            }
-        }
-
-        this.deleteSCAAttachment = function(id){
-            apiService.deleteAttachment(stateService.access_token, stateService.ein, id).then(function (result){
-               $scope.formData.employer.SCAAttachment = undefined;
-            }, function(error){
-                //TODO: Display error
-                $scope.formData.employer.SCAAttachment = undefined;
-            })
-        }
   });
 }
diff --git a/DOL.WHD.Section14c.Web/src/modules/components/sectionEmployer/sectionEmployerTemplate.html b/DOL.WHD.Section14c.Web/src/modules/components/sectionEmployer/sectionEmployerTemplate.html
@@ -409,16 +409,8 @@ <h3>Government Contracts</h3>
             </div>
             <div ng-class="validate('employer.SCAAttachment') ? 'usa-input-error' : ''">
                 <label for="SCAAttachment">Attach copies of all current SCA Wage Determinations for those contracts on which workers with disabilities are employed and earning subminimum wage.</label>
-                <span class="usa-input-error-message" role="alert" ng-show="validate('employer.SCAAttachment')">{{ validate('employer.SCAAttachment') }}</span>
-                <div ng-show="formData.employer.SCAAttachment == undefined">
-                    <input id="hourlyDeterminationFileInput" class="upload-file-input" type="file" ng-hide="true" onchange="angular.element(this).scope().vm.onSCAAttachmentSelected(this)" accept=".doc,.docx,.xls,.xlsx,.pdf,.jpg,.jpeg,.png">
-                    <label for="hourlyDeterminationFileInput" class="upload-label usa-button-primary">Browse</label><input id="SCAAttachment" name="SCAAttachment" class="upload-input" type="text" disabled>
-                    <label class="underlabel" for="SCAAttachment">File types accepted: PDF, Word, Excel, JPG, PNG</label>
-                </div>
-                <div ng-show="formData.employer.SCAAttachment != undefined">
-                    <a ng-href="{{vm.attachmentApiURL}}/{{formData.employer.SCAAttachment.id}}?access_token={{vm.access_token}}">{{formData.employer.SCAAttachment.originalFileName}}</a>
-                    <button class="usa-button-secondary" ng-click="vm.deleteSCAAttachment(formData.employer.SCAAttachment.id)">Delete</button>
-                </div>
+                <span class="usa-input-error-message" role="alert" ng-show="validate('employer.scaAttachmentId')">{{ validate('employer.SCAAttachment') }}</span>
+                <attachment-field attachment-id="formData.employer.scaAttachmentId" attachment-name="formData.employer.scaAttachmentName" />
             </div>
         </div>
     </div>

diff --git a/DOL.WHD.Section14c.Web/src/modules/services/validationService.js b/DOL.WHD.Section14c.Web/src/modules/services/validationService.js
@@ -275,7 +275,7 @@ module.exports = function(ngModule) {
                 let scaCount = this.checkRequiredNumber("employer.scaCount", undefined, 0);
 
                 //TODO: validate number of uploads with scaCount ???
-                this.checkRequiredValue("employer.SCAAttachment", "Please upload the required SCA Wage Determinations");
+                this.checkRequiredValue("employer.scaAttachmentId", "Please upload the required SCA Wage Determinations");
             }
 
             this.checkRequiredMultipleChoice("employer.eo13658Id");