ShowEasyFrontEnd/FrontEnd/components/user/savedExhibitions.vue

<template>
  <v-card class="border-radius-20" flat min-width="900px" max-width="900px">
    <v-spacer class="px-7 pt-7">
      <v-spacer class="d-flex align-center mb-7">
        <div class="circle-decoration me-2"></div>
        <div class="circle-decoration me-2"></div>
        <span class="font-weight-bold text-size-20 ms-7 text-height-26">{{ $t("userProfile.savedExhibitions") }}</span>
      </v-spacer>
      <v-spacer>
        <v-spacer class="mb-2">
          <span class="filter-title-font">{{ $t("userProfile.savedExhibitionsFilter") }}</span>
        </v-spacer>
        <v-spacer class="d-flex mb-7">
          <div class="input-country-wrap me-5">
            <v-autocomplete
              solo flat
              hide-details
              dense
              :items="countryOptions"
              item-text="name"
              item-value="id"
              v-model="countrySelect"
              class="input-border"
            ></v-autocomplete>
          </div>
        </v-spacer>
        <v-spacer class="d-flex justify-center mt-15 mb-7">
          <div v-if="userRenderList.length === 0">
            <v-img 
              :src="require('~/assets/img/savedExhibitionEmpty.png')"
              contain
              max-width="210px"
              max-height="153px"
            ></v-img>
            <div class="d-flex justify-center">
              <span class="empty-exhibitions-font">{{ $t("userProfile.noSavedExhibitions") }}</span>
            </div>
          </div>
          <v-spacer v-else>
            <ExhibitionListCard 
              v-for="(exhibition,index) in userRenderList.slice((this.page-1)*6,this.page*6)" :key="index"
              :item="exhibition"
              @toggle-favorite="removeExhibitionRelation(index)"
            ></ExhibitionListCard>
          </v-spacer>
        </v-spacer>
        </v-spacer>
        <v-spacer 
          class="d-flex justify-center pb-7 pt-5"
          v-if="userRenderList.length === 0"
        >
          <v-btn
            class="border-radius-12 text-capitalize" 
            color="primary"
            :to="localePath('/')"
          >
            {{ $t("Explore with ShowEasy") }}
          </v-btn>
        </v-spacer>
        <v-spacer
          v-else
          class="d-flex justify-end pb-15"
        > 
          <v-pagination
            class="mt-15"
            :total-visible="7"
            :length="userRenderListLength"
            v-model="page"
          ></v-pagination>
        </v-spacer>
    </v-spacer>
  </v-card>
</template>
<script>
import ExhibitionListCard from "~/components/exhibition/ExhibitionListCard.vue";

export default {
  props: {
    userVisibleExhibitionList: {
      type: Array,
      required: true,
      default: []
    },
    pageLength: {
      type: Number,
      required: true,
      default: 0
    }
  },
  data() {
    return {
      page:1,
      countryOptions: [],
      countryOptionsCopy: [],
      countrySelect: 999,
      statusOptions: [],
      statusSelect: 100,
      userRenderList: [],
      userRenderListLength: 0,
      buildCountryOptions: true,
    }
  },
  created() {

    // this.$axios.get(`users/countries?lang=${this.$i18n.locale.replace('-','')}`)
    // .then((result) => {
    //   const initial = {
    //     name: this.$t('userProfile.allCountries'),
    //     id: 999
    //   }
    //   this.countryOptions = JSON.parse(JSON.stringify(result.data.result))
    //   this.countryOptions.splice(0,0,initial)
    // }).catch((err) => {
    //   console.log(err)
    // });

    // this.$axios.get(`exhibitions/filters?lang=${this.$i18n.locale.replace('-','')}`)
    // .then((result) => {
    //   this.statusOptions = result.data.filters.statuses
    // }).catch((err) => {
    //   console.log(err)
    // });
  },
  methods: {
    removeExhibitionRelation(index) {
      this.$axios.put(`/member/exhibitions?jwt=${this.$auth.$storage.getUniversal('jwt') ? this.$auth.$storage.getUniversal('jwt').token : ''}&exhibition_id=${this.userRenderList[index].id}&delete=true`)
      .then((result) => {
        if (this.countrySelect.toString() !== '999') {
          this.countrySelect = 999
        }
        this.$emit('refetch-user')
        this.userRenderList.splice((this.page-1)*6+index,1)
        this.userRenderListLength = Math.ceil(this.userRenderList.length/6)
        if ( this.page > this.userRenderListLength ) {
          this.page = this.userRenderListLength
        }
      }).catch((err) => {
        console.log(err)
      });
    },
  },
  watch: {
    countrySelect: {
      handler:function() {
        if (this.countrySelect) {
          this.$emit('filter-list',this.countrySelect.toString())
        }
      }
    },
    userVisibleExhibitionList: {
      handler:function() {
        this.userRenderList = JSON.parse(JSON.stringify(this.$props.userVisibleExhibitionList))
        this.userRenderListLength = this.$props.pageLength
        if (this.buildCountryOptions) {
          const locationList = []
          this.userVisibleExhibitionList.forEach(element => {
            locationList.push(element.country.name)
          });
          const options = this.countryOptions.filter(item => locationList.includes(item.name))
          const initial = {
            name: this.$t('userProfile.allCountries'),
            id: 999
          }
          options.splice(0,0,initial)
          this.countryOptions = JSON.parse(JSON.stringify(options))
          this.buildCountryOptions = !this.buildCountryOptions
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.filter-title-font {
  font-weight: 700;
  font-size: 16px;
  line-height: 21px;
  letter-spacing: 0.02em;
}
.input-country-wrap {
  width: 160px;
}
.input-status-wrap {
  width: 142px;
}
.empty-exhibitions-font {
  font-size: 20px;
  line-height: 26px;
  letter-spacing: 0.02em;
  color: #504F4F;
}
</style>