dancefinder-app/components/pages/events/index.vue

<template>
  <div>
    <app-loader :show="isLoading" />
    <v-container fluid grid-list-md v-if="isReady || isSubmitting || isSubmitted" class="app-fade-in">
      <v-layout row wrap v-for="event in events" :key="event.id">
        <v-flex xs12>
          <Event :event="event" :has-user="hasUser" :ignore="ignore" />
        </v-flex>
      </v-layout>
    </v-container>
    <v-snackbar
        v-model="snackbar"
        :color="snackColor"
        :timeout="5000"
    >
      {{ snackText }}
    </v-snackbar>
  </div>
</template>

<script>
  import {
    findEvents,
    ignoreBand,
    ignoreDanceHall,
    ignoreCity,
    ignoreMunicipality,
    ignoreState
  } from "~/utils/graph-client";

  import auth from "~/utils/auth";

  import Event from "./Event";

  export default {
    components: {
      Event
    },
    data() {
      return {
        status: "loading",
        property: undefined,
        propertyId: undefined,
        order: undefined,
        orderId: undefined,
        originalProperty: undefined,
        selectedPackage: undefined,
        selectedImages: [],
        submitError: "",
        user: undefined,
        snackbar: false,
        snackColor: "success",
        snackText: ""
      };
    },
    computed: {
      isLoading() {
        return this.status === "loading";
      },
      isLoadFailed() {
        return this.status === "load-failed";
      },
      isReady() {
        return this.status === "ready";
      },
      isSubmitting() {
        return this.status === "submitting";
      },
      isSubmitted() {
        return this.status === "submitted";
      },
      isSubmitFailed() {
        return this.status === "submit-failed";
      },
      hasUser() {
        return this.user !== undefined && this.user !== null;
      }
    },
    mounted() {
      // const { propertyId, orderId, id } = this.$route.query;
      this.fetchEvents();
      this.fetchUser();
    },
    methods: {
      fetchEvents () {
        this.status = "loading";
        findEvents()
            .then(this.eventsFetched)
            .catch(this.eventsFailed);
      },
      eventsFetched(response) {
        if (response.errors) {
          throw new Error("Fetch failed");
        }
        this.events = response.data.events;
        this.status = "ready";
      },
      eventsFailed() {
        this.status = "load-failed";
      },
      fetchUser() {
        this.user = auth.getUserInfo();
      },
      ignore(type, name) {
        switch (type) {
          case 'band':
            ignoreBand({name: name})
                .then(this.ignoreSuccess(name))
                .catch(this.ignoreFailed);
            break;
          case 'danceHall':
            ignoreDanceHall({name: name})
                .then(this.ignoreSuccess(name))
                .catch(this.ignoreFailed);
            break;
          case 'city':
            ignoreCity({name: name})
                .then(this.ignoreSuccess(name))
                .catch(this.ignoreFailed);
            break;
          case 'municipality':
            ignoreMunicipality({name: name})
                .then(this.ignoreSuccess(name))
                .catch(this.ignoreFailed);
            break;
          case 'state':
            ignoreState({name: name})
                .then(this.ignoreSuccess(name))
                .catch(this.ignoreFailed);
            break;
        }
      },
      ignoreSuccess(name) {
        return () => {
          this.fetchEvents();
          this.snackColor = 'success';
          this.snackText = `${name} har dolts`;
          this.snackbar = true;
        }
      },
      ignoreFailed(name) {
        return () => {
          this.snackColor = 'error';
          this.snackText = `${name} kunde inte döljas`;
          this.snackbar = true;
        }
      }
    }
  };
</script>

<style lang="scss" scoped>
  /*.container {*/
    /*display: flex;*/
    /*will-change: opacity;*/
    /*padding: 1.5rem 1rem;*/
  /*}*/

  .left {
    padding: 1.5rem 1rem;

    > * {
      margin-bottom: 1.5rem;
    }

    hr {
      border: 0;
      border-top: 1px solid #eaeaea;
    }
  }

  .left,
  .right {
    height: 100vh;
    overflow: scroll;
    overflow-x: hidden;
    position: relative;
  }

  .eventRow {
    margin-bottom: 0.5rem;
  }

  @media screen and(max-width: 1200px) {
    .left {
      width: 40vw;
    }
    .right {
      width: 60vw;
    }
  }

  @media screen and(max-width: 1024px) {
    .left {
      width: 50vw;
    }
    .right {
      width: 50vw;
    }
  }

  @media screen and(min-width: 1200px) {
    .left {
      width: 35vw;
    }
    .right {
      width: 65vw;
    }
  }
</style>