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>
<div id="app">
<button @click="screenName = 'ArchivedScreen'"
:disabled="screenName == 'ArchivedScreen'">
Archived View
</button>
<button @click="screenName = 'InboxScreen'"
:disabled="screenName == 'InboxScreen'">
Inbox View
</button>
<suspense>
<template #default>
<InboxScreen />
<component :is="screenName" />
</template>
<template #fallback>
Loading...
<p>Loading...</p>
</template>
</suspense>
</div>
@@ -13,12 +22,18 @@
<script>
import InboxScreen from './components/InboxScreen.vue';
import ArchivedScreen from '@/components/ArchivedScreen.vue';
export default {
name: 'App',
components: {
InboxScreen,
ArchivedScreen
},
setup(){
let screenName = 'InboxScreen';
return {screenName}
}
};
</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';
export default {
async setup(props, {attrs, slots}){
async setup(){
let response = await fetch('/api/emails');
let {emails} = await response.json();