From b8dfde835e71488fb79a20ffa88ed7fc9a50e1c7 Mon Sep 17 00:00:00 2001
From: Jeffrey Biles <bilesjeffrey@gmail.comgit config -l>
Date: Mon, 30 Mar 2020 00:52:56 -0700
Subject: [PATCH] Bulk Actions

---
 src/components/BulkActionBar.vue     | 31 ++++++++++++++++++++++------
 src/components/MailTable.vue         |  3 +--
 src/composition/useEmailSelection.js | 11 ++++++++++
 3 files changed, 37 insertions(+), 8 deletions(-)

diff --git a/src/components/BulkActionBar.vue b/src/components/BulkActionBar.vue
index 8b1960a..bf881a0 100644
--- a/src/components/BulkActionBar.vue
+++ b/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: {
diff --git a/src/components/MailTable.vue b/src/components/MailTable.vue
index b258843..031af8c 100644
--- a/src/components/MailTable.vue
+++ b/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"
diff --git a/src/composition/useEmailSelection.js b/src/composition/useEmailSelection.js
index 68ed23c..f088dc8 100644
--- a/src/composition/useEmailSelection.js
+++ b/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 }