Merge branch 'Dev' of http://www.origtek.com:2999/nelson.kai/ShowEasyFrontEnd into Dev

FrontEnd/components/exhibition/ExhibitionListCard.vue

@@ -1,7 +1,8 @@
 <template>
   <div class="tw-mb-[20px]">
+    <nuxt-link class="tw-text-black" :to="localePath('/exhibition/' + item.ExhibitionID)">
     <div
-      class="tw-grid xl:tw-grid-cols-[auto_28px] tw-bg-white tw-border-solid tw-border tw-border-neutrals-200 tw-rounded-[20px] md:tw-p-[20px]">
+      class="exhib-card tw-grid xl:tw-grid-cols-[auto_28px] tw-bg-white tw-border-solid tw-border tw-border-neutrals-200 tw-rounded-[20px] md:tw-p-[20px]">
       <div class="tw-grid tw-grid-cols-[102px_auto] tw-gap-[10px] tw-p-[10px] md:tw-grid-cols-[160px_auto]">
         <div class="tw-bg-primary-brigh">
           <img src="~/assets/svg/bookmark_outline.svg" class="tw-mb-[30px] md:tw-hidden" alt="" />
@@ -63,9 +64,9 @@
           <div>
             <div class="tw-body-4  tw-font-bold tw-mb-[10px] md:tw-text-[18px]">
               <!-- {{ item.ExhibitionName }} -->
-              <nuxt-link class="tw-text-black" :to="localePath('/exhibition/' + item.ExhibitionID)">
+              <!-- <nuxt-link class="tw-text-black" :to="localePath('/exhibition/' + item.ExhibitionID)"> -->
                 {{ item.ExhibitionName }}
-              </nuxt-link>
+              <!-- </nuxt-link> -->
             </div>
 
 
@@ -133,7 +134,7 @@
       </div>
 
       <!-- 電腦版save exhibition -->
-      <div class="tw-hidden md:tw-cursor-pointer md:tw-block" @click="onToggleFavorite(item)">
+      <div class="tw-hidden md:tw-cursor-pointer md:tw-block" @click.prevent="onToggleFavorite(item)">
         <div v-if="item.IsFavorite === 'Y'">
           <img src="~/assets/svg/bookmark.svg" class="tw-w-[24px] md:tw-w-[28px]" alt="" />
         </div>
@@ -143,6 +144,7 @@
       </div>
     </div>
 
+    </nuxt-link>
   </div>
 </template>
 
