refactored routing

Author: kovacevic

Diff for: src/router/index.ts

@@ -21,7 +21,7 @@ const routes: Array<RouteRecordRaw> = [
     name: 'catalogue',
     component: () =>
       import(
-        /* webpackChunkName: "catalogue" */ '@/views/catalogue/Catalogue.vue'
+        /* webpackChunkName: "catalogue" */ '@/views/item/Catalogue.vue'
       ),
   },
   {

Diff for: src/views/catalogue/Catalogues.vue

@@ -21,7 +21,7 @@
             catalogue.name
           }}</ion-label>
           <ion-badge color="secondary" slot="end">{{
-            catalogue.items.length
+            catalogue.itemCount
           }}</ion-badge>
           <ion-buttons slot="end">
             <ion-button @click="clickedOptions(catalogue)">
@@ -140,7 +140,7 @@ export default {
       CRDCatalogue.value = {
         id: '',
         name: '',
-        items: [],
+        itemCount: 0,
       };
       setOptionsOpen(false);
       setModalOpen(true);

Diff for: src/views/catalogue/Catalogue.vue renamed to src/views/item/Catalogue.vue

@@ -10,7 +10,9 @@
     </ion-header>
     <ion-content :fullscreen="true">
       <ion-toolbar>
-        <ion-searchbar @ionInput="filterDisplayedItems($event.target.value)"></ion-searchbar>
+        <ion-searchbar
+          @ionInput="filterDisplayedItems($event.target.value)"
+        ></ion-searchbar>
       </ion-toolbar>
       <ion-list>
         <ion-list-header>
@@ -20,7 +22,25 @@
           <ion-label>{{ item.name }}</ion-label>
         </ion-item>
       </ion-list>
+      <ion-infinite-scroll
+        @ionInfinite="infiteLoadItems($event)"
+        threshold="100px"
+        id="infinite-scroll"
+      >
+        <ion-infinite-scroll-content
+          loading-spinner="bubbles"
+          loading-text="Loading more data..."
+        >
+        </ion-infinite-scroll-content>
+      </ion-infinite-scroll>
     </ion-content>
+
+    <ion-loading
+      :is-open="catalogueLoading || itemsLoading"
+      message="Please wait..."
+      :duration="1000"
+    >
+    </ion-loading>
   </ion-page>
 </template>
 
@@ -38,11 +58,15 @@ import {
   IonTitle,
   IonListHeader,
   IonBackButton,
+  IonLoading,
+  IonInfiniteScroll,
+  IonInfiniteScrollContent,
 } from '@ionic/vue';
 
-import { useCatalogue } from '@/composables/useCatalogue';
+import { useItem } from '@/composables/useItem';
 import { onMounted } from '@vue/runtime-core';
 import router from '@/router';
+import { useCatalogue } from '@/composables/useCatalogue';
 
 export default {
   name: 'Catalogue',
@@ -58,26 +82,48 @@ export default {
     IonContent,
     IonPage,
     IonListHeader,
+    IonLoading,
     IonBackButton,
+    IonInfiniteScroll,
+    IonInfiniteScrollContent,
   },
   setup() {
+    const {
+      runWrappedGetItems,
+      filterDisplayedItems,
+      itemsLoading,
+      displayedItems,
+      itemFilter,
+      page,
+      infiteLoadItems,
+    } = useItem();
+
     const {
       selectedCatalogue,
       getCatalogue,
-      displayedItems,
-      filterDisplayedItems,
+      catalogueLoading,
     } = useCatalogue();
 
     onMounted(async () => {
       try {
-        const routeID = router.currentRoute.value.params.id as string;
-        await getCatalogue(routeID);
+        const catalogueID = router.currentRoute.value.params.id as string;
+        await getCatalogue(catalogueID);
+        itemFilter.value = { catalogue: catalogueID };
+        await runWrappedGetItems();
       } catch (error) {
         console.log(error);
       }
     });
+    
 
-    return { selectedCatalogue, filterDisplayedItems, displayedItems };
+    return {
+      selectedCatalogue,
+      catalogueLoading,
+      itemsLoading,
+      filterDisplayedItems,
+      displayedItems,
+      infiteLoadItems,
+    };
   },
 };
 </script>