Submissions header

app/directives/on-file-change.directive.js

@@ -11,7 +11,7 @@
     return {
       restrict: 'A',
       link: function(scope, element, attr, ctrl) {
-        element.bind("change", function() {
+        element.bind('change', function() {
           scope.vm.onFileChange(element[0].files[0]);
           this.value = '';
         });

app/directives/tc-file-input/tc-file-input.directive.js

@@ -0,0 +1,43 @@
+(function() {
+  'use strict';
+
+  angular.module('tcUIComponents').directive('tcFileInput', tcFileInput);
+
+  function tcFileInput() {
+    return {
+      restrict: 'E',
+      templateUrl: 'directives/tc-file-input/tc-file-input.html',
+      scope: {
+        labelText: '@',
+        fieldId: '@',
+        placeholder: '@',
+        fileType: '@',
+        mandatory: '=',
+        buttonText: '@',
+        setFileReference: '&'
+      },
+      link: function(scope, element, attrs) {
+        scope.selectFile = selectFile;
+
+        // fieldId is not set on element at this point, so grabbing with class .none
+        // which exists on the element right away
+        var fileInput = $(element[0]).find('.none');
+        var fileNameInput = $(element[0]).find('input[type=text]');
+
+        fileInput.bind('change', function() {
+          var file = fileInput[0].files[0];
+
+          // Pass file object up through callback into controller
+          scope.setFileReference({file: file, fieldId: scope.fieldId});
+
+          // Set the file name as the value of the disabled input
+          fileNameInput[0].value = file.name;
+        });
+
+        function selectFile() {
+          fileInput.click();
+        }
+      }
+    }
+  }
+})();

app/directives/tc-file-input/tc-file-input.jade

@@ -0,0 +1,12 @@
+.tc-file-field__label
+  label.tc-label {{labelText}}
+    span.lowercase(ng-if="fileType") {{fileType | addBeginningSpace}}
+
+    span.tc-label__mandatory.lowercase(ng-if="mandatory") #[span *]mandatory
+
+.tc-file-field__inputs
+  input.tc-file-field__input(type="text", placeholder="{{placeholder}}", required)
+
+  button.tc-btn(ng-click="selectFile()") {{buttonText}}
+
+  input.none(type="file", id="{{fieldId}}")

app/directives/tc-file-input/tc-file-input.spec.js

@@ -0,0 +1,19 @@
+/* jshint -W117, -W030 */
+describe('Topcoder File Input Directive', function() {
+  var scope;
+
+  // USE AS TEMPLATE FOR DIRECTIVES
+
+  beforeEach(function() {
+    bard.appModule('tcUIComponents');
+    bard.inject(this, '$compile', '$rootScope');
+  });
+
+  bard.verifyNoOutstandingHttpRequests();
+
+  xdescribe('', function() {
+    beforeEach(function() {});
+
+    it('', function() {});
+  });
+});

app/directives/tc-input/tc-input.directive.js

@@ -0,0 +1,17 @@
+(function() {
+  'use strict';
+
+  angular.module('tcUIComponents').directive('tcInput', tcInput);
+
+  function tcInput() {
+    return {
+      restrict: 'E',
+      templateUrl: 'directives/tc-input/tc-input.html',
+      scope: {
+        labelText: '@',
+        placeholder: '@',
+        inputValue: '='
+      }
+    }
+  }
+})();

app/directives/tc-input/tc-input.jade

@@ -0,0 +1,3 @@
+label.tc-label {{labelText}}
+
+input(type="text", placeholder="{{placeholder}}", ng-model="inputValue")

app/directives/tc-textarea/tc-textarea.directive.js

@@ -0,0 +1,19 @@
+(function() {
+  'use strict';
+
+  angular.module('tcUIComponents').directive('tcTextarea', tcTextarea);
+
+  function tcTextarea() {
+    return {
+      restrict: 'E',
+      templateUrl: 'directives/tc-textarea/tc-textarea.html',
+      scope: {
+        labelText: '@',
+        placeholder: '@',
+        characterCount: '=',
+        characterCountMax: '@',
+        value: '='
+      }
+    }
+  }
+})();

app/directives/tc-textarea/tc-textarea.jade

@@ -0,0 +1,7 @@
+label.tc-label.tc-textarea__label {{labelText}}
+  span.tc-textarea__char-count(ng-if="characterCount")
+    span.tc-textarea__char-count--current {{value.length || 0}}
+
+    span {{' / ' + characterCountMax}}
+
+textarea(placeholder="{{placeholder}}", ng-model="value", maxlength="{{characterCountMax}}")

app/filters/add-beginning-space.filter.js

@@ -0,0 +1,11 @@
+(function() {
+  'use strict';
+
+  angular.module('topcoder').filter('addBeginningSpace', addBeginningSpace);
+
+  function addBeginningSpace() {
+    return function(input) {
+      return ' ' + input;
+    };
+  };
+})();

app/filters/filters.spec.js

@@ -3,7 +3,7 @@ describe('filters', function() {
 
   beforeEach(function() {
     bard.appModule('topcoder');
-    bard.inject(this, 'CONSTANTS', 'roleFilter', 'percentageFilter', 'ordinalFilter', 'displayLocationFilter', 'listRolesFilter', 'trackFilter', 'challengeLinksFilter', 'externalLinkColorFilter', 'emptyFilter', 'ternaryFilter', 'urlProtocolFilter');
+    bard.inject(this, 'CONSTANTS', 'roleFilter', 'percentageFilter', 'ordinalFilter', 'displayLocationFilter', 'listRolesFilter', 'trackFilter', 'challengeLinksFilter', 'externalLinkColorFilter', 'emptyFilter', 'ternaryFilter', 'urlProtocolFilter', 'addBeginningSpaceFilter');
     domain = CONSTANTS.domain;
   });
 
@@ -100,7 +100,7 @@ describe('filters', function() {
   });
 
   describe('externalLinkColorFilter', function() {
-    
+
     it('should handle twitter and linkedin correctly', function() {
       expect(externalLinkColorFilter('el-twitter')).to.be.equal('#62AADC');
       expect(externalLinkColorFilter('el-linkedin')).to.be.equal('#127CB5');
@@ -150,4 +150,10 @@ describe('filters', function() {
       expect(urlProtocolFilter('https://google.com')).to.be.equal('https://google.com');
     });
   });
+
+  describe('addBeginningSpaceFilter', function() {
+    it('should add a space to the beginning of the input', function() {
+      expect(addBeginningSpaceFilter('some text')).to.equal(' some text');
+    });
+  });
 });

app/index.jade

@@ -16,6 +16,7 @@ html
     link(rel='stylesheet', href='../bower_components/angular-dropdowns/dist/angular-dropdowns.css')
     link(rel='stylesheet', href='../bower_components/intro.js/introjs.css')
     link(rel='stylesheet', href='../bower_components/angularjs-toaster/toaster.css')
+    link(rel='stylesheet', href='../bower_components/react-select/dist/react-select.min.css')
     link(rel='stylesheet', href='../bower_components/fontawesome/css/font-awesome.css')
     link(rel='stylesheet', href='../bower_components/ng-notifications-bar/dist/ngNotificationsBar.min.css')
     link(rel='stylesheet', href='../bower_components/ngDialog/css/ngDialog.css')
@@ -26,8 +27,11 @@ html
 
     // build:css /styles/app.css
     //- inject:css
+    link(rel="stylesheet", href="assets/css/vendors/introjs.css")
     link(rel="stylesheet", href="assets/css/vendors/angucomplete.css")
     link(rel="stylesheet", href="assets/css/topcoder.css")
+    link(rel="stylesheet", href="assets/css/submissions/submit-file.css")
+    link(rel="stylesheet", href="assets/css/submissions/submissions.css")
     link(rel="stylesheet", href="assets/css/skill-picker/skill-picker.css")
     link(rel="stylesheet", href="assets/css/sitemap/sitemap.css")
     link(rel="stylesheet", href="assets/css/settings/update-password.css")
@@ -124,6 +128,7 @@ html
 
     // build:js /js/vendor.js
     //- bower:js
+    script(src='../bower_components/zepto/zepto.js')
     script(src='../bower_components/angular/angular.js')
     script(src='../bower_components/a0-angular-storage/dist/angular-storage.js')
     script(src='../bower_components/angucomplete-alt/angucomplete-alt.js')
@@ -143,9 +148,18 @@ html
     script(src='../bower_components/angular-animate/angular-animate.js')
     script(src='../bower_components/angularjs-toaster/toaster.js')
     script(src='../bower_components/appirio-tech-ng-iso-constants/dist/ng-iso-constants.js')
+    script(src='../bower_components/angular-resource/angular-resource.js')
+    script(src='../bower_components/moment/moment.js')
+    script(src='../bower_components/angular-scroll/angular-scroll.js')
+    script(src='../bower_components/react/react.js')
+    script(src='../bower_components/react/react-dom.js')
+    script(src='../bower_components/classnames/index.js')
+    script(src='../bower_components/react-input-autosize/dist/react-input-autosize.min.js')
+    script(src='../bower_components/react-select/dist/react-select.min.js')
+    script(src='../bower_components/ngReact/ngReact.js')
+    script(src='../bower_components/appirio-tech-ng-ui-components/dist/main.js')
     script(src='../bower_components/d3/d3.js')
     script(src='../bower_components/jstzdetect/jstz.min.js')
-    script(src='../bower_components/moment/moment.js')
     script(src='../bower_components/ng-busy/build/angular-busy.js')
     script(src='../bower_components/ng-notifications-bar/dist/ngNotificationsBar.min.js')
     script(src='../bower_components/ngDialog/js/ngDialog.js')
@@ -212,13 +226,17 @@ html
     script(src="directives/slideable.directive.js")
     script(src="directives/srm-tile/srm-tile.directive.js")
     script(src="directives/tc-endless-paginator/tc-endless-paginator.directive.js")
+    script(src="directives/tc-file-input/tc-file-input.directive.js")
+    script(src="directives/tc-input/tc-input.directive.js")
     script(src="directives/tc-paginator/tc-paginator.directive.js")
     script(src="directives/tc-section/tc-section.directive.js")
     script(src="directives/tc-sticky/tc-sticky.directive.js")
     script(src="directives/tc-tabs/tc-tabs.directive.js")
+    script(src="directives/tc-textarea/tc-textarea.directive.js")
     script(src="directives/tc-transclude.directive.js")
     script(src="directives/track-toggle/track-toggle.directive.js")
     script(src="topcoder.module.js")
+    script(src="filters/add-beginning-space.filter.js")
     script(src="filters/challengeLinks.filter.js")
     script(src="filters/deadline-msg.filter.js")
     script(src="filters/empty.filter.js")
@@ -291,6 +309,7 @@ html
     script(src="services/scorecard.service.js")
     script(src="services/srm.service.js")
     script(src="services/statistics.service.js")
+    script(src="services/submissions.service.js")
     script(src="services/tags.service.js")
     script(src="services/tcAuth.service.js")
     script(src="services/user.service.js")
@@ -309,6 +328,7 @@ html
     script(src="submissions/submissions.module.js")
     script(src="submissions/submissions.controller.js")
     script(src="submissions/submissions.routes.js")
+    script(src="submissions/submit-file/submit-file.controller.js")
     script(src="topcoder.constants.js")
     script(src="topcoder.controller.js")
     script(src="topcoder.interceptors.js")

app/services/api.service.js

@@ -93,6 +93,13 @@
                 param: element
               };
             }
+
+            if (url.indexOf('submissions') > -1 && (operation.toLowerCase() === 'put' || operation.toLowerCase() === 'post')) {
+              return {
+                param: element
+              };
+            }
+
             return element;
           })
           .addResponseInterceptor(function(data, operation, what, url, response, deferred) {

app/services/submissions.service.js

@@ -0,0 +1,118 @@
+(function() {
+  'use strict';
+
+  angular.module('tc.services').factory('SubmissionsService', SubmissionsService);
+
+  SubmissionsService.$inject = ['CONSTANTS', 'ApiService', '$q', '$log', 'toaster'];
+
+  function SubmissionsService(CONSTANTS, ApiService, $q, $log, toaster) {
+    var api = ApiService.restangularV3;
+
+    var service = {
+      getPresignedURL: getPresignedURL,
+      uploadSubmissionFileToS3: uploadSubmissionFileToS3,
+      updateSubmissionStatus: updateSubmissionStatus,
+      recordCompletedSubmission: recordCompletedSubmission
+    };
+
+    return service;
+
+    function getPresignedURL(body, files) {
+      console.log('Body of request for presigned url: ', body);
+
+      return api.all('submissions').customPOST(body)
+      .then(function(response) {
+        console.log('POST/Presigned URL Response: ', response.plain());
+
+        uploadSubmissionFileToS3(response, response.data.files, files);
+      })
+      .catch(function(err) {
+        console.log(err);
+        $log.info('Error getting presigned url');
+        toaster.pop('error', 'Whoops!', 'There was an error uploading your submissions. Please try again later.');
+      });
+    }
+
+    function uploadSubmissionFileToS3(presignedURLResponse, files) {
+      var filesWithPresignedURL = presignedURLResponse.data.files;
+
+      var promises = filesWithPresignedURL.map(function(fileWithPresignedURL) {
+        var deferred = $q.defer();
+        var xhr = new XMLHttpRequest();
+
+        xhr.open('PUT', fileWithPresignedURL.preSignedUploadUrl, true);
+        xhr.setRequestHeader('Content-Type', fileWithPresignedURL.mediaType);
+
+        // xhr version of the success callback
+        xhr.onreadystatechange = function() {
+          var status = xhr.status;
+          if (((status >= 200 && status < 300) || status === 304) && xhr.readyState === 4) {
+            $log.info('Successfully uploaded file');
+            console.log('xhr response: ', xhr.responseText);
+
+            // updateSubmissionStatus and then resolve?
+            deferred.resolve();
+
+          } else if (status >= 400) {
+            $log.error('Error uploading to S3 with status: ' + status);
+            toaster.pop('error', 'Whoops!', 'There was an error uploading your files. Please try again later.');
+            deferred.reject(err);
+          }
+        };
+
+        xhr.onerror = function(err) {
+          $log.info('Error uploading to s3');
+          toaster.pop('error', 'Whoops!', 'There was an error uploading your files. Please try again later.');
+          deferred.reject(err);
+        }
+
+        xhr.send(files[fileWithPresignedURL.type]);
+
+        return deferred.promise;
+      });
+
+      return $q.all(promises)
+        .then(function(response) {
+          console.log('response from S3: ', response);
+          console.log('response to use .save restnagular with: ', presignedURLResponse);
+
+          // Update and start processing
+          updateSubmissionStatus(presignedURLResponse.plain());
+
+        })
+        .catch(function(err) {
+          console.log('error uploading to S3: ', err);
+        });
+    }
+
+    function updateSubmissionStatus(body) {
+      // Pass data from upload to S3
+      body.data.files.forEach(function(file) {
+        file.status = 'UPLOADED';
+      });
+
+      return api.one('submissions', body.id).customPUT(body)
+      .then(function(response) {
+        $log.info('Successfully updated file statuses');
+        recordCompletedSubmission(response.plain());
+      })
+      .catch(function(err) {
+        $log.info('Error updating file statuses');
+        $log.error(err);
+      });
+    }
+
+    function recordCompletedSubmission(body) {
+      // Once all uploaded, make record and begin processing
+      return api.one('submissions', body.id).customPOST(body, 'process')
+      .then(function(response) {
+        $log.info('Successfully made file record. Beginning processing');
+        console.log('response from process call: ', response);
+      })
+      .catch(function(err) {
+        $log.info('Error in starting processing');
+        $log.error(err);
+      });
+    }
+  };
+})();