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>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> <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>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> <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>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> <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>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,
+    toggleIgnoreBand,
-    ignoreDanceHall,
+    toggleIgnoreDanceHall,
-    ignoreCity,
+    toggleIgnoreCity,
-    ignoreMunicipality,
+    toggleIgnoreMunicipality,
-    ignoreState,
+    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() {
+      isRefreshing() {
-        return this.status === "submit-failed";
+        return this.status === "refreshing";
       },
       hasUser() {
         return this.user !== undefined && this.user !== null;
@@ -136,8 +133,8 @@
       }
     },
     methods: {
-      fetchEvents () {
+      fetchEvents (status) {
-        this.status = "loading";
+        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})
+            toggleIgnoreBand({name: name})
-                .then(this.ignoreSuccess(name))
+                .then(this.toggleIgnoreSuccess(name))
-                .catch(this.ignoreFailed);
+                .catch(this.toggleIgnoreFailed);
             break;
           case 'danceHall':
-            ignoreDanceHall({name: name})
+            toggleIgnoreDanceHall({name: name})
-                .then(this.ignoreSuccess(name))
+                .then(this.toggleIgnoreSuccess(name))
-                .catch(this.ignoreFailed);
+                .catch(this.toggleIgnoreFailed);
             break;
           case 'city':
-            ignoreCity({name: name})
+            toggleIgnoreCity({name: name})
-                .then(this.ignoreSuccess(name))
+                .then(this.toggleIgnoreSuccess(name))
-                .catch(this.ignoreFailed);
+                .catch(this.toggleIgnoreFailed);
             break;
           case 'municipality':
-            ignoreMunicipality({name: name})
+            toggleIgnoreMunicipality({name: name})
-                .then(this.ignoreSuccess(name))
+                .then(this.toggleIgnoreSuccess(name))
-                .catch(this.ignoreFailed);
+                .catch(this.toggleIgnoreFailed);
             break;
           case 'state':
-            ignoreState({name: name})
+            toggleIgnoreState({name: name})
-                .then(this.ignoreSuccess(name))
+                .then(this.toggleIgnoreSuccess(name))
-                .catch(this.ignoreFailed);
+                .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>

layouts/default.vue

@@ -35,6 +35,14 @@
             <nuxt-link to="/origins/"><v-list-tile-title>Hantera startpunkter</v-list-tile-title></nuxt-link>
           </v-list-tile-content>
         </v-list-tile>
+        <v-list-tile v-if="hasUser">
+          <v-list-tile-action>
+            <v-icon>mdi-magnify</v-icon>
+          </v-list-tile-action>
+          <v-list-tile-content>
+            <nuxt-link to="/filter/"><v-list-tile-title>Hantera filter</v-list-tile-title></nuxt-link>
+          </v-list-tile-content>
+        </v-list-tile>
         <v-list-tile v-if="hasUser">
           <v-list-tile-action>
             <v-icon>exit_to_app</v-icon>
@@ -45,7 +53,7 @@
         </v-list-tile>
       </v-list>
     </v-navigation-drawer>
-    <v-toolbar app scroll-toolbar-off-screen>
+    <v-toolbar app scroll-off-screen>
       <v-toolbar-side-icon v-on:click="left = !left"></v-toolbar-side-icon>
       <v-toolbar-title v-html="title"></v-toolbar-title>
       <v-spacer></v-spacer>

pages/filters.vue

@@ -0,0 +1,18 @@
+<template>
+  <filters />
+</template>
+
+<script>
+  import Filters from "~/components/pages/filters";
+
+  export default {
+    components: {
+      Filters
+    },
+    head() {
+      return {
+        title: "Dancefinder - Filter"
+      };
+    }
+  };
+</script>

utils/graph-client/index.js

@@ -3,14 +3,15 @@ export {
   findEventsAndOrigins,
   findOrigins,
   fetchAddress,
+  fetchFilters,
 } from './queries';
 
 export {
-  ignoreBand,
+  toggleIgnoreBand,
-  ignoreDanceHall,
+  toggleIgnoreDanceHall,
-  ignoreCity,
+  toggleIgnoreCity,
-  ignoreMunicipality,
+  toggleIgnoreMunicipality,
-  ignoreState,
+  toggleIgnoreState,
   saveOrigin,
   removeOrigin
 } from './mutations';

utils/graph-client/mutationStrings.js

@@ -1,27 +1,27 @@
 module.exports = {
-  ignoreBandMutation: `
+  toggleIgnoreBandMutation: `
-    mutation IgnoreBand($name: String!) {
+    mutation ToggleIgnoreBand($name: String!) {
-      ignore: IgnoreBand(name: $name)
+      ignore: ToggleIgnoreBand(name: $name)
     }
   `,
-  ignoreDanceHallMutation: `
+  toggleIgnoreDanceHallMutation: `
-    mutation IgnoreDanceHall($name: String!) {
+    mutation ToggleIgnoreDanceHall($name: String!) {
-      ignore: IgnoreDanceHall(name: $name)
+      ignore: ToggleIgnoreDanceHall(name: $name)
     }
   `,
-  ignoreCityMutation: `
+  toggleIgnoreCityMutation: `
-    mutation IgnoreCity($name: String!) {
+    mutation ToggleIgnoreCity($name: String!) {
-      ignore: IgnoreCity(name: $name)
+      ignore: ToggleIgnoreCity(name: $name)
     }
   `,
-  ignoreMunicipalityMutation: `
+  toggleIgnoreMunicipalityMutation: `
-    mutation IgnoreMunicipality($name: String!) {
+    mutation ToggleIgnoreMunicipality($name: String!) {
-      ignore: IgnoreMunicipality(name: $name)
+      ignore: ToggleIgnoreMunicipality(name: $name)
     }
   `,
-  ignoreStateMutation: `
+  toggleIgnoreStateMutation: `
-    mutation IgnoreState($name: String!) {
+    mutation ToggleIgnoreState($name: String!) {
-      ignore: IgnoreState(name: $name)
+      ignore: ToggleIgnoreState(name: $name)
     }
   `,
   saveOriginMutation: `

utils/graph-client/mutations.js

@@ -1,29 +1,29 @@
 import { createQuery } from './utils';
 import {
-  ignoreBandMutation,
+  toggleIgnoreBandMutation,
-  ignoreDanceHallMutation,
+  toggleIgnoreDanceHallMutation,
-  ignoreCityMutation,
+  toggleIgnoreCityMutation,
-  ignoreMunicipalityMutation,
+  toggleIgnoreMunicipalityMutation,
-  ignoreStateMutation,
+  toggleIgnoreStateMutation,
   saveOriginMutation,
   removeOriginMutation
 } from './mutationStrings';
 
 /* eslint-disable max-len */
-export const ignoreBand = variables => {
+export const toggleIgnoreBand = variables => {
-  return createQuery(ignoreBandMutation, variables)
+  return createQuery(toggleIgnoreBandMutation, variables)
 };
-export const ignoreDanceHall = variables => {
+export const toggleIgnoreDanceHall = variables => {
-  return createQuery(ignoreDanceHallMutation, variables)
+  return createQuery(toggleIgnoreDanceHallMutation, variables)
 };
-export const ignoreCity = variables => {
+export const toggleIgnoreCity = variables => {
-  return createQuery(ignoreCityMutation, variables)
+  return createQuery(toggleIgnoreCityMutation, variables)
 };
-export const ignoreMunicipality = variables => {
+export const toggleIgnoreMunicipality = variables => {
-  return createQuery(ignoreMunicipalityMutation, variables)
+  return createQuery(toggleIgnoreMunicipalityMutation, variables)
 };
-export const ignoreState = variables => {
+export const toggleIgnoreState = variables => {
-  return createQuery(ignoreStateMutation, variables)
+  return createQuery(toggleIgnoreStateMutation, variables)
 };
 export const saveOrigin = variables => {
   return createQuery(saveOriginMutation, variables)

utils/graph-client/queries.js

@@ -4,6 +4,7 @@ import {
   eventsAndOriginsQuery,
   originsQuery,
   addressFromLatLngQuery,
+  filtersQuery,
 } from './queryStrings';
 
 /* eslint-disable max-len */
@@ -11,4 +12,5 @@ export const findEvents = variables => createQuery(eventsQuery, variables);
 export const findEventsAndOrigins = variables => createQuery(eventsAndOriginsQuery, variables);
 export const findOrigins = () => createQuery(originsQuery);
 export const fetchAddress = variables => createQuery(addressFromLatLngQuery, variables);
+export const fetchFilters = () => createQuery(filtersQuery);
 /* eslint-enable max-len */

utils/graph-client/queryStrings.js

@@ -44,3 +44,13 @@ export const addressFromLatLngQuery = `
     address: AddressFromLatLng(latlng: $latlng)
   }
 `;
+
+export const filtersQuery = `
+  query {
+    bands: IgnoredBands
+    cities: IgnoredCities
+    states: IgnoredStates
+    danceHalls: IgnoredDanceHalls
+    municipalities: IgnoredMunicipalities
+  }
+`;