Add group search

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

js/src/views/Group/GroupList.vue

@@ -3,7 +3,7 @@
     <h1>{{ $t("Group List") }} ({{ groups.total }})</h1>
     <b-loading :active.sync="$apollo.loading" />
     <div class="columns">
-      <GroupCard
+      <GroupMemberCard
         v-for="group in groups.elements"
         :key="group.uuid"
         :group="group"
@@ -20,7 +20,7 @@
 import { Component, Vue } from "vue-property-decorator";
 import { LIST_GROUPS } from "@/graphql/actor";
 import { Group, IGroup } from "@/types/actor";
-import GroupCard from "@/components/Group/GroupCard.vue";
+import GroupMemberCard from "@/components/Group/GroupMemberCard.vue";
 import RouteName from "../../router/name";
 
 @Component({
@@ -30,7 +30,7 @@ import RouteName from "../../router/name";
     },
   },
   components: {
-    GroupCard,
+    GroupMemberCard,
   },
 })
 export default class GroupList extends Vue {

js/src/views/Group/MyGroups.vue

@@ -12,7 +12,7 @@
       />
     </section>
     <section v-if="memberships && memberships.length > 0">
-      <GroupCard v-for="member in memberships" :key="member.id" :member="member" />
+      <GroupMemberCard v-for="member in memberships" :key="member.id" :member="member" />
     </section>
     <b-message v-if="$apollo.loading === false && memberships.length === 0" type="is-danger">
       {{ $t("No groups found") }}
@@ -23,7 +23,7 @@
 <script lang="ts">
 import { Component, Vue } from "vue-property-decorator";
 import { LOGGED_USER_MEMBERSHIPS } from "@/graphql/actor";
-import GroupCard from "@/components/Group/GroupCard.vue";
+import GroupMemberCard from "@/components/Group/GroupMemberCard.vue";
 import InvitationCard from "@/components/Group/InvitationCard.vue";
 import { Paginate } from "@/types/paginate";
 import { IGroup, IMember, MemberRole } from "@/types/actor";
@@ -32,7 +32,7 @@ import { ACCEPT_INVITATION } from "../../graphql/member";
 
 @Component({
   components: {
-    GroupCard,
+    GroupMemberCard,
     InvitationCard,
   },
   apollo: {

js/src/views/PageNotFound.vue

@@ -48,7 +48,7 @@ export default class PageNotFound extends Vue {
   enter() {
     this.$router.push({
       name: RouteName.SEARCH,
-      params: { searchTerm: this.searchText },
+      query: { term: this.searchText },
     });
   }
 }

js/src/views/Search.vue

@@ -34,7 +34,7 @@
               </b-select>
             </b-field>
             <b-field :label="$t('Date')" label-for="date">
-              <b-select v-model="when" id="date">
+              <b-select v-model="when" id="date" :disabled="activeTab !== 0">
                 <option v-for="(option, index) in options" :key="index" :value="option">{{
                   option.label
                 }}</option>
@@ -78,6 +78,26 @@
           $t("No events found")
         }}</b-message>
       </b-tab-item>
+      <b-tab-item v-if="config && config.features.groups">
+        <template slot="header">
+          <b-icon icon="account-multiple"></b-icon>
+          <span>
+            {{ $t("Groups") }} <b-tag rounded>{{ searchGroups.total }}</b-tag>
+          </span>
+        </template>
+        <div v-if="searchGroups.total > 0" class="columns is-multiline">
+          <div
+            class="column is-one-quarter-desktop"
+            v-for="group in searchGroups.elements"
+            :key="group.uuid"
+          >
+            <group-card :group="group" />
+          </div>
+        </div>
+        <b-message v-else-if="$apollo.loading === false" type="is-danger">
+          {{ $t("No groups found") }}
+        </b-message>
+      </b-tab-item>
     </b-tabs>
   </div>
 </template>
@@ -107,6 +127,9 @@ import {
   startOfMonth,
   eachWeekendOfInterval,
 } from "date-fns";
+import { IGroup } from "../types/actor";
+import GroupCard from "../components/Group/GroupCard.vue";
+import { CONFIG } from "../graphql/config";
 
 interface ISearchTimeOption {
   label: string;
@@ -128,8 +151,10 @@ const tabsName: { events: number; groups: number } = {
   components: {
     EventCard,
     AddressAutoComplete,
+    GroupCard,
   },
   apollo: {
+    config: CONFIG,
     events: FETCH_EVENTS,
     searchEvents: {
       query: SEARCH_EVENTS,
@@ -148,6 +173,17 @@ const tabsName: { events: number; groups: number } = {
         return !this.search && !this.actualTag && !this.geohash && this.end === null;
       },
     },
+    searchGroups: {
+      query: SEARCH_GROUPS,
+      variables() {
+        return {
+          searchText: this.search,
+        };
+      },
+      skip() {
+        return this.search == null || this.search == "";
+      },
+    },
   },
   metaInfo() {
     return {
@@ -159,16 +195,14 @@ const tabsName: { events: number; groups: number } = {
   },
 })
 export default class Search extends Vue {
-  @Prop({ type: String, required: false, default: "" }) searchTerm!: string;
-  @Prop({ type: String, required: false, default: "events" }) searchType!: "events" | "groups";
-
   events: IEvent[] = [];
 
   searchEvents: Paginate<IEvent> & { initial: boolean } = { total: 0, elements: [], initial: true };
+  searchGroups: Paginate<IGroup> = { total: 0, elements: [] };
 
-  search = this.searchTerm;
+  search: string = (this.$route.query.term as string) || "";
 
-  activeTab: SearchTabs = tabsName[this.searchType];
+  activeTab: SearchTabs = tabsName[this.$route.query.searchType as "events" | "groups"] || 0;
 
   location: IAddress = new Address();
 
@@ -230,15 +264,27 @@ export default class Search extends Vue {
 
   radiusOptions: (number | null)[] = [1, 5, 10, 25, 50, 100, 150, null];
 
-  radius: number | undefined = undefined;
+  radius: number | null = null;
 
   submit() {
     this.$apollo.queries.searchEvents.refetch();
   }
 
-  @Watch("searchTerm")
+  @Watch("search")
   updateSearchTerm() {
-    this.search = this.searchTerm;
+    this.$router.push({
+      name: RouteName.SEARCH,
+      query: Object.assign({}, this.$route.query, { term: this.search }),
+    });
+  }
+
+  @Watch("activeTab")
+  updateActiveTab() {
+    const searchType = this.activeTab === tabsName.events ? "events" : "groups";
+    this.$router.push({
+      name: RouteName.SEARCH,
+      query: Object.assign({}, this.$route.query, { searchType }),
+    });
   }
 
   get weekend(): { start: Date; end: Date } {