From 53383058d9f736ff7d9618fd3c70ccb540ea006f Mon Sep 17 00:00:00 2001
From: Jeffrey Biles <bilesjeffrey@gmail.comgit config -l>
Date: Tue, 17 Mar 2020 14:01:56 -0700
Subject: [PATCH] More factory fields + improved data display

---
 mirage/index.js              |  9 ++++++---
 src/components/MailTable.vue | 22 ++++++++++++++++++----
 2 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/mirage/index.js b/mirage/index.js
index a7a1f62..1e3a4f8 100644
--- a/mirage/index.js
+++ b/mirage/index.js
@@ -7,11 +7,14 @@ new Server({
   },
   factories: {
     email: Factory.extend({
-      subject(i) {
-        return `Email ${i}`
+      from(){
+        return faker.internet.email()
+      },
+      subject() {
+        return faker.lorem.word()
       },
       body(){
-        return faker.lorem.sentence()
+        return faker.lorem.paragraphs()
       },
       sentDate(){
         return faker.date.recent(20)
diff --git a/src/components/MailTable.vue b/src/components/MailTable.vue
index 30d614d..ba4d115 100644
--- a/src/components/MailTable.vue
+++ b/src/components/MailTable.vue
@@ -6,9 +6,11 @@
     <tbody>
       <tr v-for="email in emails" :key="email.id" :class="[email.read ? 'read' : '']">
         <td><input type="checkbox" /></td>
-        <td>{{email.subject}}</td>
-        <td>{{email.body}}</td>
-        <td>{{format(new Date(email.sentDate), 'HH:MM MMM do yyyy')}}</td>
+        <td>{{email.from}}</td>
+        <td>
+          <p><strong>{{email.subject}}</strong> - {{email.body}}</p>
+        </td>
+        <td class="date">{{format(new Date(email.sentDate), 'MMM do yyyy')}}</td>
       </tr>
     </tbody>
   </table>
@@ -31,16 +33,28 @@
 
 <style scoped>
   table {
-    max-width: 800px;
+    max-width: 1000px;
     margin: auto;
     border-collapse: collapse;
   }
   tr.read {
     background-color: #EEE;
   }
+  tr {
+    height: 40px;
+  }
   td {
     border-bottom: 1px solid black;
     padding: 5px;
     text-align: left;
   }
+  td p {
+    max-height: 1.2em;
+    overflow-y: hidden;
+    margin: 0;
+  }
+
+  td.date {
+    width: 120px;
+  }
 </style>
\ No newline at end of file