From 6f2aa1a318b909cba0f7c08eefaeb52cc8ece38a Mon Sep 17 00:00:00 2001
From: Kailash Nadh <kailash@nadh.in>
Date: Sun, 19 Sep 2021 12:49:22 +0530
Subject: [PATCH] Fix and refactor list selector UI component.

- Refactor font-size tag colours and dropdown padding.
- Fixed oninput list filter that wasn't working.
---
 frontend/src/assets/style.scss           | 14 ++++++++++++--
 frontend/src/components/ListSelector.vue | 14 ++++++++++----
 2 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/frontend/src/assets/style.scss b/frontend/src/assets/style.scss
index 45d6630..0e8b934 100644
--- a/frontend/src/assets/style.scss
+++ b/frontend/src/assets/style.scss
@@ -307,13 +307,22 @@ body.is-noscroll .b-sidebar {
 .autocomplete {
   .dropdown-content {
     background-color: $white-bis;
+    border: 1px solid $primary;
   }
   a.dropdown-item {
+    font-size: $size-6;
     &:hover, &.is-hovered {
       background-color: $grey-lightest;
       color: $primary;
     }
   }
+  .dropdown-menu {
+    top: 92%;
+  }
+  .dropdown-menu.is-opened-top {
+    top: auto;
+    bottom: 92%;
+  }
 }
 
 .input, .taginput .taginput-container.is-focusable, .textarea {
@@ -377,7 +386,7 @@ body.is-noscroll .b-sidebar {
 
 /* Tags */
 .tag {
-  min-width: 75px;
+  min-width: 85px;
 
   &.is-small {
     font-size: 0.65rem;
@@ -388,6 +397,7 @@ body.is-noscroll .b-sidebar {
   }
 
   &:not(body) {
+    font-size: 0.85em;
     $color: $grey-lighter;
     border: 1px solid $color;
     box-shadow: 1px 1px 0 $color;
@@ -401,7 +411,7 @@ body.is-noscroll .b-sidebar {
     border: 1px solid lighten($color, 37%);
     box-shadow: 1px 1px 0 lighten($color, 37%);
   }
-  &.public, &.running {
+  &.public, &.running, &.list {
     $color: $primary;
     color: lighten($color, 20%);;
     background: #e6f7ff;
diff --git a/frontend/src/components/ListSelector.vue b/frontend/src/components/ListSelector.vue
index 9e5cf49..af1a6ad 100644
--- a/frontend/src/components/ListSelector.vue
+++ b/frontend/src/components/ListSelector.vue
@@ -7,7 +7,7 @@
             :class="l.subscriptionStatus"
             :closable="true"
             :data-id="l.id"
-            @close="removeList(l.id)">
+            @close="removeList(l.id)" class="list">
             {{ l.name }} <sup>{{ l.subscriptionStatus }}</sup>
           </b-tag>
         </b-taglist>
@@ -17,10 +17,11 @@
       :label="label  + (selectedItems ? ` (${selectedItems.length})` : '')"
       label-position="on-border">
       <b-autocomplete
+        v-model="query"
         :placeholder="placeholder"
         clearable
         dropdown-position="top"
-        :disabled="disabled || filteredLists.length === 0"
+        :disabled="all.length === 0"
         :keep-first="true"
         :clear-on-select="true"
         :open-on-focus="true"
@@ -60,6 +61,7 @@ export default {
 
   data() {
     return {
+      query: '',
       selectedItems: [],
     };
   },
@@ -70,6 +72,7 @@ export default {
         return;
       }
       this.selectedItems.push(l);
+      this.query = '';
 
       // Propagate the items to the parent's v-model binding.
       Vue.nextTick(() => {
@@ -88,14 +91,17 @@ export default {
   },
 
   computed: {
-    // Returns the list of lists to which the subscriber isn't subscribed.
+    // Return the list of unselected lists.
     filteredLists() {
       // Get a map of IDs of the user subsciptions. eg: {1: true, 2: true};
       const subIDs = this.selectedItems.reduce((obj, item) => ({ ...obj, [item.id]: true }), {});
 
       // Filter lists from the global lists whose IDs are not in the user's
       // subscribed ist.
-      return this.$props.all.filter((l) => !(l.id in subIDs));
+      const q = this.query.toLowerCase();
+      return this.$props.all.filter(
+        (l) => (!(l.id in subIDs) && l.name.toLowerCase().indexOf(q) >= 0),
+      );
     },
   },