ShowEasyFrontEnd/FrontEnd/components/exhibition/SortByGroup.vue

<template>
  <div>
    <v-btn-toggle tile group v-model="activeIndex">
      <v-btn
        v-for="(sortBy, i) in sortByList"
        :key="`sort_by_${i}`"
        class="sort-by-item text-center remove-upper"
        plain
        height="auto"
        :ripple="false"
        :class="width > 1264 ? '' : 'px-1'"
        :style="width > 1264 ? 'font-size: 16px' : 'font-size: 12px'"
      >
        {{ $t(sortBy.text) }}
      </v-btn>
    </v-btn-toggle>
  </div>
</template>

<script>
export default {
  name: "SortByGroup",
  data: () => ({
    activeIndex: -1,
    sortByList: [
      /*{
        text: "Ratings",
        sort: "sortByRate",
      },
      {
        text: "ShowEasy Recommended",
        sort: "sortByRecommend",
      },*/
      {
        text: "Show Dates",
        sort: "sortByNewest",
      },
      {
        text: "Exhibitor Numbers",
        sort: "sortByExhibitNumber",
      },
      {
        text: "Visitor Numbers",
        sort: "sortByVisitorNumber",
      },
    ],
    width: undefined,
  }),
  created() {
    if (process.client) {
      this.width = window.innerWidth;
    }
  },
  methods: {
    onResize() {
      if (process.client) {
        this.width = window.innerWidth;
      }
    },
  },
  computed: {
    windowWidth() {
      if (process.client) {
        this.width = window.innerWidth;
      }
      return this.width;
    },
  },
  mounted() {
    this.$nextTick(() => {
      window.addEventListener("resize", this.onResize);
    });
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.onResize);
  },
  watch: {
    activeIndex(newIdx, oldIdx) {
      if (newIdx === undefined || newIdx === oldIdx) return;
      this.$emit("change", this.sortByList[newIdx].sort);
    },
  },
};
</script>

<style lang="scss" scoped>
.sort-by-item {
  user-select: none;
  cursor: pointer;
  &:hover {
    color: #ee9546;
  }
  &.v-btn--active {
    color: #ee9546;
  }
}
</style>