feat(style info): add search by topic

VChet · Oct 15, 2020 · 231f750 · 231f750
1 parent 162d927
commit 231f750
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 21 deletions.
diff --git a/src/src/components/dialogs/StyleInfoDialog.vue b/src/src/components/dialogs/StyleInfoDialog.vue
@@ -20,7 +20,9 @@
       <div class="description" v-html="parseEmoji(styleData.description)"></div>
 
       <ul v-if="styleData.topics.length" class="topics">
-        <li v-for="topic in styleData.topics" :key="topic">{{ topic }}</li>
+        <li v-for="topic in styleData.topics" :key="topic">
+          <button @click="$emit('search-topic', topic)">{{ topic }}</button>
+        </li>
       </ul>
 
       <div v-if="authorizedUser" class="edit">
@@ -198,14 +200,20 @@ export default {
   align-items: center;
   gap: 0.5rem;
   list-style: none;
-  user-select: none;
 
   li {
-    padding: 0.5rem;
-    background-color: #fff;
-    border: 1px solid var(--color-border);
-    border-radius: 4px;
-    white-space: nowrap;
+    button {
+      padding: 0.5rem;
+      background-color: #fff;
+      border: 1px solid var(--color-border);
+      border-radius: 4px;
+      white-space: nowrap;
+      transition: border-color 0.3s;
+
+      &:hover {
+        border-color: var(--color-main-dark);
+      }
+    }
   }
 }
 

diff --git a/src/src/views/Home.vue b/src/src/views/Home.vue
@@ -61,6 +61,7 @@
       :style-data="selectedStyle"
       :user="user"
       @search-by-owner="(value) => (ownerFilter = value)"
+      @search-topic="(value) => (searchQuery = value)"
       @update-styles="getStyles"
       @close="closeStyleModal"
     />
@@ -120,7 +121,8 @@ export default {
       if (filter) this.searchByOwner();
     },
     searchQuery() {
-      this.searchStyles();
+      this.closeStyleModal();
+      this.searchQuery ? this.searchStyles() : this.resetFilters();
     },
     showStyleInfoModal(isActive) {
       const $body = document.body;
@@ -202,19 +204,15 @@ export default {
         });
     },
     searchStyles() {
-      if (this.searchQuery) {
-        axios
-          .get(`/api/search?query=${this.searchQuery}`)
-          .then((response) => {
-            window.history.replaceState({}, `${this.searchQuery} | StyleBase`, `/search/${this.searchQuery}`);
-            this.styles = response.data.styles;
-          })
-          .catch((error) => {
-            console.error(error);
-          });
-      } else {
-        this.resetFilters();
-      }
+      axios
+        .get(`/api/search?query=${this.searchQuery}`)
+        .then((response) => {
+          window.history.replaceState({}, `${this.searchQuery} | StyleBase`, `/search/${this.searchQuery}`);
+          this.styles = response.data.styles;
+        })
+        .catch((error) => {
+          console.error(error);
+        });
     },
     searchByOwner() {
       axios