Image

build-a-gmail-clone-with-vue-3

3 min read
Last update: December 19, 2021

Archived View

For the starting code for this lesson, switch to branch: https://github.com/Code-Pop/build-gmail-clone-with-vue-3/tree/video-15-start

We want to have two different views into our emails - the regular inbox view, and an archived view that shows the emails we’ve archived.

For many apps this might be a good time to start using Vue Router, although in the interest of keeping things simple we’re not going to follow that path today.

In our MailTable.vue component, we’re going to add a selectedScreen reactive reference with an initial value of ‘inbox’, as well as two buttons that can change the value of selectedScreen when clicked. They will also be disabled if we’re already on that screen.

<button @click="selectedScreen = 'inbox'" :disabled="selectedScreen == 'inbox'">Inbox</button>
<button @click="selectedScreen = 'archive'" :disabled="selectedScreen == 'archive'">Archived</button>
//...
async setup(){
let {data: emails} = await axios.get('http://localhost:3000/emails')

return {
emailSelection: useEmailSelection(),
format,
emails: ref(emails),
openedEmail: ref(null),
selectedScreen: ref('inbox')
}
},
//...

Now we’ll replace all uses of unarchivedEmails with a new computed property - filteredEmails.

filteredEmails() {
if(this.selectedScreen == 'inbox') {
return this.sortedEmails.filter(e => !e.archived)
} else {
return this.sortedEmails.filter(e => e.archived)
}
}

Now clicking the buttons should switch screens - archived emails in one, unarchived emails in the other.

But it creates a new problem - if we’ve selected any of the emails, they stay selected!

We’ll fix this by adding a new function that clears the selected checkboxes when switching screens, then calling it from our click events on the buttons.

selectScreen(newScreen) {
this.selectedScreen = newScreen
this.emailSelection.clear()
},
<button @click="selectScreen('inbox')" :disabled="selectedScreen == 'inbox'">Inbox</button>
<button @click="selectScreen('archive')" :disabled="selectedScreen == 'archive'">Archived</button>

Now there’s one last issue. When we switch to the archived view and select all the emails by hand, the ‘select all’ checkbox shows as only partially selected. It’s still comparing it to the number of emails in the ‘inbox’ view.

That’s because we forgot to make numberEmails in BulkActionBar.vue a computed property!

Here’s the fixed setup function:

setup(props){
let emailSelection = useEmailSelection();
let numberSelected = computed(() => emailSelection.emails.size)
let numberEmails = computed(() => props.emails.length)
let allEmailsSelected = computed(() => numberSelected.value === numberEmails.value)
let someEmailsSelected = computed(() => {
return numberSelected.value > 0 && numberSelected.value < numberEmails.value }) let bulkSelect=function(){ if(allEmailsSelected.value) { emailSelection.clear() } else { emailSelection.addMultiple(props.emails) } } return { allEmailsSelected, someEmailsSelected, bulkSelect, emailSelection, numberSelected } }, ``` And now, our app is complete! In the next lesson, we’re going to review what we’ve learned in this course. For the ending code for this lesson, switch to branch: [https://github.com/Code-Pop/build-gmail-clone-with-vue-3/tree/video-15-end](https://github.com/Code-Pop/build-gmail-clone-with-vue-3/tree/video-15-end) Jeffrey teaches an 8-week beginning Vue course with guaranteed results. Built on top of the VueMastery curriculum, with extra hands-on assignments and personal attention. You can find it [here](https://vuemastery--vuetraining.thrivecart.com/vue-training/).