Archive filtering and bulk action button

mirage/index.js

@@ -21,6 +21,9 @@ new Server({
       },
       sentDate(){
         return faker.date.recent(20)
+      },
+      archived(i){
+        return i % 2 == 0;
       }
     })
   },

src/components/BulkActionBar.vue

@@ -9,6 +9,9 @@
     <button @click="emailSelection.markUnread()" :disabled="Array.from(emailSelection.emails).every(e => !e.read)">
       Mark Unread
     </button>
+    <button @click="emailSelection.archive()" :disabled="numberSelected == 0">
+      Archive
+    </button>
   </div>
 </template>
 

src/components/InboxScreen.vue

@@ -3,7 +3,7 @@
   
   <BulkActionBar :emails="emails" />
 
-  <MailTable :emails="emails" />
+  <MailTable :emails="emails.filter(e => !e.archived)" />
 </template>
 
 <script>

src/composition/useEmailSelection.js

@@ -27,6 +27,7 @@ export const useEmailSelection = function(){
     },
     markRead(){ this.forSelected(e => e.read = true )},
     markUnread(){ this.forSelected(e => e.read = false )},
+    archive(){ this.forSelected(e => e.archived = true); this.clear();},
   })
 
   return {