Add UI for tag assignment

lib/Controller/MessagesController.php

@@ -707,7 +707,7 @@ public function removeTag(int $id, string $imapLabel): JSONResponse {
 		}
 
 		$this->mailManager->tagMessage($account, $mailbox->getName(), $message, $tag, false);
-		return new JSONResponse();
+		return new JSONResponse($tag);
 	}
 
 	/**

lib/Controller/PageController.php

@@ -29,6 +29,7 @@
 use Exception;
 use OCA\Mail\Contracts\IMailManager;
 use OCA\Mail\Contracts\IUserPreferences;
+use OCA\Mail\Db\TagMapper;
 use OCA\Mail\Service\AccountService;
 use OCA\Mail\Service\AliasesService;
 use OCP\AppFramework\Controller;
@@ -69,6 +70,9 @@ class PageController extends Controller {
 	/** @var IMailManager */
 	private $mailManager;
 
+	/** @var TagMapper */
+	private $tagMapper;
+
 	/** @var IInitialState */
 	private $initialStateService;
 
@@ -85,6 +89,7 @@ public function __construct(string $appName,
 								IUserSession $userSession,
 								IUserPreferences $preferences,
 								IMailManager $mailManager,
+								TagMapper $tagMapper,
 								IInitialState $initialStateService,
 								LoggerInterface $logger) {
 		parent::__construct($appName, $request);
@@ -97,6 +102,7 @@ public function __construct(string $appName,
 		$this->userSession = $userSession;
 		$this->preferences = $preferences;
 		$this->mailManager = $mailManager;
+		$this->tagMapper = $tagMapper;
 		$this->initialStateService = $initialStateService;
 		$this->logger = $logger;
 	}
@@ -139,6 +145,10 @@ public function index(): TemplateResponse {
 			'account-settings',
 			json_decode($this->preferences->getPreference('account-settings', '[]'), true, 512, JSON_THROW_ON_ERROR) ?? []
 		);
+		$this->initialStateService->provideInitialState(
+			'tags',
+			$this->tagMapper->getAllTagsForUser($this->currentUserId)
+		);
 
 		$user = $this->userSession->getUser();
 		$response = new TemplateResponse($this->appName, 'index',

src/components/Envelope.vue

@@ -92,6 +92,12 @@
 					selected ? t('mail', 'Unselect') : t('mail', 'Select')
 				}}
 			</ActionButton>
+			<ActionButton
+				icon="icon-tag"
+				:close-after-click="true"
+				@click.prevent="onOpenTagModal">
+				{{ t('mail', 'Add tags') }}
+			</ActionButton>
 			<ActionButton icon="icon-external"
 				:close-after-click="true"
 				@click.prevent="onOpenMoveModal">
@@ -135,6 +141,11 @@
 				:envelopes="[data]"
 				@move="onMove"
 				@close="onCloseMoveModal" />
+			<TagModal
+				v-if="showTagModal"
+				:account="account"
+				:envelope="data"
+				@close="onCloseTagModal" />
 		</template>
 	</ListItem>
 </template>
@@ -154,6 +165,7 @@ import NoTrashMailboxConfiguredError
 import logger from '../logger'
 import { matchError } from '../errors/match'
 import MoveModal from './MoveModal'
+import TagModal from './TagModal'
 
 export default {
 	name: 'Envelope',
@@ -163,6 +175,7 @@ export default {
 		ActionButton,
 		ActionRouter,
 		MoveModal,
+		TagModal,
 	},
 	directives: {
 		draggableEnvelope: DraggableEnvelopeDirective,
@@ -200,6 +213,7 @@ export default {
 		return {
 			importantSvg,
 			showMoveModal: false,
+			showTagModal: false,
 		}
 	},
 	computed: {
@@ -351,6 +365,12 @@ export default {
 		onCloseMoveModal() {
 			this.showMoveModal = false
 		},
+		onOpenTagModal() {
+			this.showTagModal = true
+		},
+		onCloseTagModal() {
+			this.showTagModal = false
+		},
 	},
 }
 </script>

src/components/MenuEnvelope.vue

@@ -64,6 +64,12 @@
 					envelope.flags.junk ? t('mail', 'Mark not spam') : t('mail', 'Mark as spam')
 				}}
 			</ActionButton>
+			<ActionButton
+				icon="icon-tag"
+				:close-after-click="true"
+				@click.prevent="onOpenTagModal">
+				{{ t('mail', 'Add tags') }}
+			</ActionButton>
 			<ActionButton v-if="withSelect"
 				icon="icon-checkmark"
 				:close-after-click="true"
@@ -110,6 +116,11 @@
 			:envelopes="[envelope]"
 			@move="onMove"
 			@close="onCloseMoveModal" />
+		<TagModal
+			v-if="showTagModal"
+			:account="account"
+			:envelope="envelope"
+			@close="onCloseTagModal" />
 	</div>
 </template>
 
@@ -125,6 +136,7 @@ import { generateUrl } from '@nextcloud/router'
 import logger from '../logger'
 import { matchError } from '../errors/match'
 import Modal from '@nextcloud/vue/dist/Components/Modal'
+import TagModal from './TagModal'
 import MoveModal from './MoveModal'
 import NoTrashMailboxConfiguredError from '../errors/NoTrashMailboxConfiguredError'
 import { showError } from '@nextcloud/dialogs'
