From f094e5db1a299c07aae281430ad09083abb4abc7 Mon Sep 17 00:00:00 2001
From: Jeffrey Biles <bilesjeffrey@gmail.comgit config -l>
Date: Mon, 17 Aug 2020 22:38:15 -0700
Subject: [PATCH] Lesson 13, pt 2 - interactive select-all button

---
 src/components/BulkActionBar.vue       | 15 ++++++++++++---
 src/components/MailTable.vue           |  2 +-
 src/composables/use-email-selection.js | 12 +++++++++++-
 3 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/src/components/BulkActionBar.vue b/src/components/BulkActionBar.vue
index 7ebf339..c431246 100644
--- a/src/components/BulkActionBar.vue
+++ b/src/components/BulkActionBar.vue
@@ -2,7 +2,8 @@
   <div>
     <input type="checkbox"
            :checked="allEmailsSelected"
-           :class="[someEmailsSelected ? 'partial-check' : '']" />
+           :class="[someEmailsSelected ? 'partial-check' : '']"
+           @click="bulkSelect" />
   </div>
 </template>
 
@@ -17,10 +18,18 @@
       let allEmailsSelected = computed(() => numberSelected.value === numberEmails)
       let someEmailsSelected = computed(() => {
         return numberSelected.value > 0 && numberSelected.value < numberEmails
-      }) 
+      })
+      let bulkSelect = function(){
+        if(allEmailsSelected.value) {
+          emailSelection.clear()
+        } else {
+          emailSelection.addMultiple(props.emails)
+        }
+      }
       return {
         allEmailsSelected,
-        someEmailsSelected
+        someEmailsSelected,
+        bulkSelect
       }
     },
     props: {
diff --git a/src/components/MailTable.vue b/src/components/MailTable.vue
index e935e2a..1a4da1d 100644
--- a/src/components/MailTable.vue
+++ b/src/components/MailTable.vue
@@ -8,7 +8,7 @@
         <td>
           <input type="checkbox"
                  @click="emailSelection.toggle(email)"
-                 :selected="emailSelection.emails.has(email)" />
+                 :checked="emailSelection.emails.has(email)" />
         </td>
         <td @click="openEmail(email)">{{email.from}}</td>
         <td @click="openEmail(email)">
diff --git a/src/composables/use-email-selection.js b/src/composables/use-email-selection.js
index 8991155..c9bde45 100644
--- a/src/composables/use-email-selection.js
+++ b/src/composables/use-email-selection.js
@@ -10,10 +10,20 @@ export const useEmailSelection = function(){
       emails.add(email)
     }
   }
+  let clear = () => {
+    emails.clear()
+  }
+  let addMultiple = (newEmails) => {
+    newEmails.forEach((email) => {
+      emails.add(email)
+    })
+  }
 
   return {
     emails,
-    toggle
+    toggle,
+    clear,
+    addMultiple
   }
 }