Add date ranges to event query

components/pages/events/index.vue

@@ -2,6 +2,27 @@
   <div>
     <app-loader :show="isLoading" />
     <v-container fluid grid-list-md v-if="isReady || isSubmitting || isSubmitted" class="app-fade-in">
+      <v-layout row>
+        <v-flex xs12>
+          <v-btn-toggle v-model="range" mandatory @change="changeRange()">
+            <v-btn flat value="ONE_WEEK">
+              1 vecka
+            </v-btn>
+            <v-btn flat value="TWO_WEEKS">
+              2 veckor
+            </v-btn>
+            <v-btn flat value="ONE_MONTH">
+              1 månad
+            </v-btn>
+            <v-btn flat value="ONE_QUARTER">
+              1 kvartal
+            </v-btn>
+            <v-btn flat value="ONE_YEAR">
+              1 år
+            </v-btn>
+          </v-btn-toggle>
+        </v-flex>
+      </v-layout>
       <v-layout row wrap v-for="event in events" :key="event.id">
         <v-flex xs12>
           <Event :event="event" :has-user="hasUser" :ignore="ignore" />
@@ -50,7 +71,8 @@
         user: undefined,
         snackbar: false,
         snackColor: "success",
-        snackText: ""
+        snackText: "",
+        range: undefined
       };
     },
     computed: {
@@ -77,14 +99,23 @@
       }
     },
     mounted() {
-      // const { propertyId, orderId, id } = this.$route.query;
+      const {range} = this.$route.query;
+      this.range = range;
       this.fetchEvents();
       this.fetchUser();
     },
+    watch: {
+      "$route.query"() {
+        const {range} = this.$route.query;
+        this.range = range;
+        this.fetchEvents();
+        this.fetchUser();
+      }
+    },
     methods: {
       fetchEvents () {
         this.status = "loading";
-        findEvents()
+        findEvents({range: this.range})
             .then(this.eventsFetched)
             .catch(this.eventsFailed);
       },
@@ -144,6 +175,9 @@
           this.snackText = `${name} kunde inte döljas`;
           this.snackbar = true;
         }
+      },
+      changeRange() {
+        this.$router.push(`/?range=${this.range}`);
       }
     }
   };

utils/graph-client/queries.js

@@ -4,5 +4,5 @@ import {
 } from './queryStrings';
 
 /* eslint-disable max-len */
-export const findEvents = () => createQuery(eventQuery);
+export const findEvents = variables => createQuery(eventQuery, variables);
 /* eslint-enable max-len */

utils/graph-client/queryStrings.js

@@ -1,6 +1,6 @@
 export const eventQuery = `
-  {
-    events: Events {
+  query events($range: Range) {
+    events: Events(range: $range) {
       date
       time
       band {