Home page and full lists collections and items
This commit is contained in:
parent
533814c12e
commit
54970ab40d
|
@ -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
|
||||
};
|
||||
|
|
|
@ -1,27 +1,25 @@
|
|||
<template>
|
||||
<base-layout page-title="Collections List">
|
||||
<ion-loading
|
||||
:is-open="isOpenRef"
|
||||
cssClass="my-custom-class"
|
||||
message="Carregando..."
|
||||
>
|
||||
</ion-loading>
|
||||
<ion-list>
|
||||
<ion-item v-for="collection of collectionsStore.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>
|
||||
</ion-thumbnail>
|
||||
<ion-label> {{ collection.name }} </ion-label>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
</base-layout>
|
||||
<ion-list>
|
||||
<ion-item v-for="collection of collectionsStore.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>
|
||||
</ion-thumbnail>
|
||||
<ion-label> {{ collection.name }} </ion-label>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
</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();
|
|
@ -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>
|
|
@ -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');
|
||||
|
|
|
@ -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>
|
|
@ -47,7 +47,7 @@ export default {
|
|||
|
||||
async created(){
|
||||
this.setOpen(true)
|
||||
await this.collectionsStore.fetchItems(this.collectionId)
|
||||
await this.collectionsStore.fetchFullItems()
|
||||
this.setOpen(false)
|
||||
},
|
||||
}
|
|
@ -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>
|
|
@ -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')
|
||||
}
|
||||
]
|
||||
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
|
Loading…
Reference in New Issue