Add mark as important on selection option

Signed-off-by: greta <gretadoci@gmail.com>

3 files changed, 88 insertions, 25 deletions

diff --git a/src/components/Envelope.vue b/src/components/Envelope.vue
index 054db222c..1a360aff9 100644
--- a/src/components/Envelope.vue
+++ b/src/components/Envelope.vue
@@ -312,7 +312,7 @@ export default {
 				.some((tag) => tag.imapLabel === '$label1')
 		},
 		tags() {
-			return this.$store.getters.getEnvelopeTags(this.data.databaseId).filter((tag) => tag.imapLabel !== '$label1')
+			return this.$store.getters.getEnvelopeTags(this.data.databaseId).filter((tag) => tag.imapLabel && tag.imapLabel !== '$label1')
 		},
 		draggableLabel() {
 			let label = this.data.subject
diff --git a/src/components/EnvelopeList.vue b/src/components/EnvelopeList.vue
index c56350594..60d9053bd 100644
--- a/src/components/EnvelopeList.vue
+++ b/src/components/EnvelopeList.vue
@@ -26,6 +26,40 @@
 					}}</span>
 				</div>
 				<Actions class="app-content-list-item-menu" menu-align="right">
+					<ActionButton
+						v-if="isAtLeastOneSelectedUnimportant"
+						icon="icon-important"
+						:close-after-click="true"
+						@click.prevent="markSelectionImportant">
+						{{
+							n(
+								'mail',
+								'Mark {number} as important',
+								'Mark {number} as important',
+								selection.length,
+								{
+									number: selection.length,
+								}
+							)
+						}}
+					</ActionButton>
+					<ActionButton
+						v-if="isAtLeastOneSelectedImportant"
+						icon="icon-important"
+						:close-after-click="true"
+						@click.prevent="markSelectionUnimportant">
+						{{
+							n(
+								'mail',
+								'Mark {number} as unimportant',
+								'Mark {number} as unimportant',
+								selection.length,
+								{
+									number: selection.length,
+								}
+							)
+						}}
+					</ActionButton>
 					<ActionButton icon="icon-starred"
 						:close-after-click="true"
 						@click.prevent="favoriteOrUnfavoriteAll">
@@ -214,6 +248,22 @@ export default {
 			// returns false if at least one selected message has not been read yet
 			return this.selectedEnvelopes.every((env) => env.flags.seen === true)
 		},
+		isAtLeastOneSelectedImportant() {
+			// returns true if at least one selected message is marked as important
+			return this.selectedEnvelopes.some((env) => {
+				return this.$store.getters
+					.getEnvelopeTags(env.databaseId)
+					.some((tag) => tag.imapLabel === '$label1')
+			})
+		},
+		isAtLeastOneSelectedUnimportant() {
+			// returns true if at least one selected message is not marked as important
+			return this.selectedEnvelopes.some((env) => {
+				return !this.$store.getters
+					.getEnvelopeTags(env.databaseId)
+					.some((tag) => tag.imapLabel === '$label1')
+			})
+		},
 		areAllSelectedFavorite() {
 			// returns false if at least one selected message has not been favorited yet
 			return this.selectedEnvelopes.every((env) => env.flags.flagged === true)
@@ -257,6 +307,24 @@ export default {
 			})
 			this.unselectAll()
 		},
+		markSelectionImportant() {
+			this.selectedEnvelopes.forEach((envelope) => {
+				this.$store.dispatch('markEnvelopeImportantOrUnimportant', {
+					envelope,
+					addTag: true,
+				})
+			})
+			this.unselectAll()
+		},
+		markSelectionUnimportant() {
+			this.selectedEnvelopes.forEach((envelope) => {
+				this.$store.dispatch('markEnvelopeImportantOrUnimportant', {
+					envelope,
+					addTag: false,
+				})
+			})
+			this.unselectAll()
+		},
 		favoriteOrUnfavoriteAll() {
 			const favFlag = !this.areAllSelectedFavorite
 			this.selectedEnvelopes.forEach((envelope) => {
diff --git a/src/store/actions.js b/src/store/actions.js
index 399362c23..c617b0d3c 100644
--- a/src/store/actions.js
+++ b/src/store/actions.js
@@ -370,7 +370,7 @@ export default {
 
 			if (rec && mbs.length) {
 				logger.debug('not enough local envelopes for the next unified page. ' + mbs.length + ' fetches required', {
-					mailboxes: mbs.map(mb => mb.databaseId)
+					mailboxes: mbs.map(mb => mb.databaseId),
 				})
 				return pipe(
 					map((mb) =>
@@ -650,29 +650,6 @@ export default {
 			})
 		})
 	},
-	toggleTagImportant({ commit, getters }, envelope) {
-		// Change immediately and switch back on error
-		// check if the prop exist and if yes, save it
-		const oldState = envelope.tags
-		commit('tagEnvelope', {
-			envelope,
-			tag: '$label1',
-			// exists? Yes? So unset - (untag) the message
-			// if it doesn't, add /tag) the message,
-			value: !oldState,
-		})
-
-		setEnvelopeTag(envelope.databaseId, '$label1', !oldState).catch((e) => {
-			console.error('could not toggle message important state', e)
-
-			// Revert change
-			commit('tagEnvelope', {
-				envelope,
-				tag: '$label1',
-				value: oldState,
-			})
-		})
-	},
 	toggleEnvelopeJunk({ commit, getters }, envelope) {
 		// Change immediately and switch back on error
 		const oldState = envelope.flags.junk
@@ -733,6 +710,24 @@ export default {
 			})
 		})
 	},
+	async markEnvelopeImportantOrUnimportant({ dispatch, getters }, { envelope, addTag }) {
+		const importantLabel = '$label1'
+		const hasTag = getters
+			.getEnvelopeTags(envelope.databaseId)
+			.some((tag) => tag.imapLabel === importantLabel)
+		if (hasTag && !addTag) {
+			await dispatch('removeEnvelopeTag', {
+				envelope,
+				imapLabel: importantLabel,
+			})
+		} else if (!hasTag && addTag) {
+			await dispatch('addEnvelopeTag', {
+				envelope,
+				imapLabel: importantLabel,
+			})
+		}
+	},
+
 	async fetchThread({ getters, commit }, id) {
 		const thread = await fetchThread(id)
 		commit('addEnvelopeThread', {