ArchivedScreen, ability to switch between

However, there's an issue - changes don't stick between screen switches
This commit is contained in:
Jeffrey Biles
2020-03-18 01:46:37 -07:00
parent 81aa302648
commit 505842df54
3 changed files with 54 additions and 3 deletions

View File

@@ -1,11 +1,20 @@
<template> <template>
<div id="app"> <div id="app">
<button @click="screenName = 'ArchivedScreen'"
:disabled="screenName == 'ArchivedScreen'">
Archived View
</button>
<button @click="screenName = 'InboxScreen'"
:disabled="screenName == 'InboxScreen'">
Inbox View
</button>
<suspense> <suspense>
<template #default> <template #default>
<InboxScreen /> <component :is="screenName" />
</template> </template>
<template #fallback> <template #fallback>
Loading... <p>Loading...</p>
</template> </template>
</suspense> </suspense>
</div> </div>
@@ -13,12 +22,18 @@
<script> <script>
import InboxScreen from './components/InboxScreen.vue'; import InboxScreen from './components/InboxScreen.vue';
import ArchivedScreen from '@/components/ArchivedScreen.vue';
export default { export default {
name: 'App', name: 'App',
components: { components: {
InboxScreen, InboxScreen,
ArchivedScreen
}, },
setup(){
let screenName = 'InboxScreen';
return {screenName}
}
}; };
</script> </script>

View File

@@ -0,0 +1,36 @@
<template>
<h1>VMail Archives</h1>
<BulkActionBar :emails="archivedEmails" />
<MailTable :emails="archivedEmails" />
</template>
<script>
import MailTable from '@/components/MailTable.vue';
import BulkActionBar from '@/components/BulkActionBar.vue';
import { computed, ref } from 'vue';
export default {
async setup(){
let response = await fetch('/api/emails');
let {emails} = await response.json();
emails = ref(emails);
let archivedEmails = computed(() => {
return emails.value.filter(e => e.archived)
})
return {archivedEmails}
},
components: {
MailTable,
BulkActionBar
}
}
</script>
<style scoped>
</style>

View File

@@ -13,7 +13,7 @@
import { computed, ref } from 'vue'; import { computed, ref } from 'vue';
export default { export default {
async setup(props, {attrs, slots}){ async setup(){
let response = await fetch('/api/emails'); let response = await fetch('/api/emails');
let {emails} = await response.json(); let {emails} = await response.json();