From eec400021cddc022e256472612a2493e24700303 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Tue, 5 May 2020 13:09:24 +0200 Subject: [PATCH 1/2] make sure that validation indication in variant-picker only stays as long as a error is present. Plus avoid displaying field-errors, we only want to use property errors for this indication. --- .../umbeditorcontentheader.directive.js | 51 ++++++++++++------- .../services/servervalidationmgr.service.js | 7 ++- .../editor/umb-editor-content-header.html | 4 +- 3 files changed, 39 insertions(+), 23 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditorcontentheader.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditorcontentheader.directive.js index 170657773e8e..3ab37e7b10d8 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditorcontentheader.directive.js +++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditorcontentheader.directive.js @@ -47,10 +47,18 @@ scope.vm.defaultVariant = null; scope.vm.errorsOnOtherVariants = false;// indicating wether to show that other variants, than the current, have errors. + function updateVaraintErrors() { + scope.content.variants.forEach( function (variant) { + variant.hasError = scope.variantHasError(variant); + + }); + checkErrorsOnOtherVariants(); + } + function checkErrorsOnOtherVariants() { var check = false; scope.content.variants.forEach( function (variant) { - if (variant.active !== true && scope.variantHasError(variant)) { + if (variant.active !== true && variant.hasError) { check = true; } }); @@ -58,6 +66,19 @@ } function onVariantValidation(valid, errors, allErrors, culture, segment) { + + // only want to react to property errors: + if(errors.findIndex(error => {console.log("reject this", error, error.propertyAlias !== null); return error.propertyAlias !== null;}) === -1) { + console.log("rejected", errors) + // we dont have any errors for properties, meaning we will back out. + return; + } + + // If error coming back is invariant, we will assign the error to the default variant by picking the defaultVariant language. + if(culture === "invariant") { + culture = scope.vm.defaultVariant.language.culture; + } + var index = scope.vm.variantsWithError.findIndex((item) => item.culture === culture && item.segment === segment) if(valid === true) { if (index !== -1) { @@ -68,7 +89,7 @@ scope.vm.variantsWithError.push({"culture": culture, "segment": segment}); } } - checkErrorsOnOtherVariants(); + scope.$evalAsync(updateVaraintErrors); } function onInit() { @@ -88,8 +109,8 @@ scope.vm.hasVariants = (scope.vm.hasCulture || scope.vm.hasSegments); scope.vm.hasSubVariants = (scope.vm.hasCulture && scope.vm.hasSegments); - - checkErrorsOnOtherVariants(); + + updateVaraintErrors(); scope.vm.variantMenu = []; if (scope.vm.hasCulture) { @@ -112,22 +133,22 @@ }); }); } - - + scope.editor.variantApps.forEach( (app) => { if (app.alias === "umbContent") { app.anchors = scope.editor.content.tabs; } }); - + scope.content.variants.forEach( function (variant) { + + // if we are looking for the variant with default language then we also want to check for invariant variant. + if (variant.language && variant.language.culture === scope.vm.defaultVariant.language.culture && variant.segment === null) { + unsubscribe.push(serverValidationManager.subscribe(null, "invariant", null, onVariantValidation, null)); + } unsubscribe.push(serverValidationManager.subscribe(null, variant.language !== null ? variant.language.culture : null, null, onVariantValidation, variant.segment)); }); - unsubscribe.push(serverValidationManager.subscribe(null, null, null, onVariantValidation, null)); - - - } scope.goBack = function () { @@ -174,14 +195,6 @@ * @param {any} culture */ scope.variantHasError = function(variant) { - if(variant.language) { - // if we are looking for the variant with default language then we also want to check for invariant variant. - if (variant.language.culture === scope.vm.defaultVariant.language.culture && variant.segment === null) { - if(scope.vm.variantsWithError.find((item) => item.culture === "invariant" && item.segment === null) !== undefined) { - return true; - } - } - } if(scope.vm.variantsWithError.find((item) => (!variant.language || item.culture === variant.language.culture) && item.segment === variant.segment) !== undefined) { return true; } diff --git a/src/Umbraco.Web.UI.Client/src/common/services/servervalidationmgr.service.js b/src/Umbraco.Web.UI.Client/src/common/services/servervalidationmgr.service.js index d0a32af631bb..718e44d66e45 100644 --- a/src/Umbraco.Web.UI.Client/src/common/services/servervalidationmgr.service.js +++ b/src/Umbraco.Web.UI.Client/src/common/services/servervalidationmgr.service.js @@ -356,7 +356,7 @@ function serverValidationManager($timeout) { var cbs = this.getFieldCallbacks(fieldName); //call each callback for this error for (var cb in cbs) { - executeCallback(this, errorsForCallback, cbs[cb].callback, null); + executeCallback(this, errorsForCallback, cbs[cb].callback, null, null); } }, @@ -456,7 +456,10 @@ function serverValidationManager($timeout) { callbacks[cb].callback.apply(this, [ true, //pass in a value indicating it is VALID [], //pass in empty collection - []]); //pass in empty collection + [], + null, + null] + ); } }, diff --git a/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-content-header.html b/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-content-header.html index 3809379f1b35..7e2cb4f01249 100644 --- a/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-content-header.html +++ b/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-content-header.html @@ -53,7 +53,7 @@