diff --git a/app/directives/tc-form-stockart/tc-form-stockart.directive.js b/app/directives/tc-form-stockart/tc-form-stockart.directive.js index a39c5f6c2..c5c3fca12 100644 --- a/app/directives/tc-form-stockart/tc-form-stockart.directive.js +++ b/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; + } + } }] } } diff --git a/app/directives/tc-form-stockart/tc-form-stockart.jade b/app/directives/tc-form-stockart/tc-form-stockart.jade index 1867c935e..3955c0eb3 100644 --- a/app/directives/tc-form-stockart/tc-form-stockart.jade +++ b/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 diff --git a/app/directives/tc-input/tc-input.directive.js b/app/directives/tc-input/tc-input.directive.js index 2eca0cdf2..ed5a47234 100644 --- a/app/directives/tc-input/tc-input.directive.js +++ b/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}); + }); + } } } } diff --git a/app/directives/tc-input/tc-input.jade b/app/directives/tc-input/tc-input.jade index 5b9e0ec42..6140698dd 100644 --- a/app/directives/tc-input/tc-input.jade +++ b/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()" ) diff --git a/app/index.jade b/app/index.jade index bc6ee3882..c9ac97625 100644 --- a/app/index.jade +++ b/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') diff --git a/app/submissions/submit-file/submit-file.controller.js b/app/submissions/submit-file/submit-file.controller.js index 5d7c08fbb..11dfbd604 100644 --- a/app/submissions/submit-file/submit-file.controller.js +++ b/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 = {