Home page and full lists collections and items

capacitor.config.ts

@@ -2,7 +2,7 @@ import { CapacitorConfig } from '@capacitor/cli';
 
 const config: CapacitorConfig = {
   appId: 'io.ionic.starter',
-  appName: 'tainacanteste',
+  appName: 'tainacan-mobile',
   webDir: 'dist',
   bundledWebRuntime: false
 };

src/components/base/BaseCollectionList.vue

@@ -1,5 +1,4 @@
 <template>
-    <base-layout page-title="Collections List">
     <ion-loading
     :is-open="isOpenRef"
     cssClass="my-custom-class"
@@ -15,13 +14,12 @@
             <ion-label> {{ collection.name }} </ion-label>
         </ion-item>
     </ion-list> 
-    </base-layout>
 </template>
 
 <script lang="ts">
 import {
     useCollectionsStore
-} from '../store/storeCollections';
+} from '../../store/storeCollections';
 import {
     IonList,
     IonItem,
@@ -30,7 +28,6 @@ import {
     IonLoading,
     IonLabel,
 } from '@ionic/vue';
-import BaseLayout from '@/components/base/BaseLayout.vue';
 import { computed, ref } from 'vue';
 export default {
     components: {
@@ -39,11 +36,10 @@ export default {
         IonImg,
         IonThumbnail,
         IonLabel,
-        IonLoading,
-        BaseLayout
+        IonLoading
     },
     setup() {
-        const image = computed (() => require('../assets/placeholder_square_small.png'))
+        const image = computed (() => require('../../assets/placeholder_square_small.png'))
         const isOpenRef = ref(false);
         const setOpen = (state: boolean) => isOpenRef.value = state;
         let collectionsStore = useCollectionsStore();

src/components/base/BaseItemList.vue

@@ -0,0 +1,51 @@
+<template>
+    <ion-loading
+    :is-open="isOpenRef"
+    cssClass="my-custom-class"
+    message="Carregando..."
+    >
+    </ion-loading>
+    <ion-card v-for="item of collectionsStore.items" :key="item.id">
+        <ion-card-title v-if="item.title"> {{ item.title }} </ion-card-title>
+        <ion-card-title v-else>Item não possui título</ion-card-title>
+        <ion-card-content>
+             <ion-img :src="item.thumbnail.medium[0]" :alt="item.title"></ion-img>
+        </ion-card-content>
+    </ion-card>
+</template>
+
+<script lang="ts">
+import {
+    useCollectionsStore
+} from '../../store/storeCollections';
+import {
+    IonCard,
+    IonLoading,
+} from '@ionic/vue';
+
+import { ref } from 'vue';
+export default {
+    components: {
+        IonCard,
+        IonLoading,
+    },
+    setup() {
+        const isOpenRef = ref(false);
+        const setOpen = (state: boolean) => isOpenRef.value = state;
+        let collectionsStore = useCollectionsStore();
+        return { isOpenRef, setOpen, collectionsStore }
+    },
+    data() {
+        return {
+            items: [],
+            collectionId: this.$route.params.id,
+        };
+    },
+
+    async created(){
+        this.setOpen(true)
+        await this.collectionsStore.fetchItems()
+        this.setOpen(false)
+    },
+}
+</script>

src/main.ts

@@ -2,6 +2,8 @@ import { createApp } from 'vue'
 
 import App from './App.vue'
 import BaseLayout from './components/base/BaseLayout.vue';
+import BaseCollectionList from './components/base/BaseCollectionList.vue';
+import BaseItemList from './components/base/BaseItemList.vue';
 import router from './router';
 import { createPinia } from 'pinia';
 
@@ -34,6 +36,8 @@ const app = createApp(App)
   .use(createPinia());
 
 app.component('base-layout', BaseLayout);
+app.component('base-collectionlist', BaseCollectionList);
+app.component('base-itemlist', BaseItemList);
   
 router.isReady().then(() => {
   app.mount('#app');

src/pages/HomeCollectionItensList.vue

@@ -0,0 +1,47 @@
+<template>
+    <base-layout>
+        <ion-button expand="block" @click="openPage">Acessar WordPress</ion-button>
+
+        <ion-toolbar>
+            <ion-label>Coleções</ion-label>
+        </ion-toolbar>
+        <base-collection-list></base-collection-list>
+        <ion-button expand="block" routerLink="/collectionsfull">
+            Acessar lista completa de coleções
+        </ion-button>
+        <ion-toolbar>
+            <ion-label>Items</ion-label>
+        </ion-toolbar>
+        <base-item-list></base-item-list>
+        <ion-button expand="block" routerLink="/itemsfull">
+            Acessar lista completa de itens
+        </ion-button>
+    </base-layout>
+</template>
+
+<script>
+import BaseCollectionList from '@/components/base/BaseCollectionList.vue';
+import BaseItemList from '@/components/base/BaseItemList.vue';
+import BaseLayout from '@/components/base/BaseLayout.vue';
+
+
+import {
+    IonLabel,
+    IonButton,
+} from '@ionic/vue';
+
+export default {
+    components: {
+        BaseCollectionList,
+        BaseItemList,
+        BaseLayout,
+        IonLabel,
+        IonButton,
+    },
+
+ methods: {
+        openPage(){
+        }
+ }
+}
+</script>

src/pages/ItemsFullList.vue

@@ -47,7 +47,7 @@ export default {
 
     async created(){
         this.setOpen(true)
-        await this.collectionsStore.fetchItems(this.collectionId)
+        await this.collectionsStore.fetchFullItems()
         this.setOpen(false)
     },
 }

src/pages/ItemsListbyCollection.vue

@@ -0,0 +1,55 @@
+<template>
+    <base-layout page-title="Items List" page-default-back-link="/collections">
+    <ion-loading
+    :is-open="isOpenRef"
+    cssClass="my-custom-class"
+    message="Carregando..."
+    >
+    </ion-loading>
+    <ion-card v-for="item of collectionsStore.items" :key="item.id">
+        <ion-card-title v-if="item.title"> {{ item.title }} </ion-card-title>
+        <ion-card-title v-else>Item não possui título</ion-card-title>
+        <ion-card-content>
+             <ion-img :src="item.thumbnail.medium[0]" :alt="item.title"></ion-img>
+        </ion-card-content>
+    </ion-card>
+    </base-layout>
+</template>
+
+<script lang="ts">
+import {
+    useCollectionsStore
+} from '../store/storeCollections';
+import {
+    IonCard,
+    IonLoading,
+} from '@ionic/vue';
+import BaseLayout from '@/components/base/BaseLayout.vue';
+import { ref } from 'vue';
+export default {
+    components: {
+        IonCard,
+        IonLoading,
+        BaseLayout
+    },
+    setup() {
+        const isOpenRef = ref(false);
+        const setOpen = (state: boolean) => isOpenRef.value = state;
+        let collectionsStore = useCollectionsStore();
+        return { isOpenRef, setOpen, collectionsStore }
+    },
+
+    data() {
+        return {
+            items: [],
+            collectionId: this.$route.params.id,
+        };
+    },
+
+    async created(){
+        this.setOpen(true)
+        await this.collectionsStore.fetchItemsByCollection(this.collectionId)
+        this.setOpen(false)
+    },
+}
+</script>

src/router/index.ts

@@ -14,15 +14,23 @@ const routes: Array<RouteRecordRaw> = [
   },
   {
     path: '/collections',
-    component: () => import('../pages/ColletionsList.vue')
+    component: () => import('../pages/HomeCollectionItensList.vue') 
   },
   {
     path: '/collections/:id',
-    component: () => import('../pages/ItemsList.vue')
+    component: () => import('../pages/ItemsListbyCollection.vue')
   },
   {
-    path: '/adminwebview',
-    component: () => import('../pages/AdminWebView.vue')
+    path: '/collectionsitems',
+    component: () => import('../pages/HomeCollectionItensList.vue')//mudar
+  },
+  {
+    path: '/collectionsfull',
+    component: () => import('../pages/ColletionsFullList.vue')
+  },
+  {
+    path: '/itemsfull',
+    component: () => import('../pages/ItemsFullList.vue')
   }
 ]
 

src/store/storeCollections.ts

@@ -34,7 +34,7 @@ const useCollectionsStore = defineStore('collections', {
           }
         },
         
-        async fetchItems(collectionId :string) {
+        async fetchItemsByCollection (collectionId :string) {
             try {
               this.items = [];
               const response = await axios.get(`https://${this.urlMuseum}/wp-json/tainacan/v2/collection/${collectionId}/items?perpage=12&orderby=modified&fetch_only=id,title,thumbnail`);
@@ -44,6 +44,30 @@ const useCollectionsStore = defineStore('collections', {
               console.error('Erro no carregamento das coleções:', err);
               return err;
             }
+          },
+
+          async fetchItems() {
+            try {
+              this.items = [];
+              const response = await axios.get(`https://${this.urlMuseum}/wp-json/tainacan/v2/items?perpage=12&orderby=modified&fetch_only=id,title,thumbnail`);
+              this.items = response.data.items;
+            } catch (err) {
+              this.items = [];
+              console.error('Erro no carregamento das coleções:', err);
+              return err;
+            }
+          },
+
+          async fetchFullItems() {
+            try {
+              this.items = [];
+              const response = await axios.get(`https://${this.urlMuseum}/wp-json/tainacan/v2/items?perpage=20&orderby=modified&fetch_only=id,title,thumbnail`);
+              this.items = response.data.items;
+            } catch (err) {
+              this.items = [];
+              console.error('Erro no carregamento das coleções:', err);
+              return err;
+            }
           }
     }
 })