potsda.mn/mobilizon
10
4
Fork 1
Code Issues 22 Pull requests 1 Projects Releases Wiki Activity

Add event search field on explore page and fix featured events

Browse source 
Closes #195 and #196

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel 2019-10-09 18:51:55 +02:00
parent f4360468a6
commit a205ba6ab8
No known key found for this signature in database
GPG key ID: A061B9DDE0CA0773
2 changed files with 49 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
js/src/graphql/search.ts
View file

@ -8,6 +8,9 @@ query SearchEvents($searchText: String!) {
title, title,
uuid, uuid,
beginsOn, beginsOn,
picture {
url,
},
tags { tags {
slug, slug,
title title

62
js/src/views/Event/Explore.vue
View file

@ -1,20 +1,33 @@
<template> <template>
<section class="container"> <div class="container">
<h1 class="title">{{ $t('Explore') }}</h1> <h1 class="title">{{ $t('Explore') }}</h1>
<!-- <pre>{{ events }}</pre>--> <section class="hero">
<b-loading :active.sync="$apollo.loading"></b-loading> <div class="hero-body">
<div v-if="events.length > 0" class="columns is-multiline"> <form @submit="submit()">
<EventCard <b-field :label="$t('Event')" grouped label-position="on-border">
v-for="event in events" <b-input icon="magnify" type="search" size="is-large" expanded v-model="searchTerm" :placeholder="$t('For instance: London, Taekwondo, Architecture…')" />
:key="event.uuid" <p class="control">
:event="event" <b-button @click="submit" type="is-info" size="is-large">{{ $t('Search') }}</b-button>
class="column is-one-quarter-desktop" </p>
/> </b-field>
</div> </form>
<b-message v-else-if="events.length === 0 && $apollo.loading === false" type="is-danger"> </div>
{{ $t('No events found') }} </section>
</b-message> <section class="events-featured">
</section> <b-loading :active.sync="$apollo.loading"></b-loading>
<h3 class="title">{{ $t('Featured events') }}</h3>
<div v-if="events.length > 0" class="columns is-multiline">
<div class="column is-one-quarter-desktop" v-for="event in events" :key="event.uuid">
<EventCard
:event="event"
/>
</div>
</div>
<b-message v-else-if="events.length === 0 && $apollo.loading === false" type="is-danger">
{{ $t('No events found') }}
</b-message>
</section>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
@ -22,6 +35,7 @@ import { Component, Vue } from 'vue-property-decorator';
import EventCard from '@/components/Event/EventCard.vue'; import EventCard from '@/components/Event/EventCard.vue';
import { FETCH_EVENTS } from '@/graphql/event'; import { FETCH_EVENTS } from '@/graphql/event';
import { IEvent } from '@/types/event.model'; import { IEvent } from '@/types/event.model';
import { RouteName } from '@/router';
@Component({ @Component({
components: { components: {
@ -35,8 +49,24 @@ import { IEvent } from '@/types/event.model';
}) })
export default class Explore extends Vue { export default class Explore extends Vue {
events: IEvent[] = []; events: IEvent[] = [];
searchTerm: string = '';
submit() {
this.$router.push({ name: RouteName.SEARCH, params: { searchTerm: this.searchTerm } });
}
} }
</script> </script>
<style scoped> <style scoped lang="scss">
h3.title {
margin-bottom: 1.5rem;
}
.events-featured {
margin: 25px auto;
.columns {
margin: 1rem auto 3rem;
}
}
</style> </style>