Add handling of filters

components/pages/events/index.vue

@@ -6,7 +6,7 @@
         {{submitInfo}}
       </p>
     </app-loader>
-    <v-container fluid grid-list-md v-if="isReady || isSubmitting || isSubmitted" class="app-fade-in">
+    <v-container fluid grid-list-md v-if="isReady || isSubmitting || isSubmitted || isRefreshing" class="app-fade-in">
       <v-layout row wrap v-if="!hasUser">
         <v-flex xs12>
           <p><b>OBS! Logga in för att kunna filtrera listan</b></p>
@@ -40,7 +40,7 @@
       </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" />
+          <Event :event="event" :has-user="hasUser" :toggleIgnore="toggleIgnore" />
         </v-flex>
       </v-layout>
     </v-container>
@@ -59,11 +59,11 @@
     findEvents,
     findEventsAndOrigins,
     fetchAddress,
-    ignoreBand,
-    ignoreDanceHall,
-    ignoreCity,
-    ignoreMunicipality,
-    ignoreState,
+    toggleIgnoreBand,
+    toggleIgnoreDanceHall,
+    toggleIgnoreCity,
+    toggleIgnoreMunicipality,
+    toggleIgnoreState,
     saveOrigin,
     removeOrigin
   } from "~/utils/graph-client";
@@ -101,9 +101,6 @@
       isLoading() {
         return this.status === "loading";
       },
-      isLoadFailed() {
-        return this.status === "load-failed";
-      },
       isReady() {
         return this.status === "ready";
       },
@@ -113,8 +110,8 @@
       isSubmitted() {
         return this.status === "submitted";
       },
-      isSubmitFailed() {
-        return this.status === "submit-failed";
+      isRefreshing() {
+        return this.status === "refreshing";
       },
       hasUser() {
         return this.user !== undefined && this.user !== null;
@@ -136,8 +133,8 @@
       }
     },
     methods: {
-      fetchEvents () {
-        this.status = "loading";
+      fetchEvents (status) {
+        this.status = status || "loading";
         const origins = this.origins;
         if (this.origin) {
           origins.push(this.origin);
@@ -167,44 +164,44 @@
       fetchUser() {
         this.user = auth.getUserInfo();
       },
-      ignore(type, name) {
+      toggleIgnore(type, name) {
         switch (type) {
           case 'band':
-            ignoreBand({name: name})
-                .then(this.ignoreSuccess(name))
-                .catch(this.ignoreFailed);
+            toggleIgnoreBand({name: name})
+                .then(this.toggleIgnoreSuccess(name))
+                .catch(this.toggleIgnoreFailed);
             break;
           case 'danceHall':
-            ignoreDanceHall({name: name})
-                .then(this.ignoreSuccess(name))
-                .catch(this.ignoreFailed);
+            toggleIgnoreDanceHall({name: name})
+                .then(this.toggleIgnoreSuccess(name))
+                .catch(this.toggleIgnoreFailed);
             break;
           case 'city':
-            ignoreCity({name: name})
-                .then(this.ignoreSuccess(name))
-                .catch(this.ignoreFailed);
+            toggleIgnoreCity({name: name})
+                .then(this.toggleIgnoreSuccess(name))
+                .catch(this.toggleIgnoreFailed);
             break;
           case 'municipality':
-            ignoreMunicipality({name: name})
-                .then(this.ignoreSuccess(name))
-                .catch(this.ignoreFailed);
+            toggleIgnoreMunicipality({name: name})
+                .then(this.toggleIgnoreSuccess(name))
+                .catch(this.toggleIgnoreFailed);
             break;
           case 'state':
-            ignoreState({name: name})
-                .then(this.ignoreSuccess(name))
-                .catch(this.ignoreFailed);
+            toggleIgnoreState({name: name})
+                .then(this.toggleIgnoreSuccess(name))
+                .catch(this.toggleIgnoreFailed);
             break;
         }
       },
-      ignoreSuccess(name) {
+      toggleIgnoreSuccess(name) {
         return () => {
-          this.fetchEvents();
+          this.fetchEvents('refreshing');
           this.snackColor = 'success';
           this.snackText = `${name} har dolts`;
           this.snackbar = true;
         }
       },
-      ignoreFailed(name) {
+      toggleIgnoreFailed(name) {
         return () => {
           this.snackColor = 'error';
           this.snackText = `${name} kunde inte döljas`;
@@ -217,7 +214,7 @@
               if (saved) {
                 this.origins = [];
                 this.origin = "";
-                this.fetchEvents();
+                this.fetchEvents('refreshing');
               } else {
                 this.snackColor = 'error';
                 this.snackText = `${origin} kunde inte sparas`;
@@ -242,7 +239,7 @@
               .then(response => {
                 this.status = 'submitted';
                 this.origin = response.data.address;
-                this.fetchEvents();
+                this.fetchEvents('refreshing');
               })
           })
         }
@@ -252,12 +249,6 @@
 </script>
 
 <style lang="scss" scoped>
-  /*.container {*/
-    /*display: flex;*/
-    /*will-change: opacity;*/
-    /*padding: 1.5rem 1rem;*/
-  /*}*/
-
   .left {
     padding: 1.5rem 1rem;
 
@@ -279,10 +270,6 @@
     position: relative;
   }
 
-  .eventRow {
-    margin-bottom: 0.5rem;
-  }
-
   @media screen and(max-width: 1200px) {
     .left {
       width: 40vw;