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

<template>
  <div>
    <app-loader :show="isLoading" />
    <div v-if="isReady || isSubmitting || isSubmitted" class="container app-fade-in">
      <Table stripe border :columns="columns" :data="events"></Table>
    </div>
  </div>
</template>

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

  import auth from "~/utils/auth";

  // import LoadFailed from "./Messages/LoadFailed";
  // import NotViewable from "./Messages/NotViewable";
  // import SubmitFailed from "./Messages/SubmitFailed";
  // import SubmitSuccessful from "./Messages/SubmitSuccessful";
  // import Alerts from "./Alerts";
  // import TopBar from "./TopBar";
  // import PackageSelector from "./PackageSelector";
  // import ProductsForm from "./ProductsForm";
  // import PropertyInfo from "./Info";
  // import RealtorFrame from "./RealtorFrame";

  export default {
    components: {
      // Alerts,
      // LoadFailed,
      // NotViewable,
      // TopBar,
      // PackageSelector,
      // ProductsForm,
      // PropertyInfo,
      // RealtorFrame,
      // SubmitFailed,
      // SubmitSuccessful
    },
    data() {
      return {
        status: "loading",
        property: undefined,
        propertyId: undefined,
        order: undefined,
        orderId: undefined,
        originalProperty: undefined,
        selectedPackage: undefined,
        selectedImages: [],
        submitError: "",
        user: undefined,
        columns: [
          {
            title: 'Datum',
            key: 'date'
          },
          {
            title: 'Tid',
            key: 'time'
          },
          {
            title: 'Band',
            render: (h, params) => {
              const inner = Array(h('span', ' ' + params.row.band.name + ' '));
              if (this.hasUser) {
                inner.push(h('Icon', {
                  props: {
                    type: 'ios-eye-off'
                  },
                  attrs: {
                    title: 'Dölj'
                  },
                  on: {
                    click: () => {
                      this.ignoreBand({name: params.row.band.name})
                    }
                  }
                }, 'Dölj'));
              }

              return h('div', inner);
            }
          },
          {
            title: 'Dansställe',
            render: (h, params) => {
              const inner = Array(h('span', ' ' + params.row.danceHall.name + ' '));
              if (this.hasUser) {
                inner.push(h('Icon', {
                  props: {
                    type: 'ios-eye-off'
                  },
                  attrs: {
                    title: 'Dölj'
                  },
                  on: {
                    click: () => {
                      this.ignoreDanceHall({name: params.row.danceHall.name})
                    }
                  }
                }, 'Dölj'));
              }

              return h('div', inner);
            }
          },
          {
            title: 'Stad',
            render: (h, params) => {
              const inner = Array(h('span', ' ' + params.row.danceHall.city + ' '));
              if (this.hasUser) {
                inner.push(h('Icon', {
                  props: {
                    type: 'ios-eye-off'
                  },
                  attrs: {
                    title: 'Dölj'
                  },
                  on: {
                    click: () => {
                      this.ignoreCity({name: params.row.danceHall.city})
                    }
                  }
                }, 'Dölj'));
              }

              return h('div', inner);
            }
          },
          {
            title: 'Kommun',
            render: (h, params) => {
              const inner = Array(h('span', ' ' + params.row.danceHall.municipality + ' '));
              if (this.hasUser) {
                inner.push(h('Icon', {
                  props: {
                    type: 'ios-eye-off'
                  },
                  attrs: {
                    title: 'Dölj'
                  },
                  on: {
                    click: () => {
                      this.ignoreMunicipality({name: params.row.danceHall.municipality})
                    }
                  }
                }, 'Dölj'));
              }

              return h('div', inner);
            }
          },
          {
            title: 'Län',
            render: (h, params) => {
              const inner = Array(h('span', ' ' + params.row.danceHall.state + ' '));
              if (this.hasUser) {
                inner.push(h('Icon', {
                  props: {
                    type: 'ios-eye-off'
                  },
                  attrs: {
                    title: 'Dölj'
                  },
                  on: {
                    click: () => {
                      this.ignoreState({name: params.row.danceHall.state})
                    }
                  }
                }, 'Dölj'));
              }

              return h('div', inner);
            }
          },
          {
            title: 'Övrigt',
            key: 'extraInfo'
          }
        ]
      };
    },
    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;
      }
    },
    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();
      },
      ignoreBand(name) {
        ignoreBand(name)
            .then(this.ignoreSuccess)
            .catch(this.ignoreFailed)
      },
      ignoreDanceHall(name) {
        ignoreDanceHall(name)
            .then(this.ignoreSuccess)
            .catch(this.ignoreFailed)
      },
      ignoreCity(name) {
        ignoreCity(name)
            .then(this.ignoreSuccess)
            .catch(this.ignoreFailed)
      },
      ignoreMunicipality(name) {
        ignoreMunicipality(name)
            .then(this.ignoreSuccess)
            .catch(this.ignoreFailed)
      },
      ignoreState(name) {
        ignoreState(name)
            .then(this.ignoreSuccess)
            .catch(this.ignoreFailed)
      },
      ignoreSuccess(response) {
        this.fetchEvents()
      },
      ignoreFailed() {

      }
      // 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;
  }

  .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;
  }

  @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>