ShowEasyFrontEnd/FrontEnd/components/user/savedExhibitionsDialog.vue

<template>
  <v-dialog 
    fullscreen
    v-model="dialogActive"
    @click:outside="$emit('close-saved-exhibition')"
  >
    <v-card>
      <v-spacer class="pt-15 pa-7">
        <v-spacer :class="$vuetify.breakpoint.smAndUp ? 'd-flex align-center pt-10' : 'd-flex align-center pt-10'">
          <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 class="mb-2 mt-7">
          <span class="filter-title-font">{{ $t("userProfile.savedExhibitionsFilter") }}</span>
        </v-spacer>
        <v-spacer class="d-flex">
          <div class="input-country-wrap me-5">
            <v-autocomplete
              class="input-border"
              solo flat
              hide-details
              dense
              :items="countryOptions"
              item-text="name"
              item-value="id"
              v-model="countrySelect"
            ></v-autocomplete>
          </div>
          <!-- <div class="input-status-wrap">
            <v-select
              outlined
              hide-details
              dense
              :items="statusOptions"
              item-text="status"
              item-value="id"
              v-model="statusSelect"
            ></v-select>
          </div> -->
        </v-spacer>
        <v-spacer class="d-flex justify-center mb-7">
          <div v-if="userVisibleExhibitionList.length === 0" class="no-picture-wrap">
            <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 class="mt-7">
              <div v-if="$vuetify.breakpoint.smAndUp">
                <ExhibitionListCard 
                  v-for="(exhibition,index) in userVisibleExhibitionList.slice((this.page-1)*6,this.page*6)" :key="index"
                  :item="exhibition"
                  @toggle-favorite="removeExhibitionRelation(index)"
                ></ExhibitionListCard>
              </div>
              <!-- <div v-if="$vuetify.breakpoint.xsOnly">
                <ExhibitionListCardMobile
                  v-for="(exhibition,index) in userVisibleExhibitionList.slice((this.page-1)*6,this.page*6)" :key="index"
                  class="mb-5"
                  :item="exhibition"
                  @toggle-favorite="removeExhibitionRelation(index)"
                ></ExhibitionListCardMobile>
              </div> -->
          </v-spacer>
        </v-spacer>
        <v-spacer 
          class="d-flex justify-center no-picture-btn pt-5"
          v-if="userVisibleExhibitionList.length === 0"
        >
          <v-btn
            class="border-radius-12" 
            color="primary"  
            :to="localePath('/')"         
          >
            {{ $t("Explore with ShowEasy") }}
          </v-btn>
        </v-spacer>
        <v-spacer
          v-else
          class="d-flex justify-end pb-15 me-7"
        >
          <v-pagination
            v-model="page"
            class="mt-15"
            :length="pageLength"
          ></v-pagination>
        </v-spacer>
      </v-spacer>
      
    </v-card>
  </v-dialog>
</template>
<script>
import ExhibitionListCard from "~/components/exhibition/ExhibitionListCard.vue";
// import ExhibitionListCardMobile from "~/components/exhibition/ExhibitionListCardMobile.vue";
export default {
  components: {
    ExhibitionListCard,
    // ExhibitionListCardMobile
  },
  props: {
    dialogActive: {
      type: Boolean,
      required: true,
      default: false
    },
    userVisibleExhibitionList: {
      type: Array,
      required: true,
      default: []
    },
    pageLength: {
      type: Number,
      required: true,
      default: 0
    }
  },
  data() {
    return {
      countryOptions: [],
      countrySelect: 999,
      statusOptions: [],
      statusSelect: 100,
      page: 1
    }
  },
  created() {
    // this.$axios.get(`users/countries?lang=${this.$i18n.locale.replace('-','')}`)
    // .then((result) => {
    //   const initial = {
    //     name: this.$t('userProfile.allCountries'),
    //     id: 999
    //   }
    //   this.countryOptions = 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.userVisibleExhibitionList[index].id}&delete=true`)
      .then((result) => {
        if (this.countrySelect.toString() !== '999') {
          this.countrySelect = 999
        }
        this.$emit('refetch-user')
        this.$emit('reload-page')
        this.$emit('close-saved-exhibition')
      }).catch((err) => {
        console.log(err)
      });
    }
  },
  watch: {
    countrySelect: {
      handler:function() {
        if (this.countrySelect) {
          this.$emit('filter-list',this.countrySelect.toString())
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.filter-title-font {
  font-weight: 700;
  font-size: 16px;
  line-height: 21px;
  letter-spacing: 0.02em;
}
.input-country-wrap {
  @media screen and (max-width: 600px) {
    width: 142px;
  }
  @media screen and (min-width: 600px) and (max-width: 960px) {
    width: 160px;
  }
}
.input-status-wrap {
  @media screen and (max-width: 600px) {
    width: 125px;
  }
  @media screen and (min-width: 600px) and (max-width: 960px) {
    width: 142px;
  }
}
.no-picture-wrap {
  @media screen and (max-width: 600px) {
    margin-top: 80px;
  }
  @media screen and (min-width: 600px) and (max-width: 960px) {
    margin-top: 90px;
  }
}
// .v-input {
//   font-size: 14px;
// }
.no-picture-btn {
  padding-bottom: 75px;
}
</style>