Bulk Actions

src/components/BulkActionBar.vue

@@ -1,9 +1,26 @@
 <template>
-  <div>
+  <div class="bulk-action-bar">
+    <span class="checkbox">
       <input type="checkbox" 
              :checked="allAreSelected"
              :class="[partialSelection ? 'partial-check' : '']"
              @click="bulkSelect">
+    </span>
+    
+    <span class="buttons">
+      <button @click="emailSelection.markRead()"
+              :disabled="Array.from(emailSelection.emails).every(e => e.read)">
+        Mark Read
+      </button>
+      <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>
+    </span>
   </div>
 </template>
 
@@ -36,7 +53,9 @@
       return { 
         partialSelection, 
         allAreSelected,
-        bulkSelect
+        bulkSelect,
+        emailSelection,
+        numberSelected
       }
     },
     props: {

src/components/MailTable.vue

@@ -1,7 +1,6 @@
 <template>
-  <table class="mail-table">
   <BulkActionBar :emails="unarchivedEmails" />
-
+  <table class="mail-table">
     <tbody>
       <tr v-for="email in unarchivedEmails" 
           :key="email.id"

src/composition/useEmailSelection.js

@@ -1,4 +1,5 @@
 import { reactive } from 'vue';
+import axios from 'axios';
 
 let emails = new Set() 
 export const useEmailSelection = function(){
@@ -19,6 +20,16 @@ export const useEmailSelection = function(){
         this.emails.add(email)
       })
     },
+    forSelected(fn){
+      this.emails.forEach(email => {
+        fn(email)
+        axios.put(`http://localhost:3000/emails/${email.id}`, email)
+      })
+    },
+    markRead(){ this.forSelected(e => e.read = true )},
+    markUnread(){ this.forSelected(e => e.read = false )},
+    archive(){ this.forSelected(e => e.archived = true); this.clear();},
+    moveToInbox(){ this.forSelected(e => e.archived = false); this.clear();}
   })
 
   return { emailSelection }