diff --git a/js/components/FolderContent.vue b/js/components/FolderContent.vue
index 34ed53bdfde5e86f9b5f279dae76ded7a47e6d97..b51827012ca9f4856364aea862ec483ad2836f67 100644
--- a/js/components/FolderContent.vue
+++ b/js/components/FolderContent.vue
@@ -1,19 +1,41 @@
<template>
<div id="app-content">
<div id="app-content-wrapper">
- <MessageList/>
- <slot/>
+ <Loading v-if="loading"
+ :hint="t('mail', 'Loading messages')"/>
+ <template v-else>
+ <MessageList/>
+ <NewMessageDetail v-if="newMessage"/>
+ <Message v-else/>
+ </template>
</div>
</div>
</template>
<script>
+ import Message from "./Message";
import MessageList from "./MessageList";
+ import NewMessageDetail from "./NewMessageDetail";
+ import Loading from "./Loading";
export default {
name: "FolderContent",
components: {
+ Loading,
+ NewMessageDetail,
+ Message,
MessageList
+ },
+ data () {
+ return {
+ loading: true,
+ newMessage: true,
+ }
+ },
+ created () {
+ this.$store.dispatch('fetchAccounts').then(() => {
+ this.loading = false;
+ });
}
}
</script>
diff --git a/js/components/Loading.vue b/js/components/Loading.vue
new file mode 100644
index 0000000000000000000000000000000000000000..82f1a8a7f0bb540e961a187e6efc1fe1a5559e0f
--- /dev/null
+++ b/js/components/Loading.vue
@@ -0,0 +1,20 @@
+<template>
+ <div v-if="hint" class="emptycontent">
+ <a class="icon-loading"></a>
+ <h2>{{ hint }}</h2>
+ </div>
+ <div v-else class="container icon-loading"></div>
+</template>
+
+<script>
+ export default {
+ name: "Loading",
+ props: {
+ hint: String
+ }
+ }
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/js/router.js b/js/router.js
index acc7d36e69bd23d51731dad6d537c473a7d700b9..19075ce9ce43bc792d92668178a888539df01be2 100644
--- a/js/router.js
+++ b/js/router.js
@@ -3,7 +3,6 @@ import Router from 'vue-router'
import AccountSettings from './views/AccountSettings';
import Home from './views/Home'
-import NewMessage from './views/NewMessage';
import Setup from './views/Setup';
Vue.use(Router)
@@ -17,11 +16,6 @@ export default new Router({
name: 'home',
component: Home
},
- {
- path: '/new',
- name: 'newMessage',
- component: NewMessage
- },
{
path: '/accounts/:accountId/folders/:folderId',
name: 'folder',
diff --git a/js/service/AccountService.js b/js/service/AccountService.js
new file mode 100644
index 0000000000000000000000000000000000000000..e9c7a26ad65ea9fc3dcc109e6a8073a1475058c2
--- /dev/null
+++ b/js/service/AccountService.js
@@ -0,0 +1,25 @@
+export function fetchAll () {
+ return new Promise((res, rej) => {
+ setTimeout(() => {
+ res([
+ {
+ id: 1,
+ folders: [],
+ }, {
+ id: 2,
+ folders: [],
+ }
+ ])
+ }, 1500);
+ })
+}
+
+export function fetch () {
+ return new Promise((res, rej) => {
+ setTimeout(() => {
+ res({
+ id: 3,
+ })
+ }, 1500);
+ })
+}
diff --git a/js/store.js b/js/store.js
index 0dacfd587dff2a327e5359bd012aff20ce7c197a..d8739f64a66756a211963f8f5ac701e7bd2e4e84 100644
--- a/js/store.js
+++ b/js/store.js
@@ -1,94 +1,68 @@
import Vue from 'vue'
import Vuex from 'vuex'
+import {
+ fetch as fetchAccount,
+ fetchAll as fetchAllAccounts
+} from './service/AccountService'
+
Vue.use(Vuex)
+export const mutations = {
+ addAccount (state, account) {
+ Vue.set(state.accounts, account.id, account)
+ }
+}
+
+export const actions = {
+ fetchAccounts ({commit}) {
+ return fetchAllAccounts().then(accounts => accounts.map(account => commit('addAccount', account)))
+ },
+ fetchAccount ({commit}, id) {
+ return fetchAccount(id).then(account => commit('addAccount', account))
+ }
+}
+
export default new Vuex.Store({
+ strict: process.env.NODE_ENV !== 'production',
state: {
- accounts: [
- {
- id: -1,
- name: 'email1@domain.com',
- visible: false,
- bullet: '#ee2629',
- folders: [
- {
- id: -1,
- name: 'All inboxes',
- specialUse: 'inbox',
- unread: 2,
- messages: [
- {
- id: 123,
- from: 'Steffen Lindner',
- subject: 'Message 123',
- },
- {
- id: 321,
- from: 'Kevin Ndung\'u Gathuku',
- subject: 'Message 321',
- },
- ]
- }
- ]
+ accounts: {},
+ folders: {
+ 1: {
+ id: 'folder1',
+ name: 'Inbox',
+ specialUse: 'inbox',
+ unread: 2
},
- {
- id: 1,
- name: 'email1@domain.com',
- bullet: '#ee2629',
- folders: [
- {
- id: 'folder1',
- name: 'Inbox',
- specialUse: 'inbox',
- unread: 2
- },
- {
- id: 'folder2',
- name: 'Favorites',
- specialUse: 'flagged',
- unread: 2
- },
- {
- id: 'folder3',
- name: 'Drafts',
- specialUse: 'drafts',
- unread: 1
- },
- {
- id: 'folder4',
- name: 'Sent',
- specialUse: 'sent',
- unread: 2000
- },
- {
- id: 'folder5',
- name: 'Show all',
- }
- ]
+ 2: {
+ id: 'folder2',
+ name: 'Favorites',
+ specialUse: 'flagged',
+ unread: 2
},
- {
- id: 2,
- name: 'email2@domain.com',
- bullet: '#81ee53',
- folders: [
- {
- id: 'folder2',
- name: 'Inbox',
- specialUse: 'inbox',
- utils: {
- counter: 0
- }
- }
- ]
+ 3: {
+ id: 'folder3',
+ name: 'Drafts',
+ specialUse: 'drafts',
+ unread: 1
+ },
+ 4: {
+ id: 'folder4',
+ name: 'Sent',
+ specialUse: 'sent',
+ unread: 2000
+ },
+ 5: {
+ id: 'folder5',
+ name: 'Show all',
}
- ]
+ }
},
getters: {
currentFolder (state) {
- return state.accounts[0].folders[0]
+ return []
}
},
- mutations: {},
- actions: {}
+ mutations,
+ actions
})
diff --git a/js/views/Home.vue b/js/views/Home.vue
index 32756d3fb2f4d89f0f78abaae43a1e12ed264986..67fca12abcef5689d75b094e6b92f22677d5e7ca 100644
--- a/js/views/Home.vue
+++ b/js/views/Home.vue
@@ -1,11 +1,12 @@
<template>
<div id="content" class="mail">
- <app-navigation :menu="menu">
- <AppSettingsMenu slot="settings-content"/>
- </app-navigation>
- <FolderContent>
- <Message/>
- </FolderContent>
+ <Loading v-if="loading" :hint="t('mail', 'Loading your accounts')"/>
+ <template v-else>
+ <app-navigation :menu="menu">
+ <AppSettingsMenu slot="settings-content"/>
+ </app-navigation>
+ <FolderContent />
+ </template>
</div>
</template>
@@ -13,7 +14,7 @@
import AppNavigation from "../components/core/appNavigation";
import AppSettingsMenu from "../components/AppSettingsMenu";
import FolderContent from "../components/FolderContent";
- import Message from "../components/Message";
+ import Loading from "../components/Loading";
import SidebarItems from "../mixins/SidebarItems";
@@ -21,15 +22,25 @@
name: 'home',
extends: SidebarItems,
components: {
+ Loading,
AppNavigation,
AppSettingsMenu,
FolderContent,
- Message,
+ },
+ data () {
+ return {
+ loading: true
+ }
},
computed: {
menu () {
return this.buildMenu(this.$store.state.accounts);
}
+ },
+ created () {
+ this.$store.dispatch('fetchAccounts').then(() => {
+ this.loading = false;
+ });
}
};
</script>
diff --git a/js/views/NewMessage.vue b/js/views/NewMessage.vue
deleted file mode 100644
index 00f788ab1e3a3b0b192dd86174d49ae934edf684..0000000000000000000000000000000000000000
--- a/js/views/NewMessage.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-<template>
- <div id="content" class="mail">
- <app-navigation :menu="menu">
- <AppSettingsMenu slot="settings-content"/>
- </app-navigation>
- <FolderContent>
- <NewMessageDetail/>
- </FolderContent>
- </div>
-</template>
-
-<script>
- import AppNavigation from "../components/core/appNavigation";
- import AppSettingsMenu from "../components/AppSettingsMenu";
- import FolderContent from "../components/FolderContent";
-
- import SidebarItems from "../mixins/SidebarItems";
- import NewMessageDetail from "../components/NewMessageDetail";
-
- export default {
- name: 'home',
- extends: SidebarItems,
- components: {
- NewMessageDetail,
- AppNavigation,
- AppSettingsMenu,
- FolderContent,
- },
- computed: {
- menu () {
- return this.buildMenu(this.$store.state.accounts);
- }
- }
- };
-</script>
diff --git a/package-lock.json b/package-lock.json
index d34cc9bad609016e0043daedab72288c10b61926..2104525b2878b9f9b703ac18482d65ce23077352 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3080,7 +3080,7 @@
},
"browserify-aes": {
"version": "1.2.0",
- "resolved": "http://registry.npmjs.org/browserify-aes/-/browserify-aes-1.2.0.tgz",
+ "resolved": "https://registry.npmjs.org/browserify-aes/-/browserify-aes-1.2.0.tgz",
"integrity": "sha512-+7CHXqGuspUn/Sl5aO7Ea0xWGAtETPXNSAjHo48JfLdPWcMng33Xe4znFvQweqc/uzk5zSOI3H52CYnjCfb5hA==",
"dev": true,
"requires": {
@@ -3117,7 +3117,7 @@
},
"browserify-rsa": {
"version": "4.0.1",
- "resolved": "http://registry.npmjs.org/browserify-rsa/-/browserify-rsa-4.0.1.tgz",
+ "resolved": "https://registry.npmjs.org/browserify-rsa/-/browserify-rsa-4.0.1.tgz",
"integrity": "sha1-IeCr+vbyApzy+vsTNWenAdQTVSQ=",
"dev": true,
"requires": {
@@ -3179,7 +3179,7 @@
},
"buffer": {
"version": "4.9.1",
- "resolved": "http://registry.npmjs.org/buffer/-/buffer-4.9.1.tgz",
+ "resolved": "https://registry.npmjs.org/buffer/-/buffer-4.9.1.tgz",
"integrity": "sha1-bRu2AbB6TvztlwlBMgkwJ8lbwpg=",
"dev": true,
"requires": {
@@ -3855,7 +3855,7 @@
},
"create-hash": {
"version": "1.2.0",
- "resolved": "http://registry.npmjs.org/create-hash/-/create-hash-1.2.0.tgz",
+ "resolved": "https://registry.npmjs.org/create-hash/-/create-hash-1.2.0.tgz",
"integrity": "sha512-z00bCGNHDG8mHAkP7CtT1qVu+bFQUPjYq/4Iv3C3kWjTFV10zIjfSoeqXo9Asws8gwSHDGj/hl2u4OGIjapeCg==",
"dev": true,
"requires": {
@@ -3868,7 +3868,7 @@
},
"create-hmac": {
"version": "1.1.7",
- "resolved": "http://registry.npmjs.org/create-hmac/-/create-hmac-1.1.7.tgz",
+ "resolved": "https://registry.npmjs.org/create-hmac/-/create-hmac-1.1.7.tgz",
"integrity": "sha512-MJG9liiZ+ogc4TzUwuvbER1JRdgvUFSB5+VR/g5h82fGaIRWMWddtKBHi7/sVhfjQZ6SehlyhvQYrcYkaUIpLg==",
"dev": true,
"requires": {
@@ -4694,7 +4694,7 @@
},
"diffie-hellman": {
"version": "5.0.3",
- "resolved": "http://registry.npmjs.org/diffie-hellman/-/diffie-hellman-5.0.3.tgz",
+ "resolved": "https://registry.npmjs.org/diffie-hellman/-/diffie-hellman-5.0.3.tgz",
"integrity": "sha512-kqag/Nl+f3GwyK25fhUMYj81BUOrZ9IuJsjIcDE5icNM9FJHAVm3VcUDxdLPoQtTuUylWm6ZIknYJwwaPxsUzg==",
"dev": true,
"requires": {
@@ -5508,7 +5508,6 @@
"version": "2.2.4",
"bundled": true,
"dev": true,
- "optional": true,
"requires": {
"safe-buffer": "^5.1.1",
"yallist": "^3.0.0"
@@ -5527,7 +5526,6 @@
"version": "0.5.1",
"bundled": true,
"dev": true,
- "optional": true,
"requires": {
"minimist": "0.0.8"
}
@@ -5707,8 +5705,7 @@
"safe-buffer": {
"version": "5.1.1",
"bundled": true,
- "dev": true,
- "optional": true
+ "dev": true
},
"safer-buffer": {
"version": "2.1.2",
@@ -5814,8 +5811,7 @@
"yallist": {
"version": "3.0.2",
"bundled": true,
- "dev": true,
- "optional": true
+ "dev": true
}
}
},
@@ -8559,7 +8555,7 @@
},
"parse-asn1": {
"version": "5.1.1",
- "resolved": "http://registry.npmjs.org/parse-asn1/-/parse-asn1-5.1.1.tgz",
+ "resolved": "https://registry.npmjs.org/parse-asn1/-/parse-asn1-5.1.1.tgz",
"integrity": "sha512-KPx7flKXg775zZpnp9SxJlz00gTd4BmJ2yJufSc44gMCRrRQ7NSzAcSJQfifuOLgW6bEi+ftrALtsgALeB2Adw==",
"dev": true,
"requires": {
@@ -9347,7 +9343,7 @@
},
"public-encrypt": {
"version": "4.0.2",
- "resolved": "http://registry.npmjs.org/public-encrypt/-/public-encrypt-4.0.2.tgz",
+ "resolved": "https://registry.npmjs.org/public-encrypt/-/public-encrypt-4.0.2.tgz",
"integrity": "sha512-4kJ5Esocg8X3h8YgJsKAuoesBgB7mqH3eowiDzMUPKiRDDE7E/BqqZD1hnTByIaAFiwAw246YEltSq7tdrOH0Q==",
"dev": true,
"requires": {
@@ -10699,7 +10695,7 @@
},
"sha.js": {
"version": "2.4.11",
- "resolved": "http://registry.npmjs.org/sha.js/-/sha.js-2.4.11.tgz",
+ "resolved": "https://registry.npmjs.org/sha.js/-/sha.js-2.4.11.tgz",
"integrity": "sha512-QMEp5B7cftE7APOjk5Y6xgrbWu+WkLVQwk8JNjZ8nKRciZaByEW6MubieAiToS7+dwvrjGhH8jRXz3MVd0AYqQ==",
"dev": true,
"requires": {