[WHAT] 會員展覽收藏以狀態篩選

FrontEnd/pages/user/saveExhibition.vue

@@ -21,10 +21,11 @@
             </option>
           </select>
 
-          <select v-model="statusSelect"
+          <select v-model="statusSelect" @change="statusOptionSelected($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 focus:tw-border-primary-1 md:tw-text-[16px]">
-            <option v-for="(item, index) in statusOptions" :key="index" :value="item.Key">
-              {{ item.Value }}
+            <option value="" selected>{{ $t("userProfile.allStatus") }}</option>
+            <option v-for="(item, index) in statusOptions" :key="index" :value="item">
+              {{ item.name }}
             </option>
           </select>
         </div>
@@ -41,42 +42,17 @@
 
         <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> -->
-
           <div v-for="exhib in exhibitionCardList" :key="exhib.ExhibitionID">
-            <ExhibitionListCard :item="exhib" @toggle-favorite="updateExhibitionCardList"></ExhibitionListCard>
+            <ExhibitionListCard :item="exhib" @toggle-favorite="fetchNewExhibitionCardList"></ExhibitionListCard>
           </div>
 
-          <!-- <ExhibitionListCard
-            v-for="(item, index) in exhibitionCardList"
-            :key="index"
-            class="tw-mb-[20px]"
-            :item="item"
-          >
-            @toggle-favorite="removeExhibitionRelation($event)"
-          </ExhibitionListCard> -->
-
-          <!-- <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>
 
 
 
-          <!-- <v-pagination
-            v-model="page"
-            class="tw-mt-[28px]"
 
-            :length="userSavedExhibitionPageLength"
-          ></v-pagination> -->
         </div>
       </div>
     </div>
@@ -101,57 +77,48 @@ export default {
     pagination,
   },
   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,
 
-      // countrySelect: 999,
-      statusList: [],
-      statusOptions: [],
-      statusSelect: 999,
-      page: 1,
-      filterList: [],
-      countryFilterList: [],
-      // userSaveExhibitionList: [],
-      exhibitionList: [],
-      showUserExhibitionList: [],
-      // userSaveExhibition: [],
-      CountryName: [],
-      test: "",
       isRouterAlive: true,
 
+
+
       countrySelect: "",
+      statusSelect: "",
 
       currentPage: 1,
-      itemsPerPage: 10,
+      itemsPerPage: 6,
       total: 0,
       selectedCountry: [],
       selectedSubCategory: [],
       selectedStatus: [],
 
       countryOptions: [],
+      statusOptions: [],
       exhibitionCardList: [],
-      userFavoriateList: [],
 
 
     };
@@ -159,78 +126,10 @@ export default {
   async created() {
 
     this.fetchUserData();
-    await this.fetchExhibitionListCard();
+    await this.fetchNewExhibitionCardList();
     await this.fetchCountryList();
-    this.fetchStatusList();
-
-
-    // await this.userSavedExhib();
-
-
-
-    // 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;
+    await this.fetchStatusList();
+
   },
   mounted() {
     this.yearOptions = Array.from(new Array(103), (val, index) =>
@@ -258,28 +157,6 @@ export default {
   },
   watch: {
 
-    // countrySelect: {
-    //   handler: function (value) {
-
-    //     console.log("countrySelected "+ value);
-
-    //     if (this.countrySelect) {
-    //       console.log(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: {
 
@@ -324,6 +201,37 @@ export default {
 
     },
 
+    async fetchStatusList() {
+
+      await this.$axios
+        .get(
+          `/trending/api/Favorite/ExhibitionStatusList?Lang=${this.$i18n.localeProperties["langQuery"]}`
+        )
+        .then((response) => {
+          if (response && response.data && response.data.DATA && response.data.DATA.rel) {
+            let data = response.data.DATA.rel
+
+            if (data) {
+
+              const statusList = data;
+              this.statusOptions = statusList.map((item) => {
+
+                return {
+                  id: item.Key,
+                  name: item.Value,
+                };
+              });
+
+            }
+
+          }
+        })
+        .catch((error) => {
+          console.log(error);
+        });
+
+    },
+
     async fetchExhibitionListCard() {
 
       await this.$axios
@@ -363,40 +271,31 @@ export default {
 
     countryOptionSelected() {
 
-      this.currentPage = 1;
       this.selectedCountry = [];
 
       if (this.countrySelect) {
         this.selectedCountry.push(this.countrySelect.id);
       }
 
-      this.updateExhibitionCardList();
+      this.fetchNewExhibitionCardList();
 
     },
 
-    async fetchStatusList() {
+    statusOptionSelected() {
 
-      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.selectedStatus = [];
 
-              this.userFavoriateList = data;
+      if (this.statusSelect) {
+        this.selectedStatus.push(this.statusSelect.id);
+      }
 
-            }
-          }
-        })
-        .catch((error) => {
-          console.log(error);
-        });
+      this.fetchNewExhibitionCardList();
 
     },
 
-    async updateExhibitionCardList() {
+    async fetchNewExhibitionCardList() {
+
+      this.currentPage = 1;
 
       await this.fetchExhibitionListCard();