Refactor stockart section and add validation and error message for inputs with urls

Author: Nick Litwin

app/submissions/submit-file/submit-file.controller.js

@@ -12,7 +12,7 @@
     // the onChange callback does not indicate which dropdown called the callback.
     // There are pull requets pending for react-select which will clean this code up
     vm.fontList1 = [
-      { label: 'Studio Standard Fonts List', value: 'STUDIO_STANDARDS_FONTS_LIST', id: 1 },
+      { label: 'Studio Standard Fonts List', value: 'STUDIO_STANDARD_FONTS_LIST', id: 1 },
       { label: 'Fonts.com', value: 'FONTS_DOT_COM', id: 1  },
       { label: 'MyFonts', value: 'MYFONTS', id: 1  },
       { label: 'Adobe Fonts', value: 'ADOBE_FONTS', id: 1  },
@@ -23,11 +23,10 @@
     ];
 
     var files = {};
+    vm.urlRegEx = new RegExp(/^(http(s?):\/\/)?(www\.)?[a-zA-Z0-9\.\-\_]+(\.[a-zA-Z]{2,3})+(\/[a-zA-Z0-9\_\-\s\.\/\?\%\#\&\=]*)?$/);
     vm.comments = '';
     vm.submissionForm = {
       files: [],
-
-      // Should the rank input field be set to 1 automatically?
       submitterRank: 1,
       submitterComments: '',
       fonts: [{

app/submissions/submit-file/submit-file.jade

@@ -87,7 +87,7 @@
 
       .form-block__fields
         .fieldsets
-          ng-form.fieldset(name="font_{{$index + 1}}", ng-repeat="font in vm.submissionForm.fonts track by font.id")
+          ng-form.fieldset(name="font{{$index + 1}}", ng-repeat="font in vm.submissionForm.fonts track by font.id")
             dropdown(
               name="'font-source{{$index + 1}}'",
               options="vm.fontList{{$index + 1}}",
@@ -121,23 +121,30 @@
 
       .form-block__fields
         .fieldsets
-          ng-form.fieldset(name="stockArt_{{$index + 1}}", ng-repeat="stockArt in vm.submissionForm.stockArts track by stockArt.id")
+          .fieldset(ng-repeat="stockArt in vm.submissionForm.stockArts track by stockArt.id")
             tc-input.fieldset__input(
               label-text="Photo Description",
               placeholder="A picture of a girl",
-              input-value="stockArt.description"
+              input-value="stockArt.description",
+              input-name="photoDescription{{$index}}"
             )
 
             tc-input.fieldset__input(
               label-text="Photo URL",
               placeholder="www.istockphoto.com",
-              input-value="stockArt.sourceUrl"
+              input-value="stockArt.sourceUrl",
+              input-name="photoURL{{$index}}",
+              input-pattern="vm.urlRegEx"
             )
 
+            .tc-error-messages(ng-show="submissionForm['photoURL' + $index].$dirty && submissionForm['photoURL' + $index].$invalid")
+              p(ng-show="submissionForm['photoURL' + $index].$error.pattern") Not a valid url.
+
             tc-input.fieldset__input(
               label-text="File Number",
               placeholder="u2434312",
-              input-value="stockArt.fileNumber"
+              input-value="stockArt.fileNumber",
+              input-name="fileNumber{{$index}}"
             )
 
           button.fieldset__button.tc-btn.tc-btn-s(type="button", ng-click="vm.createAnotherStockArtFieldset()") + Add Stock Photo