Start of MailViewModal

src/components/MailTable.vue

@@ -1,7 +1,11 @@
 <template>
   <table>
     <tbody>
-      <tr v-for="email in emails" :key="email.id" :class="[email.read ? 'read' : '']">
+      <tr v-for="email in emails" 
+          :key="email.id"
+          :class="[email.read ? 'read' : '']"
+          @click="openedEmail = email"
+          class="clickable">
         <td>
           <input type="checkbox" 
                   :checked="emailSelection.emails.has(email)"
@@ -15,22 +19,31 @@
       </tr>
     </tbody>
   </table>
+
+  <MailViewModal :email="openedEmail" />
 </template>
 
 <script>
   import { format } from 'date-fns'
   import useEmailSelection from '../composition/useEmailSelection';
+  import MailViewModal from '@/components/MailViewModal.vue';
+  import { ref } from 'vue';
 
   export default {
-    setup(){
+    setup({emails}){
       let {emailSelection} = useEmailSelection();
-      return {format, emailSelection,}
+      let openedEmail = ref();
+
+      return {format, emailSelection, openedEmail}
     },
     props: {
       emails: {
         type: Array,
         default: []
       }
+    },
+    components: {
+      MailViewModal
     }
   }
 </script>
@@ -61,4 +74,8 @@
   td.date {
     width: 120px;
   }
+
+  .clickable {
+    cursor: pointer;
+  }
 </style>

src/components/MailViewModal.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="modal" v-if="email">
+    <div class="overlay"></div>
+    <div class="modal-card">
+      From: {{email.from}}<br>
+      Subject: <strong>{{email.subject}}</strong>
+      <p>{{email.body}}</p>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    props: {
+      email: {
+        type: Object
+      },
+      isOpened: {
+        type: Boolean,
+        default: true
+      }
+    }
+  }
+</script>
+
+<style scoped>
+  .modal, .overlay {
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    left: 0;
+    top: 0;
+  }
+  .overlay {
+    opacity: 0.5;
+    background-color: black;
+  }
+  .modal-card {
+    position: relative;
+    max-width: 80%;
+    margin: auto;
+    margin-top: 30px;
+    padding: 20px;
+    background-color: white;
+    min-height: 500px;
+    z-index: 10;
+    opacity: 1;
+  }
+</style>