diff --git a/js/components/FolderContent.vue b/js/components/FolderContent.vue
index 581d2269bd8201016e43441ca23d6d79bc99293b..2991ca0208610b1d0f0e4a85c982c021b90a9bbd 100644
--- a/js/components/FolderContent.vue
+++ b/js/components/FolderContent.vue
@@ -6,7 +6,8 @@
<template v-else>
<MessageList/>
<NewMessageDetail v-if="newMessage"/>
- <Message v-else/>
+ <Message v-else-if="message"/>
+ <NoMessageInFolder v-else />
</template>
</div>
</div>
@@ -17,10 +18,12 @@
import MessageList from "./MessageList";
import NewMessageDetail from "./NewMessageDetail";
import Loading from "./Loading";
+ import NoMessageInFolder from "./NoMessageInFolder";
export default {
name: "FolderContent",
components: {
+ NoMessageInFolder,
Loading,
NewMessageDetail,
Message,
@@ -29,7 +32,8 @@
data () {
return {
loading: true,
- newMessage: true,
+ newMessage: false,
+ message: false,
}
},
created () {
@@ -43,6 +47,9 @@
if (envelopes.length > 0) {
// Show first message
let first = envelopes[0];
+
+ this.message = true;
+
this.$router.replace({
name: 'message',
params: {
diff --git a/js/components/Message.vue b/js/components/Message.vue
index 775f26d49b5181e2a030a25194bef8b6d936ec80..6e6aced0e566f563fa307b4a865f502f16e0ad8a 100644
--- a/js/components/Message.vue
+++ b/js/components/Message.vue
@@ -1,43 +1,48 @@
<template>
<div class="app-content-details">
- <div id="mail-message-header" class="section">
- <h2 :title="subject">{{subject}}</h2>
- <p class="transparency">
- <AddressList :entries="from"/>
- to <!-- TODO: translate -->
- <AddressList :entries="to"/>
- <template v-if="cc.length">
- (cc <!-- TODO: translate -->
- <AddressList :entries="cc"/><!--
- -->)
- </template>
- </p>
- </div>
- <div class="mail-message-body">
- <div id="mail-content">
- <MessageHTMLBody v-if="hasHtmlBody"/>
- <MessagePlainTextBody v-else
- :body="body"
- :signature="signature"/>
+ <Loading v-if="loading"/>
+ <template v-else>
+ <div id="mail-message-header" class="section">
+ <h2 :title="message.subject">{{message.subject}}</h2>
+ <p class="transparency">
+ <AddressList :entries="message.from"/>
+ to <!-- TODO: translate -->
+ <AddressList :entries="message.to"/>
+ <template v-if="message.cc.length">
+ (cc <!-- TODO: translate -->
+ <AddressList :entries="message.cc"/><!--
+ -->)
+ </template>
+ </p>
</div>
- <div class="mail-message-attachments"></div>
- <div id="reply-composer"></div>
- <input type="button" id="forward-button" value="Forward">
- </div>
- <Composer :send="sendReply"
- :draft="saveReplyDraft"/>
+ <div class="mail-message-body">
+ <div id="mail-content">
+ <MessageHTMLBody v-if="message.hasHtmlBody"/>
+ <MessagePlainTextBody v-else
+ :body="message.body"
+ :signature="message.signature"/>
+ </div>
+ <div class="mail-message-attachments"></div>
+ <div id="reply-composer"></div>
+ <input type="button" id="forward-button" value="Forward">
+ </div>
+ <Composer :send="sendReply"
+ :draft="saveReplyDraft"/>
+ </template>
</div>
</template>
<script>
- import AddressList from "./AddressList";
- import Composer from "./Composer";
- import MessageHTMLBody from "./MessageHTMLBody";
- import MessagePlainTextBody from "./MessagePlainTextBody";
+ import AddressList from "./AddressList"
+ import Composer from "./Composer"
+ import MessageHTMLBody from "./MessageHTMLBody"
+ import MessagePlainTextBody from "./MessagePlainTextBody"
+ import Loading from "./Loading"
export default {
name: "Message",
components: {
+ Loading,
AddressList,
Composer,
MessageHTMLBody,
@@ -45,46 +50,43 @@
},
data () {
return {
- from: [
- {
- label: 'Backbone Marionette',
- email: 'backbone.marionette@frameworks.js',
- }
- ],
- to: [
- {
- label: 'React',
- email: 'react@frameworks.js',
- },
- {
- label: 'Angular',
- email: 'angular@frameworks.js',
- }
- ],
- cc: [
- {
- label: 'Underscore Jayes',
- email: 'underscore@frameworks.js',
- }
- ],
- subject: 'Do you enjoy the Vue?',
- hasHtmlBody: false,
- body: 'Henlo!',
- signature: 'Backbone Marionette',
+ loading: true,
+ message: undefined,
};
},
+ created () {
+ this.fetchMessage()
+ },
+ watch: {
+ '$route' (to, from) {
+ this.fetchMessage()
+ }
+ },
methods: {
- sendReply() {
- console.log('todo: sending reply');
+ fetchMessage () {
+ this.loading = true
+ this.message = undefined
+ this.$store.dispatch(
+ 'fetchMessage', {
+ accountId: this.$route.params.accountId,
+ folderId: this.$route.params.folderId,
+ folderId: this.$route.params.messageId,
+ }).then(message => {
+ this.message = message
+ this.loading = false
+ })
+ },
+ sendReply () {
+ console.log('todo: sending reply')
return new Promise((res, _) => {
setTimeout(() => res, 1000);
- });
+ })
},
- saveReplyDraft() {
- console.log('todo: saving reply draft');
+ saveReplyDraft () {
+ console.log('todo: saving reply draft')
return new Promise((res, _) => {
- setTimeout(() => res, 1000);
- });
+ setTimeout(() => res, 1000)
+ })
}
}
}
diff --git a/js/components/NewMessageDetail.vue b/js/components/NewMessageDetail.vue
index 2e890a0748ca7aa2e214bda5cb96db8bc44e0cb8..0a914c289694f2f5f1f1694ee656bee1bb671c70 100644
--- a/js/components/NewMessageDetail.vue
+++ b/js/components/NewMessageDetail.vue
@@ -19,7 +19,6 @@
return Promise.resolve();
},
sendMessage () {
- console.info('sending message');
console.info('sending message');
return Promise.resolve();
}
diff --git a/js/components/NoMessageInFolder.vue b/js/components/NoMessageInFolder.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c6a59cccb58d88d416639f712271a506b97e480f
--- /dev/null
+++ b/js/components/NoMessageInFolder.vue
@@ -0,0 +1,11 @@
+<template>
+ <div class="app-content-details">
+ {{ t('mail', 'No messages in this folder') }}
+ </div>
+</template>
+
+<script>
+ export default {
+ name: "NoMessageInFolder"
+ }
+</script>
diff --git a/js/service/MessageService.js b/js/service/MessageService.js
index 195e7f9cf6b41c228594607ada05431f0e0fd098..bd8d832f4e54f5c5fd5c6ac2d2c10f411041bed8 100644
--- a/js/service/MessageService.js
+++ b/js/service/MessageService.js
@@ -24,3 +24,39 @@ export function fetchEnvelopes () {
}, 800)
})
}
+
+export function fetchMessage (accountId, folderId, id) {
+ return new Promise((res, rej) => {
+ setTimeout(() => {
+ res({
+ id: id,
+ from: [
+ {
+ label: 'Backbone Marionette',
+ email: 'backbone.marionette@frameworks.js',
+ }
+ ],
+ to: [
+ {
+ label: 'React',
+ email: 'react@frameworks.js',
+ },
+ {
+ label: 'Angular',
+ email: 'angular@frameworks.js',
+ }
+ ],
+ cc: [
+ {
+ label: 'Underscore Jayes',
+ email: 'underscore@frameworks.js',
+ }
+ ],
+ subject: 'Do you enjoy the Vue?',
+ hasHtmlBody: false,
+ body: 'Henlo!',
+ signature: 'Backbone Marionette',
+ })
+ }, 1500)
+ })
+}
diff --git a/js/store.js b/js/store.js
index d3878df79d68e8d2dff99865399203d64ab641c5..5de88160a8f2f7616066017a5ce8ff0136ea026b 100644
--- a/js/store.js
+++ b/js/store.js
@@ -5,7 +5,10 @@ import {
fetch as fetchAccount,
fetchAll as fetchAllAccounts
} from './service/AccountService'
-import {fetchEnvelopes} from './service/MessageService'
+import {
+ fetchEnvelopes,
+ fetchMessage
+} from './service/MessageService'
Vue.use(Vuex)
@@ -16,6 +19,9 @@ export const mutations = {
addEnvelope (state, {accountId, folderId, envelope}) {
// TODO: append/add to folder envelopes list
Vue.set(state.envelopes, accountId + '-' + folderId + '-' + envelope.id, envelope)
+ },
+ addMessage (state, {accountId, folderId, message}) {
+ Vue.set(state.messages, accountId + '-' + folderId + '-' + message.id, message)
}
}
@@ -41,6 +47,16 @@ export const actions = {
}))
return envs
})
+ },
+ fetchMessage ({commit}, {accountId, folderId, id}) {
+ return fetchMessage(accountId, folderId, id).then(message => {
+ commit('addMessage', {
+ accountId,
+ folderId,
+ message
+ })
+ return message
+ })
}
}
@@ -56,7 +72,11 @@ export const getters = {
},
getEnvelopes: (state, getters) => (accountId, folderId) => {
return getters.getFolder(accountId, folderId).envelopes.map(msgId => state.envelopes[msgId])
- }
+ },
+ getMessage: (state, getters) => (accountId, folderId, id) => {
+ console.debug('store::getMessage', accountId, folderId, id, ':', state.messages[accountId + '-' + folderId + '-' + id])
+ return state.messages[accountId + '-' + folderId + '-' + id]
+ },
}
export default new Vuex.Store({