fix:#521 - fix for search functionality

src/components/Admin/ManagePromptsEntries.vue

@@ -161,13 +161,14 @@
 import { useQuasar } from 'quasar'
 import TableEntry from 'src/components/Admin/TableEntry.vue'
 import { useEntryStore, useErrorStore, usePromptStore, useUserStore, useShareStore } from 'src/stores'
-import { computed, onBeforeUnmount, onMounted, watchEffect, ref } from 'vue'
+import { computed, onBeforeUnmount, onMounted, watchEffect, ref, watch } from 'vue'
 import FundDepositCard from './FundDepositCard.vue'
 
 import { customWeb3modal } from 'app/src/web3/walletConnect'
 
 import { useRouter } from 'vue-router'
 import ShareComponent from 'src/components/Posts/ShareComponent.vue'
+import TheHeader from 'components/shared/TheHeader.vue'
 const $q = useQuasar()
 const entryStore = useEntryStore()
 const errorStore = useErrorStore()
@@ -349,6 +350,14 @@ async function onProceedDepositFundDialog(props) {
 function getOrigin(slug) {
   return window.origin + slug
 }
+
+watch(filter, async (newSearch) => {
+  if (!promptStore.isLoading && promptStore._totalPrompts !== promptStore.getPrompts.length && promptStore.hasMore) {
+    if (newSearch.trim()) {
+      await promptStore.fetchPrompts(true)
+    }
+  }
+})
 </script>
 <style scoped>
 .custom-table {

src/pages/SearchPage.vue

@@ -24,7 +24,7 @@
       </q-scroll-area>
       <q-tab-panels animated swipeable v-model="category">
         <q-tab-panel v-for="(categ, i) in computedCategories" class="panel" :key="i" :name="categ.value">
-          <section class="card-items-wrapper" v-if="!promptStore.getPrompts && promptStore.isLoading">
+          <section class="card-items-wrapper" v-if="!promptStore.getPrompts?.length && promptStore.isLoading">
             <ArticleSkeleton v-for="n in skeletons" :key="n" />
           </section>
           <TransitionGroup name="prompt" tag="div" class="card-items-wrapper" v-else>
@@ -57,7 +57,7 @@ import ItemCard from 'src/components/shared/ItemCard.vue'
 import TheEntries from 'src/components/shared/TheEntries.vue'
 import TheHeader from 'src/components/shared/TheHeader.vue'
 import { useAdvertiseStore, useEntryStore, useErrorStore, usePromptStore } from 'src/stores'
-import { computed, ref, onMounted, onUnmounted } from 'vue'
+import { computed, ref, onMounted, watch, onUnmounted, watchEffect } from 'vue'
 import { useRouter } from 'vue-router'
 
 const entryStore = useEntryStore()
@@ -133,11 +133,26 @@ const combinedItems = computed(() => {
   return result
 })
 
-function updateSearchDate(date) {
-  searchDate.value = date
+const updateSearchDate = (value) => {
+  searchDate.value = value
 }
 
+watch(search, async (newSearch) => {
+  if (!promptStore.isLoading && promptStore._totalPrompts !== promptStore.getPrompts.length && promptStore.hasMore) {
+    if (newSearch.trim()) {
+      await promptStore.fetchPrompts(true)
+    }
+  }
+})
+
+watch(searchDate, async () => {
+  if (!promptStore.isLoading && promptStore._totalPrompts !== promptStore.getPrompts.length && promptStore.hasMore) {
+    await promptStore.fetchPrompts(true)
+  }
+})
+
 onMounted(async () => {
+  await promptStore.getTotalPromptsCount()
   try {
     if (!promptStore.getPrompts?.length) {
       await promptStore.fetchPrompts()

src/stores/prompts.js

@@ -2,6 +2,7 @@ import {
   collection,
   deleteDoc,
   doc,
+  getCountFromServer,
   getDoc,
   getDocs,
   limit,
@@ -60,6 +61,7 @@ export const usePromptStore = defineStore('prompts', {
     promptDialog: false,
     entryDialog: {},
     loadCount: 6,
+    _totalPrompts: undefined,
     _lastVisible: null,
     _hasMore: true
   }),
@@ -116,7 +118,7 @@ export const usePromptStore = defineStore('prompts', {
           this._hasMore = false
         }
 
-        this._prompts = loadMore ? [...this._prompts, ...newPrompts] : newPrompts
+        this._prompts = loadMore ? [...(this._prompts || []), ...newPrompts] : newPrompts
 
         return newPrompts
       } catch (error) {
@@ -125,6 +127,17 @@ export const usePromptStore = defineStore('prompts', {
         this._isLoading = false
       }
     },
+
+    async getTotalPromptsCount() {
+      try {
+        const totalCountFunc = await getCountFromServer(collection(db, 'prompts'))
+        this._totalPrompts = totalCountFunc.data().count
+        return this._totalPrompts
+      } catch (e) {
+        console.error('Failed fetching errors count', e)
+      }
+    },
+
     async fetchActivePrompts() {
       const userStore = useUserStore()
       this._isLoading = true