load more

src/composable/settings.ts

@@ -143,6 +143,17 @@ export const listCourseMats = async  (cid) => {
   console.log(data)
   return data
 }
+export const listCourseMatsByLevel = async  (clevels) => {
+  const token = await Preferences.get({ key: 'token' });
+  console.log("token = ", token)
+  const { data } = await axios.get(BASE_URL + "backend/api/mats/?course_level="+clevels.join(","), {
+    headers: { 
+    'Authorization': `Token ${token.value}`
+    }
+  })
+  console.log(data)
+  return data
+}
 export const getTodayProgs = async  (day=null) => {
   const token = await Preferences.get({ key: 'token' });
   console.log("token = ", token)
@@ -205,3 +216,15 @@ export const searchMat = async (s) => {
   })
   return data
 }
+
+export const callUrl = async(url) => {
+  
+  const token = await Preferences.get({ key: 'token' });
+  console.log("token = ", token)
+  const { data } = await axios.get(url, {
+    headers: { 
+    'Authorization': `Token ${token.value}`
+    }
+  })
+  return data
+}

src/views/CourseDetailPage.vue

@@ -24,7 +24,10 @@
             <CourseMat :obj="c" :course-name="course.name" class='ion-no-margin' />
           </ion-col>
         </ion-row>
-      </ion-grid> 
+      </ion-grid>
+      <ion-infinite-scroll @ionInfinite="loadMore">
+        <ion-infinite-scroll-content></ion-infinite-scroll-content>
+      </ion-infinite-scroll>
     </ion-content>
   </ion-page>
 </template>
@@ -33,9 +36,10 @@
 import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent,   IonNavLink,
     IonButton,
     IonButtons,
-    IonBackButton, onIonViewWillEnter, IonRow, IonGrid, IonCol, IonProgressBar } from '@ionic/vue';
+    IonBackButton, onIonViewWillEnter, IonRow, IonGrid, IonCol, IonProgressBar,  IonInfiniteScroll,
+    IonInfiniteScrollContent, InfiniteScrollCustomEvent  } from '@ionic/vue';
 import { useRoute } from 'vue-router';
-import { listCourseMats, getCourse } from '@/composable/settings';
+import { listCourseMats, getCourse, listCourseMatsByLevel, callUrl} from '@/composable/settings';
 import { ref } from 'vue';
 import CourseMat from '@/components/CourseMat.vue'
 
@@ -44,13 +48,28 @@ const { id } = route.params;
 
 const mats = ref([])
 const course = ref()
+let next_url = null
 const processing = ref(false)
 onIonViewWillEnter(async () => {
-  getCourse(id).then( (data) => course.value = data )
+  course.value = await getCourse(id)
   processing.value = true
-  listCourseMats(id).then( (data) => { 
-    mats.value = data;
+  listCourseMatsByLevel(course.value.clevels).then( (data) => { 
+    mats.value = data.results;
+    next_url = data.next
     processing.value = false
   })
+
 })
+  const loadMore = async (ev: InfiniteScrollCustomEvent) => {
+    //setTimeout(() => ev.target.complete(), 500);
+    console.log("next url ", next_url)
+    if(next_url) {
+      let data  = await callUrl(next_url)
+      mats.value.push(data.results)
+      next_url = data.next
+      ev.target.complete()
+    }else {
+      ev.target.complete()
+    }
+  };
 </script>

src/views/CourseMatDetailPage.vue

@@ -29,7 +29,7 @@
         <ion-item-divider class='ion-margin-vertical'>
           <ion-label>Related Trainings</ion-label>
         </ion-item-divider> 
-      <swiper :slides-per-view="2" :loop="true" v-if="mats" class='ion-no-margin'>
+      <swiper :slides-per-view="1" :loop="true" v-if="mats" class='ion-no-margin'>
 
       <swiper-slide v-for="m in mats">
         <CourseMat :obj="m" :course-name="mat.course_name" />
@@ -81,3 +81,20 @@ onIonViewWillEnter(async () => {
   mats.value  = await listMats(mat.value.related_mats)
 })
 </script>
+
+<style scoped>
+#post_slide {
+   aspect-ratio:4/3 auto;
+}
+.img_16_9 {
+  width:480px;
+  height:270px;
+  object-fit:cover;
+}
+.swiper-slide {
+  width: 90% !important;
+	&:last-child {
+	  width: 100% !important;
+	}
+}
+</style>

src/views/SearchPage.vue

@@ -24,17 +24,21 @@
           <h1 class='ion-text-center'>Search not found</h1>
         </template>
       </ion-list>
+      <ion-infinite-scroll @ionInfinite="loadMore">
+        <ion-infinite-scroll-content></ion-infinite-scroll-content>
+      </ion-infinite-scroll>
     </ion-content>
   </ion-page>
 </template>
 
 <script setup lang="ts">
 import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonButton, onIonViewWillEnter, IonList, IonSearchbar, IonLabel,
-IonItem, IonBackButton, IonProgressBar, IonButtons } from '@ionic/vue';
+IonItem, IonBackButton, IonProgressBar, IonButtons, IonInfiniteScroll,
+    IonInfiniteScrollContent, InfiniteScrollCustomEvent } from '@ionic/vue';
 import ExploreContainer from '@/components/ExploreContainer.vue';
 import { defineComponent, onMounted } from 'vue';
 import { GoogleAuth } from '@codetrix-studio/capacitor-google-auth';
-import { searchMat } from '@/composable/settings';
+import { searchMat, callUrl } from '@/composable/settings';
 
 import { ref } from 'vue';
 import SearchItem from '@/components/SearchItem.vue';
@@ -42,6 +46,7 @@ import SearchItem from '@/components/SearchItem.vue';
 const results = ref();
 const is_empty = ref(false);
 const processing = ref(false)
+let next_url = null
 const handleInput = async (event) => {
   console.log("handleInput")
   console.log(event)
@@ -58,6 +63,7 @@ const handleInput = async (event) => {
     processing.value = false;
 
     results.value = r.results
+    next_url  = r.next
     if(r.count == 0 ) {
       is_empty.value = true;
     }else {
@@ -66,4 +72,17 @@ const handleInput = async (event) => {
   }
   //test
 }
+  const loadMore = async (ev: InfiniteScrollCustomEvent) => {
+    //setTimeout(() => ev.target.complete(), 500);
+    console.log("next url ", next_url)
+    if(next_url) {
+      let data  = await callUrl(next_url)
+      console.log("data results", data.results)
+      results.value.push(data.results)
+      next_url = data.next
+      ev.target.complete()
+    }else {
+      ev.target.complete()
+    }
+  };
 </script>

src/views/Tab2Page.vue

@@ -3,6 +3,11 @@
     <ion-header>
       <ion-toolbar>
         <ion-title>Courses</ion-title>
+       <ion-buttons slot="end">
+          <ion-button :router-link="'/tabs/search_page/'">
+            <ion-icon slot="icon-only" :icon="search"></ion-icon>
+          </ion-button>
+        </ion-buttons>
       </ion-toolbar>
     </ion-header>
     <ion-content :fullscreen="true">
@@ -26,7 +31,9 @@
 </template>
 
 <script setup lang="ts">
-import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonGrid, IonRow, IonCol, onIonViewWillEnter, IonProgressBar } from '@ionic/vue';
+import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonGrid, IonRow, IonCol, onIonViewWillEnter, IonProgressBar, IonIcon, IonButtons, IonButton} from '@ionic/vue';
+import { search } from 'ionicons/icons';
+
 import Course from '@/components/Course.vue';
 import { ref } from 'vue';