ShowEasyFrontEnd/FrontEnd/pages/user/saveExhibition.vue

<template>
  <div class="saveExhibition xl:tw-max-w-[1246px] xl:tw-mx-auto">
    <div class="xl:tw-flex xl:tw-justify-between xl:tw-items-start">
      <userSidebar
        :userData="userData"
        :firstName="firstName"
        :lastName="lastName"
        class="tw-hidden xl:tw-block"
      >
      </userSidebar>
      <!-- <div class="xl:tw-hidden"></div> -->
      <div
        class="tw-bg-white xl:tw-p-[30px] xl:tw-rounded-[20px] xl:tw-min-w-[900px] xl:tw-max-w-[900px]"
      >
        <div
          class="tw-text-[20px] tw-font-bold tw-text-base-primary tw-mb-[20px] md:t24 md:tw-mb-[30px]"
        >
          <two-dots class="tw-mr-[30px]"></two-dots
          >{{ $t("userProfile.savedExhibitions") }}
        </div>
        <div class="tw-text-[14px] tw-text-base-primary tw-mb-[10px]">
          {{ $t("userProfile.savedExhibitionsFilter") }}
        </div>
        <div>
          <select
            v-model="countrySelect"
            class="tw-text-neutrals-500 tw-w-[196px] tw-border tw-border-solid tw-border-neutrals-200 tw-rounded-[10px] tw-px-[15px] tw-py-[9px] tw-head-body tw-outline-none tw-mr-[20px] focus:tw-border-primary-1 md:tw-text-[16px]"
          >
            <option
              v-for="(item, index) in countryOptions"
              :key="index"
              :value="item.id"
            >
              {{ item.name }}
            </option>
          </select>
          
          <select
            v-model="statusSelect"
            class="tw-text-neutrals-500 tw-w-[196px] tw-border tw-border-solid tw-border-neutrals-200 tw-rounded-[10px] tw-px-[15px] tw-py-[9px] tw-head-body tw-outline-none focus:tw-border-primary-1 md:tw-text-[16px]"
          >
            <option v-for="(item, index) in statusOptions" :key="index" :value="item.Key">
              {{ item.Value }}
            </option>
          </select>
        </div>
        <div
          v-if="showUserExhibitionList.length == 0"
          class="tw-mt-[80px] md:tw-mt-[90px]"
        >
          <img
            class="tw-flex tw-mx-auto tw-w-[160px]"
            src="~/assets/img/savedExhibitionEmpty.png"
            alt=""
          />
          <div
            class="tw-text-[16px] tw-text-neutrals-800 tw-w-fit tw-mx-auto tw-mb-[50px] md:tw-mb-[60px]"
          >
            {{ $t("userProfile.noSavedExhibitions") }}
          </div>
          <nuxt-link
            :to="localePath('/')"
            class="tw-flex tw-text-[16px] tw-w-fit tw-bg-primary-1 tw-text-white tw-px-[16px] tw-py-[9px] tw-rounded-[12px] tw-mx-auto tw-mb-[37px] md:tw-mb-0"
          >
            {{ $t("Explore with ShowEasy") }}
          </nuxt-link>
        </div>

        <div v-else class="tw-mt-[20px] md:tw-mt-[30px]">

          <ExhibitionListCard
            v-for="(exhibition, index) in countryFilterList"
            :key="index"
            class="tw-mb-[20px]"
            :item="exhibition"
            @toggle-favorite="removeExhibitionRelation($event)"
          >
          </ExhibitionListCard>

          <!-- <v-pagination
            v-model="page"
            class="tw-mt-[28px]"
            :length="userSavedExhibitionPageLength"
          ></v-pagination> -->
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import TwoDots from "@/components/TwoDots";
import ExhibitionListCard from "~/components/exhibition/ExhibitionListCard.vue";
import userSidebar from "@/components/user/userSidebar.vue";
import elementSelect from "@/components/newComponent/form/ElementSelect.vue";
export default {
  name: "saveExhibition",
  layout: "profile",

  components: {
    TwoDots,
    ExhibitionListCard,
    userSidebar,
    elementSelect,
  },
  data() {
    return {
      test:false,
      firstName: "",
      lastName: "",
      userData: {},
      userCompanyId: [],
      userCompanyList: [],
      userAddNewCompanyList: [],
      userSavedExhibitionList: [],
      userVisibleSavedExhibitionList: [],
      userSavedExhibitionPageLength: 0,
      savedExhibitionPerPage: 6,
      yearOptions: [],
      monthOptions: [],
      dayOptions: [],
      yearSelect: "",
      monthSelect: "",
      daySelect: "",
      languageSelect: {
        en: "",
        zhtw: "",
      },
      phoneValid: false,
      countryList:[],
      countryOptions: [],
      countrySelect: 999,
      statusList:[],
      statusOptions: [],
      statusSelect: 999,
      page: 1,
      filterList: [],
      countryFilterList: [],
      userSaveExhibitionList: [],
      exhibitionList: [],
      exhibitionMap: new Map(),
      showUserExhibitionList: [],
      userSaveExhibition: [],
      CountryName:[],
      test:"",
    };
  },
  async created() {
    this.fetchUserData();
    await this.fetchSavedExhibition();
    await this.fetchExhibition();
    await this.filterSavedExhibition();
    //await this.showUserExhibitionList();
    this.$axios
      .get(`/trending/api/location/countries?RegionID&Lang=${this.$i18n.localeProperties["langQuery"]}`)
      .then((response) => {
        //console.log(JSON.stringify(response));
        if(response && response.data && response.data.DATA && response.data.DATA.rel){
          let data = response.data.DATA.rel
          if(data){
            this.countryList = data;
            //console.log(this.countryList);
            this.countryOptions = this.countryList.map((item) => {
              return {
                  id: item.CountryID,
                  name: item.CountryName,
              };
            });
            const initial = {
              name: this.$t("userProfile.allCountries"),
              id: 999,
            };
            this.countryOptions.splice(0, 0, initial);

          }
        }
      })
      .catch((error) => {
        console.log(error);
      });

    this.$axios
      .get(`/trending/api/exhibition/statuses?Lang=${this.$i18n.localeProperties["langQuery"]}`)
        .then((response) => {
          //console.log(JSON.stringify(response));
          if(response && response.data && response.data.DATA && response.data.DATA.rel){
            let data = response.data.DATA.rel
            if(data){
              this.statusList = data;

              this.statusOptions = this.statusList.map((item) => {
              return {
                  id:"",
                  Key: item.Key,
                  Value: item.Value,
              };
            });

              const initial = {
                id: 999,
                Key: 999,
                Value: this.$t("userProfile.allStatus"),
              };

              this.statusOptions.splice(0, 0, initial);
            
            }
          }
        })
        .catch((error) => {
          console.log(error);
        });

    this.countryFilterList = this.showUserExhibitionList;
  },
  mounted() {
    this.yearOptions = Array.from(new Array(103), (val, index) =>
      (index + 1920).toString()
    );
    this.monthOptions = Array.from(new Array(13), (val, index) => {
      if (index < 10 && index > 0) {
        return "0" + index.toString();
      }
      if (index >= 10) {
        return index.toString();
      }
    });
    this.dayOptions = Array.from(new Array(32), (val, index) => {
      if (index < 10 && index > 0) {
        return "0" + index.toString();
      }
      if (index >= 10) {
        return index.toString();
      }
    });
    this.$nextTick(() => {
      window.addEventListener("resize", this.onResize);
    });
  },
  watch: {
    countrySelect: {
      handler: function () {
        if (this.countrySelect) {
          this.filterSavedExhibition(this.countrySelect,this.statusSelect);
          //this.fetchSavedExhibition();
          //this.fetchExhibition();
        }
      },
    },
    statusSelect: {
      handler: function () {
        if (this.statusSelect) {
          this.filterSavedExhibition(this.countrySelect,this.statusSelect);
          //this.fetchSavedExhibition();
          //this.fetchExhibition();
        }
      },
    },
  },
  computed: {},
  methods: {
    patchUserData() {
      // if (this.width < 1366) {
      //   this.isEditInfoDialogActive = !this.isEditInfoDialogActive;
      // }
      
      if(this.$vuetify.breakpoint.name !== "xs"){
          this.userData.BirthDate = this.yearSelect + "-" + this.monthSelect + "-" + this.daySelect;

          if(this.userData.BirthDate.length < 10){
            this.userData.BirthDate = null;

          }
      }

      if(this.languageSelect.en == true){
        this.userData.LanguageID = "en-US";

      }else if(this.languageSelect.zhtw == true){
        this.userData.LanguageID = "zh-TW";

      }else{
        this.userData.LanguageID = "null";

      }

      const patchData = JSON.parse(JSON.stringify(this.userData));
      // delete patchData.LoginLog;
      // delete patchData.UserCompany;
      // delete patchData.UserSocialRelation;
      // delete patchData.UserExhibition;
      this.$axios
      .post(
            `/trending/api/Members/Member`, patchData
          )
          .then((response) => {
            //console.log(JSON.stringify(response));
            this.successUpdate = !this.successUpdate;
            setTimeout(() => {
              this.successUpdate = !this.successUpdate;
            }, 1000);
            this.fetchUserData();
            //this.$auth.$storage.setUniversal("userPicture", patchData.MemberPicture);
            // this.$auth.$storage.setUniversal(
            //   "userLastName",
            //   patchData.LastName
            // );
            // this.$store.dispatch("updatePicture");


          })
          .catch((error) => {
            console.log(error);
          });
    },

    fetchUserData() {
      this.$axios
        .get(
          `/trending/api/Members/Info`
        )
        .then((response) => {
          //console.log(JSON.stringify(response));
          if(response && response.data && response.data.DATA && response.data.DATA.rel){
            let data = response.data.DATA.rel
            if(data){
              this.userData = data;
              this.firstName = this.userData.FirstName;
              this.lastName = this.userData.LastName;
              this.userData.Phone ? (this.phoneValid = true): (this.phoneValid = false);
              
              if(this.userData.ArgumentID == "en-US"){
                this.languageSelect.en = true;

              }else if(this.userData.ArgumentID == "zh-TW"){
                this.languageSelect.zhtw = true;

              }else{
                this.languageSelect.en = "";
                this.languageSelect.zhtw = "";

              }

              if (
                this.userData.BirthDate && typeof this.userData.BirthDate === "object"

              ){
                this.yearSelect = "";
                this.monthSelect = "";
                this.daySelect = "";

              }else{
                const space = this.userData.BirthDate.split("T");
                const date = space[0].split("-");
                this.yearSelect = date[0];
                this.monthSelect = date[1];
                this.daySelect = date[2];

              }
            }
          }
        })
        .catch((error) => {
          console.log(error);
        });       
    },

    handleImageUpdate(pictureURL) {
      this.userData.picture = pictureURL;
      this.patchUserData();
      this.closeCropDialog();
    },

    logout() {
      this.$auth.$storage.removeUniversal("jwt");
      this.$auth.$storage.removeUniversal("userPicture");
      this.$auth.$storage.removeUniversal("userLastName");
      this.$auth.$storage.removeUniversal("userBeforePath");

      if (window.innerWidth < 1024) {
        this.$router.push(this.localePath("/"));
      } else {
        this.$router.push(this.localePath("/user"));
      }
      this.$auth.logout();
    },

    async fetchSavedExhibition() {
      this.$axios
        .get(
          `/trending/api/Favorite/Favorites?Type=Exhibition`
        )
        .then((response) => {
          console.log(JSON.stringify(response));
          if(response && response.data && response.data.DATA && response.data.DATA.rel){
            let data = response.data.DATA.rel
            if(data){
              //console.log("data:" + JSON.stringify(data));
              this.userSaveExhibition = data;

              this.userSaveExhibition = this.userSaveExhibition.map((item) => {
                return{
                  ParentID: item.ParentID,
                };
              });

              this.userSavedExhibitionPageLength = Math.ceil(
                this.userSaveExhibition.length / this.savedExhibitionPerPage
              );

              //this.userVisibleSavedExhibitionList = JSON.parse(JSON.stringify(this.userSaveExhibition));
            }
          }
        })
        .catch((error) => {
          console.log(error);
        });   
    },

    async fetchExhibition() {
      this.$axios
        .get(
          `/trending/api/Exhibition/Cards?RegionIDs&CountryIDs&CityIDs&MainCategoryIDs&SubCategoryIDs&Status&Date&Sort&Lang=${this.$i18n.localeProperties["langQuery"]}`
        )
        .then((response) => {
          console.log(JSON.stringify(response));
          if(response && response.data && response.data.DATA && response.data.DATA.rel){
            let data = response.data.DATA.rel
            if(data){
              this.exhibitionList = data;
              this.exhibitionList.forEach((exhib) => {
              this.userSaveExhibition.forEach((user) => {
                  if(exhib.ExhibitionID == user.ParentID){
                    this.showUserExhibitionList.push(exhib);
                  }
                })
              });
              this.countryFilterList = JSON.parse(
              JSON.stringify(this.showUserExhibitionList));

              //Berlin示範的
              // this.exhibitionList.forEach((exhib) => {

              //   this.exhibitionMap.set(exhib.ExhibitionID, exhib);
              // })

              // this.userSaveExhibition.forEach((exhib) => {

              //   this.showUserExhibitionList.push(this.exhibitionMap.get(exhib.ExhibitionID));
              // })




            };

            
          };
        })
        .catch((error) => {
          console.log(error);
        });   
    },

    
    filterSavedExhibition(countryId, selectId) {
      this.countryFilterList = [];
      this.page = 1;
      //const country = countryId;
      if (countryId == "999" && selectId == "999") {
        this.countryFilterList = JSON.parse(
          JSON.stringify(this.showUserExhibitionList)
        );
      } else if(countryId == "999" && selectId !== "999"){
        this.showUserExhibitionList.forEach((item) => {
          if(item.ExhibStatus == selectId){
            this.countryFilterList.push(item);
            }
        });
      }else if(countryId !== "999" && selectId == "999"){
        this.showUserExhibitionList.forEach((item) => {
          if(item.CountryID == countryId){
            this.countryFilterList.push(item);
            }
        });
      }else {
        this.showUserExhibitionList.forEach((item) => {
          if(item.CountryID == countryId && item.ExhibStatus == selectId){
            this.countryFilterList.push(item);
            }
        });



        //   this.userSavedExhibitionPageLength = Math.ceil(
        // this.countryFilterList.length / this.savedExhibitionPerPage

        // );

      };
    },

    async removeExhibitionRelation() {
      this.page = 1;
      await this.fetchUserData();
      await this.fetchExhibition();
      this.countryFilterList = this.showUserExhibitionList;
      if (this.countrySelect.toString() !== "999") {
        this.countrySelect = 999;
      }
    },
  },
};
</script>

<style scoped lang="scss">
select {
  background-image: url("~/assets/svg/dropdownarrow.svg");
  width: auto;
  height: auto;
  background-position: right 12px center;
  background-repeat: no-repeat;
}
</style>