[WHAT] 展覽ID頁開發，展覽列表頁調整

FrontEnd/pages/exhibition/_id.vue

@@ -251,6 +251,7 @@ export default {
       currStep: null,
       fixBar: false,
       fixBarList: [],
+
     };
   },
   async created() {
@@ -383,7 +384,7 @@ export default {
     getExhibitionCard() {
 
       this.exhibitionID = this.$route.params.id;
-      console.log(this.exhibitionID);
+
       this.$axios
         .get(
           `/trending/api/Exhibition/Exhibition?Lang=${this.$i18n.localeProperties["langQuery"]}` +
@@ -433,6 +434,8 @@ export default {
             this.exhibition.categories = exhib.MainCategories;
             this.exhibition.subcategories = exhib.SubCategories;
 
+            this.setSideBarList();
+
           }
 
         })
@@ -451,6 +454,31 @@ export default {
         image: require('/assets/img/thems/Frame33.png')
       }]
 
+    },
+    setSideBarList() {
+
+      if (this.relatedservicelist.size > 0) {
+        this.fixBarList.push({ id: "relatedServices", title: "Related Services", show: true });
+      }
+
+      if (this.exhibition.videos.size > 0 || this.exhibition.gallery.size > 0) {
+        this.fixBarList.push({ id: "photoGallery", title: "Photo & Video Gallery", show: true });
+      }
+
+      if (this.exhibition.venues) {
+        this.fixBarList.push({ id: "venue", title: "Venue", show: true });
+      }
+
+      if (this.exhibition.profile) {
+        this.fixBarList.push({ id: "exhibitProfile", title: "Exhibit Profile", show: true });
+      }
+
+      if (this.exhibition.description) {
+        this.fixBarList.push({ id: "detailedDescription", title: "Detailed Description", show: true });
+      }
+
+
+
     },
     introCheck(entries, observer, isIntersecting) {
       this.navControl.mobnav = !isIntersecting;

FrontEnd/pages/exhibition/index.vue

@@ -11,7 +11,7 @@
     </section>
     <section class="tw-grid tw-grid-cols-1 tw-gap-[30px] tw-auto-rows-min">
       <div class="tw-max-h-min" v-if="$vuetify.breakpoint.xl">
-        <DateCard @update="updateDateFilter" :modalChecked="datesChecked" />
+        <DateCard @update="updateDateFilter" :modalChecked="selectedDates" />
       </div>
       <div v-if="$vuetify.breakpoint.xl">
         <oneLevel :label="'Show Status'" :list="statuses" @update="updateStatusFilter"></oneLevel>
@@ -36,16 +36,15 @@
       </div>
     </section> -->
     <section class="">
-      <ExhibitionListCard v-for="(item, index) in exhibitionList" :key="index" :item="item"
-        ></ExhibitionListCard>
+      <ExhibitionListCard v-for="(item, index) in exhibitionList" :key="index" :item="item"></ExhibitionListCard>
       <div class="tw-mt-[34px] tw-flex tw-justify-end">
         <pagination :pageLength="pageLength" @update="updatePage"></pagination>
       </div>
     </section>
     <div v-if="!$vuetify.breakpoint.xl">
       <ShowSidebarFilterModal :statusList="statuses" :locationList="locations" :categoryList="categories"
-        :statusChecked="statusesChecked" :locationChecked="locationChecked" :categoryChecked="categoryChecked"
-        :datesChecked="datesChecked" @updateCategoryFilter="updateCategoryFilter"
+        :statusChecked="selectedStatus" :locationChecked="locationChecked" :categoryChecked="categoryChecked"
+        :datesChecked="selectedDates" @updateCategoryFilter="updateCategoryFilter"
         @updateLocationFilter="updateLocationFilter" @updateStatusFilter="updateStatusFilter"
         @updateDateFilter="updateDateFilter"></ShowSidebarFilterModal>
     </div>
@@ -212,38 +211,33 @@ export default {
     perPage: 10,
     adList: [],
     exhibitionList: [],
-    datesChecked: [],
-    statusesChecked: [],
     categoryChecked: [],
     locationChecked: [],
     ratingChecked: [],
-    selectedStatusJson: "",
     locations: [],
 
+    selectedDates: [],
+    selectedStatus: [],
+
     statusMap: new Map(),
 
     regionMap: new Map(),
     countryMap: new Map(),
     cityMap: new Map(),
 
-    selectedRegionJson: "",
-    selectedCountryJson: "",
-    selectedCityJson: "",
-
     mainCategoryMap: new Map(),
     subCategoryMap: new Map(),
 
-    selectedMainCategoryJson: "",
-    selectedSubCategoryJson: "",
+    selectedMainCategory: [],
+    selectedSubCategory: [],
+
+    selectedRegion: [],
+    selectedCountry: [],
+    selectedCity: [],
 
     favoriteSet: new Set(),
 
     categories: [],
-    unsortRegionList: [],
-    unsortCountryList: [],
-    unsortCityList: [],
-    unsortCategoryList: [],
-    unsortSubcategoryList: [],
     categoryQueryFilter: "",
     locationQueryFilter: "",
     width: undefined,
@@ -254,15 +248,17 @@ export default {
       { name: "ExhibitorCount", value: "exhibition.ExhibitorCount" },
       { name: "VisitorCount", value: "exhibition.VisitorCount" },
     ],
-    sortBy: "Show Dates",
+    sortBy: "ShowDate",
   }),
   async created() {
+    this.isPageLoading = true;
     this.getAdList();
     this.getStatusList();
     this.getLocationList();
     this.getCategoryList();
     this.getFavorite();
     this.getExhibitionCard();
+    // this.getQuery();
     // await this.getUnsortLocationList();
     // await this.getUnsortCategoryList();
     // await this.getQuery();
@@ -273,32 +269,32 @@ export default {
     //   });
     //   this.sortBy = "ShowEasy Recommended";
     // }
-    let userSavedList = [];
-    if (this.$auth.loggedIn) {
-      // await this.$axios
-      //   .get(
-      //     `/member/users/${this.$auth.$storage.getUniversal("jwt").user_id
-      //     }?jwt=${this.$auth.$storage.getUniversal("jwt").token}`
-      //   )
-      //   .then((res) => {
-      //     userSavedList = res.data.UserExhibition;
-      //   })
-      //   .catch((err) => {
-      //     console.log(err);
-      //   });
-      // this.$store.dispatch("updatePicture");
-      // this.$nextTick(() => {
-      //   this.$forceUpdate();
-      // });
-    }
-    userSavedList = userSavedList.map((item) => item.exhibition_id);
-    for (let i = 0; i < this.exhibitionList.length; i++) {
-      if (userSavedList.includes(this.exhibitionList[i].id)) {
-        this.exhibitionList[i].saved = true;
-      } else {
-        this.exhibitionList[i].saved = false;
-      }
-    }
+    // let userSavedList = [];
+    // if (this.$auth.loggedIn) {
+    //   // await this.$axios
+    //   //   .get(
+    //   //     `/member/users/${this.$auth.$storage.getUniversal("jwt").user_id
+    //   //     }?jwt=${this.$auth.$storage.getUniversal("jwt").token}`
+    //   //   )
+    //   //   .then((res) => {
+    //   //     userSavedList = res.data.UserExhibition;
+    //   //   })
+    //   //   .catch((err) => {
+    //   //     console.log(err);
+    //   //   });
+    //   // this.$store.dispatch("updatePicture");
+    //   // this.$nextTick(() => {
+    //   //   this.$forceUpdate();
+    //   // });
+    // }
+    // userSavedList = userSavedList.map((item) => item.exhibition_id);
+    // for (let i = 0; i < this.exhibitionList.length; i++) {
+    //   if (userSavedList.includes(this.exhibitionList[i].id)) {
+    //     this.exhibitionList[i].saved = true;
+    //   } else {
+    //     this.exhibitionList[i].saved = false;
+    //   }
+    // }
     if (process.client) {
       this.width = window.innerWidth;
     }
@@ -307,32 +303,32 @@ export default {
     });
   },
   async mounted() {
-    let userSavedList = [];
-    if (this.$auth.loggedIn) {
-      // await this.$axios
-      //   .get(
-      //     `/member/users/${this.$auth.$storage.getUniversal("jwt").user_id
-      //     }?jwt=${this.$auth.$storage.getUniversal("jwt").token}`
-      //   )
-      //   .then((res) => {
-      //     userSavedList = res.data.UserExhibition;
-      //   })
-      //   .catch((err) => {
-      //     console.log(err);
-      //   });
-      // this.$store.dispatch("updatePicture");
-      // this.$nextTick(() => {
-      //   this.$forceUpdate();
-      // });
-    }
-    userSavedList = userSavedList.map((item) => item.exhibition_id);
-    for (let i = 0; i < this.exhibitionList.length; i++) {
-      if (userSavedList.includes(this.exhibitionList[i].id)) {
-        this.exhibitionList[i].saved = true;
-      } else {
-        this.exhibitionList[i].saved = false;
-      }
-    }
+    // let userSavedList = [];
+    // if (this.$auth.loggedIn) {
+    //   // await this.$axios
+    //   //   .get(
+    //   //     `/member/users/${this.$auth.$storage.getUniversal("jwt").user_id
+    //   //     }?jwt=${this.$auth.$storage.getUniversal("jwt").token}`
+    //   //   )
+    //   //   .then((res) => {
+    //   //     userSavedList = res.data.UserExhibition;
+    //   //   })
+    //   //   .catch((err) => {
+    //   //     console.log(err);
+    //   //   });
+    //   // this.$store.dispatch("updatePicture");
+    //   // this.$nextTick(() => {
+    //   //   this.$forceUpdate();
+    //   // });
+    // }
+    // userSavedList = userSavedList.map((item) => item.exhibition_id);
+    // for (let i = 0; i < this.exhibitionList.length; i++) {
+    //   if (userSavedList.includes(this.exhibitionList[i].id)) {
+    //     this.exhibitionList[i].saved = true;
+    //   } else {
+    //     this.exhibitionList[i].saved = false;
+    //   }
+    // }
     this.$nextTick(() => {
       window.addEventListener("resize", this.onResize);
     });
@@ -359,9 +355,9 @@ export default {
     },
     $route() {
 
-      console.table(this.$route);
+      // console.table(this.$route);
 
-      this.getQuery();
+      // this.getQuery();
     },
   },
   methods: {
@@ -521,16 +517,35 @@ export default {
         });
     },
     getExhibitionCard() {
+
+      let vm = this;
+
+      if (this.$route.query.category) {
+        vm.categoryQueryFilter = vm.$route.query.category;
+        this.selectedMainCategory.push(vm.$route.query.category);
+      }
+
+      if (this.$route.query.subcategory) {
+        vm.categoryQueryFilter = vm.$route.query.category;
+        this.selectedSubCategory.push(vm.$route.query.subcategory);
+      }
+
+      if (this.$route.query.country) {
+        vm.locationQueryFilter = vm.$route.query.country;
+        this.selectedCountry.push(vm.$route.query.country);
+      }
+
+
       this.$axios
         .get(
           `/trending/api/Exhibition/Cards?Lang=${this.$i18n.localeProperties["langQuery"]}` +
-          `&RegionIDs=${this.selectedRegionJson}` +
-          `&CountryIDs=${this.selectedCountryJson}` +
-          `&CityIDs=${this.selectedCityJson}` +
-          `&MainCategoryIDs=${this.selectedMainCategoryJson}` +
-          `&SubCategoryIDs=${this.selectedSubCategoryJson}` +
-          `&Status=${this.selectedStatusJson}` +
-          `&Date=${JSON.stringify(this.datesChecked)}` +
+          `&RegionIDs=${JSON.stringify(this.selectedRegion)}` +
+          `&CountryIDs=${JSON.stringify(this.selectedCountry)}` +
+          `&CityIDs=${JSON.stringify(this.selectedCity)}` +
+          `&MainCategoryIDs=${JSON.stringify(this.selectedMainCategory)}` +
+          `&SubCategoryIDs=${JSON.stringify(this.selectedSubCategory)}` +
+          `&Status=${JSON.stringify(this.selectedStatus)}` +
+          `&Date=${JSON.stringify(this.selectedDates)}` +
           `&Sort=${this.sortBy}`
         )
         .then((result) => {
@@ -552,36 +567,36 @@ export default {
 
       if (this.$auth.loggedIn) {
         this.$axios
-        .get(
-          `/trending/api/Favorite/Favorites?Type=Exhibition`
-        )
-        .then((result) => {
+          .get(
+            `/trending/api/Favorite/Favorites?Type=Exhibition`
+          )
+          .then((result) => {
 
-          if (result.data.DATA.rel) {
+            if (result.data.DATA.rel) {
 
-            let favoriteList = [];
-            favoriteList = result.data.DATA.rel;
+              let favoriteList = [];
+              favoriteList = result.data.DATA.rel;
 
-            favoriteList.forEach(item => {
+              favoriteList.forEach(item => {
 
-              this.favoriteSet.add(item.ParentID);
+                this.favoriteSet.add(item.ParentID);
 
-            })
-          }
+              })
+            }
 
-        })
-        .catch((err) => {
-          console.log(err);
-        });
+          })
+          .catch((err) => {
+            console.log(err);
+          });
 
       }
 
     },
     setFavorite() {
 
-      if(this.exhibitionList.length > 0 && this.$auth.loggedIn) {
+      if (this.exhibitionList.length > 0 && this.$auth.loggedIn) {
 
-        for(let i =0; i < this.exhibitionList.length; i++) {
+        for (let i = 0; i < this.exhibitionList.length; i++) {
 
           if (this.favoriteSet.has(this.exhibitionList[i].ExhibitionID)) {
 
@@ -599,91 +614,111 @@ export default {
 
       this.sortBy = data;
       this.getExhibitionCard();
-      
+
     },
     updatePage(value) {
       this.page = value;
     },
     updateCategoryFilter(value) {
 
-      var SelectedMainCategoryArray = [];
-      var SelectedSubCategoryArray = [];
-
-      this.selectedMainCategoryJson = "";
-      this.selectedSubCategoryJson = "";
+      this.selectedMainCategory = [];
+      this.selectedSubCategory = [];
 
       value.forEach(key => {
 
         if (this.mainCategoryMap.has(key)) {
-          SelectedMainCategoryArray.push(key);
+          this.selectedMainCategory.push(key);
         }
 
         if (this.subCategoryMap.has(key)) {
-          SelectedSubCategoryArray.push(key);
+          this.selectedSubCategory.push(key);
         }
 
       });
 
-      this.selectedMainCategoryJson = JSON.stringify(SelectedMainCategoryArray);
-      this.selectedSubCategoryJson = JSON.stringify(SelectedSubCategoryArray);
-
       this.getExhibitionCard();
 
     },
     updateLocationFilter(value) {
 
-      var SelectedRegionArray = [];
-      var SelectedCountryArray = [];
-      var SelectedCityArray = [];
-
-      this.selectedRegionJson = "";
-      this.selectedCountryJson = "";
-      this.selectedCityJson = "";
+      this.selectedRegion = [];
+      this.selectedCountry = [];
+      this.selectedCity = [];
 
       value.forEach(key => {
 
         if (this.regionMap.has(key)) {
-          SelectedRegionArray.push(key);
+          this.selectedRegion.push(key);
         }
 
         if (this.countryMap.has(key)) {
-          SelectedCountryArray.push(key);
+          this.selectedCountry.push(key);
         }
 
         if (this.cityMap.has(key)) {
-          SelectedCityArray.push(key);
+          this.selectedCity.push(key);
         }
 
       });
 
-      this.selectedRegionJson = JSON.stringify(SelectedRegionArray);
-      this.selectedCountryJson = JSON.stringify(SelectedCountryArray);
-      this.selectedCityJson = JSON.stringify(SelectedCityArray);
-
       this.getExhibitionCard();
 
     },
     updateStatusFilter(value) {
 
-      var SelectedStatusArray = [];
-      this.selectedStatusJson = "";
+      this.selectedStatus = [];
 
       value.forEach(key => {
 
         if (this.statusMap.has(key)) {
-          SelectedStatusArray.push(key);
+          this.selectedStatus.push(key);
         }
 
       });
 
-      this.selectedStatusJson = JSON.stringify(SelectedStatusArray);
-
       this.getExhibitionCard();
+
     },
     updateDateFilter(value) {
-      this.datesChecked = value;
+
+      this.selectedDates = value;
       this.getExhibitionCard();
     },
+    async getQuery() {
+
+      let vm = this;
+      this.categoryQueryFilter = "";
+      this.locationQueryFilter = "";
+      // if (this.$route.query.hasOwnProperty("country") && this.countryNameList.length>0) {
+      //   this.locationQueryFilter =
+      //     this.countryNameList[Number(this.$route.query.country)];
+      // }
+      // if (this.$route.query.hasOwnProperty("city") && this.cityNameList.length>0) {
+      //   this.locationQueryFilter =
+      //     this.cityNameList[Number(this.$route.query.city)];
+      // }
+      // if (this.$route.query.hasOwnProperty("region")) {
+      //   this.locationQueryFilter =
+      //     this.regionNameList[Number(this.$route.query.region)];
+      // }
+      // if (this.$route.query.hasOwnProperty("category") && this.categoryNameList.length>0) {
+      //   this.categoryQueryFilter =
+      //     this.categoryNameList[Number(this.$route.query.category)];
+      // }
+      // if (this.$route.query.hasOwnProperty("subcategory")) {
+      //   this.categoryQueryFilter =
+      //     this.unsortSubcategoryList[Number(this.$route.query.subcategory)];
+      // }
+
+      if (vm.$route.query.hasOwnProperty("category")) {
+        vm.categoryQueryFilter = vm.$route.query.category;
+      }
+
+      if (vm.$route.query.hasOwnProperty("country")) {
+        vm.locationQueryFilter = vm.$route.query.country;
+      }
+
+    },
     sortServiceList(data) {
       switch (this.sortBy) {
         case "ShowEasy Recommended":