@@ -209,6 +211,11 @@ export default {
 </script>
 
 <style scoped lang="scss">
+.exhib-card {
+  &:hover {
+    box-shadow: 10px 10px 10px rgba(155, 155, 155, 0.25);
+  }
+}
 .exhibit-card {
   max-width: 836px;
 

FrontEnd/pages/user/saveExhibition.vue

@@ -2,67 +2,39 @@
   <div class="saveExhibition xl:tw-max-w-[1246px] xl:tw-mx-auto">
     <router-view v-if="isRouterAlive" />
     <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 :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 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"
-            >
+          <select v-model="countrySelect" @change="countryOptionSelected($event)"
+            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 value="" selected>{{ $t("userProfile.allCountries") }}</option>
+            <option v-for="(item, index) in countryOptions" :key="index" :value="item">
               {{ 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]"
-          >
+
+          <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="exhibitionCardList.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]"
-          >
+        <div v-if="exhibitionCardList.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"
-          >
+          <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>
@@ -78,8 +50,8 @@
           >
           </ExhibitionListCard> -->
 
-          <div v-for="list in exhibitionCardList" :key="list">
-            <ExhibitionListCard :item="list" @toggle-favorite="updateExhibitionListCard"></ExhibitionListCard>
+          <div v-for="exhib in exhibitionCardList" :key="exhib.ExhibitionID">
+            <ExhibitionListCard :item="exhib" @toggle-favorite="updateExhibitionCardList"></ExhibitionListCard>
           </div>
 
           <!-- <ExhibitionListCard
@@ -94,8 +66,8 @@
           <!-- <ExhibitionListCard v-for="item in exhibitionCardList" :key="item"></ExhibitionListCard> -->
 
           <div class="tw-mt-[34px] tw-flex tw-justify-end">
-        <pagination :pageLength="pageLength" @update="updatePage"></pagination>
-      </div>
+            <pagination :pageLength="pageLength" @update="updatePage"></pagination>
+          </div>
 
 
 
@@ -130,7 +102,7 @@ export default {
   },
   data() {
     return {
-      test:false,
+      test: false,
       firstName: "",
       lastName: "",
       userData: {},
@@ -152,27 +124,32 @@ export default {
         zhtw: "",
       },
       phoneValid: false,
-      countryList:[],
-      countryOptions: [],
-      countrySelect: 999,
-      statusList:[],
+
+      // countrySelect: 999,
+      statusList: [],
       statusOptions: [],
       statusSelect: 999,
       page: 1,
       filterList: [],
       countryFilterList: [],
-      userSaveExhibitionList: [],
+      // userSaveExhibitionList: [],
       exhibitionList: [],
       showUserExhibitionList: [],
-      userSaveExhibition: [],
-      CountryName:[],
-      test:"",
+      // userSaveExhibition: [],
+      CountryName: [],
+      test: "",
       isRouterAlive: true,
-      currentPage: 1,
-      perPageItems: 600000,
 
+      countrySelect: "",
 
-      exhibitionMap: new Map(),
+      currentPage: 1,
+      itemsPerPage: 10,
+      total: 0,
+      selectedCountry: [],
+      selectedSubCategory: [],
+      selectedStatus: [],
+
+      countryOptions: [],
       exhibitionCardList: [],
       userFavoriateList: [],
 
@@ -180,14 +157,11 @@ export default {
     };
   },
   async created() {
-    this.fetchUserData();
-    // await this.fetchExhibition();
-    // await this.fetchUserFavoriateExhibition();
 
-    await this.fetchFavoriate();
-    await this.fetchAllExhibition();
-    this.setUserExhibitionCard();
-    
+    this.fetchUserData();
+    await this.fetchExhibitionListCard();
+    await this.fetchCountryList();
+    this.fetchStatusList();
 
 
     // await this.userSavedExhib();
@@ -248,7 +222,7 @@ export default {
     //           };
 
     //           this.statusOptions.splice(0, 0, initial);
-            
+
     //         }
     //       }
     //     })
@@ -283,10 +257,15 @@ export default {
     });
   },
   watch: {
+
     // countrySelect: {
-    //   handler: function () {
+    //   handler: function (value) {
+
+    //     console.log("countrySelected "+ value);
+
     //     if (this.countrySelect) {
-    //       this.filterSavedExhibition(this.countrySelect,this.statusSelect);
+    //       console.log(this.countrySelect);
+    //       // this.filterSavedExhibition(this.countrySelect,this.statusSelect);
     //       //this.fetchSavedExhibition();
     //       //this.fetchExhibition();
     //     }
@@ -303,111 +282,155 @@ export default {
     // },
   },
   computed: {
+
+    result() {
+      return this.total;
+    },
+
     pageLength() {
-      return Math.ceil(this.userSaveExhibition.length / this.perPageItems);
+      return Math.ceil(this.result / this.itemsPerPage);
     },
   },
   methods: {
 
-    async updateExhibitionListCard() {
-
-      this.userFavoriateList = [];
-      this.exhibitionCardList = [];
-
-      await this.fetchFavoriate();
-      this.setUserExhibitionCard();
-
-    },
-
-    async fetchFavoriate() {
+    async fetchCountryList() {
 
       await this.$axios
         .get(
-          `/trending/api/Favorite/Favorites?Type=Exhibition`
+          `/trending/api/Favorite/ExhibitionCountryList?Lang=${this.$i18n.localeProperties["langQuery"]}`
         )
         .then((response) => {
-          if(response && response.data && response.data.DATA && response.data.DATA.rel){
+          if (response && response.data && response.data.DATA && response.data.DATA.rel) {
             let data = response.data.DATA.rel
-            if(data){
-              
-              this.userFavoriateList = data;
+
+            if (data) {
+
+              const countryList = data;
+              this.countryOptions = countryList.map((item) => {
+
+                return {
+                  id: item.CountryID,
+                  name: item.CountryName,
+                };
+              });
 
             }
+
           }
         })
         .catch((error) => {
           console.log(error);
-        });   
+        });
 
     },
 
-    async fetchAllExhibition() {
+    async fetchExhibitionListCard() {
 
       await this.$axios
         .get(
-          `/trending/api/Exhibition/Cards?PageIndex=${this.currentPage}&PageSize=${this.perPageItems}&RegionIDs&CountryIDs&CityIDs&MainCategoryIDs&SubCategoryIDs&Status&Date&Sort&Query&Lang=${this.$i18n.localeProperties["langQuery"]}`
+          `/trending/api/Favorite/ExhibitionList?Lang=${this.$i18n.localeProperties["langQuery"]}` +
+          `&PageIndex=${this.currentPage}` +
+          `&PageSize=${this.itemsPerPage}` +
+          `&CountryIDs=${JSON.stringify(this.selectedCountry)}` +
+          `&SubCategoryIDs=${JSON.stringify(this.selectedSubCategory)}` +
+          `&Status=${JSON.stringify(this.selectedStatus)}`
         )
         .then((response) => {
-          if(response && response.data && response.data.DATA && response.data.DATA.rel){
+          if (response && response.data && response.data.DATA && response.data.DATA.rel) {
             let data = response.data.DATA.rel
-            if(data){
+
+            if (data.DataList) {
+
+              this.exhibitionCardList = [];
+              this.total = data.Total;
 
               data.DataList.forEach(exhib => {
 
-                this.exhibitionMap.set(exhib.ExhibitionID, exhib);
+                exhib.IsFavorite = "Y";
+                this.exhibitionCardList.push(exhib);
 
               });
-              
-            };
-          };
+
+            }
+
+          }
         })
         .catch((error) => {
           console.log(error);
-        });   
+        });
 
     },
 
-    setUserExhibitionCard() {
+    countryOptionSelected() {
 
-      this.userFavoriateList.forEach( fav => {
+      this.currentPage = 1;
+      this.selectedCountry = [];
 
-        if(this.exhibitionMap.has(fav.ParentID)) {
+      if (this.countrySelect) {
+        this.selectedCountry.push(this.countrySelect.id);
+      }
 
-          const exhibCard = this.exhibitionMap.get(fav.ParentID);
-          exhibCard.IsFavorite = "Y";
-          this.exhibitionCardList.push(exhibCard);
-          
-        }
+      this.updateExhibitionCardList();
 
-      });
+    },
+
+    async fetchStatusList() {
+
+      await this.$axios
+        .get(
+          `/trending/api/Favorite/Favorites?Type=Exhibition`
+        )
+        .then((response) => {
+          if (response && response.data && response.data.DATA && response.data.DATA.rel) {
+            let data = response.data.DATA.rel
+            if (data) {
+
+              this.userFavoriateList = data;
+
+            }
+          }
+        })
+        .catch((error) => {
+          console.log(error);
+        });
+
+    },
+
+    async updateExhibitionCardList() {
+
+      await this.fetchExhibitionListCard();
 
     },
 
     updatePage(value) {
+
       this.currentPage = value;
-      this.fetchExhibition();
+      window.scrollTo(0, 0);
+
+      this.fetchExhibitionListCard();
+
     },
     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.$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){
+      if (this.languageSelect.en == true) {
         this.userData.LanguageID = "en-US";
 
-      }else if(this.languageSelect.zhtw == true){
+      } else if (this.languageSelect.zhtw == true) {
         this.userData.LanguageID = "zh-TW";
 
-      }else{
+      } else {
         this.userData.LanguageID = "null";
 
       }
@@ -418,26 +441,26 @@ export default {
       // delete patchData.UserSocialRelation;
       // delete patchData.UserExhibition;
       this.$axios
-      .post(
-            `/trending/api/Members/Member`, patchData
-          )
-          .then((response) => {
-            //console.log(JSON.stringify(response));
+        .post(
+          `/trending/api/Members/Member`, patchData
+        )
+        .then((response) => {
+          //console.log(JSON.stringify(response));
+          this.successUpdate = !this.successUpdate;
+          setTimeout(() => {
             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);
-          });
+          }, 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() {
@@ -447,21 +470,21 @@ export default {
         )
         .then((response) => {
           //console.log(JSON.stringify(response));
-          if(response && response.data && response.data.DATA && response.data.DATA.rel){
+          if (response && response.data && response.data.DATA && response.data.DATA.rel) {
             let data = response.data.DATA.rel
-            if(data){
+            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.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"){
+              } else if (this.userData.ArgumentID == "zh-TW") {
                 this.languageSelect.zhtw = true;
 
-              }else{
+              } else {
                 this.languageSelect.en = "";
                 this.languageSelect.zhtw = "";
 
@@ -470,12 +493,12 @@ export default {
               if (
                 this.userData.BirthDate && typeof this.userData.BirthDate === "object"
 
-              ){
+              ) {
                 this.yearSelect = "";
                 this.monthSelect = "";
                 this.daySelect = "";
 
-              }else{
+              } else {
                 const space = this.userData.BirthDate.split("T");
                 const date = space[0].split("-");
                 this.yearSelect = date[0];
@@ -488,7 +511,7 @@ export default {
         })
         .catch((error) => {
           console.log(error);
-        });       
+        });
     },
 
     handleImageUpdate(pictureURL) {
@@ -510,62 +533,7 @@ export default {
       }
       this.$auth.logout();
     },
-    
-    filterSavedExhibition(countryId, selectId) {
-      this.countryFilterList = [];
-      this.currentPage = 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.countryFilterList = [];
-      this.exhibitionList = [];
-      this.userSaveExhibition = [];
-
-      this.page = 1;
-      this.fetchUserData();
-      await this.fetchSavedExhibition();
-      await this.fetchExhibition();
-      
-      //this.countryFilterList = this.showUserExhibitionList;
-      if (this.countrySelect.toString() !== "999") {
-        this.countrySelect = 999;
-      }
-      if (this.statusSelect.toString() !== "999") {
-        this.statusSelect = 999;
-      }
-      this.$forceUpdate();
-    },
   },
 };
 </script>