feat: add sort by time button

Its-MyPic · Feb 10, 2025 · 119f24f · 119f24f
1 parent 81154d0
commit 119f24f
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 10 deletions.
diff --git a/src/components/AppBarComponent.vue b/src/components/AppBarComponent.vue
@@ -4,17 +4,26 @@
       <div class="text-h5 mx-auto font-weight-bold text-center text-truncate">
         MyGO Mujica 截圖搜尋器
       </div>
-        <v-col class="text-center">
-          <v-text-field v-model="searchQuery" single-line hide-details clearable label="搜尋" variant="outlined"
-            class="short-search" @keyup.enter="emitSearchQuery" @click:clear="clearMessage" @input="debounceEmitSearchQuery"
-            autofocus/>
-        </v-col>
+      <v-col class="text-center">
+        <v-text-field v-model="searchQuery" single-line hide-details clearable label="搜尋" variant="outlined"
+          class="short-search" @keyup.enter="emitSearchQuery" @click:clear="clearMessage"
+          @input="debounceEmitSearchQuery" autofocus>
+          <template v-slot:append>
+            <v-icon @click="ascendingBind = !ascendingBind"
+              :icon="ascendingBind ? mdiSortVariant : mdiSortReverseVariant" />
+          </template>
+        </v-text-field>
+      </v-col>
     </v-container>
   </v-app-bar>
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue";
+import { computed, ref } from "vue";
+import { mdiSortReverseVariant, mdiSortVariant } from "@mdi/js";
+const ascendingBind = computed({ get() { return ascending.value }, set(newValue) { ascending.value = newValue; } });
+const ascending = defineModel('ascending', { type: Boolean, required: true });
+
 const emit = defineEmits(['update:searchQuery']);
 const searchQuery = ref("");
 const debounceTimeout = ref<number>();

diff --git a/src/components/MainView.vue b/src/components/MainView.vue
@@ -1,9 +1,9 @@
 <template>
-  <AppBarComponent @update:searchQuery="updateSearchQuery" />
+  <AppBarComponent @update:searchQuery="updateSearchQuery" v-model:ascending="ascending" />
   <!-- <v-container class="fill-height" fluid> -->
   <Grid :length="filteredCards.length" :pageSize="cardsPerRow" :pageProvider="pageProvider" :get-key="getKey" class="grid ma-5">
     <template v-slot:placeholder="{ index, style }">
-      <div class="item" :style="style">載入中...</div>
+      <div class="item" :style="style">還在GO...</div>
     </template>
     <template v-slot:default="{ item, style, index }">
       <CardComponent :styles="style" :cardData="item" :preferCopyURL="copyMode" />
@@ -28,9 +28,10 @@ const updateSearchQuery = (query: string) => {
   filterCards(query);
 };
 
-import { ref, onMounted, onUnmounted, computed } from "vue";
+import { ref, onMounted, onUnmounted, computed, watch } from "vue";
+import rawCardsData from "../assets/data/data.json";
+var cardsData = rawCardsData;
 
-import cardsData from "../assets/data/data.json";
 const filteredCards = ref(cardsData);
 
 let cardsPerRow = ref(4);
@@ -39,8 +40,18 @@ const calcRows = () => {
   // console.log(cardsPerRow.value);
 };
 
+const ascending = ref(true);
+
+watch(ascending, () => {
+  // console.log(ascending.value);
+  cardsData.reverse();
+  // console.log(cardsData[0]);
+  filterCards(queryCache);
+});
+
 const pageProvider = computed(() => {
   const filtered = filteredCards.value;
+  const update = ascending.value;
   return (page: number, pageSize: number) => {
     // console.log(page, pageSize);
     const slice = filtered.slice(page * pageSize, (page + 1) * pageSize);
@@ -71,7 +82,9 @@ import tw from 'opencc-js/to/tw'; // dictionary
 
 const converter = ConverterFactory(cn, tw);
 
+var queryCache = "";
 const filterCards = (query: string) => {
+  queryCache = query;
   if (query === "") {
     filteredCards.value = cardsData;
   } else {