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

Front Changes for search

See merge request framasoft/mobilizon!123
This commit is contained in:
Thomas Citharel 2019-04-24 19:55:59 +02:00
commit 690620cdff
3 changed files with 56 additions and 27 deletions

View File

@ -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) {
...on Event {
searchEvents(search: $searchText) {
total,
elements {
title,
uuid,
beginsOn,
tags {
slug,
title
},
__typename
},
...on Actor {
}
}
}
`;
export const SEARCH_GROUPS = gql`
query SearchGroups($searchText: String!) {
searchGroups(search: $searchText) {
total,
elements {
avatarUrl,
domain,
preferredUsername,

View File

@ -1,3 +1,12 @@
export interface ISearch {
__typename: string;
import { IGroup } from '@/types/actor.model';
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>
<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: {
query: SEARCH,
searchEvents: {
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 groups.map(group => Object.assign(new Group(), group));
return this.searchGroups.elements.map(group => Object.assign(new Group(), group));
}
}