From a54832c8c75c6cda8df0cf01d349b7d12e40ccea Mon Sep 17 00:00:00 2001
From: mateuswetah <mateus.m.luna@gmail.com>
Date: Fri, 27 May 2022 11:31:56 -0300
Subject: [PATCH] Adds pull refresh to every pages!

---
 src/App.vue                        | 46 ++++++++++++++---------------
 src/components/lists/ItemsList.vue |  4 +--
 src/pages/CollectionPage.vue       | 31 +++++++++++++++-----
 src/pages/CollectionsPage.vue      | 43 ++++++++++++++++++++++-----
 src/pages/HomePage.vue             | 43 ++++++++++++++++++---------
 src/pages/ItemsPage.vue            | 41 ++++++++++++++++++--------
 src/store/storeTainacan.ts         | 47 ++++++++++++++++++++++++++++--
 7 files changed, 187 insertions(+), 68 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index a53a38a..dc4a861 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,31 +1,31 @@
 <template>
-  <ion-app>
-    <ion-router-outlet />
-  </ion-app>
+    <ion-app>
+        <ion-router-outlet />
+    </ion-app>
 </template>
 
 <script lang="ts">
-import { IonApp, IonRouterOutlet } from '@ionic/vue';
-import { defineComponent } from 'vue';
-import { Device, DevicePlugin } from '@capacitor/device';
+import { IonApp, IonRouterOutlet } from "@ionic/vue";
+import { defineComponent } from "vue";
+import { Device, DevicePlugin } from "@capacitor/device";
 
 export default defineComponent({
-  name: 'App',
-  components: {
-    IonApp,
-    IonRouterOutlet
-  },
-  mounted() {
-    const device: DevicePlugin = Device;
-    device.getLanguageCode().then((res) => {
-      console.log('Default lang', res.value);
-      if (res.value.includes('-')) {
-        const language = res.value.split('-')[0];
-        this.$i18n.locale = language;
-      } else {
-        this.$i18n.locale = res.value;
-      }
-    })
-  }
+    name: "App",
+    components: {
+        IonApp,
+        IonRouterOutlet,
+    },
+    mounted() {
+        const device: DevicePlugin = Device;
+        device.getLanguageCode().then((res) => {
+            console.log("Default lang", res.value);
+            if (res.value.includes("-")) {
+                const language = res.value.split("-")[0];
+                this.$i18n.locale = language;
+            } else {
+                this.$i18n.locale = res.value;
+            }
+        });
+    },
 });
 </script>
\ No newline at end of file
diff --git a/src/components/lists/ItemsList.vue b/src/components/lists/ItemsList.vue
index daeca3b..6fa4eb0 100644
--- a/src/components/lists/ItemsList.vue
+++ b/src/components/lists/ItemsList.vue
@@ -1,10 +1,10 @@
 <template>
     <ion-row class="items-list-container">
-        <ion-col size="4" v-for="item of items" :key="item.id">
+        <ion-col size="4" v-for="(item, index) of items" :key="index">
             <ion-card button color="light" >
                 <ion-img :src="(item.thumbnail && item.thumbnail['tainacan-medium'] && item.thumbnail['tainacan-medium'][0]) ? item.thumbnail['tainacan-medium'][0] : thumbnailPlaceholder" :alt="(item.thumbnail_alt ? item.thumbnail_alt : (item.title ? item.title : 'Imagem de item sem título'))"></ion-img>
                 <ion-card-header>
-                    <ion-card-title>{{ item.title ? item.title : $('label_item_without_title') }}</ion-card-title>
+                    <ion-card-title>{{ item.title ? item.title : $t('label_item_without_title') }}</ion-card-title>
                 </ion-card-header>
             </ion-card>
         </ion-col>
diff --git a/src/pages/CollectionPage.vue b/src/pages/CollectionPage.vue
index 9b9cb76..121a850 100644
--- a/src/pages/CollectionPage.vue
+++ b/src/pages/CollectionPage.vue
@@ -1,5 +1,8 @@
 <template>
     <base-layout :page-title="$t('collection')" page-default-back-link="/collections">
+        <ion-refresher slot="fixed" @ionRefresh="doRefresh($event)">
+            <ion-refresher-content></ion-refresher-content>
+        </ion-refresher>
         <ion-loading
             :is-open="isLoading"
             :message="$t('label_loading')"
