[WHAT] Bug 展覽列表頁排序問題

FrontEnd/components/newComponent/sort/sort.vue

@@ -9,7 +9,7 @@
         }}</span></span>
     </div>
     <!-- xl:tw-flex -->
-    <div class="tw-hidden tw-items-center">
+    <!-- <div class="tw-items-center">
       <div class="rightBorder tw-pr-[50px] tw-body-3">{{ $t("Sort By") }}</div>
       <div class="tw-flex tw-items-center">
         <div class="tw-px-[25px]" v-for="(item, index) in sortType" :key="index">
@@ -19,15 +19,32 @@
           </label>
         </div>
       </div>
+    </div> -->
+    <div class="tw-flex tw-justify-items-start tw-gap-[50px] tw-pt-[20px]">
+      <div class="tw-body-3">
+        {{ $t("Sort By") }}
+      </div>
+      <div class="tw-body-3">
+        |
+      </div>
+      <div class="" v-for="(item, index) in sortType" :key="index">
+          <!-- <button :for="item.value" class="tw-body-3 tw-text-base-secondary focus:tw-text-primary-1" @click="onChnage(item)">
+            {{ $t(item.name) }}
+          </button> -->
+          <button :for="item.value" class="tw-body-3 tw-text-base-secondary focus:tw-text-primary-1" @click="onClick(item)">
+            {{ $t(item.name) }}
+          </button>
+        </div>
     </div>
     <div class="element tw-flex tw-justify-between tw-items-cente xl:tw-hidden">
       <button class="btn-filter tw-text-transparent" @click="$emit('filter', true)">
         filter
       </button>
-      <select class="tw-py-[9px] tw-rounded-[10px]" name="sort_by" v-model="sort" @change="inputVal">
+      <select class="tw-py-[9px] tw-rounded-[10px]" name="sort_by" v-model="sort" @change="onChnage">
         <option value="0">{{ $t("Select option") }}</option>
-        <option v-for="(item, index) in sortType" :key="index" :value="item.value" :selected="item.value = sort">
-          {{ item.name }}
+        <!-- <option v-for="(item, index) in sortType" :key="index" :value="item.value" :selected="sort = item.value"> -->
+        <option v-for="(item, index) in sortType" :key="index" :value="item.value">
+          {{ $t(item.name) }}
         </option>
       </select>
     </div>
@@ -64,9 +81,13 @@ export default {
     },
   },
   methods: {
-    inputVal() {
+    onClick(item) {
+      this.sort = item.name;
       this.$emit("sort", this.sort);
     },
+    onChnage() {
+      this.$emit("sort", this.sort);
+    }
   },
 };
 </script>
@@ -76,9 +97,9 @@ label {
   transition: all 0.2s linear;
 }
 
-input:checked+label {
-  color: #f48800 !important;
-}
+// input:checked+label {
+//   color: #f48800 !important;
+// }
 
 select {
   background-image: url("~/assets/svg/down-arrow.svg");

FrontEnd/pages/exhibition/index.vue

@@ -6,7 +6,7 @@
     </section>
     <section class="xl:tw-col-span-2 tw-mb-[40px] xl:tw-mb-[10px]">
       <Breadcrumbs class="tw-py-[7px] md:tw-py-[10px] xl:tw-py-[13px] tw-mb-4 md:tw-mb-6 xl:tw-mb-0"></Breadcrumbs>
-      <sort :results="result" :sortType="sortType" :sortBy="sortBy" @change="updateSortBy($event)"
+      <sort :results="result" :sortType="sortType" :sortBy="sortBy" @sort="updateSortBy($event)"
         @filter="$modal.show(`sidebar-filter-modal`)"></sort>
     </section>
     <section class="tw-grid tw-grid-cols-1 tw-gap-[30px] tw-auto-rows-min">
@@ -412,9 +412,9 @@ export default {
 
       this.ads = [{
         image: require('/assets/img/thems/Frame33.png')
-      },{
+      }, {
         image: require('/assets/img/thems/Frame33.png')
-      },{
+      }, {
         image: require('/assets/img/thems/Frame33.png')
       }]
 
@@ -493,7 +493,6 @@ export default {
 
           if (result.data.DATA.rel) {
             var vm = this;
-            debugger
             vm.locations = result.data.DATA.rel;
             vm.locations = vm.locations.map((region) => {
 
@@ -590,7 +589,66 @@ export default {
     //   }
     // },
     updateSortBy(data) {
-      this.sortBy = data;
+
+      var newList = [];
+      newList = newList.concat(this.exhibitionList);
+
+      if (data == 'Show Dates') {
+        console.log(data);
+        newList = newList.sort((a, b) => {
+
+          if (a.StartDate < b.StartDate) {
+            return 1;
+          }
+
+          if (a.StartDate > b.StartDate) {
+            return -1;
+          }
+
+          return 0;
+
+        })
+      }
+
+      if (data == 'Exhibitor Numbers') {
+        console.log(data);
+
+
+        newList.sort((a, b) => {
+
+          if (a.IsRecommend && !b.IsRecommend) {
+            return 1
+          } else if (!a.IsRecommend && b.IsRecommend) {
+            return -1
+          } else {
+            return 0
+          }
+
+        })
+
+      }
+
+      if (data == 'Visitor Numbers') {
+        console.log(data);
+        newList.sort((a, b) => {
+
+          return b.ExhibStatus - a.ExhibStatus;
+
+        })
+      }
+
+      console.table(newList);
+      // this.exhibitionList = newList;
+      // this.exhibitionList = [];
+
+      // newList.forEach(item => {
+
+      //   this.exhibitionList.push(item);
+
+      // })
+
+      // this.exhibitionList = this.exhibitionList.concat(newList);
+      // this.sortBy = data;
     },
     updatePage(value) {
       this.page = value;