issue #6 collection

src/components/CollectionList.vue

@@ -1,12 +1,6 @@
 <template>
-    <ion-loading
-    :is-open="isOpenRef"
-    cssClass="my-custom-class"
-    message="Carregando..."
-    >
-    </ion-loading>
     <ion-list>
-        <ion-item v-for="collection of collectionStore.collections" :key="collection.id" :router-link="`/collections/${collection.id}`">
+        <ion-item v-for="collection of collections" :key="collection.id" :router-link="`/collections/${collection.id}`">
             <ion-thumbnail slot="start"> 
                 <ion-img v-if="collection.thumbnail.thumbnail[0]" :src="collection.thumbnail.thumbnail[0]" :alt="collection.name"></ion-img>
                 <ion-img v-else :src="image" :alt="collection.name"></ion-img>
@@ -17,39 +11,29 @@
 </template>
 
 <script lang="ts">
-import {
+
-    useCollectionsStore
-} from '../store/storeCollection';
 import {
     IonList,
     IonItem,
     IonImg,
     IonThumbnail,
-    IonLoading,
     IonLabel,
 } from '@ionic/vue';
-import { computed, ref } from 'vue';
+import { computed } from 'vue';
 export default {
+    props: [
+        "collections"
+    ],
     components: {
         IonList,
         IonItem,
         IonImg,
         IonThumbnail,
         IonLabel,
-        IonLoading
     },
     setup() {
         const image = computed (() => require('../assets/placeholder_square_small.png'))
-        const isOpenRef = ref(false);
+        return { image }
-        const setOpen = (state: boolean) => isOpenRef.value = state;
-        let collectionStore = useCollectionsStore();
-        return { image, isOpenRef, setOpen, collectionStore }
-    },
-
-    async created(){
-        this.setOpen(true);
-        await this.collectionStore.fetchCollections();
-        this.setOpen(false);
     },
 }
 </script>

src/components/base/BaseLayout.vue

@@ -3,6 +3,9 @@
         <ion-header>
             <ion-toolbar>
                 <ion-img width="80" height="80" :src="image" />
+                <ion-button expand="block" @click="logOff">
+                    LogOff
+                </ion-button>
             </ion-toolbar>
             <ion-toolbar>
                 <ion-buttons slot="start">
@@ -24,6 +27,11 @@
 import {
     useCollectionsStore
 } from '../../store/storeCollection';
+
+import { 
+    useUserStore
+} from '../../store/storeUser';
+
 import {
     IonPage,
     IonHeader,
@@ -35,6 +43,7 @@ import {
     IonImg,
 } from '@ionic/vue';
 import { computed } from 'vue';
+
 export default {
     props: ['pageTitle', 'pageDefaultBackLink'],
     components: {
@@ -50,8 +59,15 @@ export default {
     setup(){
         const image = computed (() => require('../../assets/logo.png'))
         let collectionStore = useCollectionsStore();
+        let userStore = useUserStore();
         return {
-                image, collectionStore,
+                image, collectionStore, userStore
+            }  
+    },
+    methods: {
+        async logOff(){
+            await this.userStore.userLogOff();
+            this.$router.go();
         }
 
     }

src/pages/ColletionsFull.vue

@@ -1,60 +1,44 @@
 <template>
-    <base-layout page-title="Collections List">
     <ion-loading
     :is-open="isOpenRef"
     cssClass="my-custom-class"
     message="Carregando..."
     >
     </ion-loading>
-        <ion-list>
+    <base-layout>
-            <ion-item v-for="collection of collectionStore.collections" :key="collection.id" :router-link="`/collections/${collection.id}`">
+        <ion-toolbar>
-                <ion-thumbnail slot="start"> 
+            <ion-label>Coleções</ion-label>
-                    <ion-img v-if="collection.thumbnail.thumbnail[0]" :src="collection.thumbnail.thumbnail[0]" :alt="collection.name"></ion-img>
+        </ion-toolbar>
-                    <ion-img v-else :src="image" :alt="collection.name"></ion-img>
+        <base-collection-list :collections="collectionStore.collections"></base-collection-list>
-                </ion-thumbnail>
-                <ion-label> {{ collection.name }} </ion-label>
-            </ion-item>
-        </ion-list> 
     </base-layout>
 </template>
 
-<script lang="ts">
+<script>
+import BaseCollectionList from '@/components/CollectionList.vue';
+import BaseLayout from '@/components/base/BaseLayout.vue';
+
 import {
     useCollectionsStore
 } from '../store/storeCollection';
-import {
+
-    IonList,
+import { ref } from 'vue';
-    IonItem,
+
-    IonImg,
-    IonThumbnail,
-    IonLoading,
-    IonLabel,
-} from '@ionic/vue';
-import BaseLayout from '@/components/base/BaseLayout.vue';
-import { computed, ref } from 'vue';
 export default {
     components: {
-        IonList,
+        BaseCollectionList,
-        IonItem,
+        BaseLayout,
-        IonImg,
-        IonThumbnail,
-        IonLabel,
-        IonLoading,
-        BaseLayout
     },
     setup() {
-        const image = computed (() => require('../assets/placeholder_square_small.png'))
         const isOpenRef = ref(false);
-        const setOpen = (state: boolean) => isOpenRef.value = state;
+        const setOpen = (state) => isOpenRef.value = state;
         let collectionStore = useCollectionsStore();
-        return { image, isOpenRef, setOpen, collectionStore }
+        return { collectionStore, isOpenRef, setOpen }
     },
-
     async created(){
         this.setOpen(true);
-        await this.collectionStore.fetchFullCollections();
+        await this.collectionStore.fetchCollections();
         this.setOpen(false);
     },
 }
-</script>
 
+</script>

src/store/storeCollection.ts

@@ -14,21 +14,10 @@ const useCollectionsStore = defineStore('collections', {
       },
 
     actions: {
-        async fetchCollections() {
+        async fetchCollections(perPage :string, orderBy :string) {
           try {
             const userStore = useUserStore();
-            const response = await axios.get(`${userStore.userSiteUrl}/wp-json/tainacan/v2/collections?perpage=4&orderby=modified`);
+            const response = await axios.get(`${userStore.userSiteUrl}/wp-json/tainacan/v2/collections?${perPage?"perpage="+perPage:""}&${orderBy?"orderby="+orderBy:""}`);
-            this.collections = response.data;
-          } catch (err) {
-            this.collections = [];
-            console.error('Erro no carregamento das coleções:', err);
-            return err;
-          }
-        },
-        async fetchFullCollections() {
-          try {
-            const userStore = useUserStore();
-            const response = await axios.get(`${userStore.userSiteUrl}/wp-json/tainacan/v2/collections`);
             this.collections = response.data;
           } catch (err) {
             this.collections = [];