From a1df2de7e27621f0b5b89f9af44f865b27fc7a31 Mon Sep 17 00:00:00 2001
From: QuentinHsu <xuquentinyang@gmail.com>
Date: Fri, 24 Jun 2022 14:41:37 +0800
Subject: [PATCH] perf (UI): Use display name in collections

closes #127
---
 web/src/views/SubEditor.vue    |  7 ++++++-
 web/src/views/Subscription.vue | 14 ++++++++++----
 2 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/web/src/views/SubEditor.vue b/web/src/views/SubEditor.vue
index 237c242..6f5ae5e 100644
--- a/web/src/views/SubEditor.vue
+++ b/web/src/views/SubEditor.vue
@@ -39,7 +39,12 @@
               <v-img v-else :class="getIconClass(sub.icon)" :src="sub.icon" />
             </v-list-item-avatar>
             <v-list-item-content>
-              {{ sub.name }}
+              <template v-if="sub['display-name']">
+                {{ sub['display-name'] }} ({{ sub.name }})
+              </template>
+              <template v-else>
+                {{ sub.name }}
+              </template>
             </v-list-item-content>
             <v-spacer></v-spacer>
             <v-checkbox v-model="selected" :value="sub.name" class="pr-1" />
diff --git a/web/src/views/Subscription.vue b/web/src/views/Subscription.vue
index 809545c..0a68cc0 100644
--- a/web/src/views/Subscription.vue
+++ b/web/src/views/Subscription.vue
@@ -64,8 +64,8 @@
               <v-list-item-title class="font-weight-medium" v-text="collection['display-name'] || collection.name">
               </v-list-item-title>
               <v-chip-group column>
-                <v-chip v-for="subs in collection.subscriptions" :key="subs" class="ma-2 ml-0 mr-1 pa-2" label small>
-                  {{ subs }}
+                <v-chip v-for="subs in collection.subsInfo" :key="subs.name" class="ma-2 ml-0 mr-1 pa-2" label small>
+                  {{ subs['display-name'] || subs.name}}
                 </v-chip>
               </v-chip-group>
             </v-list-item-content>
@@ -175,8 +175,14 @@ export default {
     },
     collections() {
       const cols = this.$store.state.collections;
-      return Object.keys(cols).map(k => cols[k]);
-    }
+      const collections = Object.keys(cols).map(k => cols[k]);
+      const subscriptions = this.$store.state.subscriptions;
+      collections.map(item => {
+        item.subsInfo = []
+        item.subscriptions.map(sub => item.subsInfo.push(subscriptions[sub]))
+      })
+      return collections
+    },
   },
 
   methods: {