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

<template>
  <div>
    <app-loader :show="isLoading" />
    <div v-if="isReady || isSubmitting || isSubmitted" class="container app-fade-in">
      <Content>
        <Row :gutter="16" type="flex" justify="space-around" v-for="event in events" :key="event.id" class-name="eventRow">
          <Col span="24">
            <Event :event="event" :has-user="hasUser" :ignore="ignore"></Event>
          </Col>
        </Row>
        <br>
      </Content>
    </div>
  </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
      };
    },
    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";
      },
      isNotViewable() {
        return this.status === "no-packages";
      },
      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.$Message.success(`${name} har dolts`);
        }
      },
      ignoreFailed(name) {
        return () => {
          this.$Message.error(`${name} kunde inte döljas`);
        }
      }
      // switchPackage(pack) {
      //   this.selectedPackage = pack;
      // },
      // switchImage(image) {
      //   this.selectedImages = [image];
      // },
      // publishCampaign(products) {
      //   if (this.status !== "ready") {
      //     return;
      //   }
      //   const packageToOrder = {
      //     products,
      //     packagePrice: this.selectedPackage.price,
      //     packageId: this.selectedPackage.id
      //   };
      //
      //   this.status = "submitting";
      //   orderPackage({
      //     package: packageToOrder,
      //     propertyId: this.propertyId,
      //     orderId: this.orderId
      //   })
      //       .then(this.publishCampaignSuccess, this.publishCampaignFailed)
      //       .catch(this.publishCampaignFailed);
      // },
      // publishCampaignSuccess(response) {
      //   if (response.errors) {
      //     this.publishCampaignFailed();
      //   } else {
      //     this.status = "submitted";
      //   }
      // },
      // publishCampaignFailed() {
      //   this.status = "submit-failed";
      // }
    }
  };
</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>