Sup 2917 font validations

app/directives/tc-form-fonts/tc-form-fonts.directive.js

@@ -0,0 +1,79 @@
+(function() {
+  'use strict';
+
+  angular.module('tcUIComponents').directive('tcFormFonts', tcFormFonts);
+
+  function tcFormFonts() {
+    return {
+      restrict: 'E',
+      require: '^form',
+      templateUrl: 'directives/tc-form-fonts/tc-form-fonts.html',
+      scope: {
+        formFonts: '='
+      },
+      link: function(scope, element, attrs, formController) {
+        scope.submissionForm = formController;
+      },
+      controller: ['$scope', function($scope) {
+        // Must provide React Select component a list with ID, since currently
+        // the onChange callback does not indicate which dropdown called the callback.
+        // There are pull requests pending for react-select which will clean this code up
+        $scope.fontList0 = [
+          { label: 'Studio Standard Fonts List', value: 'STUDIO_STANDARD_FONTS_LIST', id: 0 },
+          { label: 'Fonts.com', value: 'FONTS_DOT_COM', id: 0  },
+          { label: 'MyFonts', value: 'MYFONTS', id: 0  },
+          { label: 'Adobe Fonts', value: 'ADOBE_FONTS', id: 0  },
+          { label: 'Font Shop', value: 'FONT_SHOP', id: 0  },
+          { label: 'T.26 Digital Type Foundry', value: 'T26_DIGITAL_TYPE_FOUNDRY', id: 0  },
+          { label: 'Font Squirrel', value: 'FONT_SQUIRREL', id: 0  },
+          { label: 'Typography.com', value: 'TYPOGRAPHY_DOT_COM', id: 0 }
+        ];
+
+        $scope.urlRegEx = new RegExp(/^(http(s?):\/\/)?(www\.)?[a-zA-Z0-9\.\-\_]+(\.[a-zA-Z]{2,3})+(\/[a-zA-Z0-9\_\-\s\.\/\?\%\#\&\=]*)?$/);
+
+        $scope.selectFont = function(newFont) {
+          // Find the right font section and change that source value to the value that the user selected
+          var id = newFont.id;
+          $scope.formFonts[id].source = newFont.value;
+
+          if (newFont.value === 'STUDIO_STANDARD_FONTS_LIST') {
+            $scope.formFonts[id].isFontNameRequired = true;
+            $scope.formFonts[id].isFontNameDisabled = false;
+            $scope.formFonts[id].isFontUrlRequired = false;
+            $scope.formFonts[id].isFontUrlDisabled = false;
+
+          } else if (newFont.value) {
+            $scope.formFonts[id].isFontNameRequired = true;
+            $scope.formFonts[id].isFontNameDisabled = false;
+            $scope.formFonts[id].isFontUrlRequired = true;
+            $scope.formFonts[id].isFontUrlDisabled = false;
+
+          }
+        };
+
+        $scope.createAdditionalFontFieldset = function() {
+          var newId = $scope.formFonts.length;
+
+          // Create copy of list with new, incremented ID
+          var newFontList = $scope['fontList' + newId] = angular.copy($scope['fontList' + (newId - 1)]);
+
+          newFontList.forEach(function(font) {
+            font.id++;
+          });
+
+          $scope.formFonts.push({
+            id: newId,
+            source: '',
+            name: '',
+            sourceUrl: '',
+            isFontUrlRequired: false,
+            isFontUrlDisabled: true,
+            isFontNameRequired: false,
+            isFontNameDisabled: true,
+            isFontSourceRequired: false
+          });
+        }
+      }]
+    }
+  }
+})();

app/directives/tc-form-fonts/tc-form-fonts.jade

@@ -0,0 +1,46 @@
+.fieldset(ng-repeat="font in formFonts track by font.id")
+  label.tc-label Font Source
+
+  dropdown(
+    name="'font-source{{$index}}'",
+    options="fontList{{$index}}",
+    placeholder="'Select a provider from the list'",
+    searchable="false",
+    clearable="false",
+    on-change="selectFont",
+    value="formFonts[{{$index}}].source"
+  )
+
+  tc-input.fieldset__input(
+    label-text="Font Name",
+    placeholder="Select font source to edit field"
+    input-value="font.name",
+    input-name="fontName{{$index}}",
+    input-required="formFonts[$index].isFontNameRequired",
+    input-disabled="formFonts[$index].isFontNameDisabled"
+  )
+
+  .tc-error-messages(
+    ng-show="submissionForm['fontName' + $index].$dirty && submissionForm['fontName' + $index].$invalid"
+    ng-messages="submissionForm['fontName' + $index].$error"
+  )
+    p(ng-message="required") This field is required.
+
+  tc-input.fieldset__input(
+    label-text="Font URL",
+    placeholder="Select font source to edit field",
+    input-value="font.sourceUrl",
+    input-name="fontUrl{{$index}}",
+    input-required="formFonts[$index].isFontUrlRequired",
+    input-disabled="formFonts[$index].isFontUrlDisabled",
+    input-pattern="urlRegEx"
+  )
+
+  .tc-error-messages(
+    ng-show="submissionForm['fontUrl' + $index].$dirty && submissionForm['fontUrl' + $index].$invalid"
+    ng-messages="submissionForm['fontUrl' + $index].$error"
+  )
+    p(ng-message="pattern") Please enter a valid url.
+    p(ng-message="required") This field is required.
+
+button.fieldset__button.tc-btn.tc-btn-s(type="button", ng-click="createAdditionalFontFieldset()") + Add Font

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

@@ -14,6 +14,8 @@
         inputName: '@',
         inputType: '@',
         inputPattern: '=',
+        inputRequired: '=',
+        inputDisabled: '=',
         updateValueOnBlur: '&?'
       },
       link: function(scope, element, attrs) {

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

@@ -1,3 +1,11 @@
 label.tc-label {{labelText}}
 
-input(name="{{inputName}}", type="{{inputType}}", placeholder="{{placeholder}}", ng-model="inputValue", ng-pattern="inputPattern")
+input(
+  name="{{inputName}}",
+  type="{{inputType}}",
+  placeholder="{{placeholder}}",
+  ng-model="inputValue",
+  ng-pattern="inputPattern",
+  ng-required="inputRequired",
+  ng-disabled="inputDisabled"
+)

app/index.jade

@@ -227,6 +227,7 @@ html
     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-form-fonts/tc-form-fonts.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")

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

@@ -7,25 +7,21 @@
 
   function SubmitFileController($stateParams, UserService, SubmissionsService, challengeToSubmitTo) {
     var vm = this;
-
-    // Must provide React Select component a list with ID, since currently
-    // the onChange callback does not indicate which dropdown called the callback.
-    // There are pull requests pending for react-select which will clean this code up
-    vm.fontList1 = [
-      { 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  },
-      { label: 'Font Shop', value: 'FONT_SHOP', id: 1  },
-      { label: 'T.26 Digital Type Foundry', value: 'T26_DIGITAL_TYPE_FOUNDRY', id: 1  },
-      { label: 'Font Squirrel', value: 'FONT_SQUIRREL', id: 1  },
-      { label: 'Typography.com', value: 'TYPOGRAPHY_DOT_COM', id: 1 }
-    ];
-
     var files = {};
     vm.urlRegEx = new RegExp(/^(http(s?):\/\/)?(www\.)?[a-zA-Z0-9\.\-\_]+(\.[a-zA-Z]{2,3})+(\/[a-zA-Z0-9\_\-\s\.\/\?\%\#\&\=]*)?$/);
     vm.rankRegEx = new RegExp(/^[1-9]\d*$/);
     vm.comments = '';
+    vm.formFonts = [{
+      id: 0,
+      source: '',
+      name: '',
+      sourceUrl: '',
+      isFontUrlRequired: false,
+      isFontUrlDisabled: true,
+      isFontNameRequired: false,
+      isFontNameDisabled: true,
+      isFontSourceRequired: false
+    }];
     vm.submissionForm = {
       files: [],
 
@@ -35,12 +31,7 @@
 
       submitterRank: 1,
       submitterComments: '',
-      fonts: [{
-        id: 1,
-        source: '',
-        name: '',
-        sourceUrl: ''
-      }],
+      fonts: [],
       stockArts: [{
         id: 1,
         description: '',
@@ -77,8 +68,6 @@
     vm.setRankTo1 = setRankTo1;
     vm.setFileReference = setFileReference;
     vm.uploadSubmission = uploadSubmission;
-    vm.selectFont = selectFont;
-    vm.createAnotherFontFieldset = createAnotherFontFieldset;
     vm.createAnotherStockArtFieldset = createAnotherStockArtFieldset;
 
     activate();
@@ -114,8 +103,6 @@
           fileObject.mediaType = file.type;
       }
 
-
-
       // If user picks a new file, replace the that file's fileObject with a new one
       // Or add it the list if it's not there
       if (vm.submissionsBody.data.files.length) {
@@ -131,31 +118,6 @@
       }
     }
 
-    function selectFont(newFont) {
-      // See above for explanation
-      var id = newFont.id - 1;
-      vm.submissionForm.fonts[id].source = newFont.value;
-    }
-
-    function createAnotherFontFieldset() {
-      // See above for explanation on why this is done the way it is
-      var id = vm.submissionForm.fonts.length;
-
-      // Create copy of list with new, incremented ID
-      var newFontList = vm['fontList' + (id + 1)] = angular.copy(vm['fontList' + id]);
-
-      newFontList.forEach(function(font) {
-        font.id++;
-      });
-
-      vm.submissionForm.fonts.push({
-        id: vm.submissionForm.fonts.length + 1,
-        source: '',
-        name: '',
-        sourceUrl: ''
-      });
-    }
-
     function createAnotherStockArtFieldset() {
       vm.submissionForm.stockArts.push({
         id: vm.submissionForm.stockArts.length + 1,
@@ -169,6 +131,7 @@
       vm.submissionsBody.data.submitterComments = vm.comments;
       vm.submissionsBody.data.submitterRank = vm.submissionForm.submitterRank;
 
+      // Process stock art
       if (vm.submissionForm.stockArts[0].description === '') {
         vm.submissionsBody.data.stockArts = [];
       } else {
@@ -179,18 +142,25 @@
         });
       }
 
-      if (vm.submissionForm.fonts[0].source === '') {
+      // Process fonts
+      if (vm.formFonts[0].source === '') {
         vm.submissionsBody.data.fonts = [];
       } else {
-        var fonts = angular.copy(vm.submissionForm.fonts);
+        var fonts = angular.copy(vm.formFonts);
         vm.submissionsBody.data.fonts = fonts.map(function(font) {
           if (font.source) {
             delete font.id;
+            delete font.isFontUrlRequired;
+            delete font.isFontUrlDisabled;
+            delete font.isFontNameRequired;
+            delete font.isFontNameDisabled;
+            delete font.isFontSourceRequired;
             return font;
           }
         });
       }
 
+      console.log('ABOUT TO SEND: ', vm.submissionsBody);
       SubmissionsService.getPresignedURL(vm.submissionsBody, files);
     }
   }

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

@@ -98,51 +98,22 @@
 
     .form-block.flex.wrap
       .form-block__instructions
-        .form-block__title Fonts
+        .form-block__title Did you use custom fonts?
 
         .form-block__text
           p Check to see if your font is on the Studio Standard Fonts list. If it is, leave the URL field blank.
 
           p Read the #[a(href="Need link") Studio Fonts Policy].
 
-          p If you only used fonts that came with the client files, choose "I did not introduce any new fonts" from the dropdown box.
-
           p If your font is not on the list, you must provide the URL to the font page (not file) from one of the approved font websites in the dropdown box.
 
       .form-block__fields
         .fieldsets
-          ng-form.fieldset(name="font{{$index + 1}}", ng-repeat="font in vm.submissionForm.fonts track by font.id")
-            label.tc-label Font Source
-
-            dropdown(
-              name="'font-source{{$index + 1}}'",
-              options="vm.fontList{{$index + 1}}",
-              placeholder="'Select from the list'",
-              searchable="false",
-              clearable="false",
-              on-change="vm.selectFont",
-              value="vm.submissionForm.fonts[{{$index}}].source"
-            )
-
-            tc-input.fieldset__input(
-              label-text="Font Name",
-              placeholder="Select font source to edit field"
-              input-value="font.name",
-              input-name="fontName{{$index}}"
-            )
-
-            tc-input.fieldset__input(
-              label-text="Font URL",
-              placeholder="Select font source to edit field",
-              input-value="font.sourceUrl",
-              input-name="fontUrl{{$index}}"
-            )
-
-          button.fieldset__button.tc-btn.tc-btn-s(type="button", ng-click="vm.createAnotherFontFieldset()") + Add Font
+          tc-form-fonts(form-fonts="vm.formFonts")
 
     .form-block.flex.wrap
       .form-block__instructions
-        .form-block__title Stock Art
+        .form-block__title Did you use stock art?
 
         .form-block__text
           p If you used any stock photos in your design mocks, please provide the location and details so that the client can obtain them. Follow the guidelines at our #[a(href="Need link") Studio Stock Art Policy].
@@ -166,7 +137,7 @@
             )
 
             .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.
+              p(ng-show="submissionForm['photoURL' + $index].$error.pattern") Please enter a valid url.
 
             tc-input.fieldset__input(
               label-text="File Number",

assets/css/submissions/submit-file.scss

@@ -38,6 +38,12 @@
   margin-top: 10px;
 }
 
+tc-form-fonts {
+  .fieldset {
+    max-width: 500px;
+  }
+}
+
 .Select {
   max-width: 300px;
   margin-bottom: 20px;