Add handling of filters

components/pages/events/Event/index.vue

@@ -1,7 +1,7 @@
 <template>
   <v-card xs12>
     <v-card-title primary-title>
-      <h3 class="headline mb-0"><a href="#" v-if="hasUser" @click.prevent="ignore('band', event.band.name)"><v-icon medium title="Dölj">mdi-eye-off</v-icon></a>&nbsp;{{event.band.name}}</h3>
+      <h3 class="headline mb-0"><v-icon class="ml-1 mr-1" v-if="hasUser" v-on:click="toggleIgnore('band', event.band.name)" medium title="Dölj">mdi-eye-off</v-icon>{{event.band.name}}</h3>
     </v-card-title>
     <v-container>
       <v-layout row wrap>
@@ -9,10 +9,10 @@
         <v-flex xs12 sm6 v-if="event.time"><strong>Tid:</strong> {{event.time}}</v-flex>
       </v-layout>
       <v-layout row wrap>
-        <v-flex xs12 sm6 md3><strong>Var:</strong> <a href="#" v-if="hasUser" @click.prevent="ignore('danceHall', event.danceHall.name)"><v-icon small title="Dölj">mdi-eye-off</v-icon></a>&nbsp;{{event.danceHall.name}}</v-flex>
-        <v-flex xs12 sm6 md3><strong>Ort:</strong> <a href="#" v-if="hasUser" @click.prevent="ignore('city', event.danceHall.city)"><v-icon small title="Dölj">mdi-eye-off</v-icon></a>&nbsp;{{event.danceHall.city}}</v-flex>
-        <v-flex xs12 sm6 md3><strong>Kommun:</strong> <a href="#" v-if="hasUser" @click.prevent="ignore('municipality', event.danceHall.municipality)"><v-icon small title="Dölj">mdi-eye-off</v-icon></a>&nbsp;{{event.danceHall.municipality}}</v-flex>
-        <v-flex xs12 sm6 md3><strong>Län:</strong> <a href="#" v-if="hasUser" @click.prevent="ignore('state', event.danceHall.state)"><v-icon small title="Dölj">mdi-eye-off</v-icon></a>&nbsp;{{event.danceHall.state}}</v-flex>
+        <v-flex xs12 sm6 md3><strong>Var:</strong><v-icon class="ml-1 mr-1" v-if="hasUser" v-on:click="toggleIgnore('danceHall', event.danceHall.name)" small title="Dölj">mdi-eye-off</v-icon>{{event.danceHall.name}}</v-flex>
+        <v-flex xs12 sm6 md3><strong>Ort:</strong><v-icon class="ml-1 mr-1" v-if="hasUser" v-on:click="toggleIgnore('city', event.danceHall.city)" small title="Dölj">mdi-eye-off</v-icon>{{event.danceHall.city}}</v-flex>
+        <v-flex xs12 sm6 md3><strong>Kommun:</strong><v-icon class="ml-1 mr-1" v-if="hasUser" v-on:click="toggleIgnore('municipality', event.danceHall.municipality)" small title="Dölj">mdi-eye-off</v-icon>{{event.danceHall.municipality}}</v-flex>
+        <v-flex xs12 sm6 md3><strong>Län:</strong><v-icon class="ml-1 mr-1" v-if="hasUser" v-on:click="toggleIgnore('state', event.danceHall.state)" small title="Dölj">mdi-eye-off</v-icon>{{event.danceHall.state}}</v-flex>
       </v-layout>
       <v-layout row wrap v-for="distance in event.distances" :key="event.origin">
         <v-flex xs12 sm6>
@@ -41,7 +41,7 @@
         type: Boolean,
         required: true
       },
