Lesson 13, pt 2 - interactive select-all button

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>
 
@@ -18,9 +19,17 @@
       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: {

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)">

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
   }
 }