@@ -17,7 +20,9 @@ import { useRoute } from "vue-router";
 import { ref } from 'vue';
 
 import {
-    IonLoading
+    IonLoading,
+    IonRefresher,
+    IonRefresherContent
 } from '@ionic/vue';
 
 import BaseLayout from '@/components/base/BaseLayout.vue';
@@ -27,12 +32,23 @@ export default {
     components: {
         BaseLayout,
         ItemsList,
-        IonLoading
+        IonLoading,
+        IonRefresher,
+        IonRefresherContent
     },
     setup() {
         const isLoading = ref(false);
         const setIsLoading = (state: boolean) => isLoading.value = state;
         const route = useRoute();
+        const collectionId = route.params.id + '';
+        const loadItemsByCollection = async () => {
+            await tainacanStore.fetchItemsByCollection(collectionId, { perPage: '24', orderBy: 'modified'});
+        }
+        const doRefresh = async (event: any) => {
+            await loadItemsByCollection();
+            if (event && event.target)
+                event.target.complete();
+        }
 
         let tainacanStore = useTainacanStore();
 
@@ -40,14 +56,15 @@ export default {
             isLoading,
             tainacanStore,
             setIsLoading,
-            items: [],
-            collectionId: route.params.id,
+            loadItemsByCollection,
+            doRefresh,
+            collectionId
         }
     },
     async created() {
-        this.setIsLoading(true)
-        await this.tainacanStore.fetchItemsByCollection(this.collectionId)
-        this.setIsLoading(false)
+        this.setIsLoading(true);
+        await this.loadItemsByCollection();
+        this.setIsLoading(false);
     },
 }
 </script>
\ No newline at end of file
diff --git a/src/pages/CollectionsPage.vue b/src/pages/CollectionsPage.vue
index 80caa74..9d36372 100644
--- a/src/pages/CollectionsPage.vue
+++ b/src/pages/CollectionsPage.vue
@@ -5,16 +5,24 @@
                 :message="$t('label_loading')"
         >
         </ion-loading>
+        <ion-refresher slot="fixed" @ionRefresh="doRefresh($event)">
+            <ion-refresher-content></ion-refresher-content>
+        </ion-refresher>
         <ion-list>
             <collections-list :collections="tainacanStore.collections"></collections-list>
         </ion-list>
     </base-layout>
 </template>
 
-<script>
+<script lang="ts">
 import CollectionsList from '@/components/lists/CollectionsList.vue';
 import BaseLayout from '@/components/base/BaseLayout.vue';
-import { IonLoading, IonList } from '@ionic/vue';
+import {
+    IonLoading,
+    IonList,
+    IonRefresher,
+    IonRefresherContent
+} from '@ionic/vue';
 
 import {
     useTainacanStore
@@ -27,18 +35,37 @@ export default {
         CollectionsList,
         BaseLayout,
         IonLoading,
-        IonList
+        IonList,
+        IonRefresher,
+        IonRefresherContent
     },
     setup() {
         const isLoading = ref(false);
-        const setOpen = (state) => isLoading.value = state;
+        const setIsLoading = (state: boolean) => isLoading.value = state;
+        
+        const loadCollections = async () => {
+            await tainacanStore.fetchCollections({ perPage: '24', orderBy: 'modified'});
+        }
+        const doRefresh = async (event: any) => {
+            await loadCollections();
+            if (event && event.target)
+                event.target.complete();
+        }
+
         let tainacanStore = useTainacanStore();
-        return { tainacanStore, isLoading, setOpen }
+        
+        return {
+            tainacanStore,
+            isLoading,
+            setIsLoading,
+            doRefresh,
+            loadCollections
+        }
     },
     async created(){
-        this.setOpen(true);
-        await this.tainacanStore.fetchCollections();
-        this.setOpen(false);
+        this.setIsLoading(true);
+        await this.loadCollections();
+        this.setIsLoading(false);
     },
 }
 
diff --git a/src/pages/HomePage.vue b/src/pages/HomePage.vue
index eede42b..e92e771 100644
--- a/src/pages/HomePage.vue
+++ b/src/pages/HomePage.vue
@@ -1,5 +1,8 @@
 <template>
     <base-layout>
