Load itineraries asynchronouslyenh/4823/async-itineraries

Signed-off-by: Richard Steinmetz <richard@steinmetz.cloud>

5 files changed, 64 insertions, 4 deletions

diff --git a/src/components/Message.vue b/src/components/Message.vue
index 8be67c500..d059296d0 100644
--- a/src/components/Message.vue
+++ b/src/components/Message.vue
@@ -2,6 +2,7 @@
   - @copyright 2020 Christoph Wurst <christoph@winzerhof-wurst.at>
   -
   - @author 2020 Christoph Wurst <christoph@winzerhof-wurst.at>
+  - @author 2021 Richard Steinmetz <richard@steinmetz.cloud>
   -
   - @license GNU AGPL version 3 or any later version
   -
@@ -23,8 +24,8 @@
 	<div :class="[message.hasHtmlBody ? 'mail-message-body mail-message-body-html' : 'mail-message-body']"
 		role="region"
 		:aria-label="t('mail','Message body')">
-		<div v-if="message.itineraries.length > 0" class="message-itinerary">
-			<Itinerary :entries="message.itineraries" :message-id="message.messageId" />
+		<div v-if="itineraries.length > 0" class="message-itinerary">
+			<Itinerary :entries="itineraries" :message-id="message.messageId" />
 		</div>
 		<MessageHTMLBody v-if="message.hasHtmlBody"
 			:url="htmlUrl"
@@ -90,6 +91,9 @@ export default {
 		isEncrypted() {
 			return isPgpgMessage(this.message.hasHtmlBody ? html(this.message.body) : plain(this.message.body))
 		},
+		itineraries() {
+			return this.message.itineraries ?? []
+		},
 	},
 }
 </script>
diff --git a/src/components/ThreadEnvelope.vue b/src/components/ThreadEnvelope.vue
index a1a7e6fda..08b913961 100644
--- a/src/components/ThreadEnvelope.vue
+++ b/src/components/ThreadEnvelope.vue
@@ -2,6 +2,7 @@
   - @copyright 2020 Christoph Wurst <christoph@winzerhof-wurst.at>
   -
   - @author 2020 Christoph Wurst <christoph@winzerhof-wurst.at>
+  - @author 2021 Richard Steinmetz <richard@steinmetz.cloud>
   -
   - @license GNU AGPL version 3 or any later version
   -
@@ -255,8 +256,8 @@ export default {
 			logger.debug(`fetching thread message ${this.envelope.databaseId}`)
 
 			try {
-				const message = this.message = await this.$store.dispatch('fetchMessage', this.envelope.databaseId)
-				logger.debug(`message ${this.envelope.databaseId} fetched`, { message })
+				this.message = await this.$store.dispatch('fetchMessage', this.envelope.databaseId)
+				logger.debug(`message ${this.envelope.databaseId} fetched`, { message: this.message })
 
 				if (!this.envelope.flags.seen) {
 					logger.info('Starting timer to mark message as seen/read')
@@ -270,6 +271,26 @@ export default {
 			} catch (error) {
 				logger.error('Could not fetch message', { error })
 			}
+
+			// Fetch itineraries if they haven't been included in the message data
+			if (this.message && !this.message.itineraries) {
+				await this.fetchItineraries()
+			}
+		},
+		async fetchItineraries() {
+			// Sanity check before actually making the request
+			if (!this.message.hasHtmlBody && this.message.attachments.length === 0) {
+				return
+			}
+
+			logger.debug(`Fetching itineraries for message ${this.envelope.databaseId}`)
+
+			try {
+				const itineraries = await this.$store.dispatch('fetchItineraries', this.envelope.databaseId)
+				logger.debug(`Itineraries of message ${this.envelope.databaseId} fetched`, { itineraries })
+			} catch (error) {
+				logger.error(`Could not fetch itineraries of message ${this.envelope.databaseId}`, { error })
+			}
 		},
 		scrollToCurrentEnvelope() {
 			// Account for global navigation bar and thread header
diff --git a/src/service/MessageService.js b/src/service/MessageService.js
index 049227243..8473ae56b 100644
--- a/src/service/MessageService.js
+++ b/src/service/MessageService.js
@@ -166,6 +166,23 @@ export async function fetchMessage(id) {
 	}
 }
 
+export async function fetchMessageItineraries(id) {
+	const url = generateUrl('/apps/mail/api/messages/{id}/itineraries', {
+		id,
+	})
+
+	try {
+		const resp = await axios.get(url)
+		return resp.data
+	} catch (error) {
+		if (error.response && error.response.status === 404) {
+			return undefined
+		}
+
+		throw parseErrorResponse(error.response)
+	}
+}
+
 export async function saveDraft(accountId, data) {
 	const url = generateUrl('/apps/mail/api/accounts/{accountId}/draft', {
 		accountId,
diff --git a/src/store/actions.js b/src/store/actions.js
index ee3d99032..3bc0ea0da 100644
--- a/src/store/actions.js
+++ b/src/store/actions.js
@@ -2,6 +2,7 @@
  * @copyright 2019 Christoph Wurst <christoph@winzerhof-wurst.at>
  *
  * @author 2019 Christoph Wurst <christoph@winzerhof-wurst.at>
+ * @author 2021 Richard Steinmetz <richard@steinmetz.cloud>
  *
  * @license GNU AGPL version 3 or any later version
  *
@@ -63,6 +64,7 @@ import {
 	fetchEnvelope,
 	fetchEnvelopes,
 	fetchMessage,
+	fetchMessageItineraries,
 	fetchThread,
 	moveMessage,
 	removeEnvelopeTag,
@@ -751,6 +753,14 @@ export default {
 		}
 		return message
 	},
+	async fetchItineraries({ commit }, id) {
+		const itineraries = await fetchMessageItineraries(id)
+		commit('addMessageItineraries', {
+			id,
+			itineraries,
+		})
+		return itineraries
+	},
 	async deleteMessage({ getters, commit }, { id }) {
 		commit('removeEnvelope', { id })
 
diff --git a/src/store/mutations.js b/src/store/mutations.js
index f6fdd76b0..cfe22fb6b 100644
--- a/src/store/mutations.js
+++ b/src/store/mutations.js
@@ -2,6 +2,7 @@
  * @copyright 2019 Christoph Wurst <christoph@winzerhof-wurst.at>
  *
  * @author 2019 Christoph Wurst <christoph@winzerhof-wurst.at>
+ * @author 2021 Richard Steinmetz <richard@steinmetz.cloud>
  *
  * @license GNU AGPL version 3 or any later version
  *
@@ -300,6 +301,13 @@ export default {
 	addMessage(state, { message }) {
 		Vue.set(state.messages, message.databaseId, message)
 	},
+	addMessageItineraries(state, { id, itineraries }) {
+		const message = state.messages[id]
+		if (!message) {
+			return
+		}
+		Vue.set(message, 'itineraries', itineraries)
+	},
 	addEnvelopeThread(state, { id, thread }) {
 		// Store the envelopes, merge into any existing object if one exists
 		thread.forEach(e => {