feat: fetch all pages

KeziahMoselle · Apr 13, 2024 · 416f013 · 416f013
1 parent 0a5d1ef
commit 416f013
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 16 deletions.
diff --git a/frontend/src/components/EldenRing/Builder.vue b/frontend/src/components/EldenRing/Builder.vue
@@ -2,7 +2,7 @@
 import { useForm } from 'vee-validate'
 import { toTypedSchema } from '@vee-validate/zod'
 import * as z from 'zod'
-import RelationSelect from '@/components/EldenRing/RelationSelect.vue'
+import RelationSearch from '@/components/EldenRing/RelationSearch.vue'
 import {
   FormControl,
   FormField,
@@ -520,13 +520,13 @@ const onSubmit = handleSubmit(async (values) => {
       <div class="md:col-span-6">
         <div class="grid grid-cols-er-builder" v-for="row in FORM">
           <div v-for="input in row" class="relative">
-            <RelationSelect
+            <RelationSearch
               :key="input.name"
               v-bind="input"
               :values="values"
               :set-values="setValues" />
 
-              <RelationSelect
+              <RelationSearch
                 v-if="input.type === 'mainhand' || input.type === 'offhand'"
                 :key="`${input.name.split('-')[0]}-ash-${input.name.split('-')[1]}`"
                 :name="`${input.name.split('-')[0]}-ash-${input.name.split('-')[1]}`"
@@ -535,7 +535,7 @@ const onSubmit = handleSubmit(async (values) => {
                 :values="values"
                 :set-values="setValues" />
 
-              <RelationSelect
+              <RelationSearch
                 v-if="input.type === 'mainhand' || input.type === 'offhand'"
                 :key="`${input.name.split('-')[0]}-affinity-${input.name.split('-')[1]}`"
                 :name="`${input.name.split('-')[0]}-affinity-${input.name.split('-')[1]}`"
@@ -547,7 +547,7 @@ const onSubmit = handleSubmit(async (values) => {
         </div>
         <div class="grid grid-cols-er-builder">
           <div v-for="input in magicInputs" class="relative">
-            <RelationSelect
+            <RelationSearch
               :key="input.name"
               v-bind="input"
               :values="values"
@@ -569,6 +569,12 @@ const onSubmit = handleSubmit(async (values) => {
           </FormItem>
         </FormField>
 
+        <!-- <RelationSelect
+          name="class"
+          label="Starting Class"
+          placeholder="Wretch"
+          relation-to="er-classes" /> -->
+
         <Statistics :stats="stats.docs" />
       </div>
     </div>

diff --git a/...c/components/EldenRing/RelationSelect.vue → ...c/components/EldenRing/RelationSearch.vue b/...c/components/EldenRing/RelationSelect.vue → ...c/components/EldenRing/RelationSearch.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
   import qs from 'qs'
-  import { computed, ref } from 'vue';
+  import { computed, reactive, ref } from 'vue';
   import { inMemoryCache } from '@/lib/Cache'
   import { apiFetch } from '@/api';
   import { Check } from 'lucide-vue-next'
@@ -53,17 +53,20 @@
 
   const isOpen = ref(false)
   const loading = ref(false)
-  const optionsByRelations = ref<{
+  const hasFetchedAllPages = ref(false)
+  const optionsByRelations = reactive<{
     [key: string]: IPayloadOptionLike[]
   }>({})
+  const optionsGroups = computed(() => Object.entries(optionsByRelations))
   const isSmall = computed(() => props.type === 'ash' || props.type === 'affinity')
 
-  async function getOptions(relation, query = {}) {
+  async function getOptions({ relation, query = {}, page = 1 }) {
     const stringifiedQuery = qs.stringify(
       {
         where: query,
         sort: 'name',
-        limit: 20,
+        limit: 100,
+        page
       },
       { addQueryPrefix: true },
     )
@@ -84,17 +87,40 @@
    * Get all options from all loaded relations
    */
   async function getAllOptions() {
+    if (hasFetchedAllPages.value) return console.log('skipped')
+
     loading.value = true
 
+    let hasNextPage = false
+    let page = 0
+
     for (const relation of props.relationTo) {
       if (typeof relation === 'string') {
-        const options = await getOptions(relation)
-        optionsByRelations.value[relation] = options.docs
+        do {
+          const options = await getOptions({
+            relation,
+            page,
+          })
+          if (Array.isArray(optionsByRelations[relation])) {
+            optionsByRelations[relation] = [...optionsByRelations[relation], ...options.docs]
+          } else {
+            optionsByRelations[relation] = options.docs
+          }
+          page = options.nextPage
+          hasNextPage = options.hasNextPage
+
+          if (!hasNextPage) {
+            hasFetchedAllPages.value = true
+          }
+        } while (hasNextPage)
       }
 
       if (typeof relation === 'object') {
-        const options = await getOptions(relation.slug, relation.query)
-        optionsByRelations.value[relation.slug] = options.docs
+        const options = await getOptions({
+          relation: relation.slug,
+          query: relation.query
+        })
+        optionsByRelations[relation.slug] = options.docs
       }
     }
 
@@ -170,11 +196,12 @@
               </span>
             </CommandEmpty>
             <CommandList>
-              <CommandGroup v-for="[relation, options] in Object.entries(optionsByRelations)">
-                <CommandItem
+              <CommandGroup v-for="[relation, options] in optionsGroups">
+               <CommandItem
+                  v-if="options.length > 0"
                   v-for="option in options"
                   :key="option.id"
-                  :value="`${relation}:${option.id}`"
+                  :value="option.name"
                   @select="() => {
                     isOpen = false
                     if (values[name] === `${relation}:${option.id}`) {