Add more detail to StoryListItem.vue

It is useful to see more than just the story name and tags on story
lists. This commit extends the StoryListItem component to also include
creation and modified timestamps, as well as the story status.

src/components/StoryListItem.vue

@@ -1,16 +1,64 @@
 <template>
   <div class="story">
-    <h3>
-      <router-link :to="'/story/' + story.id">{{ story.id }}. {{ story.title }}</router-link>
-    </h3>
-    <span class="tag" v-for="tag in story.tags" :key="tag">{{ tag }}</span>
+    <div class="header">
+      <h3>
+        <router-link :to="'/story/' + story.id">
+          {{ story.id }}. {{ story.title }}
+        </router-link>
+      </h3>
+      <span class="story-status-badge" :class="[story.status]">
+        {{ story.status }}
+      </span>
+    </div>
+    <div :class="{ 'details-wide': !narrow }">
+      <div class="metadata">
+        <p>
+          <span class="text-muted">Created</span>
+          <DateInline :date="story.created_at" />
+        </p>
+        <p>
+          <span class="text-muted">Last Updated</span>
+          <DateInline v-if="story.updated_at" :date="story.updated_at" />
+          <DateInline v-else :date="story.created_at" />
+        </p>
+      </div>
+      <div class="tags" v-if="story.tags.length">
+        <span class="tag" v-for="tag in story.tags" :key="tag">
+          <FontAwesomeIcon icon="tag" fixed-width />
+          {{ tag }}
+        </span>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { faTag } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+
+import DateInline from '@/components/DateInline.vue'
+
+library.add(faTag)
+
 export default {
   name: 'StoryListItem',
-  props: ['story']
+  components: {
+    DateInline,
+    FontAwesomeIcon
+  },
+  props: {
+    narrow: {
+      type: Boolean,
+      default: false
+    },
+    story: {
+      type: Object,
+      default () {
+        return {}
+      }
+    }
+  }
 }
 </script>
 
@@ -23,18 +71,68 @@ export default {
     background-color: #fff;
   }
 
-  h3 {
-    margin-top: 0;
-    font-size: 1.25em;
-    font-weight: 300;
+  .header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    h3 {
+      margin: 0;
+      font-size: 1.25em;
+      font-weight: 300;
+    }
+
+    .story-status-badge {
+      padding: 6px 12px;
+      margin: 0 5px;
+      color: #f7f6f4;
+      border-radius: 20px;
+      width: 60px;
+      text-align: center;
+
+      &.merged {
+        background-color: #5cb85c;
+      }
+
+      &.active {
+        background-color: #5bc0de;
+      }
+
+      &.invalid {
+        background-color: #777;
+      }
+    }
+  }
+
+  .metadata {
+    display: flex;
+    align-items: center;
+
+    .text-muted {
+      color: #999;
+    }
+
+    p {
+      margin: 0.5em 1em 0 1em;
+    }
+  }
+
+  .tags {
+    margin: 0.5em 0.5em 0 0.5em;
+
+    .tag {
+      display: inline-block;
+      padding: 6px 12px;
+      margin: 0 5px;
+      background-color: #f0ad4e;
+      color: #f7f6f4;
+      border-radius: 20px;
+    }
+  }
+
+  .details-wide {
+    display: flex;
+    align-items: center;
   }
 }
-
-.tag {
-  padding: 6px 12px;
-  margin: 0 5px;
-  background-color: #f0ad4e;
-  color: #f7f6f4;
-  border-radius: 20px;
-}
 </style>

src/components/UserTabStories.vue

@@ -2,11 +2,11 @@
   <div class="story-list">
     <div class="story-column">
       <h2>Created by {{ user.full_name }}</h2>
-      <StoryListItem v-for="story in createdStories" :key="story.id" :story="story" />
+      <StoryListItem v-for="story in createdStories" :key="story.id" :story="story" narrow />
     </div>
     <div class="story-column">
       <h2>Assigned to {{ user.full_name }}</h2>
-      <StoryListItem v-for="story in assignedStories" :key="story.id" :story="story" />
+      <StoryListItem v-for="story in assignedStories" :key="story.id" :story="story" narrow />
     </div>
   </div>
 </template>