Changes for search
Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
parent
83ebe94d84
commit
88f05665a2
@ -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,
|
||||||
|
@ -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[];
|
||||||
}
|
}
|
||||||
|
@ -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));
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user