update save dialogs

This commit is contained in:
Niels Lyngsø
2020-02-20 10:22:09 +01:00
parent dcdeae9ea3
commit 510ecf5168
13 changed files with 168 additions and 125 deletions
@@ -11,6 +11,10 @@
.umb-variant-selector-entry__title {
font-weight: 600;
font-size: 14px;
.__secondarytitle {
font-weight: normal;
color: @gray-5;
}
}
.umb-variant-selector-entry__description {
display: block;
@@ -53,7 +53,7 @@
<umb-dropdown-item
ng-repeat-start="entry in vm.variantMenu track by $index"
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', '--state-draft':entry.variant.state==='Draft'}"
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)}"
>
<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>
@@ -21,10 +21,15 @@
on-change="vm.changeSelection(variant)"
server-validation-field="{{variant.htmlId}}"
>
<span class="umb-variant-selector-entry__title">
<span class="umb-variant-selector-entry__title" ng-if="!(variant.segment && variant.language)">
<span ng-bind="variant.displayName"></span>
<strong ng-if="variant.isMandatory" class="umb-control-required">*</strong>
</span>
<span class="umb-variant-selector-entry__title" ng-if="variant.segment && variant.language">
<span ng-bind="variant.segment"></span>
<span class="__secondarytitle"> — {{variant.language.name}}</span>
<strong ng-if="variant.isMandatory" class="umb-control-required">*</strong>
</span>
<span class="umb-variant-selector-entry__description" ng-if="!publishVariantSelectorForm.publishVariantSelector.$invalid && !(variant.notifications && variant.notifications.length > 0)">
<umb-variant-state variant="variant"></umb-variant-state>
<span ng-if="variant.isMandatory"> - </span>
@@ -54,10 +59,15 @@
<div class="umb-list-item" ng-repeat="variant in vm.missingMandatoryVariants track by variant.compositeId">
<div class="umb-variant-selector-entry" ng-class="{'umb-list-item--error': publishVariantSelectorForm.publishVariantSelector.$invalid}">
<span class="umb-variant-selector-entry__title">
<span class="umb-variant-selector-entry__title" ng-if="!(variant.segment && variant.language)">
<span ng-bind="variant.displayName"></span>
<strong ng-if="variant.isMandatory" class="umb-control-required">*</strong>
</span>
<span class="umb-variant-selector-entry__title" ng-if="variant.segment && variant.language">
<span ng-bind="variant.segment"></span>
<span class="__secondarytitle"> — {{variant.language.name}}</span>
<strong ng-if="variant.isMandatory" class="umb-control-required">*</strong>
</span>
<span class="umb-variant-selector-entry__description" ng-if="!publishVariantSelectorForm.publishVariantSelector.$invalid && !(variant.notifications && variant.notifications.length > 0)">
<umb-variant-state variant="variant"></umb-variant-state>
<span ng-if="variant.isMandatory"> - </span>
@@ -22,11 +22,12 @@
});
}
_.each(vm.variants,
function (variant) {
variant.compositeId = (variant.language ? variant.language.culture : "inv") + "_" + (variant.segment ? variant.segment : "");
variant.htmlId = "_content_variant_" + variant.compositeId;
});
_.each(vm.variants, function (variant) {
variant.compositeId = (variant.language ? variant.language.culture : "inv") + "_" + (variant.segment ? variant.segment : "");
variant.htmlId = "_content_variant_" + variant.compositeId;
variant.isMandatory = isMandatoryFilter(variant);
});
if (vm.variants.length > 1) {
@@ -107,6 +108,14 @@
variant.save = variant.publish;
}
function isMandatoryFilter(variant) {
//determine a variant is 'dirty' (meaning it will show up as publish-able) if it's
// * has a mandatory language
// * without having a segment, segments cant be mandatory at current state of code.
return (variant.language && variant.language.isMandatory === true && variant.segment == null);
}
//when this dialog is closed, reset all 'publish' flags
$scope.$on('$destroy', function () {
for (var i = 0; i < vm.variants.length; i++) {
@@ -37,17 +37,21 @@
<ng-form name="publishVariantSelectorForm">
<div class="umb-variant-selector-entry" ng-class="{'umb-list-item--error': publishVariantSelectorForm.publishVariantSelector.$invalid}">
<umb-checkbox
<umb-checkbox input-id="{{variant.htmlId}}"
name="publishVariantSelector"
model="variant.publish"
on-change="vm.changeSelection(variant)"
server-validation-field="{{variant.htmlId}}"
>
<span class="umb-variant-selector-entry__title">
>
<span class="umb-variant-selector-entry__title" ng-if="!(variant.segment && variant.language)">
<span ng-bind="variant.displayName"></span>
<strong ng-if="variant.isMandatory" class="umb-control-required">*</strong>
</span>
<span class="umb-variant-selector-entry__title" ng-if="variant.segment && variant.language">
<span ng-bind="variant.segment"></span>
<span class="__secondarytitle"> — {{variant.language.name}}</span>
<strong ng-if="variant.isMandatory" class="umb-control-required">*</strong>
</span>
<span class="umb-variant-selector-entry__description" ng-if="!publishVariantSelectorForm.publishVariantSelector.$invalid && !(variant.notifications && variant.notifications.length > 0)">
<umb-variant-state variant="variant"></umb-variant-state>
<span ng-if="variant.isMandatory"> - </span>
@@ -56,12 +60,10 @@
<span class="umb-variant-selector-entry__description" ng-messages="publishVariantSelectorForm.publishVariantSelector.$error" show-validation-on-submit>
<span class="text-error" ng-message="valServerField">{{publishVariantSelectorForm.publishVariantSelector.errorMsg}}</span>
</span>
</umb-checkbox>
<umb-variant-notification-list notifications="variant.notifications"></umb-variant-notification-list>
</div>
</ng-form>
</div>
</div>
@@ -25,6 +25,13 @@
return (variant.active || variant.isDirty);
}
function isMandatoryFilter(variant) {
//determine a variant is 'dirty' (meaning it will show up as publish-able) if it's
// * has a mandatory language
// * without having a segment, segments cant be mandatory at current state of code.
return (variant.language && variant.language.isMandatory === true && variant.segment == null);
}
function hasAnyData(variant) {
if(variant.name == null || variant.name.length === 0) {
return false;
@@ -65,6 +72,8 @@
variant.save = false;
variant.publish = false;
variant.isMandatory = isMandatoryFilter(variant);
if(variant.state !== "NotCreated"){
vm.isNew = false;
}
@@ -101,7 +110,7 @@
}
return 0;
});
_.find(vm.variants, function (v) {
if(v.active) {
//ensure that the current one is selected
@@ -1,4 +1,4 @@
<div ng-controller="Umbraco.Overlays.SaveContentController as vm">
<div ng-controller="Umbraco.Overlays.SaveContentController as vm" class="umb-variant-selector-overlay">
<div ng-if="vm.loading" style="min-height: 50px; position: relative;">
<umb-load-indicator></umb-load-indicator>
@@ -7,8 +7,7 @@
<div ng-if="!vm.loading">
<div class="mb3">
<p>
<localize ng-if="!vm.isNew" key="content_languagesToSave"></localize>
<localize ng-if="vm.isNew" key="content_languagesToSaveForFirstTime"></localize>
<localize key="content_variantsToSave"></localize>
</p>
</div>
@@ -17,7 +16,7 @@
<div class="umb-list-item"
ng-repeat="variant in vm.variants | filter:vm.dirtyVariantFilter track by variant.compositeId">
<ng-form name="saveVariantSelectorForm">
<div ng-class="{'umb-list-item--error': saveVariantSelectorForm.saveVariantSelector.$invalid}">
<div class="umb-variant-selector-entry" ng-class="{'umb-list-item--error': saveVariantSelectorForm.saveVariantSelector.$invalid}">
<umb-checkbox
input-id="{{variant.htmlId}}"
@@ -25,21 +24,28 @@
model="variant.save"
on-change="vm.changeSelection(variant)"
server-validation-field="{{variant.htmlId}}"
text="{{variant.language.name}}"
/>
>
<span class="umb-variant-selector-entry__title" ng-if="!(variant.segment && variant.language)">
<span ng-bind="variant.displayName"></span>
<strong ng-if="variant.isMandatory" class="umb-control-required">*</strong>
</span>
<span class="umb-variant-selector-entry__title" ng-if="variant.segment && variant.language">
<span ng-bind="variant.segment"></span>
<span class="__secondarytitle"> — {{variant.language.name}}</span>
<strong ng-if="variant.isMandatory" class="umb-control-required">*</strong>
</span>
<span class="umb-variant-selector-entry__description" ng-if="!saveVariantSelectorForm.saveVariantSelector.$invalid && !(variant.notifications && variant.notifications.length > 0)">
<umb-variant-state variant="variant"></umb-variant-state>
<span ng-if="variant.isMandatory"> - </span>
<span ng-if="variant.isMandatory" ng-class="{'text-error': (variant.publish === false) }"><localize key="languages_mandatoryLanguage"></localize></span>
</span>
<span class="umb-variant-selector-entry__description" ng-messages="saveVariantSelectorForm.saveVariantSelector.$error" show-validation-on-submit>
<span class="text-error" ng-message="valServerField">{{saveVariantSelectorForm.saveVariantSelector.errorMsg}}</span>
</span>
</umb-checkbox>
<div>
<span class="db umb-list-item__description umb-list-item__description--checkbox" ng-if="!saveVariantSelectorForm.$invalid && !(variant.notifications && variant.notifications.length > 0)">
<umb-variant-state variant="variant"></umb-variant-state>
<span ng-if="variant.language.isMandatory"> - <localize key="languages_mandatoryLanguage"></localize></span>
</span>
<umb-variant-notification-list notifications="variant.notifications"></umb-variant-notification-list>
<span class="db" ng-messages="saveVariantSelectorForm.saveVariantSelector.$error" show-validation-on-submit>
<span class="db umb-list-item__description umb-list-item__description--checkbox text-error" ng-message="valServerField">{{saveVariantSelectorForm.saveVariantSelector.errorMsg}}</span>
</span>
<umb-variant-notification-list notifications="variant.notifications"></umb-variant-notification-list>
</div>
</div>
</ng-form>
@@ -12,7 +12,6 @@
vm.clearPublishDate = clearPublishDate;
vm.clearUnpublishDate = clearUnpublishDate;
vm.dirtyVariantFilter = dirtyVariantFilter;
vm.pristineVariantFilter = pristineVariantFilter;
vm.changeSelection = changeSelection;
vm.firstSelectedDates = {};
@@ -24,7 +23,6 @@
function onInit() {
vm.variants = $scope.model.variants;
vm.hasPristineVariants = false;
for (let i = 0; i < vm.variants.length; i++) {
origDates.push({
@@ -38,23 +36,19 @@
$scope.model.title = value;
});
}
_.each(vm.variants, function (variant) {
variant.compositeId = contentEditingHelper.buildCompositeVariantId(variant);
variant.htmlId = "_content_variant_" + variant.compositeId;
variant.isMandatory = isMandatoryFilter(variant);
});
// Check for variants: if a node is invariant it will still have the default language in variants
// so we have to check for length > 1
if (vm.variants.length > 1) {
_.each(vm.variants,
function (variant) {
variant.compositeId = contentEditingHelper.buildCompositeVariantId(variant);
variant.htmlId = "_content_variant_" + variant.compositeId;
//check for pristine variants
if (!vm.hasPristineVariants) {
vm.hasPristineVariants = pristineVariantFilter(variant);
}
});
vm.variants = vm.variants.sort(function (a, b) {
if (a.language && b.language) {
if (a.language.name > b.language.name) {
@@ -75,15 +69,12 @@
return 0;
});
var active = _.find(vm.variants, function (v) {
return v.active;
_.each(vm.variants, function (v) {
if (v.active) {
v.save = true;
}
});
if (active) {
//ensure that the current one is selected
active.save = true;
}
$scope.model.disableSubmitButton = !canSchedule();
}
@@ -143,6 +134,7 @@
* @param {any} type publish or unpublish
*/
function datePickerChange(variant, dateStr, type) {
console.log("datePickerChange", variant, dateStr, type)
if (type === 'publish') {
setPublishDate(variant, dateStr);
} else if (type === 'unpublish') {
@@ -257,6 +249,7 @@
* @param {any} variant
*/
function clearPublishDate(variant) {
console.log("clearPublishDate", variant, variant.releaseDate)
if(variant && variant.releaseDate) {
variant.releaseDate = null;
// we don't have a publish date anymore so we can clear the min date for unpublish
@@ -272,6 +265,7 @@
* @param {any} variant
*/
function clearUnpublishDate(variant) {
console.log("clearUnpublishDate", variant)
if(variant && variant.expireDate) {
variant.expireDate = null;
// we don't have a unpublish date anymore so we can clear the max date for publish
@@ -313,8 +307,11 @@
return (variant.active || variant.isDirty || variant.state === "Draft" || variant.state === "PublishedPendingChanges" || variant.state === "NotCreated");
}
function pristineVariantFilter(variant) {
return !(dirtyVariantFilter(variant));
function isMandatoryFilter(variant) {
//determine a variant is 'dirty' (meaning it will show up as publish-able) if it's
// * has a mandatory language
// * without having a segment, segments cant be mandatory at current state of code.
return (variant.language && variant.language.isMandatory === true && variant.segment == null);
}
/** Returns true if publishing is possible based on if there are un-published mandatory languages */
@@ -94,10 +94,15 @@
model="variant.save"
on-change="vm.changeSelection(variant)"
>
<span class="umb-variant-selector-entry__title">
<span class="umb-variant-selector-entry__title" ng-if="!(variant.segment && variant.language)">
<span ng-bind="variant.displayName"></span>
<strong ng-if="variant.isMandatory" class="umb-control-required">*</strong>
</span>
<span class="umb-variant-selector-entry__title" ng-if="variant.segment && variant.language">
<span ng-bind="variant.segment"></span>
<span class="__secondarytitle"> — {{variant.language.name}}</span>
<strong ng-if="variant.isMandatory" class="umb-control-required">*</strong>
</span>
<span class="umb-variant-selector-entry__description"
ng-if="!scheduleSelectorForm.$invalid && !(variant.notifications && variant.notifications.length > 0)">
<umb-variant-state variant="variant"></umb-variant-state>
@@ -110,7 +115,7 @@
<div class="date-wrapper-mini date-wrapper-mini--checkbox">
<div class="date-wrapper-mini__date" ng-if="vm.dirtyVariantFilter(variant) && (variant.releaseDate || variant.save)">
<div class="date-wrapper-mini__date" ng-if="(variant.releaseDate || variant.save)">
<div style="font-size: 13px; margin-right: 5px;">Publish:<em ng-show="!variant.save">&nbsp;&nbsp;{{variant.releaseDateFormatted}}</em></div>
@@ -6,8 +6,6 @@
var vm = this;
vm.loading = true;
vm.modifiedVariantFilter = modifiedVariantFilter;
vm.unmodifiedVariantFilter = unmodifiedVariantFilter;
vm.changeSelection = changeSelection;
function onInit() {
@@ -20,15 +18,19 @@
$scope.model.title = value;
});
}
if (vm.variants.length !== 0) {
_.each(vm.variants,
function (variant) {
variant.compositeId = contentEditingHelper.buildCompositeVariantId(variant);
variant.htmlId = "_content_variant_" + variant.compositeId;
});
vm.variants = vm.variants.sort(function (a, b) {
_.each(vm.variants, function (variant) {
variant.compositeId = contentEditingHelper.buildCompositeVariantId(variant);
variant.htmlId = "_content_variant_" + variant.compositeId;
variant.isMandatory = isMandatoryFilter(variant);
});
vm.availableVariants = vm.variants.filter(publishableVariantFilter);
if (vm.availableVariants.length !== 0) {
vm.availableVariants = vm.availableVariants.sort(function (a, b) {
if (a.language && b.language) {
if (a.language.name > b.language.name) {
return -1;
@@ -48,15 +50,12 @@
return 0;
});
var active = _.find(vm.variants, function (v) {
return v.active;
_.each(vm.availableVariants, function (v) {
if(v.active) {
v.save = true;
}
});
if (active) {
//ensure that the current one is selected
active.save = true;
}
} else {
//disable save button if we have nothing to save
$scope.model.disableSubmitButton = true;
@@ -73,20 +72,20 @@
$scope.model.disableSubmitButton = !firstSelected; //disable submit button if there is none selected
}
function modifiedVariantFilter(variant) {
//determine a variant is 'modified' (meaning it will show up as able to send for approval)
// * it's editor is in a $dirty state
// * it is in Draft state
// * it is published with pending changes
return (variant.active || variant.isDirty || variant.state === "Draft" || variant.state === "PublishedPendingChanges");
function isMandatoryFilter(variant) {
//determine a variant is 'dirty' (meaning it will show up as publish-able) if it's
// * has a mandatory language
// * without having a segment, segments cant be mandatory at current state of code.
return (variant.language && variant.language.isMandatory === true && variant.segment == null);
}
function unmodifiedVariantFilter(variant) {
//determine a variant is 'unmodified' (meaning it will NOT show up as able to send for approval)
function publishableVariantFilter(variant) {
//determine a variant is 'dirty' (meaning it will show up as publish-able) if it's
// * variant is active
// * it's editor is in a $dirty state
// * it has been published
// * it is not created for that specific language
return (variant.state === "Published" && !variant.isDirty && !variant.active || variant.state === "NotCreated" && !variant.isDirty && !variant.active);
// * it has pending saves
// * it is unpublished
return (variant.active || variant.isDirty || variant.state === "Draft" || variant.state === "PublishedPendingChanges");
}
//when this dialog is closed, reset all 'save' flags
@@ -1,4 +1,4 @@
<div ng-controller="Umbraco.Overlays.SendToPublishController as vm">
<div ng-controller="Umbraco.Overlays.SendToPublishController as vm" class="umb-variant-selector-overlay">
<div class="mb3">
<p><localize key="content_languagesToSendForApproval"></localize></p>
@@ -10,31 +10,36 @@
<div class="umb-list umb-list--condensed" ng-if="!vm.loading">
<div class="umb-list-item" ng-repeat="variant in vm.variants | filter:vm.modifiedVariantFilter">
<div class="umb-list-item" ng-repeat="variant in vm.availableVariants">
<ng-form name="publishVariantSelectorForm">
<div ng-class="{'umb-list-item--error': publishVariantSelectorForm.publishVariantSelector.$invalid}">
<div class="umb-variant-selector-entry" ng-class="{'umb-list-item--error': publishVariantSelectorForm.publishVariantSelector.$invalid}">
<umb-checkbox
input-id="{{variant.htmlId}}"
<umb-checkbox input-id="{{variant.htmlId}}"
name="publishVariantSelector"
model="variant.save"
model="variant.publish"
on-change="vm.changeSelection(variant)"
server-validation-field="{{variant.htmlId}}"
text="{{ variant.language.name }}"
/>
<div>
<span class="db umb-list-item__description umb-list-item__description--checkbox" ng-if="!publishVariantSelectorForm.publishVariantSelector.$invalid && !(variant.notifications && variant.notifications.length > 0)">
>
<span class="umb-variant-selector-entry__title" ng-if="!(variant.segment && variant.language)">
<span ng-bind="variant.displayName"></span>
<strong ng-if="variant.isMandatory" class="umb-control-required">*</strong>
</span>
<span class="umb-variant-selector-entry__title" ng-if="variant.segment && variant.language">
<span ng-bind="variant.segment"></span>
<span class="__secondarytitle"> — {{variant.language.name}}</span>
<strong ng-if="variant.isMandatory" class="umb-control-required">*</strong>
</span>
<span class="umb-variant-selector-entry__description" ng-if="!publishVariantSelectorForm.publishVariantSelector.$invalid && !(variant.notifications && variant.notifications.length > 0)">
<umb-variant-state variant="variant"></umb-variant-state>
<span ng-if="variant.language.isMandatory"> - <localize key="languages_mandatoryLanguage"></localize></span>
<span ng-if="variant.isMandatory"> - </span>
<span ng-if="variant.isMandatory" ng-class="{'text-error': (variant.publish === false) }"><localize key="languages_mandatoryLanguage"></localize></span>
</span>
<span class="db" ng-messages="publishVariantSelectorForm.publishVariantSelector.$error" show-validation-on-submit>
<span class="db umb-list-item__description umb-list-item__description--checkbox text-error" ng-message="valServerField">{{publishVariantSelectorForm.publishVariantSelector.errorMsg}}</span>
<span class="umb-variant-selector-entry__description" ng-messages="publishVariantSelectorForm.publishVariantSelector.$error" show-validation-on-submit>
<span class="text-error" ng-message="valServerField">{{publishVariantSelectorForm.publishVariantSelector.errorMsg}}</span>
</span>
</umb-checkbox>
<umb-variant-notification-list notifications="variant.notifications"></umb-variant-notification-list>
</div>
<umb-variant-notification-list notifications="variant.notifications"></umb-variant-notification-list>
</div>
</ng-form>
@@ -42,20 +47,4 @@
<br />
</div>
<div class="umb-list umb-list--condensed" ng-if="!vm.loading && (vm.variants | filter:vm.unmodifiedVariantFilter).length > 0">
<div class="bold mb3">
<p><localize key="content_unmodifiedLanguages"></localize></p>
</div>
<div class="umb-list-item" ng-repeat="variant in vm.variants | filter:vm.unmodifiedVariantFilter">
<div>
<div style="margin-bottom: 2px;">
<span>{{ variant.language.name }}</span>
<strong ng-if="variant.language.isMandatory" class="umb-control-required">*</strong>
</div>
<umb-variant-state class="umb-list-item__description" variant="variant"></umb-variant-state>
</div>
</div>
</div>
</div>
@@ -20,11 +20,12 @@
});
}
_.each(vm.variants,
function (variant) {
variant.compositeId = contentEditingHelper.buildCompositeVariantId(variant);
variant.htmlId = "_content_variant_" + variant.compositeId;
});
_.each(vm.variants, function (variant) {
variant.compositeId = contentEditingHelper.buildCompositeVariantId(variant);
variant.htmlId = "_content_variant_" + variant.compositeId;
variant.isMandatory = isMandatoryFilter(variant);
});
// node has variants
if (vm.variants.length !== 1) {
@@ -110,6 +111,13 @@
}
function isMandatoryFilter(variant) {
//determine a variant is 'dirty' (meaning it will show up as publish-able) if it's
// * has a mandatory language
// * without having a segment, segments cant be mandatory at current state of code.
return (variant.language && variant.language.isMandatory === true && variant.segment == null);
}
function publishedVariantFilter(variant) {
//determine a variant is 'published' (meaning it will show up as able unpublish)
// * it has been published
@@ -25,10 +25,15 @@
disabled="variant.disabled"
server-validation-field="{{variant.htmlId}}"
>
<span class="umb-variant-selector-entry__title">
<span class="umb-variant-selector-entry__title" ng-if="!(variant.segment && variant.language)">
<span ng-bind="variant.displayName"></span>
<strong ng-if="variant.isMandatory" class="umb-control-required">*</strong>
</span>
<span class="umb-variant-selector-entry__title" ng-if="variant.segment && variant.language">
<span ng-bind="variant.segment"></span>
<span class="__secondarytitle"> — {{variant.language.name}}</span>
<strong ng-if="variant.isMandatory" class="umb-control-required">*</strong>
</span>
<span class="umb-variant-selector-entry__description" ng-if="!publishVariantSelectorForm.publishVariantSelector.$invalid && !(variant.notifications && variant.notifications.length > 0)">
<umb-variant-state variant="variant"></umb-variant-state>
<span ng-if="variant.isMandatory"> - </span>