Add group search

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

js/src/components/Group/GroupCard.vue

@@ -9,21 +9,21 @@
         </div>
         <div class="media-content">
           <router-link
-            :to="{ name: RouteName.GROUP, params: { preferredUsername: groupFullUsername } }"
+            :to="{
+              name: RouteName.GROUP,
+              params: { preferredUsername: usernameWithDomain(group) },
+            }"
           >
-            <h3>{{ member.parent.name }}</h3>
+            <h3>{{ group.name }}</h3>
             <p class="is-6 has-text-grey">
-              <span v-if="member.parent.domain">{{
-                `@${member.parent.preferredUsername}@${member.parent.domain}`
-              }}</span>
-              <span v-else>{{ `@${member.parent.preferredUsername}` }}</span>
+              <span v-if="group.domain">{{ `@${group.preferredUsername}@${group.domain}` }}</span>
+              <span v-else>{{ `@${group.preferredUsername}` }}</span>
             </p>
-            <b-tag type="is-info">{{ member.role }}</b-tag>
           </router-link>
         </div>
       </div>
       <div class="content">
-        <p>{{ member.parent.summary }}</p>
+        <p>{{ group.summary }}</p>
       </div>
     </div>
   </div>
@@ -31,20 +31,15 @@
 
 <script lang="ts">
 import { Component, Prop, Vue } from "vue-property-decorator";
-import { IGroup, IMember } from "@/types/actor";
+import { IGroup, usernameWithDomain } from "@/types/actor";
 import RouteName from "../../router/name";
 
 @Component
 export default class GroupCard extends Vue {
-  @Prop({ required: true }) member!: IMember;
+  @Prop({ required: true }) group!: IGroup;
 
   RouteName = RouteName;
 
-  get groupFullUsername() {
-    if (this.member.parent.domain) {
-      return `${this.member.parent.preferredUsername}@${this.member.parent.domain}`;
-    }
-    return this.member.parent.preferredUsername;
-  }
+  usernameWithDomain = usernameWithDomain;
 }
 </script>

js/src/components/Group/GroupMemberCard.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="card">
+    <div class="card-content">
+      <div class="media">
+        <div class="media-left">
+          <figure class="image is-48x48">
+            <img src="https://bulma.io/images/placeholders/96x96.png" alt="Placeholder image" />
+          </figure>
+        </div>
+        <div class="media-content">
+          <router-link
+            :to="{
+              name: RouteName.GROUP,
+              params: { preferredUsername: usernameWithDomain(member.parent) },
+            }"
+          >
+            <h3>{{ member.parent.name }}</h3>
+            <p class="is-6 has-text-grey">
+              <span v-if="member.parent.domain">{{
+                `@${member.parent.preferredUsername}@${member.parent.domain}`
+              }}</span>
+              <span v-else>{{ `@${member.parent.preferredUsername}` }}</span>
+            </p>
+            <b-tag type="is-info">{{ member.role }}</b-tag>
+          </router-link>
+        </div>
+      </div>
+      <div class="content">
+        <p>{{ member.parent.summary }}</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from "vue-property-decorator";
+import { IMember, usernameWithDomain } from "@/types/actor";
+import RouteName from "../../router/name";
+
+@Component
+export default class GroupMemberCard extends Vue {
+  @Prop({ required: true }) member!: IMember;
+
+  RouteName = RouteName;
+
+  usernameWithDomain = usernameWithDomain;
+}
+</script>

js/src/components/NavBar.vue

@@ -137,9 +137,7 @@ import RouteName from "../router/name";
         this.handleErrors(graphQLErrors);
       },
     },
-    config: {
-      query: CONFIG,
-    },
+    config: CONFIG,
   },
   components: {
     Logo,

js/src/components/SearchField.vue

@@ -8,7 +8,7 @@
       type="search"
       rounded
       :placeholder="defaultPlaceHolder"
-      v-model="searchText"
+      v-model="search"
       @keyup.native.enter="enter"
     />
   </label>
@@ -21,12 +21,12 @@ import RouteName from "../router/name";
 export default class SearchField extends Vue {
   @Prop({ type: String, required: false }) placeholder!: string;
 
-  searchText = "";
+  search: string = "";
 
   enter() {
     this.$router.push({
       name: RouteName.SEARCH,
-      params: { searchTerm: this.searchText },
+      query: { term: this.search },
     });
   }