+        <ion-refresher slot="fixed" @ionRefresh="doRefresh($event)">
+            <ion-refresher-content></ion-refresher-content>
+        </ion-refresher>
         <ion-loading
             :is-open="isLoading"
             :message="$t('label_loading')"
@@ -7,28 +10,28 @@
         </ion-loading>
         <ion-list>
             <ion-list-header>
-                {{ $t('collections') }}
+                {{ $t('label_last_modified_collections') }}
             </ion-list-header>
-            <collections-list :collections="tainacanStore.collections"></collections-list>
+            <collections-list :collections="tainacanStore.homeCollections"></collections-list>
         </ion-list>
         <ion-button
-                v-if="tainacanStore.collections.length < tainacanStore.totalCollections"
+                v-if="tainacanStore.homeCollections.length < tainacanStore.totalHomeCollections"
                 fill="clear"
                 size="small"
                 routerLink="/collections">
-            {{ $t('label_view_all_collections', [tainacanStore.totalCollections]) }}
+            {{ $t('label_view_all_collections', [tainacanStore.totalHomeCollections]) }}
         </ion-button>
         <ion-list>
             <ion-list-header>
-                {{ $t('items') }}
+                {{ $t('label_last_modified_items') }}
             </ion-list-header>
-            <items-list :items="tainacanStore.items"></items-list>
+            <items-list :items="tainacanStore.homeItems"></items-list>
             <ion-button 
-                    v-if="tainacanStore.items.length < tainacanStore.totalItems"
+                    v-if="tainacanStore.homeItems.length < tainacanStore.totalHomeItems"
                     fill="clear"
                     size="small"
                     routerLink="/items">
-                {{ $t('label_view_all_items', [tainacanStore.totalItems]) }}
+                {{ $t('label_view_all_items', [tainacanStore.totalHomeItems]) }}
             </ion-button>
         </ion-list>
     </base-layout>
@@ -47,7 +50,9 @@ import {
     IonButton,
     IonLoading,
     IonList,
-    IonListHeader
+    IonListHeader,
+    IonRefresher,
+    IonRefresherContent
 } from '@ionic/vue';
 
 export default {
@@ -58,24 +63,36 @@ export default {
         IonList,
         IonListHeader,
         IonButton,
-        IonLoading
+        IonLoading,
+        IonRefresher,
+        IonRefresherContent
     },
     setup() {
         const isLoading = ref(false);
         const setIsLoading = (state: boolean) => isLoading.value = state;
+        const loadCollectionsAndItems = async () => {
+            await tainacanStore.fetchHomeCollections();
+            await tainacanStore.fetchHomeItems();
+        }
+        const doRefresh = async (event: any) => {
+            await loadCollectionsAndItems();
+            if (event && event.target)
+                event.target.complete();
+        }
 
         let tainacanStore = useTainacanStore();
 
         return {
             tainacanStore,
             isLoading,
-            setIsLoading
+            setIsLoading,
+            loadCollectionsAndItems,
+            doRefresh
         }
     },
     async created() {
         this.setIsLoading(true);
-        await this.tainacanStore.fetchCollections({ perPage: "4", orderBy: "modified" });
-        await this.tainacanStore.fetchItems();
+        await this.loadCollectionsAndItems();
         this.setIsLoading(false);
     }
 }
diff --git a/src/pages/ItemsPage.vue b/src/pages/ItemsPage.vue
index da3c488..ea1c8ad 100644
--- a/src/pages/ItemsPage.vue
+++ b/src/pages/ItemsPage.vue
@@ -5,6 +5,9 @@
                 :message="$t('label_loading')"
         >
         </ion-loading>
+        <ion-refresher slot="fixed" @ionRefresh="doRefresh($event)">
+            <ion-refresher-content></ion-refresher-content>
+        </ion-refresher>
         <items-list :items="tainacanStore.items"></items-list>
     </base-layout>
 </template>
@@ -14,7 +17,9 @@ import {
     useTainacanStore
 } from '../store/storeTainacan';
 import {
-    IonLoading
+    IonLoading,
+    IonRefresher,
+    IonRefresherContent
 } from '@ionic/vue';
 import BaseLayout from '@/components/base/BaseLayout.vue';
 import { ref } from 'vue';
