Add handling of filters

2019-03-02 21:51:25 +01:00
parent 4736462c72
commit 3efba9b3e4
11 changed files with 309 additions and 87 deletions
@@ -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>
@@ -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>