Start of lesson 14 (rebase into next commit)

src/App.vue

@@ -1,8 +1,6 @@
 <template>
   <h1>VMail Inbox</h1>
 
-  <h1>{{emailSelection.emails.size}} emails selected</h1>
-
   <Suspense>
     <template #default>
       <MailTable />

src/components/BulkActionBar.vue

@@ -1,9 +1,16 @@
 <template>
-  <div>
+  <div class="bulk-action-bar">
-    <input type="checkbox"
+    <span class="checkbox">
-           :checked="allEmailsSelected"
+      <input type="checkbox"
-           :class="[someEmailsSelected ? 'partial-check' : '']"
+            :checked="allEmailsSelected"
-           @click="bulkSelect" />
+            :class="[someEmailsSelected ? 'partial-check' : '']"
+            @click="bulkSelect" />
+    </span>
+    <span class="buttons">
+      <button @click="emailSelection.markRead">Mark Read</button>
+      <button @click="emailSelection.markUnread()">Mark Unread</button>
+      <button @click="emailSelection.archive()">Archive</button>
+    </span>
   </div>
 </template>
 
@@ -29,7 +36,8 @@
       return {
         allEmailsSelected,
         someEmailsSelected,
-        bulkSelect
+        bulkSelect,
+        emailSelection
       }
     },
     props: {

src/composables/use-email-selection.js

@@ -1,4 +1,5 @@
 import { reactive } from 'vue';
+import axios from 'axios';
 
 let emails = reactive(new Set())
 
@@ -18,12 +19,19 @@ export const useEmailSelection = function(){
       emails.add(email)
     })
   }
+  let markRead = () => {
+    emails.forEach((email) => {
+      email.read = true;
+      axios.put(`http://localhost:3000/emails/${email.id}`, email)
+    })
+  }
 
   return {
     emails,
     toggle,
     clear,
-    addMultiple
+    addMultiple,
+    markRead
   }
 }