Sup 2938 delete sections

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

@@ -15,6 +15,8 @@
         scope.submissionForm = formController;
       },
       controller: ['$scope', function($scope) {
+        var fontsId = 0;
+
         // 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
@@ -29,48 +31,75 @@
           { label: 'Typography.com', value: 'TYPOGRAPHY_DOT_COM', id: 0 }
         ];
 
+        var emptyFont = {
+          source: '',
+          name: '',
+          sourceUrl: '',
+          isFontUrlRequired: false,
+          isFontUrlDisabled: true,
+          isFontNameRequired: false,
+          isFontNameDisabled: true,
+          isFontSourceRequired: false
+        };
+
         $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;
+
+          // Find the right font section,
+          // and change that source value to the value that the user selected
+          var targetedFont = $scope.formFonts[newFont.id];
+
+          targetedFont.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;
+            targetedFont.isFontNameRequired = true;
+            targetedFont.isFontNameDisabled = false;
+            targetedFont.isFontUrlRequired = false;
+            targetedFont.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;
-
+            targetedFont.isFontNameRequired = true;
+            targetedFont.isFontNameDisabled = false;
+            targetedFont.isFontUrlRequired = true;
+            targetedFont.isFontUrlDisabled = false;
           }
         };
 
         $scope.createAdditionalFontFieldset = function() {
-          var newId = $scope.formFonts.length;
+          var newId = ++fontsId;
 
           // 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
+          // Add empty font with new ID to scope
+          $scope.formFonts[newId] = _.assign({ id: newId }, angular.copy(emptyFont));
+        }
+
+        $scope.deleteFontFieldset = function(index) {
+
+          // If only one font fieldset is there, just reset the values
+          // so that ng-repeat doesn't refresh and there is no UI flickering
+          if (Object.keys($scope.formFonts).length === 1) {
+            $scope.submissionForm['fontName' + index].$setPristine();
+            $scope.submissionForm['fontUrl' + index].$setPristine();
+            $scope.formFonts[index] = angular.copy(emptyFont);
+
+          } else {
+            delete $scope.formFonts[index];
+          }
+        }
+
+        $scope.isButtonDisabled = function() {
+          return _.some($scope.formFonts, function(font) {
+            if (font.source === 'STUDIO_STANDARD_FONTS_LIST') {
+              return !font.source || !font.name;
+            } else {
+              return !font.source || !font.name || !font.sourceUrl;
+            }
           });
         }
       }]

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

