Archived Emails Screen

src/components/BulkActionBar.vue

@@ -30,10 +30,10 @@
     setup(props){
       let emailSelection = useEmailSelection();
       let numberSelected = computed(() => emailSelection.emails.size)
-      let numberEmails = props.emails.length
+      let numberEmails = computed(() => props.emails.length)
-      let allEmailsSelected = computed(() => numberSelected.value === numberEmails)
+      let allEmailsSelected = computed(() => numberSelected.value === numberEmails.value)
       let someEmailsSelected = computed(() => {
-        return numberSelected.value > 0 && numberSelected.value < numberEmails
+        return numberSelected.value > 0 && numberSelected.value < numberEmails.value
       })
       let bulkSelect = function(){
         if(allEmailsSelected.value) {

src/components/MailTable.vue

@@ -1,8 +1,14 @@
 <template>
-  <BulkActionBar :emails="unarchivedEmails" />
+  <button @click="selectedScreen = 'inbox'"
+          :disabled="selectedScreen == 'inbox'">Inbox</button>
+  <button @click="selectedScreen = 'archive'"
+          :disabled="selectedScreen == 'archive'">Archived</button>
+
+  <BulkActionBar :emails="filteredEmails" />
+
   <table class="mail-table">
     <tbody>
-      <tr v-for="email in unarchivedEmails"
+      <tr v-for="email in filteredEmails"
           :key="email.id"
           :class="['clickable', email.read ? 'read' : '']">
         <td>
@@ -21,6 +27,7 @@
       </tr>
     </tbody>
   </table>
+
   <ModalView v-if="openedEmail" @closeModal="openedEmail = null">
     <MailView :email="openedEmail" @changeEmail="changeEmail" />
   </ModalView>
@@ -43,13 +50,14 @@
         emailSelection: useEmailSelection(),
         format,
         emails: ref(emails),
-        openedEmail: ref(null)
+        openedEmail: ref(null),
+        selectedScreen: ref('inbox')
       }
     },
     components: {
       MailView,
       ModalView,
-      BulkActionBar
+      BulkActionBar,
     },
     computed: {
       sortedEmails() {
@@ -57,11 +65,19 @@
           return e1.sentAt < e2.sentAt ? 1 : -1
         })
       },
-      unarchivedEmails() {
+      filteredEmails() {
-        return this.sortedEmails.filter(e => !e.archived)
+        if(this.selectedScreen == 'inbox') {
+          return this.sortedEmails.filter(e => !e.archived)
+        } else {
+          return this.sortedEmails.filter(e => e.archived)
+        }
       }
     },
     methods: {
+      selectScreen(newScreen) {
+        this.selectedScreen = newScreen
+        this.emailSelection.clear()
+      },
       openEmail(email) {
         this.openedEmail = email
 
@@ -82,7 +98,7 @@
         if(closeModal) { this.openedEmail = null }
 
         if(changeIndex) {
-          let emails = this.unarchivedEmails
+          let emails = this.filteredEmails
           let currentIndex = emails.indexOf(this.openedEmail)
           let newEmail = emails[currentIndex + changeIndex]
           this.openEmail(newEmail)