Merge branch 'front/changes-for-search' into 'master'

Front Changes for search

See merge request framasoft/mobilizon!123

js/src/graphql/search.ts

@@ -1,15 +1,28 @@
 import gql from 'graphql-tag';
 
-export const SEARCH = gql`
+export const SEARCH_EVENTS = gql`
 query SearchEvents($searchText: String!) {
-  search(search: $searchText) {
+  searchEvents(search: $searchText) {
-    ...on Event {
+    total,
+    elements {
       title,
       uuid,
       beginsOn,
-      __typename
+      tags {
+        slug,
+        title
       },
-    ...on Actor {
+      __typename
+    }
+  }
+}
+`;
+
+export const SEARCH_GROUPS = gql`
+query SearchGroups($searchText: String!) {
+  searchGroups(search: $searchText) {
+    total,
+    elements {
       avatarUrl,
       domain,
       preferredUsername,

js/src/types/search.model.ts

@@ -1,3 +1,12 @@
-export interface ISearch {
+import { IGroup } from '@/types/actor.model';
-  __typename: string;
+import { IEvent } from '@/types/event.model';
+
+export interface SearchEvent {
+  total: number;
+  elements: IEvent[];
+}
+
+export interface SearchGroup {
+  total: number;
+  elements: IGroup[];
 }

js/src/views/Search.vue

@@ -8,11 +8,11 @@
             <b-tab-item>
                 <template slot="header">
                     <b-icon icon="calendar"></b-icon>
-                    <span><translate>Events</translate> <b-tag rounded>{{ events.length }}</b-tag> </span>
+                    <span><translate>Events</translate> <b-tag rounded>{{ searchEvents.total }}</b-tag> </span>
                 </template>
-                <div v-if="search.length > 0" class="columns is-multiline">
+                <div v-if="searchEvents.total > 0" class="columns is-multiline">
                     <div class="column is-one-quarter-desktop is-half-mobile"
-                         v-for="event in events"
+                         v-for="event in searchEvents.elements"
                          :key="event.uuid">
                         <EventCard
                                 :event="event"
@@ -26,9 +26,9 @@
             <b-tab-item>
                 <template slot="header">
                     <b-icon icon="account-multiple"></b-icon>
-                    <span><translate>Groups</translate> <b-tag rounded>{{ groups.length }}</b-tag> </span>
+                    <span><translate>Groups</translate> <b-tag rounded>{{ searchGroups.total }}</b-tag> </span>
                 </template>
-                <div v-if="groups.length > 0" class="columns is-multiline">
+                <div v-if="searchGroups.total > 0" class="columns is-multiline">
                     <div class="column is-one-quarter-desktop is-half-mobile"
                          v-for="group in groups"
                          :key="group.uuid">
@@ -44,13 +44,12 @@
 </template>
 <script lang="ts">
 import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
-import { SEARCH } from '@/graphql/search';
+import { SEARCH_EVENTS, SEARCH_GROUPS } from '@/graphql/search';
 import { RouteName } from '@/router';
-import { IEvent } from '@/types/event.model';
-import { ISearch } from '@/types/search.model';
 import EventCard from '@/components/Event/EventCard.vue';
-import { IGroup, Group } from '@/types/actor.model';
 import GroupCard from '@/components/Group/GroupCard.vue';
+import { Group, IGroup } from '@/types/actor.model';
+import { SearchEvent, SearchGroup } from '@/types/search.model';
 
 enum SearchTabs {
     EVENTS = 0,
@@ -65,8 +64,19 @@ const tabsName = {
 
 @Component({
   apollo: {
-    search: {
+    searchEvents: {
-      query: SEARCH,
+      query: SEARCH_EVENTS,
+      variables() {
+        return {
+          searchText: this.searchTerm,
+        };
+      },
+      skip() {
+        return !this.searchTerm;
+      },
+    },
+    searchGroups: {
+      query: SEARCH_GROUPS,
       variables() {
         return {
           searchText: this.searchTerm,
@@ -86,7 +96,8 @@ export default class Search extends Vue {
   @Prop({ type: String, required: true }) searchTerm!: string;
   @Prop({ type: String, required: false, default: 'events' }) searchType!: string;
 
-  search = [];
+  searchEvents: SearchEvent = { total: 0, elements: [] };
+  searchGroups: SearchGroup = { total: 0, elements: [] };
   activeTab: SearchTabs = tabsName[this.searchType];
 
   changeTab(index: number) {
@@ -102,10 +113,10 @@ export default class Search extends Vue {
 
   @Watch('search')
   changeTabForResult() {
-    if (this.events.length === 0 && this.groups.length > 0) {
+    if (this.searchEvents.total === 0 && this.searchGroups.total > 0) {
       this.activeTab = SearchTabs.GROUPS;
     }
-    if (this.groups.length === 0 && this.events.length > 0) {
+    if (this.searchGroups.total === 0 && this.searchEvents.total > 0) {
       this.activeTab = SearchTabs.EVENTS;
     }
   }
@@ -113,16 +124,12 @@ export default class Search extends Vue {
   @Watch('search')
   @Watch('$route')
   async loadSearch() {
-    await this.$apollo.queries['search'].refetch();
+    await this.$apollo.queries['searchEvents'].refetch() && this.$apollo.queries['searchGroups'].refetch();
   }
 
-  get events(): IEvent[] {
-    return this.search.filter((value: ISearch) => { return value.__typename === 'Event'; }) as IEvent[];
-  }
 
   get groups(): IGroup[] {
-    const groups = this.search.filter((value: ISearch) => { return value.__typename === 'Group'; }) as IGroup[];
+    return this.searchGroups.elements.map(group => Object.assign(new Group(), group));
-    return groups.map(group => Object.assign(new Group(), group));
   }
 
 }