Lesson 14, pt 1 - Bulk Action Bar Buttons

src/components/BulkActionBar.vue

@@ -8,8 +8,8 @@
     </span>
     <span class="buttons">
       <button @click="emailSelection.markRead">Mark Read</button>
-      <button @click="emailSelection.markUnread()">Mark Unread</button>
-      <button @click="emailSelection.archive()">Archive</button>
+      <button @click="emailSelection.markUnread">Mark Unread</button>
+      <button @click="emailSelection.archive">Archive</button>
     </span>
   </div>
 </template>

src/components/MailTable.vue

@@ -32,7 +32,7 @@
   import MailView from '@/components/MailView.vue';
   import ModalView from '@/components/ModalView.vue';
   import BulkActionBar from '@/components/BulkActionBar.vue';
-  import { reactive } from 'vue';
+  import { reactive, ref } from 'vue';
   import useEmailSelection from '@/composables/use-email-selection'
 
   export default {
@@ -42,8 +42,8 @@
       return {
         emailSelection: useEmailSelection(),
         format,
-        emails,
-        openedEmail: null
+        emails: ref(emails),
+        openedEmail: ref(null)
       }
     },
     components: {

src/composables/use-email-selection.js

@@ -19,19 +19,24 @@ export const useEmailSelection = function(){
       emails.add(email)
     })
   }
-  let markRead = () => {
+  let forSelected = (fn) => {
     emails.forEach((email) => {
-      email.read = true;
+      fn(email);
       axios.put(`http://localhost:3000/emails/${email.id}`, email)
     })
   }
+  let markRead = () => forSelected(e => e.read = true)
+  let markUnread = () => forSelected(e => e.read = false)
+  let archive = () => { forSelected(e => e.archived = true); clear() }
 
   return {
     emails,
     toggle,
     clear,
     addMultiple,
-    markRead
+    markRead,
+    markUnread,
+    archive
   }
 }