mirror of
https://github.com/kevin-DL/build-gmail-clone-with-vue-3.git
synced 2026-01-23 15:41:33 +00:00
ArchivedScreen, ability to switch between
However, there's an issue - changes don't stick between screen switches
This commit is contained in:
19
src/App.vue
19
src/App.vue
@@ -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>
|
||||||
|
|
||||||
|
|||||||
36
src/components/ArchivedScreen.vue
Normal file
36
src/components/ArchivedScreen.vue
Normal 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>
|
||||||
@@ -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();
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user