Show stockart errors

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

@@ -13,13 +13,17 @@
       },
       link: function(scope, element, attrs, formController) {
         scope.submissionForm = formController;
+
       },
       controller: ['$scope', function($scope) {
         var stockartId = 0;
         var emptyStockart = {
           description: '',
           sourceUrl: '',
-          fileNumber: ''
+          fileNumber: '',
+          isPhotoDescriptionRequired: false,
+          isPhotoURLRequired: false,
+          isFileNumberRequired: false
         };
 
         $scope.urlRegEx = new RegExp(/^(http(s?):\/\/)?(www\.)?[a-zA-Z0-9\.\-\_]+(\.[a-zA-Z]{2,3})+(\/[a-zA-Z0-9\_\-\s\.\/\?\%\#\&\=]*)?$/);
@@ -50,6 +54,33 @@
             return !stockart.description || !stockart.sourceUrl || !stockart.fileNumber;
           });
         }
+
+        $scope.showMandatoryMessage = function(inputValue, inputName) {
+          var id = inputName.slice(-1);
+
+          var stockartSection = $scope.formStockarts[id];
+
+          var stockartDescription = stockartSection.description;
+          var stockartSourceUrl = stockartSection.sourceUrl;
+          var stockartFileNumber = stockartSection.fileNumber;
+
+          if (!stockartDescription && !stockartSourceUrl && !stockartFileNumber) {
+            // All fields empty so required should be false
+            stockartSection.isPhotoDescriptionRequired = false;
+            stockartSection.isPhotoURLRequired = false;
+            stockartSection.isFileNumberRequired = false;
+          } else if (stockartDescription && stockartSourceUrl && stockartFileNumber) {
+            // All fields filled out, so required should be false
+            stockartSection.isPhotoDescriptionRequired = false;
+            stockartSection.isPhotoURLRequired = false;
+            stockartSection.isFileNumberRequired = false;
+          } else {
+            // Fields are not completely filled out or completely blank so setting required to true
+            stockartSection.isPhotoDescriptionRequired = true;
+            stockartSection.isPhotoURLRequired = true;
+            stockartSection.isFileNumberRequired = true;
+          }
+        }
       }]
     }
   }

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

@@ -3,30 +3,39 @@
 
   tc-input.fieldset__input(
     label-text="Photo Description",
+    asterisk-text="Field can't be empty",
     placeholder="A picture of a girl",
     input-value="stockart.description",
     input-name="photoDescription{{stockartId}}",
-    maxlength="100"
+    input-required="formStockarts[stockartId].isPhotoDescriptionRequired",
+    maxlength="100",
+    on-input-change="showMandatoryMessage(inputValue, inputName)"
   )
 
   tc-input.fieldset__input(
     label-text="Photo URL",
+    asterisk-text="Field can't be empty",
     placeholder="www.istockphoto.com",
     input-value="stockart.sourceUrl",
     input-name="photoURL{{stockartId}}",
+    input-required="formStockarts[stockartId].isPhotoURLRequired",
     input-pattern="urlRegEx",
-    maxlength="100"
+    maxlength="100",
+    on-input-change="showMandatoryMessage(inputValue, inputName)"
   )
 
-  .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-error-messages(ng-show="submissionForm['photoURL' + stockartId].$dirty && submissionForm['photoURL' + stockartId].$invalid && submissionForm['photoURL' + stockartId].$error.pattern")
+    p Please enter a valid url.
 
   tc-input.fieldset__input(
     label-text="File Number",
+    asterisk-text="Field can't be empty",
     placeholder="u2434312",
     input-value="stockart.fileNumber",
     input-name="fileNumber{{stockartId}}",
-    maxlength="50"
+    input-required="formStockarts[stockartId].isFileNumberRequired",
+    maxlength="50",
+    on-input-change="showMandatoryMessage(inputValue, inputName)"
   )
 
 button.fieldset__button.tc-btn.tc-btn-s(type="button", ng-click="createAdditionalStockartFieldset()", ng-disabled="isButtonDisabled()") + Add Stock Photo

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

@@ -9,6 +9,7 @@
       templateUrl: 'directives/tc-input/tc-input.html',
       scope: {
         labelText: '@',
+        asteriskText: '@',
         placeholder: '@',
         inputValue: '=',
         inputName: '@',
@@ -17,7 +18,8 @@
         inputRequired: '=',
         inputDisabled: '=',
         maxlength: '@',
-        updateValueOnBlur: '&?'
+        updateValueOnBlur: '&?',
+        onInputChange: '&?'
       },
       link: function(scope, element, attrs) {
         var input = $(element[0]).find('input');
@@ -33,6 +35,12 @@
             scope.$apply();
           });
         }
+
+        if (scope.onInputChange) {
+          scope.$watch('inputValue', function(newValue, oldValue) {
+            scope.onInputChange({inputValue: scope.inputValue, inputName: scope.inputName});
+          });
+        }
       }
     }
   }

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

@@ -1,5 +1,7 @@
 label.tc-label {{labelText}}
 
+p.tc-label__asterisk(ng-if="inputRequired") #[span *]{{asteriskText}}
+
 input(
   name="{{inputName}}",
   type="{{inputType}}",
@@ -8,5 +10,6 @@ input(
   ng-pattern="inputPattern",
   ng-required="inputRequired",
   ng-disabled="inputDisabled",
-  maxlength="{{maxlength}}"
+  maxlength="{{maxlength}}",
+  ng-change="onChange()"
 )

app/index.jade

@@ -164,10 +164,10 @@ html
     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/lodash/lodash.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')
-    script(src='../bower_components/lodash/lodash.js')
     script(src='../bower_components/restangular/dist/restangular.js')
     script(src='../bower_components/angular-touch/angular-touch.js')
     script(src='../bower_components/angular-carousel/dist/angular-carousel.js')

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

@@ -7,7 +7,7 @@
 
   function SubmitFileController($scope, $stateParams, $log, UserService, SubmissionsService, challengeToSubmitTo) {
     var vm = this;
-    $log = $log.getInstance("SubmitFileController");
+    $log = $log.getInstance('SubmitFileController');
     var files = {};
     var fileUploadProgress = {};
     vm.urlRegEx = new RegExp(/^(http(s?):\/\/)?(www\.)?[a-zA-Z0-9\.\-\_]+(\.[a-zA-Z]{2,3})+(\/[a-zA-Z0-9\_\-\s\.\/\?\%\#\&\=]*)?$/);
@@ -37,7 +37,10 @@
         id: 1,
         description: '',
         sourceUrl: '',
-        fileNumber: ''
+        fileNumber: '',
+        isPhotoDescriptionRequired: false,
+        isPhotoURLRequired: false,
+        isFileNumberRequired: false
       }
     };
     vm.submissionForm = {