From 2c13f9e8e879491d2e5ec3455f9b6bdcd39efd65 Mon Sep 17 00:00:00 2001
From: Jeffrey Biles <bilesjeffrey@gmail.comgit config -l>
Date: Wed, 18 Mar 2020 01:19:52 -0700
Subject: [PATCH] Disable buttons that won't do anyhing

---
 src/components/BulkActionBar.vue | 20 ++++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/components/BulkActionBar.vue b/src/components/BulkActionBar.vue
index ba9eff3..31556fb 100644
--- a/src/components/BulkActionBar.vue
+++ b/src/components/BulkActionBar.vue
@@ -1,12 +1,12 @@
 <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">
+    <span v-if="!allAreSelected && numberSelected > 0">-</span> <!-- later on this minus sign will be in the checkbox, as it is in gmail -->
+    <input type="checkbox" :checked="allAreSelected" @click="bulkSelect">
     
-    <button @click="emailSelection.markRead()">
+    <button @click="emailSelection.markRead()" :disabled="Array.from(emailSelection.emails).every(e => e.read)">
       Mark Read
     </button>
-    <button @click="emailSelection.markUnread()">
+    <button @click="emailSelection.markUnread()" :disabled="Array.from(emailSelection.emails).every(e => !e.read)">
       Mark Unread
     </button>
   </div>
@@ -19,17 +19,21 @@
   export default {
     setup({emails}){
       let {emailSelection} = useEmailSelection();
-      let allSelected = computed(() => {
-        return emails.length == emailSelection.emails.size;
+      let numberSelected = computed(() => {
+        return emailSelection.emails.size;
+      }) 
+      let allAreSelected = computed(() => {
+        return emails.length == numberSelected;
       })
+      
       let bulkSelect = function(){
-        if(allSelected.value) {
+        if(allAreSelected.value) {
           emailSelection.clear();
         } else {
           emailSelection.addMultiple(emails)
         }
       }
-      return { emailSelection, allSelected, bulkSelect }
+      return { emailSelection, allAreSelected, bulkSelect, numberSelected }
     },
     props: {
       emails: {