From e448b4b7ccd36a31830d0d4424af69624a827383 Mon Sep 17 00:00:00 2001
From: Jeffrey Biles <bilesjeffrey@gmail.comgit config -l>
Date: Wed, 18 Mar 2020 00:33:43 -0700
Subject: [PATCH] Bulk Select checkbox

---
 src/components/BulkActionBar.vue     | 25 ++++++++++++++++++++++---
 src/components/InboxScreen.vue       |  2 +-
 src/composition/useEmailSelection.js |  8 ++++++++
 3 files changed, 31 insertions(+), 4 deletions(-)

diff --git a/src/components/BulkActionBar.vue b/src/components/BulkActionBar.vue
index 865282c..ba9eff3 100644
--- a/src/components/BulkActionBar.vue
+++ b/src/components/BulkActionBar.vue
@@ -1,5 +1,8 @@
 <template>
   <div class="bulk-action-bar">  
+    <span v-if="!allSelected && emailSelection.emails.size > 0">-</span> <!-- later on this minus sign will be in the checkbox, as it is in gmail -->
+    <input type="checkbox" :checked="allSelected" @click="bulkSelect">
+    
     <button @click="emailSelection.markRead()">
       Mark Read
     </button>
@@ -11,13 +14,29 @@
 
 <script>
   import useEmailSelection from '../composition/useEmailSelection';
+  import { computed } from 'vue';
 
   export default {
-    setup(){
+    setup({emails}){
       let {emailSelection} = useEmailSelection();
-      return { emailSelection }
+      let allSelected = computed(() => {
+        return emails.length == emailSelection.emails.size;
+      })
+      let bulkSelect = function(){
+        if(allSelected.value) {
+          emailSelection.clear();
+        } else {
+          emailSelection.addMultiple(emails)
+        }
+      }
+      return { emailSelection, allSelected, bulkSelect }
+    },
+    props: {
+      emails: {
+        type: Array,
+        default: []
+      }
     }
-
   }
 </script>
 
diff --git a/src/components/InboxScreen.vue b/src/components/InboxScreen.vue
index 0fc689a..c953974 100644
--- a/src/components/InboxScreen.vue
+++ b/src/components/InboxScreen.vue
@@ -1,7 +1,7 @@
 <template>
   <h1>VMail Inbox</h1>
   
-  <BulkActionBar />
+  <BulkActionBar :emails="emails" />
 
   <MailTable :emails="emails" />
 </template>
diff --git a/src/composition/useEmailSelection.js b/src/composition/useEmailSelection.js
index c0f9882..6e078a0 100644
--- a/src/composition/useEmailSelection.js
+++ b/src/composition/useEmailSelection.js
@@ -12,6 +12,14 @@ export const useEmailSelection = function(){
         this.emails.add(id);
       }
     },
+    clear(){
+      this.emails.clear();
+    },
+    addMultiple(emails) {
+      emails.forEach(email => {
+        this.emails.add(email)
+      })
+    },
     forSelected(fn){
       this.emails.forEach(email => {
         fn(email)