Passes collection object via router to collection page.

src/components/lists/CollectionsList.vue

@@ -1,5 +1,9 @@
 <template>
-    <ion-item class="collection-list-item" v-for="collection of collections" :key="collection.id" :router-link="`/collections/${collection.id}`">
+    <ion-item
+            class="collection-list-item"
+            v-for="collection of collections"
+            :key="collection.id"
+            @click="goToCollectionPage(collection)">
         <ion-thumbnail slot="start"> 
             <ion-img :src="(collection.thumbnail && collection.thumbnail.thumbnail && collection.thumbnail.thumbnail[0]) ? collection.thumbnail.thumbnail[0] : thumbnailPlaceholder" :alt="collection.name ? collection.name : $('label_collection_without_name')"></ion-img>
         </ion-thumbnail>
@@ -31,6 +35,7 @@ import {
     IonLabel,
     IonIcon
 } from '@ionic/vue';
+import { useRouter } from "vue-router";
 import { lockClosedOutline, readerOutline, trashOutline } from 'ionicons/icons';
 import { computed } from 'vue';
 
@@ -47,7 +52,23 @@ export default {
     },
     setup() {
         const thumbnailPlaceholder = computed (() => require('../../assets/placeholder_square_small.png'))
-        return { thumbnailPlaceholder, lockClosedOutline, readerOutline, trashOutline }
+        const router = useRouter();
+        const goToCollectionPage = (collection: any) => {
+            router .push({
+                name: 'collection',
+                params: {
+                    id: collection.id,
+                    collection: JSON.stringify(collection)
+                }
+            });
+        }
+        return {
+            thumbnailPlaceholder,
+            lockClosedOutline,
+            readerOutline,
+            trashOutline,
+            goToCollectionPage
+        }
     },
 }
 </script>

src/components/lists/ItemsList.vue

@@ -1,6 +1,6 @@
 <template>
     <ion-row class="items-list-container">
-        <ion-col size="4" v-for="(item, index) of items" :key="index">
+        <ion-col size="4" v-for="item of items" :key="item.id">
             <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>

src/pages/CollectionPage.vue

@@ -1,5 +1,7 @@
 <template>
-    <base-layout :page-title="$t('collection')" page-default-back-link="/collections">
+    <base-layout
+            :page-title="(collectionObject && collectionObject.name) ? collectionObject.name : $t('collection')" 
+            page-default-back-link="/collections">
         <ion-refresher slot="fixed" @ionRefresh="doRefresh($event)">
             <ion-refresher-content></ion-refresher-content>
         </ion-refresher>
@@ -23,8 +25,7 @@
 import {
     useTainacanStore
 } from '../store/storeTainacan';
-import { useRoute } from "vue-router";
-import { ref } from 'vue';
+import { ref, defineComponent } from 'vue';
 import { add, documentOutline, documentAttachOutline, documentsOutline } from "ionicons/icons";
 
 import {
@@ -39,7 +40,7 @@ import {
 import BaseLayout from '@/components/base/BaseLayout.vue';
 import ItemsList from '@/components/lists/ItemsList.vue';
 
-export default {
+export default defineComponent({
     components: {
         BaseLayout,
         ItemsList,
@@ -49,13 +50,15 @@ export default {
         IonIcon,
         IonButton
     },
-    setup() {
+    props: {
+        id: String,
+        collection: String
+    },
+    setup(props) {
         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'});
+            await tainacanStore.fetchItemsByCollection(props.id + '', { perPage: '24', orderBy: 'modified'});
         }
         const doRefresh = async (event: any) => {
             await loadItemsByCollection();
@@ -111,6 +114,8 @@ export default {
             console.log('onDidDismiss resolved with role and data', role, data);
         }
 
+        const collectionObject = props.collection ? JSON.parse(props.collection + '') : false;
+        
         let tainacanStore = useTainacanStore();
 
         return {
@@ -120,10 +125,10 @@ export default {
             loadItemsByCollection,
             doRefresh,
             openActionSheet,
-            collectionId,
             add,
             actionSheetLabels,
-            setActionSheetLabels
+            setActionSheetLabels,
+            collectionObject
         }
     },
     async created() {
@@ -140,7 +145,7 @@ export default {
         await this.loadItemsByCollection();
         this.setIsLoading(false);
     },
-}
+});
 </script>
 
 <style>

src/router/index.ts

@@ -26,7 +26,8 @@ const routes: Array<RouteRecordRaw> = [
   {
     path: '/collections/:id',
     component: CollectionPage,
-    name: 'collection'
+    name: 'collection',
+    props: true
   },
   {
     path: '/collections',