-      ignore: {
+      toggleIgnore: {
         type: Function,
         required: true
       }

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;

components/pages/filters/List/index.vue

@@ -0,0 +1,42 @@
+<template>
+  <v-flex xs12 sm6 md4 lg3>
+    <v-card>
+      <v-card-title>
+        <span v-html="title"></span>
+        <v-spacer></v-spacer>
+        <span v-html="model.length"></span><span class="ml-1">st</span>
+      </v-card-title>
+      <v-list>
+        <v-list-tile v-for="item in model" :key="item">
+          <v-list-tile-action v-on:click="toggleIgnore(type, item)">
+            <v-icon>mdi-delete-outline</v-icon>
+          </v-list-tile-action>
+          <v-list-tile-title v-html="item"></v-list-tile-title>
+        </v-list-tile>
+      </v-list>
+    </v-card>
+  </v-flex>
+</template>
+
+<script>
+  export default {
+    props: {
+      model: {
+        type: Array,
+        required: true
+      },
+      title: {
+        type: String,
+        required: true
+      },
+      type: {
+        type: String,
+        required: true
+      },
+      toggleIgnore: {
+        type: Function,
+        required: true
+      }
+    }
+  };
+</script>

components/pages/filters/index.vue

@@ -0,0 +1,154 @@
+<template>
+  <div>
+    <app-loader :show="isLoading" />
+    <app-loader v-if="isSubmitting" overlay>
+      <p>
+        {{submitInfo}}
+      </p>
+    </app-loader>
+    <v-container fluid grid-list-md v-if="isReady || isSubmitting || isSubmitted || isRefreshing" class="app-fade-in">
+      <v-layout row wrap>
+        <v-flex xs12>
+          <v-card>
+            <v-container
+                fluid
+                grid-list-md
+            >
+              <v-layout row wrap>
+                <list :model="bands" title="Band" type="band" :toggleIgnore="toggleIgnore"/>
+                <v-flex xs12 sm6 md4 lg3>
+                  <v-layout column align-content-start>
+                    <list :model="states" title="Län" type="state" :toggleIgnore="toggleIgnore"/>
+                    <list :model="municipalities" title="Kommun" type="municipality" :toggleIgnore="toggleIgnore"/>
+                    <list :model="cities" title="Stad" type="city" :toggleIgnore="toggleIgnore"/>
+                    <list :model="danceHalls" title="Danslokal" type="danceHall" :toggleIgnore="toggleIgnore"/>
+                  </v-layout>
+                </v-flex>
+              </v-layout>
+            </v-container>
+          </v-card>
+        </v-flex>
+      </v-layout>
+    </v-container>
+  </div>
+</template>
+
+<script>
+  import {
+    fetchFilters,
+    toggleIgnoreBand,
+    toggleIgnoreCity,
+    toggleIgnoreDanceHall,
+    toggleIgnoreMunicipality,
+    toggleIgnoreState,
+  } from "~/utils/graph-client";
+
+  import List from "./List";
+
+  export default {
+    components: {
+      List
+    },
+    data() {
+      return {
+        status: "loading",
+        bands: [],
+        danceHalls: [],
+        cities: [],
+        municipalities: [],
+        states: [],
+        submitInfo: "",
+        snackbar: false,
+        snackColor: "success",
+        snackText: "",
+      };
+    },
+    computed: {
+      isLoading() {
+        return this.status === "loading";
+      },
+      isReady() {
+        return this.status === "ready";
+      },
+      isSubmitting() {
+        return this.status === "submitting";
+      },
+      isSubmitted() {
+        return this.status === "submitted";
+      },
+      isRefreshing() {
+        return this.status === "refreshing";
+      }
+    },
+    mounted() {
+      this.$store.commit('setTitle', 'Filter');
+      this.fetchFilters();
+    },
+    methods: {
+      fetchFilters(status) {
+        this.status = status || "loading";
+        fetchFilters()
+            .then(this.filtersFetched)
+            .catch(this.filtersFailed);
+      },
+      filtersFetched(response) {
+        if (response.errors) {
+          throw new Error("Fetch failed");
+        }
+        this.bands = response.data.bands;
+        this.danceHalls = response.data.danceHalls;
+        this.cities = response.data.cities;
+        this.municipalities = response.data.municipalities;
+        this.states = response.data.states;
+        this.status = "ready";
+      },
+      filtersFailed() {
+        this.status = "load-failed";
+      },
+      toggleIgnore(type, name) {
+        switch (type) {
+          case 'band':
+            toggleIgnoreBand({name: name})
+                .then(this.toggleIgnoreSuccess(name))
+                .catch(this.toggleIgnoreFailed);
+            break;
+          case 'danceHall':
+            toggleIgnoreDanceHall({name: name})
+                .then(this.toggleIgnoreSuccess(name))
+                .catch(this.toggleIgnoreFailed);
+            break;
+          case 'city':
+            toggleIgnoreCity({name: name})
+                .then(this.toggleIgnoreSuccess(name))
+                .catch(this.toggleIgnoreFailed);
+            break;
+          case 'municipality':
+            toggleIgnoreMunicipality({name: name})
+                .then(this.toggleIgnoreSuccess(name))
+                .catch(this.toggleIgnoreFailed);
+            break;
+          case 'state':
+            toggleIgnoreState({name: name})
+                .then(this.toggleIgnoreSuccess(name))
+                .catch(this.toggleIgnoreFailed);
+            break;
+        }
+      },
+      toggleIgnoreSuccess(name) {
+        return () => {
+          this.fetchFilters('refreshing');
+          this.snackColor = 'success';
+          this.snackText = `${name} har tagits bort`;
+          this.snackbar = true;
+        }
+      },
+      toggleIgnoreFailed(name) {
+        return () => {
+          this.snackColor = 'error';
+          this.snackText = `${name} kunde inte tas bort`;
+          this.snackbar = true;
+        }
+      }
+    }
+  }
+</script>