diff --git a/webapp/src/main/webapp/vue-apps/notification-user-settings/components/UserSettingDigestDrawer.vue b/webapp/src/main/webapp/vue-apps/notification-user-settings/components/UserSettingDigestDrawer.vue index e70b7aa11c8..7c6be42bcca 100644 --- a/webapp/src/main/webapp/vue-apps/notification-user-settings/components/UserSettingDigestDrawer.vue +++ b/webapp/src/main/webapp/vue-apps/notification-user-settings/components/UserSettingDigestDrawer.vue @@ -88,15 +88,30 @@ export default { dailyCategories: [], weekly: false, weeklyCategories: [], + loadedSettings: null, }), computed: { allCategoryIds() { return this.categories.map(category => category.id); }, - // An enabled frequency with no category would send an empty digest, the - // server refuses it as well + // The comparison is on the effective state: the categories of a frequency + // that is off don't count, unchecking a frequency after having played with + // its categories is going back to the initial state + changed() { + return this.loadedSettings + && (this.daily !== this.loadedSettings.daily + || this.weekly !== this.loadedSettings.weekly + || this.daily && !this.sameCategories(this.dailyCategories, this.loadedSettings.dailyCategories) + || this.weekly && !this.sameCategories(this.weeklyCategories, this.loadedSettings.weeklyCategories)); + }, + // Apply stays disabled until the user changes something, then follows the + // server rule: an enabled frequency with no category would send an empty + // digest, the server refuses it as well. Unchecking everything stays a + // change to apply: it is how the user switches his digest off disabled() { return this.saving + || this.loading + || !this.changed || this.daily && !this.dailyCategories.length || this.weekly && !this.weeklyCategories.length; }, @@ -130,6 +145,14 @@ export default { // categories already loaded to leave the choices of the user alone this.daily = settings?.daily || false; this.weekly = settings?.weekly || false; + // What the server holds right now: Apply wakes up when the choices + // differ from it + this.loadedSettings = { + daily: this.daily, + dailyCategories: this.dailyCategories.slice(), + weekly: this.weekly, + weeklyCategories: this.weeklyCategories.slice(), + }; }) .catch(() => { this.$root.$emit('alert-message', this.$t('UserSettings.digest.error.load'), 'error'); @@ -146,8 +169,13 @@ export default { this.dailyCategories = []; this.weekly = false; this.weeklyCategories = []; + this.loadedSettings = null; this.saving = false; }, + sameCategories(categories, loadedCategories) { + return categories.length === loadedCategories.length + && categories.every(id => loadedCategories.includes(id)); + }, save() { this.saving = true; const dailyCategories = this.daily && this.dailyCategories || [];