search for groups

webapp/components/generic/SearchGroup/SearchGroup.vue

@@ -0,0 +1,37 @@
+<template>
+  <section class="search-post">
+    <p class="label">{{ option.groupName | truncate(70) }}</p>
+    <div class="metadata"></div>
+  </section>
+</template>
+
+<script>
+export default {
+  name: 'SearchGroup',
+  props: {
+    option: { type: Object, required: true },
+  },
+}
+</script>
+<style lang="scss">
+.search-post {
+  display: flex;
+
+  > .label {
+    flex-grow: 1;
+    padding: 0 $space-x-small;
+  }
+
+  > .metadata {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    color: $text-color-softer;
+    font-size: $font-size-small;
+
+    > .counts > .counter-icon {
+      margin: 0 $space-x-small;
+    }
+  }
+}
+</style>

webapp/components/generic/SearchableInput/SearchableInput.vue

@@ -35,6 +35,12 @@
         >
           <search-post :option="option" />
         </p>
+        <p
+          v-if="option.__typename === 'Group'"
+          :class="{ 'option-with-heading': isFirstOfType(option) }"
+        >
+          <search-group :option="option" />
+        </p>
         <p
           v-if="option.__typename === 'Tag'"
           :class="{ 'option-with-heading': isFirstOfType(option) }"
@@ -51,6 +57,7 @@
 import { isEmpty } from 'lodash'
 import SearchHeading from '~/components/generic/SearchHeading/SearchHeading.vue'
 import SearchPost from '~/components/generic/SearchPost/SearchPost.vue'
+import SearchGroup from '~/components/generic/SearchGroup/SearchGroup.vue'
 import HcHashtag from '~/components/Hashtag/Hashtag.vue'
 import UserTeaser from '~/components/UserTeaser/UserTeaser.vue'
 
@@ -58,6 +65,7 @@ export default {
   name: 'SearchableInput',
   components: {
     SearchHeading,
+    SearchGroup,
     SearchPost,
     HcHashtag,
     UserTeaser,
@@ -140,8 +148,17 @@ export default {
         this.searchValue = this.previousSearchTerm
       })
     },
-    isPost(item) {
-      return item.__typename === 'Post'
+    getRouteName(item) {
+      switch (item.__typename) {
+        case 'Post':
+          return 'post-id-slug'
+        case 'User':
+          return 'profile-id-slug'
+        case 'Group':
+          return 'group-id-slug'
+        default:
+          return null
+      }
     },
     isTag(item) {
       return item.__typename === 'Tag'
@@ -150,7 +167,7 @@ export default {
       this.$nextTick(() => {
         if (!this.isTag(item)) {
           this.$router.push({
-            name: this.isPost(item) ? 'post-id-slug' : 'profile-id-slug',
+            name: this.getRouteName(item),
             params: { id: item.id, slug: item.slug },
           })
         } else {