From ea2227572637dbe32744971e3269fb7fe84e4084 Mon Sep 17 00:00:00 2001
From: Jeffrey Biles <bilesjeffrey@gmail.comgit config -l>
Date: Sun, 29 Mar 2020 23:45:33 -0700
Subject: [PATCH] Select All checkbox reflects state of email selection

---
 src/components/BulkActionBar.vue | 32 +++++++++++++++++++++++++++-----
 src/components/MailTable.vue     |  2 +-
 2 files changed, 28 insertions(+), 6 deletions(-)

diff --git a/src/components/BulkActionBar.vue b/src/components/BulkActionBar.vue
index 6f2bdce..0860ee7 100644
--- a/src/components/BulkActionBar.vue
+++ b/src/components/BulkActionBar.vue
@@ -1,18 +1,40 @@
 <template>
   <div>
-    {{emailSelection.emails.size}}
+    <input type="checkbox" 
+           :checked="allAreSelected"
+           :class="[partialSelection ? 'partial-check' : '']">
   </div>
 </template>
 
 <script>
   import { useEmailSelection } from '../composition/useEmailSelection';
+  import { computed } from 'vue';
 
   export default {
-    setup(){
+    setup({emails}){
       let { emailSelection } = useEmailSelection();
-      
-      return { emailSelection }
-    }    
+
+      let numberSelected = computed(() => {
+        return emailSelection.emails.size;
+      }) 
+      let allAreSelected = computed(() => {
+        return emails.length == numberSelected.value;
+      })
+      let partialSelection = computed(() => {
+        return numberSelected.value > 0 && !allAreSelected.value;
+      })
+
+      return { 
+        partialSelection, 
+        allAreSelected
+      }
+    },
+    props: {
+      emails: {
+        type: Array,
+        required: true
+      }
+    }
   }
 </script>
 
diff --git a/src/components/MailTable.vue b/src/components/MailTable.vue
index 2ea34ea..b258843 100644
--- a/src/components/MailTable.vue
+++ b/src/components/MailTable.vue
@@ -1,6 +1,6 @@
 <template>
   <table class="mail-table">
-    <BulkActionBar />
+    <BulkActionBar :emails="unarchivedEmails" />
 
     <tbody>
       <tr v-for="email in unarchivedEmails"