From 0706fd5245034254a1e93f2033ca8c244a83ee97 Mon Sep 17 00:00:00 2001
From: Thomas Citharel <tcit@tcit.fr>
Date: Wed, 9 Oct 2019 18:51:55 +0200
Subject: [PATCH] Add event search field on explore page and fix featured
 events

Closes #195 and #196

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
---
 js/src/graphql/search.ts       |  3 ++
 js/src/views/Event/Explore.vue | 62 +++++++++++++++++++++++++---------
 2 files changed, 49 insertions(+), 16 deletions(-)

diff --git a/js/src/graphql/search.ts b/js/src/graphql/search.ts
index 562a8eab1..56d53d50f 100644
--- a/js/src/graphql/search.ts
+++ b/js/src/graphql/search.ts
@@ -8,6 +8,9 @@ query SearchEvents($searchText: String!) {
       title,
       uuid,
       beginsOn,
+      picture {
+        url,
+      },
       tags {
         slug,
         title
diff --git a/js/src/views/Event/Explore.vue b/js/src/views/Event/Explore.vue
index 4848f576f..909abd301 100644
--- a/js/src/views/Event/Explore.vue
+++ b/js/src/views/Event/Explore.vue
@@ -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>