Bulk Actions

src/components/BulkActionBar.vue

@@ -1,9 +1,26 @@
 <template>
-  <div>
-    <input type="checkbox" 
-           :checked="allAreSelected"
-           :class="[partialSelection ? 'partial-check' : '']"
-           @click="bulkSelect">
+  <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>
+  <BulkActionBar :emails="unarchivedEmails" />
   <table class="mail-table">
-    <BulkActionBar :emails="unarchivedEmails" />
-
     <tbody>
       <tr v-for="email in unarchivedEmails" 
           :key="email.id"