From a7b09a308a61c2fae90402a43d9bbcd6606514cb Mon Sep 17 00:00:00 2001
From: Adam Coldrick <adam@sotk.co.uk>
Date: Wed, 30 Sep 2020 18:39:44 +0100
Subject: [PATCH] Add more details to the StoryListItem component

---
 src/components/StoryListItem.vue | 38 +++++++++++++++++++++++++++-----
 1 file changed, 33 insertions(+), 5 deletions(-)

diff --git a/src/components/StoryListItem.vue b/src/components/StoryListItem.vue
index e86b4be..b9a2f0b 100644
--- a/src/components/StoryListItem.vue
+++ b/src/components/StoryListItem.vue
@@ -6,14 +6,28 @@
           {{ story.id }}. {{ story.title }}
         </router-link>
       </h3>
-      <span class="story-status-badge" :class="[story.status]">
-        {{ story.status }}
-      </span>
+      <div class="header-details">
+        <span class="badge privacy" v-if="story.private">
+          <FontAwesomeIcon icon="eye-slash" fixed-width />
+          Private
+        </span>
+        <span class="badge security" v-if="story.security">
+          <FontAwesomeIcon icon="lock" fixed-width />
+          Security-related
+        </span>
+        <span class="badge security" v-if="!story.security"></span>
+        <span class="badge story-status" :class="[story.status]">
+          <FontAwesomeIcon icon="tasks" fixed-width v-if="story.status == 'active'" />
+          <FontAwesomeIcon icon="check" fixed-width v-if="story.status == 'merged'" />
+          <FontAwesomeIcon icon="ban" fixed-width v-if="story.status == 'invalid'" />
+          {{ story.status | capitalize }}
+        </span>
+      </div>
     </div>
     <div :class="{ 'details-wide': !narrow }">
       <div class="metadata">
         <p>
-          <span class="text-muted">Created</span>
+          <span class="text-muted">Created on</span>
           <DateInline :date="story.created_at" />
         </p>
         <p>
@@ -34,12 +48,17 @@
 
 <script>
 import { library } from '@fortawesome/fontawesome-svg-core'
-import { faTag } from '@fortawesome/free-solid-svg-icons'
+import { faBan, faCheck, faEyeSlash, faLock, faTag, faTasks } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 
 import DateInline from '@/components/DateInline.vue'
 
+library.add(faCheck)
+library.add(faEyeSlash)
+library.add(faLock)
 library.add(faTag)
+library.add(faTasks)
+library.add(faBan)
 
 export default {
   name: 'StoryListItem',
@@ -58,6 +77,15 @@ export default {
         return {}
       }
     }
+  },
+  filters: {
+    capitalize: function (value) {
+      if (!value) {
+        return ''
+      }
+      value = value.toString()
+      return value.charAt(0).toUpperCase() + value.slice(1)
+    }
   }
 }
 </script>