Chapril/mobilizon.chapril.org-mobilizon
Chapril
/
mobilizon.chapril.org-mobilizon
24
0
Fork 0
Code Issues Pull Requests Releases Activity

Add event search field on explore page and fix featured events 

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,
uuid,
beginsOn,
picture {
url,
},
tags {
slug,
title

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

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