From bb3d2cd948703196f2df883049a1dffba107d938 Mon Sep 17 00:00:00 2001 From: Andy Butland Date: Thu, 27 Jun 2019 15:10:27 +0200 Subject: [PATCH] Applied custom mandatory validation message to existing core property editors that support the mandatory setting. --- .../services/validationhelper.service.js | 30 +++++++++++++ .../colorpicker/colorpicker.controller.js | 2 +- .../datepicker/datepicker.controller.js | 7 +++- .../datepicker/datepicker.html | 2 +- .../dropdownFlexible.controller.js | 8 +++- .../dropdownFlexible/dropdownFlexible.html | 42 +++++++++++-------- .../propertyeditors/email/email.controller.js | 10 +++++ .../views/propertyeditors/email/email.html | 4 +- .../radiobuttons/radiobuttons.controller.js | 8 +++- .../radiobuttons/radiobuttons.html | 18 +++++--- .../textbox/textbox.controller.js | 16 +++---- 11 files changed, 108 insertions(+), 39 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/common/services/validationhelper.service.js create mode 100644 src/Umbraco.Web.UI.Client/src/views/propertyeditors/email/email.controller.js diff --git a/src/Umbraco.Web.UI.Client/src/common/services/validationhelper.service.js b/src/Umbraco.Web.UI.Client/src/common/services/validationhelper.service.js new file mode 100644 index 0000000000..0ab8e9fdb9 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/common/services/validationhelper.service.js @@ -0,0 +1,30 @@ +(function () { + 'use strict'; + + function validationHelperService($q, localizationService) { + + // Gets the message to use for when a mandatory field isn't completed. + // Will either use the one provided on the property type's validation object + // or a localised default. + function getMandatoryMessage(validation) { + if (validation.mandatoryMessage) { + return $q.when(validation.mandatoryMessage); + } else { + return localizationService.localize("general_required").then(function (value) { + return $q.when(value); + }); + } + } + + var service = { + getMandatoryMessage: getMandatoryMessage + }; + + return service; + + } + + angular.module('umbraco.services').factory('validationHelper', validationHelperService); + + +})(); diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/colorpicker/colorpicker.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/colorpicker/colorpicker.controller.js index d6fe709962..937e4e787b 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/colorpicker/colorpicker.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/colorpicker/colorpicker.controller.js @@ -110,7 +110,7 @@ function ColorPickerController($scope) { ); return { isValid: isValid, - errorMsg: "Value cannot be empty", + errorMsg: $scope.model.validation.mandatoryMessage || "Value cannot be empty", errorKey: "required" }; } diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/datepicker/datepicker.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/datepicker/datepicker.controller.js index 62099734fb..092f6411e8 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/datepicker/datepicker.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/datepicker/datepicker.controller.js @@ -1,4 +1,4 @@ -function dateTimePickerController($scope, notificationsService, assetsService, angularHelper, userService, $element, dateHelper) { +function dateTimePickerController($scope, angularHelper, dateHelper, validationHelper) { let flatPickr = null; @@ -56,6 +56,11 @@ function dateTimePickerController($scope, notificationsService, assetsService, a setDatePickerVal(); + // Set the message to use for when a mandatory field isn't completed. + // Will either use the one provided on the property type or a localised default. + validationHelper.getMandatoryMessage($scope.model.validation).then(function (value) { + $scope.mandatoryMessage = value; + }); } $scope.clearDate = function() { diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/datepicker/datepicker.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/datepicker/datepicker.html index 0d3fad580e..77719e4421 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/datepicker/datepicker.html +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/datepicker/datepicker.html @@ -32,7 +32,7 @@ - Required + {{mandatoryMessage}} {{datePickerForm.datepicker.errorMsg}} Invalid date diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/dropdownFlexible/dropdownFlexible.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/dropdownFlexible/dropdownFlexible.controller.js index 3b341f7ac0..d842b3b006 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/dropdownFlexible/dropdownFlexible.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/dropdownFlexible/dropdownFlexible.controller.js @@ -1,5 +1,5 @@ angular.module("umbraco").controller("Umbraco.PropertyEditors.DropdownFlexibleController", - function($scope) { + function ($scope, validationHelper) { //setup the default config var config = { @@ -89,4 +89,10 @@ angular.module("umbraco").controller("Umbraco.PropertyEditors.DropdownFlexibleCo $scope.model.value = null; } } + + // Set the message to use for when a mandatory field isn't completed. + // Will either use the one provided on the property type or a localised default. + validationHelper.getMandatoryMessage($scope.model.validation).then(function (value) { + $scope.mandatoryMessage = value; + }); }); diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/dropdownFlexible/dropdownFlexible.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/dropdownFlexible/dropdownFlexible.html index 5f873e9e43..617d841139 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/dropdownFlexible/dropdownFlexible.html +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/dropdownFlexible/dropdownFlexible.html @@ -1,21 +1,29 @@
- + + + - - + + + + + {{mandatoryMessage}} + + +
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/email/email.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/email/email.controller.js new file mode 100644 index 0000000000..9c8a581dd4 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/email/email.controller.js @@ -0,0 +1,10 @@ +function emailController($scope, validationHelper) { + + // Set the message to use for when a mandatory field isn't completed. + // Will either use the one provided on the property type or a localised default. + validationHelper.getMandatoryMessage($scope.model.validation).then(function(value) { + $scope.mandatoryMessage = value; + }); + +} +angular.module('umbraco').controller("Umbraco.PropertyEditors.EmailController", emailController); diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/email/email.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/email/email.html index 881ad37d7c..8576d179f2 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/email/email.html +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/email/email.html @@ -1,4 +1,4 @@ -
+
- Required + {{mandatoryMessage}} Invalid email {{emailFieldForm.textbox.errorMsg}} diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/radiobuttons/radiobuttons.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/radiobuttons/radiobuttons.controller.js index 3a96b6573a..13baf27f8a 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/radiobuttons/radiobuttons.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/radiobuttons/radiobuttons.controller.js @@ -1,5 +1,5 @@ angular.module("umbraco").controller("Umbraco.PropertyEditors.RadioButtonsController", - function($scope) { + function ($scope, validationHelper) { function init() { @@ -19,6 +19,12 @@ angular.module("umbraco").controller("Umbraco.PropertyEditors.RadioButtonsContro $scope.configItems = configItems; } + + // Set the message to use for when a mandatory field isn't completed. + // Will either use the one provided on the property type or a localised default. + validationHelper.getMandatoryMessage($scope.model.validation).then(function (value) { + $scope.mandatoryMessage = value; + }); } diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/radiobuttons/radiobuttons.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/radiobuttons/radiobuttons.html index 8c5f2a22d3..b5e55adebd 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/radiobuttons/radiobuttons.html +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/radiobuttons/radiobuttons.html @@ -1,7 +1,15 @@ 
-
    -
  • - -
    • -
+ + +
    +
  • + +
    • +
+ + + {{mandatoryMessage}} + + +
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/textbox/textbox.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/textbox/textbox.controller.js index 2bbd7404f7..feb0148849 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/textbox/textbox.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/textbox/textbox.controller.js @@ -1,4 +1,4 @@ -function textboxController($scope, localizationService) { +function textboxController($scope, validationHelper) { // macro parameter editor doesn't contains a config object, // so we create a new one to hold any properties if (!$scope.model.config) { @@ -19,14 +19,10 @@ function textboxController($scope, localizationService) { } $scope.model.change(); - $scope.mandatoryMessage = ""; - if ($scope.model.validation.mandatoryMessage) { - $scope.mandatoryMessage = $scope.model.validation.mandatoryMessage; - } else { - localizationService.localize("general_required").then(function (value) { - $scope.mandatoryMessage = value; - }); - } - + // Set the message to use for when a mandatory field isn't completed. + // Will either use the one provided on the property type or a localised default. + validationHelper.getMandatoryMessage($scope.model.validation).then(function(value) { + $scope.mandatoryMessage = value; + }); } angular.module('umbraco').controller("Umbraco.PropertyEditors.textboxController", textboxController);