Action bar + keyboard shortcuts on mail view

Author: Jeffrey Biles

src/components/MailTable.vue

@@ -19,7 +19,9 @@
   </table>
 
   <ModalView v-if="openedEmail" :closeModal="() => { openedEmail = null; }">
-    <MailView v-if="openedEmail" :email="openedEmail" />
+    <MailView v-if="openedEmail" 
+              :email="openedEmail"
+              :changeEmail="(args) => changeEmail(openedEmail, args)" />
   </ModalView>
 </template>
 
@@ -56,13 +58,28 @@
     },
     methods: {
       openEmail(email){
-        email.read = true
-        axios.put(`http://localhost:3000/emails/${email.id}`, email)
         this.openedEmail = email;
+
+        if(email) {
+          email.read = true
+          axios.put(`http://localhost:3000/emails/${email.id}`, email)
+        }
       },
       archiveEmail(email){
         email.archived = true;
         axios.put(`http://localhost:3000/emails/${email.id}`, email)
+      },
+      changeEmail(email, {indexChange, toggleArchive, toggleRead, save, closeModal}) {
+        if(toggleArchive) { email.archived = !email.archived }
+        if(toggleRead) { email.read = !email.read }
+        if(save) { axios.put(`http://localhost:3000/emails/${email.id}`, email) }
+        if(closeModal) { this.openedEmail = null; return null; }
+
+        if(indexChange) {
+          let emails = this.unarchivedEmails
+          let index = emails.findIndex(e => e == email);
+          this.openEmail(emails[index + indexChange])
+        }
       }
     }
   }

src/components/MailView.vue

@@ -1,5 +1,12 @@
 <template>
   <div class="email-display">
+    <div class="toolbar">
+      <button @click="toggleArchive">{{email.archived ? 'Move to Inbox (e)' : 'Archive (e)'}}</button>
+      <button @click="toggleRead">{{email.read ? 'Mark Unread (r)' : 'Mark Read (r)'}}</button>
+      <button @click="goNewer">Newer (k)</button>
+      <button @click="goOlder">Older (j)</button>
+    </div>
+
     <h2 class="mb-0">Subject: <strong>{{email.subject}}</strong></h2>
     <div><em>From {{email.from}} on {{format(new Date(email.sentAt), 'MMM do yyyy')}}</em></div>
     <div v-html="marked(email.body)" />
@@ -9,18 +16,43 @@
 <script>
   import { format } from 'date-fns';
   import marked from 'marked';
+  import { useKeydown } from '../composition/useKeydown';
 
   export default {
-    setup(){
+    setup({changeEmail}){
+      let toggleArchive = () => changeEmail({toggleArchive: true, save: true, closeModal: true})
+      let toggleRead = () => changeEmail({toggleRead: true, save: true})
+      let goNewer = () => changeEmail({indexChange: -1})
+      let goOlder = () => changeEmail({indexChange: 1})
+      let goNewerAndArchive = () => changeEmail({indexChange: -1, toggleArchive: true})
+      let goOlderAndArchive = () => changeEmail({indexChange: 1, toggleArchive: true})
+
+      useKeydown([
+        {key: 'e', fn: toggleArchive},
+        {key: 'r', fn: toggleRead},
+        {key: 'k', fn: goNewer},
+        {key: 'j', fn: goOlder},
+        {key: '[', fn: goNewerAndArchive},
+        {key: ']', fn: goOlderAndArchive}
+      ])
+
       return {
         format,
-        marked
+        marked,
+        goOlder,
+        goNewer,
+        toggleRead,
+        toggleArchive
       }
     },
     props: {
       email: {
         type: Object,
         required: true
+      },
+      changeEmail: {
+        type: Function,
+        required: true
       }
     }
   }