@@ -1,46 +1,49 @@
-.fieldset(ng-repeat="font in formFonts track by font.id")
+.fieldset(ng-repeat="(fontId, font) in formFonts")
+  button.clean.remove-section(type="button", ng-click="deleteFontFieldset(fontId)")
+
   label.tc-label Font Source
 
   dropdown(
-    name="'font-source{{$index}}'",
-    options="fontList{{$index}}",
+    name="'font-source{{fontId}}'",
+    options="fontList{{fontId}}",
     placeholder="'Select a provider from the list'",
     searchable="false",
     clearable="false",
     on-change="selectFont",
-    value="formFonts[{{$index}}].source"
+    value="formFonts[{{fontId}}].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"
+    input-name="fontName{{fontId}}",
+    input-required="formFonts[fontId].isFontNameRequired",
+    input-disabled="formFonts[fontId].isFontNameDisabled"
   )
 
   .tc-error-messages(
-    ng-show="submissionForm['fontName' + $index].$dirty && submissionForm['fontName' + $index].$invalid"
-    ng-messages="submissionForm['fontName' + $index].$error"
+    ng-show="submissionForm['fontName' + fontId].$dirty && submissionForm['fontName' + fontId].$invalid"
+    ng-messages="submissionForm['fontName' + fontId].$error"
   )
     p(ng-message="required") This field is required.
 
   tc-input.fieldset__input(
+    ng-hide="formFonts[fontId].source === 'STUDIO_STANDARD_FONTS_LIST'",
     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-name="fontUrl{{fontId}}",
+    input-required="formFonts[fontId].isFontUrlRequired",
+    input-disabled="formFonts[fontId].isFontUrlDisabled",
     input-pattern="urlRegEx"
   )
 
   .tc-error-messages(
-    ng-show="submissionForm['fontUrl' + $index].$dirty && submissionForm['fontUrl' + $index].$invalid"
-    ng-messages="submissionForm['fontUrl' + $index].$error"
+    ng-show="submissionForm['fontUrl' + fontId].$dirty && submissionForm['fontUrl' + fontId].$invalid"
+    ng-messages="submissionForm['fontUrl' + fontId].$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
+button.fieldset__button.tc-btn.tc-btn-s(type="button", ng-click="createAdditionalFontFieldset()", ng-disabled="isButtonDisabled()") + Add Font

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

@@ -0,0 +1,19 @@
+/* jshint -W117, -W030 */
+describe('Topcoder Form Fonts 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-form-stockart/tc-form-stockart.directive.js

@@ -0,0 +1,56 @@
+(function() {
+  'use strict';
+
+  angular.module('tcUIComponents').directive('tcFormStockart', tcFormStockart);
+
+  function tcFormStockart() {
+    return {
+      restrict: 'E',
+      require: '^form',
+      templateUrl: 'directives/tc-form-stockart/tc-form-stockart.html',
+      scope: {
+        formStockarts: '='
+      },
+      link: function(scope, element, attrs, formController) {
+        scope.submissionForm = formController;
+      },
+      controller: ['$scope', function($scope) {
+        var stockartId = 0;
+        var emptyStockart = {
+          description: '',
+          sourceUrl: '',
+          fileNumber: ''
+        };
+
+        $scope.urlRegEx = new RegExp(/^(http(s?):\/\/)?(www\.)?[a-zA-Z0-9\.\-\_]+(\.[a-zA-Z]{2,3})+(\/[a-zA-Z0-9\_\-\s\.\/\?\%\#\&\=]*)?$/);
+
+        $scope.createAdditionalStockartFieldset = function() {
+          var newId = ++stockartId;
+
+          $scope.formStockarts[newId] = _.assign({ id: newId }, angular.copy(emptyStockart));
+        }
+
+        $scope.deleteStockartFieldset = function(index) {
+
+          // If only one stockart fieldset is there, just reset the values
+          // so that ng-repeat doesn't refresh and there is no UI flickering
+          if (Object.keys($scope.formStockarts).length === 1) {
+            $scope.submissionForm['photoDescription' + index].$setPristine();
+            $scope.submissionForm['photoURL' + index].$setPristine();
+            $scope.submissionForm['fileNumber' + index].$setPristine();
+            $scope.formStockarts[index] = angular.copy(emptyStockart);
+
+          } else {
+            delete $scope.formStockarts[index];
+          }
+        }
+
+        $scope.isButtonDisabled = function() {
+          return _.some($scope.formStockarts, function(stockart) {
+            return !stockart.description || !stockart.sourceUrl || !stockart.fileNumber;
+          });
+        }
+      }]
+    }
+  }
+})();

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

@@ -0,0 +1,29 @@
+.fieldset(ng-repeat="(stockartId, stockart) in formStockarts")
+  button.clean.remove-section(type="button", ng-click="deleteStockartFieldset(stockartId)")
+
+  tc-input.fieldset__input(
+    label-text="Photo Description",
+    placeholder="A picture of a girl",
+    input-value="stockart.description",
+    input-name="photoDescription{{stockartId}}"
+  )
+
+  tc-input.fieldset__input(
+    label-text="Photo URL",
+    placeholder="www.istockphoto.com",
+    input-value="stockart.sourceUrl",
+    input-name="photoURL{{stockartId}}",
+    input-pattern="urlRegEx"
+  )
+
+  .tc-error-messages(ng-show="submissionForm['photoURL' + stockartId].$dirty && submissionForm['photoURL' + stockartId].$invalid")
+    p(ng-show="submissionForm['photoURL' + stockartId].$error.pattern") Please enter a valid url.
+
+  tc-input.fieldset__input(
+    label-text="File Number",
+    placeholder="u2434312",
+    input-value="stockart.fileNumber",
+    input-name="fileNumber{{stockartId}}"
+  )
+
+button.fieldset__button.tc-btn.tc-btn-s(type="button", ng-click="createAdditionalStockartFieldset()", ng-disabled="isButtonDisabled()") + Add Stock Photo

app/directives/tc-form-stockart/tc-form-stockart.spec.js

@@ -0,0 +1,19 @@
+/* jshint -W117, -W030 */
+describe('Topcoder Form Stockart 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/index.jade

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