From e8e0112df0287fef63e38ffca1121ac2c07fa21b Mon Sep 17 00:00:00 2001
From: Adam Coldrick <adam@sotk.co.uk>
Date: Sat, 9 May 2020 20:28:42 +0100
Subject: [PATCH] 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  | 132 ++++++++++++++++++++++++++----
 src/components/UserTabStories.vue |   4 +-
 2 files changed, 117 insertions(+), 19 deletions(-)

diff --git a/src/components/StoryListItem.vue b/src/components/StoryListItem.vue
index d416aa3..2275d23 100644
--- a/src/components/StoryListItem.vue
+++ b/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>
diff --git a/src/components/UserTabStories.vue b/src/components/UserTabStories.vue
index 034811d..6c2ed0e 100644
--- a/src/components/UserTabStories.vue
+++ b/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>