Changes for search

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel 2019-04-24 19:01:39 +02:00
parent 83ebe94d84
commit 88f05665a2
No known key found for this signature in database
GPG Key ID: A061B9DDE0CA0773
3 changed files with 56 additions and 27 deletions

View File

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

View File

@ -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[];
} }

View File

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