diff --git a/js/components/FolderContent.vue b/js/components/FolderContent.vue
index 1bde39a898ec4d7be4df7af51e8de833cb824961..581d2269bd8201016e43441ca23d6d79bc99293b 100644
--- a/js/components/FolderContent.vue
+++ b/js/components/FolderContent.vue
@@ -34,11 +34,24 @@
},
created () {
this.$store.dispatch(
- 'fetchMessages', {
+ 'fetchEnvelopes', {
accountId: this.$route.params.accountId,
folderId: this.$route.params.folderId
- }).then(() => {
+ }).then(envelopes => {
this.loading = false;
+
+ if (envelopes.length > 0) {
+ // Show first message
+ let first = envelopes[0];
+ this.$router.replace({
+ name: 'message',
+ params: {
+ accountId: this.$route.params.accountId,
+ folderId: this.$route.params.folderId,
+ messageId: first.id,
+ }
+ })
+ }
});
}
}
diff --git a/js/components/MessageList.vue b/js/components/MessageList.vue
index 88d3d584b0530dd93e74bed291bfd59b10512f64..92aa5c931e3c1fe8155226e35c08b2dd047ae2cd 100644
--- a/js/components/MessageList.vue
+++ b/js/components/MessageList.vue
@@ -2,8 +2,7 @@
<div class="app-content-list">
<MessageListItem v-for="env in envelopes"
:key="env.id"
- :from="env.from"
- :subject="env.subject"/>
+ :data="env"/>
</div>
</template>
@@ -13,7 +12,7 @@
export default {
name: "MessageList",
computed: {
- envelopes() {
+ envelopes () {
return this.$store.getters.getEnvelopes(
this.$route.params.accountId,
this.$route.params.folderId
diff --git a/js/components/MessageListItem.vue b/js/components/MessageListItem.vue
index 24af15740c941a33b25a43f07229f4b55d9603ee..a7526dd6686811a59b516ac08277ecec7cdfb65b 100644
--- a/js/components/MessageListItem.vue
+++ b/js/components/MessageListItem.vue
@@ -1,20 +1,27 @@
<template>
- <div class="app-content-list-item">
+ <router-link class="app-content-list-item" :to="{
+ name: 'message',
+ params: {
+ accountId: this.$route.params.accountId,
+ folderId: this.$route.params.folderId,
+ messageId: this.data.id
+ },
+ exact: true}">
<div class="app-content-list-item-icon">
- <Avatar :label="from"/>
+ <Avatar :label="data.from"/>
</div>
<div class="app-content-list-item-line-one"
- :title="from">
- {{from}}
+ :title="data.from">
+ {{data.from}}
</div>
<div class="app-content-list-item-line-two"
- :title="subject">
- {{subject}}
+ :title="data.subject">
+ {{data.subject}}
</div>
<div class="app-content-list-item-details date">
<Moment timestamp="1536048354000"/>
</div>
- </div>
+ </router-link>
</template>
<script>
@@ -28,8 +35,19 @@
Moment
},
props: [
- 'from',
- 'subject',
- ]
+ 'data',
+ ],
+ methods: {
+ elem () {
+ return {
+ is: 'router-link',
+ tag: 'div',
+ to: {
+ name: 'message',
+
+ }
+ }
+ }
+ }
}
</script>
diff --git a/js/router.js b/js/router.js
index 19075ce9ce43bc792d92668178a888539df01be2..7b27429a4cb8acd085decd6fdf3c69bfb2774562 100644
--- a/js/router.js
+++ b/js/router.js
@@ -21,6 +21,11 @@ export default new Router({
name: 'folder',
component: Home
},
+ {
+ path: '/accounts/:accountId/folders/:folderId/message/:messageId',
+ name: 'message',
+ component: Home
+ },
{
path: '/accounts/:accountId/settings',
name: 'accountSettings',
diff --git a/js/service/AccountService.js b/js/service/AccountService.js
index e9c7a26ad65ea9fc3dcc109e6a8073a1475058c2..ecd5c06d72b9c465c2e1a61cc5dcba1f2c5d5f5b 100644
--- a/js/service/AccountService.js
+++ b/js/service/AccountService.js
@@ -4,13 +4,15 @@ export function fetchAll () {
res([
{
id: 1,
- folders: [],
+ folders: [
+ '1-SU5CT1g='
+ ],
}, {
id: 2,
folders: [],
}
])
- }, 1500);
+ }, 800);
})
}
@@ -20,6 +22,6 @@ export function fetch () {
res({
id: 3,
})
- }, 1500);
+ }, 800);
})
}
diff --git a/js/service/MessageService.js b/js/service/MessageService.js
index 6a22a43da2b1888be11884f4d1fee9e7a16732bd..195e7f9cf6b41c228594607ada05431f0e0fd098 100644
--- a/js/service/MessageService.js
+++ b/js/service/MessageService.js
@@ -3,14 +3,24 @@ export function fetchEnvelopes () {
setTimeout(() => {
res([
{
- id: 1,
+ id: '1',
+ from: 'Sender 1',
subject: 'Message 1',
+ envelopes: ['1-SU5CT1g=-1', '1-SU5CT1g=-2']
},
{
- id: 2,
+ id: '2',
+ from: 'Sender 2',
subject: 'Message 2',
+ envelopes: ['1-SU5CT1g=-1', '1-SU5CT1g=-2']
+ },
+ {
+ id: '3',
+ from: 'Sender 3',
+ subject: 'Message 3',
+ envelopes: ['1-SU5CT1g=-1', '1-SU5CT1g=-2']
}
])
- })
+ }, 800)
})
}
diff --git a/js/store.js b/js/store.js
index 1b0ce18550ce96e0adfc8190dd37f349d2341ec5..d3878df79d68e8d2dff99865399203d64ab641c5 100644
--- a/js/store.js
+++ b/js/store.js
@@ -13,24 +13,34 @@ export const mutations = {
addAccount (state, account) {
Vue.set(state.accounts, account.id, account)
},
- addMessage (state, {accountId, folderId, message}) {
- Vue.set(state.messages, accountId + '-' + folderId + '-' + message.id, message)
+ addEnvelope (state, {accountId, folderId, envelope}) {
+ // TODO: append/add to folder envelopes list
+ Vue.set(state.envelopes, accountId + '-' + folderId + '-' + envelope.id, envelope)
}
}
export const actions = {
fetchAccounts ({commit}) {
- return fetchAllAccounts().then(accounts => accounts.map(account => commit('addAccount', account)))
+ return fetchAllAccounts().then(accounts => {
+ accounts.forEach(account => commit('addAccount', account))
+ return accounts
+ })
},
fetchAccount ({commit}, id) {
- return fetchAccount(id).then(account => commit('addAccount', account))
+ return fetchAccount(id).then(account => {
+ commit('addAccount', account)
+ return account
+ })
},
- fetchMessages ({commit}, {accountId, folderId}) {
- return fetchEnvelopes(accountId, folderId).then(msgs => msgs.map(message => commit('addMessage', {
- accountId,
- folderId,
- message
- })))
+ fetchEnvelopes ({commit, getters}, {accountId, folderId}) {
+ return fetchEnvelopes(accountId, folderId).then(envs => {
+ envs.forEach(envelope => commit('addEnvelope', {
+ accountId,
+ folderId,
+ envelope
+ }))
+ return envs
+ })
}
}
@@ -41,6 +51,9 @@ export const getters = {
getFolder: (state) => (accountId, folderId) => {
return state.folders[accountId + '-' + folderId]
},
+ getFolders: (state) => (accountId) => {
+ return state.accounts[accountId].folders.map(folderId => state.folders[folderId])
+ },
getEnvelopes: (state, getters) => (accountId, folderId) => {
return getters.getFolder(accountId, folderId).envelopes.map(msgId => state.envelopes[msgId])
}
@@ -52,56 +65,15 @@ export default new Vuex.Store({
accounts: {},
folders: {
'1-SU5CT1g=': {
- id: 'folder1',
+ id: 'SU5CT1g=',
name: 'Inbox',
specialUse: 'inbox',
unread: 2,
envelopes: ['1-SU5CT1g=-1', '1-SU5CT1g=-2']
},
- 2: {
- id: 'folder2',
- name: 'Favorites',
- specialUse: 'flagged',
- unread: 2
- },
- 3: {
- id: 'folder3',
- name: 'Drafts',
- specialUse: 'drafts',
- unread: 1
- },
- 4: {
- id: 'folder4',
- name: 'Sent',
- specialUse: 'sent',
- unread: 2000
- },
- 5: {
- id: 'folder5',
- name: 'Show all',
- }
- },
- envelopes: {
- '1-SU5CT1g=-1': {
- id: '1',
- from: 'Sender 1',
- subject: 'Message 1',
- envelopes: ['1-SU5CT1g=-1', '1-SU5CT1g=-2']
- },
- '1-SU5CT1g=-2': {
- id: '2',
- from: 'Sender 2',
- subject: 'Message 2',
- envelopes: ['1-SU5CT1g=-1', '1-SU5CT1g=-2']
- },
- '1-SU5CT1g=-3': {
- id: '3',
- from: 'Sender 3',
- subject: 'Message 3',
- envelopes: ['1-SU5CT1g=-1', '1-SU5CT1g=-2']
- }
},
- messages: [],
+ envelopes: {},
+ messages: {},
},
getters,
mutations,
diff --git a/js/views/Home.vue b/js/views/Home.vue
index 67fca12abcef5689d75b094e6b92f22677d5e7ca..03d4557214cd00bd61dea67081f52e387120b0b4 100644
--- a/js/views/Home.vue
+++ b/js/views/Home.vue
@@ -5,7 +5,7 @@
<app-navigation :menu="menu">
<AppSettingsMenu slot="settings-content"/>
</app-navigation>
- <FolderContent />
+ <FolderContent/>
</template>
</div>
</template>
@@ -38,9 +38,29 @@
}
},
created () {
- this.$store.dispatch('fetchAccounts').then(() => {
- this.loading = false;
- });
+ this.$store.dispatch('fetchAccounts').then(accounts => {
+ this.loading = false
+
+ console.debug('accounts fetched', accounts)
+
+ if (accounts.length > 0) {
+ // Show first account
+
+ let firstAccount = accounts[0]
+ // FIXME: this assumes that there's at least one folder
+ let firstFolder = this.$store.getters.getFolders(firstAccount.id)[0]
+
+ console.debug('loading first folder of first account', firstAccount.id, firstFolder.id)
+
+ this.$router.replace({
+ name: 'folder',
+ params: {
+ accountId: firstAccount.id,
+ folderId: firstFolder.id,
+ }
+ })
+ }
+ })
}
};
</script>