@@ -138,6 +150,7 @@ export default {
 		ActionRouter,
 		Modal,
 		MoveModal,
+		TagModal,
 	},
 	props: {
 		envelope: {
@@ -180,6 +193,7 @@ export default {
 			sourceLoading: false,
 			showSourceModal: false,
 			showMoveModal: false,
+			showTagModal: false,
 		}
 	},
 	computed: {
@@ -327,6 +341,12 @@ export default {
 		onCloseMoveModal() {
 			this.showMoveModal = false
 		},
+		onOpenTagModal() {
+			this.showTagModal = true
+		},
+		onCloseTagModal() {
+			this.showTagModal = false
+		},
 	},
 }
 </script>

src/components/TagModal.vue

@@ -0,0 +1,137 @@
+<!--
+  - @copyright 2021 Greta Doci <gretadoci@gmail.com>
+  -
+  - @author 2021 Greta Doci <gretadoci@gmail.com>
+  -
+  - @license GNU AGPL version 3 or any later version
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program.  If not, see <http://www.gnu.org/licenses/>.
+  -->
+
+<template>
+	<Modal size="large" @close="onClose">
+		<div class="modal-content">
+			<h2 class="tag-title">
+				{{ t('mail', 'Add tags') }}
+			</h2>
+			<div v-for="tag in tags" :key="tag.id" class="tag-group">
+				<div class="tag-group__bg button"
+					:style="{'background-color': tag.color}" />
+				<span class="tag-group__label"
+					:style="{color: tag.color}">
+					{{ tag.displayName }} </span>
+				<button v-if="!isSet(tag.imapLabel)"
+					class="tag-actions"
+					@click="addTag(tag.imapLabel)">
+					{{ t('mail','Add') }}
+				</button>
+				<button v-else
+					class="tag-actions"
+					@click="removeTag(tag.imapLabel)">
+					{{ t('mail','Remove') }}
+				</button>
+			</div>
+		</div>
+	</Modal>
+</template>
+
+<script>
+import Modal from '@nextcloud/vue/dist/Components/Modal'
+export default {
+	name: 'TagModal',
+	components: {
+		Modal,
+	},
+	props: {
+		envelope: {
+		// The envelope on which this menu will act
+			required: true,
+			type: Object,
+		},
+	},
+	data() {
+		return {
+			isAdded: false,
+		}
+	},
+	computed: {
+		tags() {
+			return this.$store.getters.getTags.filter((tag) => tag.imapLabel !== '$label1')
+		},
+	},
+	methods: {
+		onClose() {
+			this.$emit('close')
+		},
+		isSet(imapLabel) {
+			return this.$store.getters.getEnvelopeTags(this.envelope.databaseId).some(tag => tag.imapLabel === imapLabel)
+		},
+		addTag(imapLabel) {
+			this.isAdded = true
+			this.$store.dispatch('addEnvelopeTag', { envelope: this.envelope, imapLabel })
+		},
+		removeTag(imapLabel) {
+			this.isAdded = false
+			this.$store.dispatch('removeEnvelopeTag', { envelope: this.envelope, imapLabel })
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+::v-deep .modal-wrapper .modal-container {
+	overflow: scroll !important;
+}
+::v-deep .modal-content {
+	padding-left: 20px;
+	padding-right: 20px;
+	// modal jumps on the right when text is changed to 'remove'
+	width: 220px;
+}
+.tag-title {
+	margin-top: 20px;
+	margin-left: 10px;
+}
+.tag-group {
+	display: block;
+	border: 1px solid transparent;
+	border-radius: var(--border-radius-pill);
+	position: relative;
+	margin: 0 1px;
+	overflow: hidden;
+	left: 4px;
+}
+.tag-actions {
+	margin-left: 115px;
+	background-color: transparent;
+	border: none;
+	&:hover,
+	&:focus {
+		opacity: .7;
+	}
+}
+.tag-group__bg {
+	position: absolute;
+	opacity: 15%;
+	margin-left: 5px;
+	min-width: 110px;
+	cursor: default;
+}
+.tag-group__label {
+	position: absolute;
+	z-index: 2;
+	font-weight: bold;
+	margin: 8px 24px;
+}
+</style>

src/main.js

@@ -79,6 +79,7 @@ store.commit('savePreference', {
 
 const accountSettings = loadState('mail', 'account-settings')
 const accounts = loadState('mail', 'accounts', [])
+const tags = loadState('mail', 'tags', [])
 
 accounts.map(fixAccountId).forEach((account) => {
 	const settings = accountSettings.find(settings => settings.accountId === account.id)
@@ -95,6 +96,8 @@ accounts.map(fixAccountId).forEach((account) => {
 	store.commit('addAccount', { ...account, ...settings })
 })
 
+tags.forEach(tag => store.commit('addTag', { tag }))
+
 export default new Vue({
 	el: '#content',
 	router,

src/service/MessageService.js

@@ -126,13 +126,13 @@ export async function setEnvelopeTag(id, imapLabel) {
 	return data
 }
 
-export function removeEnvelopeTag(id, imapLabel) {
+export async function removeEnvelopeTag(id, imapLabel) {
 	const url = generateUrl('/apps/mail/api/messages/{id}/tags/{imapLabel}', {
 		id, imapLabel,
 	})
 
-	return axios
-		.delete(url)
+	const { data } = await axios.delete(url)
+	return data
 }
 
 export async function fetchMessage(id) {