Add toolbar and navigation drawer

components/pages/events/index.vue

@@ -58,6 +58,7 @@
 <script>
   import {
     findEvents,
+    findEventsAndOrigins,
     fetchAddress,
     ignoreBand,
     ignoreDanceHall,
@@ -78,6 +79,7 @@
     },
     data() {
       return {
+        title: "Evenemang",
         status: "loading",
         origin: undefined,
         origins: [],
@@ -122,15 +124,16 @@
     mounted() {
       const {range} = this.$route.query;
       this.range = range;
-      this.fetchEvents();
       this.fetchUser();
+      this.fetchEvents();
+      this.$store.commit('setTitle', this.title);
     },
     watch: {
       "$route.query"() {
         const {range} = this.$route.query;
         this.range = range;
-        this.fetchEvents();
         this.fetchUser();
+        this.fetchEvents();
       }
     },
     methods: {
@@ -140,16 +143,23 @@
         if (this.origin) {
           origins.push(this.origin);
         }
-        findEvents({range: this.range, origins: origins.length > 0 ? origins : null})
-            .then(this.eventsFetched)
-            .catch(this.eventsFailed);
+        const variables = {range: this.range, origins: origins.length > 0 ? origins : null};
+        if (this.hasUser) {
+          findEventsAndOrigins(variables)
+              .then(this.eventsFetched)
+              .catch(this.eventsFailed);
+        } else {
+          findEvents(variables)
+              .then(this.eventsFetched)
+              .catch(this.eventsFailed);
+        }
       },
       eventsFetched(response) {
         if (response.errors) {
           throw new Error("Fetch failed");
         }
         this.events = response.data.events;
-        this.origins = response.data.origins;
+        this.origins = response.data.origins || [];
         this.status = "ready";
       },
       eventsFailed() {
@@ -253,6 +263,11 @@
           })
         }
       }
+    },
+    head() {
+      return {
+        title: this.title
+      };
     }
   };
 </script>