From 0145aba30fe89787acf545b59adbaa8c5ce1b7ae Mon Sep 17 00:00:00 2001
From: Kailash Nadh <kailash@nadh.in>
Date: Sat, 1 Aug 2020 12:58:46 +0530
Subject: [PATCH] Add missing tag UI to lists

---
 frontend/src/assets/style.scss   |  8 ++++++++
 frontend/src/views/Campaigns.vue |  2 +-
 frontend/src/views/ListForm.vue  |  6 ++++++
 frontend/src/views/Lists.vue     | 13 +++++++++----
 4 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/frontend/src/assets/style.scss b/frontend/src/assets/style.scss
index 96210365..e6abf420 100644
--- a/frontend/src/assets/style.scss
+++ b/frontend/src/assets/style.scss
@@ -258,6 +258,14 @@ section {
 .tag {
   min-width: 75px;
 
+  &.is-small {
+    font-size: 0.65rem;
+    background: $white-ter;
+    border: 1px solid $white-ter;
+    padding: 3px 5px;
+    min-width: auto !important;
+  }
+
   &:not(body) {
     $color: $grey-lighter;
     border: 1px solid $color;
diff --git a/frontend/src/views/Campaigns.vue b/frontend/src/views/Campaigns.vue
index 89d49449..2daa45a7 100644
--- a/frontend/src/views/Campaigns.vue
+++ b/frontend/src/views/Campaigns.vue
@@ -50,7 +50,7 @@
                 </p>
                 <p class="is-size-7 has-text-grey">{{ props.row.subject }}</p>
                 <b-taglist>
-                    <b-tag v-for="t in props.row.tags" :key="t">{{ t }}</b-tag>
+                    <b-tag class="is-small" v-for="t in props.row.tags" :key="t">{{ t }}</b-tag>
                 </b-taglist>
               </div>
             </b-table-column>
diff --git a/frontend/src/views/ListForm.vue b/frontend/src/views/ListForm.vue
index 4344bede..2aba0ce3 100644
--- a/frontend/src/views/ListForm.vue
+++ b/frontend/src/views/ListForm.vue
@@ -35,6 +35,11 @@
             <option value="double">Double</option>
           </b-select>
         </b-field>
+
+        <b-field label="Tags" label-position="on-border">
+          <b-taginput v-model="form.tags" ellipsis
+            icon="tag-outline" placeholder="Tags"></b-taginput>
+        </b-field>
       </section>
       <footer class="modal-card-foot has-text-right">
         <b-button @click="$parent.close()">Close</b-button>
@@ -64,6 +69,7 @@ export default Vue.extend({
         name: '',
         type: '',
         optin: '',
+        tags: '',
       },
     };
   },
diff --git a/frontend/src/views/Lists.vue b/frontend/src/views/Lists.vue
index 07f6570f..0a6c960c 100644
--- a/frontend/src/views/Lists.vue
+++ b/frontend/src/views/Lists.vue
@@ -15,10 +15,15 @@
       hoverable
       default-sort="createdAt">
         <template slot-scope="props">
-            <b-table-column field="name" label="Name" sortable>
-              <router-link :to="{name: 'subscribers_list', params: { listID: props.row.id }}">
-                {{ props.row.name }}
-              </router-link>
+            <b-table-column field="name" label="Name" sortable width="25%">
+              <div>
+                <router-link :to="{name: 'subscribers_list', params: { listID: props.row.id }}">
+                  {{ props.row.name }}
+                </router-link>
+                <b-taglist>
+                    <b-tag class="is-small" v-for="t in props.row.tags" :key="t">{{ t }}</b-tag>
+                </b-taglist>
+              </div>
             </b-table-column>
 
             <b-table-column field="type" label="Type" sortable>