yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #8064 from umbraco/v8/bugfix/7964-fix-validation-indication-in-variant-picker

Browse Source 
UI: Corrected validation indication in variant-picker
This commit is contained in:
Warren Buckley
2020-05-05 13:33:55 +01:00
committed by GitHub
parent 3e65d21b67 d761658feb
commit a2fe48d887
3 changed files with 38 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditorcontentheader.directive.js
View File

@@ -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,18 @@
}
function onVariantValidation(valid, errors, allErrors, culture, segment) {
// only want to react to property errors:
if(errors.findIndex(error => {return error.propertyAlias !== null;}) === -1) {
// 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 +88,7 @@
scope.vm.variantsWithError.push({"culture": culture, "segment": segment});
}
}
checkErrorsOnOtherVariants();
scope.$evalAsync(updateVaraintErrors);
}
function onInit() {
@@ -88,8 +108,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 +132,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 +194,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;
}

7
src/Umbraco.Web.UI.Client/src/common/services/servervalidationmgr.service.js
View File

@@ -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]
);
}
},

4
src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-content-header.html
View File

@@ -53,7 +53,7 @@
<umb-dropdown-item
ng-repeat-start="entry in vm.variantMenu track by entry.key"
class="umb-variant-switcher__item"
ng-class="{'--current': entry.variant === editor.content, '--active': entry.variant.active && vm.dropdownOpen, '--error': variantHasError(entry.variant), '--state-notCreated':entry.variant.state==='NotCreated' && entry.variant.name == null, '--state-draft':entry.variant.state==='Draft' || (entry.variant.state==='NotCreated' && entry.variant.name != null)}"
ng-class="{'--current': entry.variant === editor.content, '--active': entry.variant.active && vm.dropdownOpen, '--error': entry.variant.active !== true && entry.variant.hasError, '--state-notCreated':entry.variant.state==='NotCreated' && entry.variant.name == null, '--state-draft':entry.variant.state==='Draft' || (entry.variant.state==='NotCreated' && entry.variant.name != null)}"
>
<button type="button" ng-if="entry.subVariants && entry.subVariants.length > 0" class="umb-variant-switcher__item-expand-button umb-outline" ng-click="entry.open = !entry.open">
<i class="icon icon-navigation-down" ng-if="entry.open"></i>
@@ -73,7 +73,7 @@
<umb-dropdown-item
ng-repeat="subVariant in entry.subVariants track by $index"
class="umb-variant-switcher__item"
ng-class="{'--current': subVariant === editor.content, '--active': subVariant.active && vm.dropdownOpen, '--error': variantHasError(subVariant), '--state-notCreated':subVariant.state==='NotCreated', '--state-draft':subVariant.state==='Draft'}"
ng-class="{'--current': subVariant === editor.content, '--active': subVariant.active && vm.dropdownOpen, '--error': subVariant.active !== true && subVariant.hasError, '--state-notCreated':subVariant.state==='NotCreated', '--state-draft':subVariant.state==='Draft'}"
>
<button type="button" class="umb-variant-switcher__name-wrapper umb-outline" ng-click="selectVariant($event, subVariant)" prevent-default>
<span class="umb-variant-switcher__name" ng-bind="subVariant.segment"></span>