From 8665fd6408d78de8e15a60095b3ef05f7f8096f8 Mon Sep 17 00:00:00 2001
From: Jeffrey Biles <bilesjeffrey@gmail.comgit config -l>
Date: Mon, 17 Aug 2020 17:27:30 -0700
Subject: [PATCH] Lesson 13, pt 1 - Select Box Highlighting

---
 src/components/BulkActionBar.vue | 37 ++++++++++++++++++++++++++++++++
 src/components/MailTable.vue     |  5 ++++-
 2 files changed, 41 insertions(+), 1 deletion(-)
 create mode 100644 src/components/BulkActionBar.vue

diff --git a/src/components/BulkActionBar.vue b/src/components/BulkActionBar.vue
new file mode 100644
index 0000000..7ebf339
--- /dev/null
+++ b/src/components/BulkActionBar.vue
@@ -0,0 +1,37 @@
+<template>
+  <div>
+    <input type="checkbox"
+           :checked="allEmailsSelected"
+           :class="[someEmailsSelected ? 'partial-check' : '']" />
+  </div>
+</template>
+
+<script>
+  import useEmailSelection from '@/composables/use-email-selection';
+  import { computed } from 'vue'
+  export default {
+    setup(props){
+      let emailSelection = useEmailSelection();
+      let numberSelected = computed(() => emailSelection.emails.size)
+      let numberEmails = props.emails.length
+      let allEmailsSelected = computed(() => numberSelected.value === numberEmails)
+      let someEmailsSelected = computed(() => {
+        return numberSelected.value > 0 && numberSelected.value < numberEmails
+      }) 
+      return {
+        allEmailsSelected,
+        someEmailsSelected
+      }
+    },
+    props: {
+      emails: {
+        type: Array,
+        required: true
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/components/MailTable.vue b/src/components/MailTable.vue
index 8bf24e6..e935e2a 100644
--- a/src/components/MailTable.vue
+++ b/src/components/MailTable.vue
@@ -1,4 +1,5 @@
 <template>
+  <BulkActionBar :emails="unarchivedEmails" />
   <table class="mail-table">
     <tbody>
       <tr v-for="email in unarchivedEmails"
@@ -30,6 +31,7 @@
   import axios from 'axios';
   import MailView from '@/components/MailView.vue';
   import ModalView from '@/components/ModalView.vue';
+  import BulkActionBar from '@/components/BulkActionBar.vue';
   import { reactive } from 'vue';
   import useEmailSelection from '@/composables/use-email-selection'
 
@@ -46,7 +48,8 @@
     },
     components: {
       MailView,
-      ModalView
+      ModalView,
+      BulkActionBar
     },
     computed: {
       sortedEmails() {