From c481ec8cb2808f76ef1385478407a10f9fea0ad2 Mon Sep 17 00:00:00 2001
From: Jeffrey Biles <bilesjeffrey@gmail.comgit config -l>
Date: Sun, 29 Mar 2020 22:23:57 -0700
Subject: [PATCH] Email Selection via checkboxes

---
 src/components/MailTable.vue | 22 ++++++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/src/components/MailTable.vue b/src/components/MailTable.vue
index fbf5f13..d8b9626 100644
--- a/src/components/MailTable.vue
+++ b/src/components/MailTable.vue
@@ -1,12 +1,15 @@
 <template>
   <table class="mail-table">
+    {{emailSelection.emails.size}}
     <tbody>
       <tr v-for="email in unarchivedEmails" 
           :key="email.id"
           :class="[email.read ? 'read': '', 'clickable']"
           @click="openEmail(email)">
         <td>
-          <input type="checkbox" />
+          <input type="checkbox"
+                 :checked="emailSelection.emails.has(email)"
+                 @click="emailSelection.toggle(email)" />
         </td>
         <td>{{email.from}}</td>
         <td>
@@ -30,16 +33,31 @@
   import axios from 'axios';
   import MailView from '@/components/MailView.vue';
   import ModalView from '@/components/ModalView.vue';
+  import { reactive } from 'vue';
 
   export default {
     async setup(){
       let response = await axios.get('http://localhost:3000/emails');
       let emails = response.data;
       let openedEmail = null;
+
+
+      let emailSelection = reactive({
+        emails: new Set(),
+        toggle(id) {
+          if(this.emails.has(id)) {
+            this.emails.delete(id)
+          } else {
+            this.emails.add(id);
+          }
+        },
+      })
+
       return {
         format,
         emails,
-        openedEmail
+        openedEmail,
+        emailSelection
       }
     },
     components: {