Lesson 10 - flexible events

src/components/MailTable.vue

@@ -18,7 +18,7 @@
     </tbody>
   </table>
   <ModalView v-if="openedEmail" @closeModal="openedEmail = null">
-    <MailView :email="openedEmail" />
+    <MailView :email="openedEmail" @changeEmail="changeEmail" />
   </ModalView>
 </template>
 
@@ -53,15 +53,31 @@
     },
     methods: {
       openEmail(email) {
+        this.openedEmail = email
+
+        if(email) {
           email.read = true
           this.updateEmail(email)
-
+        }
-        this.openedEmail = email
       },
       archiveEmail(email) {
         email.archived = true
         this.updateEmail(email)
       },
+      changeEmail({toggleRead, toggleArchive, save, closeModal, changeIndex}) {
+        let email = this.openedEmail
+        if(toggleRead) { email.read = !email.read }
+        if(toggleArchive) { email.archived = !email.archived }
+        if(save) { this.updateEmail(email) }
+        if(closeModal) { this.openedEmail = null }
+
+        if(changeIndex) {
+          let emails = this.unarchivedEmails
+          let currentIndex = emails.indexOf(this.openedEmail)
+          let newEmail = emails[currentIndex + changeIndex]
+          this.openEmail(newEmail)
+        }
+      },
       updateEmail(email) {
         axios.put(`http://localhost:3000/emails/${email.id}`, email)
       }

src/components/MailView.vue

@@ -21,26 +21,30 @@
   export default {
     setup(props, {emit}){
       let email = props.email;
-      let toggleRead = () => {
+
-        email.read = !email.read
+      let toggleRead = () => { emit('changeEmail', {toggleRead: true, save: true})}
-        axios.put(`http://localhost:3000/emails/${email.id}`, email)
+      let toggleArchive = () => { emit('changeEmail', {toggleArchive: true, save: true, closeModal: true})}
-      }
+      let goNewer = () => { emit('changeEmail', {changeIndex: -1})}
-      let toggleArchive = () => {
+      let goOlder = () => { emit('changeEmail', {changeIndex: 1})}
-        email.archived = !email.archived
+      let goNewerAndArchive = () => { emit('changeEmail', {changeIndex: -1, toggleArchive: true, save: true})}
-        axios.put(`http://localhost:3000/emails/${email.id}`, email)
+      let goOlderAndArchive = () => { emit('changeEmail', {changeIndex: 1, toggleArchive: true, save: true})}
-        // How to close the modal?
-      }
 
       useKeydown([
         {key: 'r', fn: toggleRead},
-        {key: 'e', fn: toggleArchive}
+        {key: 'e', fn: toggleArchive},
+        {key: 'k', fn: goNewer},
+        {key: 'j', fn: goOlder},
+        {key: '[', fn: goNewerAndArchive},
+        {key: ']', fn: goOlderAndArchive}
       ])
 
       return {
         format,
         marked,
         toggleRead,
-        toggleArchive
+        toggleArchive,
+        goNewer,
+        goOlder
       }
     },
     props: {