@@ -25,25 +30,37 @@ export default {
     components: {
         IonLoading,
         ItemsList,
-        BaseLayout
+        BaseLayout,
+        IonRefresher,
+        IonRefresherContent
     },
     setup() {
         const isLoading = ref(false);
-        const setOpen = (state: boolean) => isLoading.value = state;
+        const setIsLoading = (state: boolean) => isLoading.value = state;
+
+        const loadItems = async () => {
+            await tainacanStore.fetchItems({ perPage: '24', orderBy: 'modified'});
+        }
+        const doRefresh = async (event: any) => {
+            await loadItems();
+            if (event && event.target)
+                event.target.complete();
+        }
+
         let tainacanStore = useTainacanStore();
-        return { isLoading, setOpen, tainacanStore }
-    },
-    data() {
         return {
-            items: [],
-            collectionId: this.$route.params.id,
-        };
+            isLoading,
+            setIsLoading,
+            tainacanStore,
+            doRefresh,
+            loadItems
+        }
     },
 
     async created(){
-        this.setOpen(true)
-        await this.tainacanStore.fetchItems()
-        this.setOpen(false)
+        this.setIsLoading(true)
+        await this.loadItems();
+        this.setIsLoading(false)
     },
 }
 </script>
\ No newline at end of file
diff --git a/src/store/storeTainacan.ts b/src/store/storeTainacan.ts
index da888bc..9e97698 100644
--- a/src/store/storeTainacan.ts
+++ b/src/store/storeTainacan.ts
@@ -5,6 +5,10 @@ import { useWpStore } from "./storeWp";
 const useTainacanStore = defineStore("tainacan", {
   state() {
     return {
+      homeCollections: [],
+      totalHomeCollections: 0,
+      homeItems: [],
+      totalHomeItems: 0,
       collections: [],
       totalCollections: 0,
       collectionItems: [],
@@ -44,12 +48,32 @@ const useTainacanStore = defineStore("tainacan", {
       }
     },
 
+    async fetchHomeCollections() {
+      try {
+        const wpStore = useWpStore();
+
+        const endpoint = `${wpStore.userSiteUrl}/wp-json/tainacan/v2/collections?perpage=4&orderby=modified`;
+
+        const response = await axios.get(endpoint);
+
+        this.homeCollections = response.data;
+        this.totalHomeCollections = response.headers['x-wp-total'];
+
+      } catch (err) {
+        this.homeCollections = [];
+        this.totalHomeCollections = 0;
+        console.error("Erro no carregamento das coleções da home:", err);
+
+        return err;
+      }
+    },
+
     async fetchItemsByCollection(collectionId: string, params: { perPage: string, orderBy: string }) {
       try {
         const wpStore = useWpStore();
         this.collectionItems = [];
 
-        let endpoint = `${wpStore.userSiteUrl}/wp-json/tainacan/v2/collection/${collectionId}/items?fetch_only=id,title,thumbnail`;
+        let endpoint = `${wpStore.userSiteUrl}/wp-json/tainacan/v2/collection/${collectionId}/items?fetch_only=id,title,thumbnail&perpage=12&orderby=modified`;
 
         if (params && params.perPage)
           endpoint += '&perpage=' + params.perPage;
@@ -71,16 +95,33 @@ const useTainacanStore = defineStore("tainacan", {
       }
     },
 
+    async fetchHomeItems() {
+      try {
+        const wpStore = useWpStore();
+        
+        const endpoint = `${wpStore.userSiteUrl}/wp-json/tainacan/v2/items?fetch_only=id,title,thumbnail&perpage=12&orderby=modified`;
+
+        const response = await axios.get(endpoint);
+        this.homeItems = response.data.items;
+        this.totalHomeItems = response.headers['x-wp-total'];
+
+      } catch (err) {
+        this.homeItems = [];
+        this.totalHomeItems = 0;
+        console.error("Erro no carregamento dos items da home:", err);
+        return err;
+      }
+    },
+
     async fetchItems(params: { perPage: string, orderBy: string }) {
       try {
         const wpStore = useWpStore();
-        this.items = [];
         
         let endpoint = `${wpStore.userSiteUrl}/wp-json/tainacan/v2/items?fetch_only=id,title,thumbnail`;
 
         if (params && params.perPage)
           endpoint += '&perpage=' + params.perPage;
-  
+
         if (params && params.orderBy)
           endpoint += '&orderby=' + params.orderBy;