Better styling and store functions parameters.
This commit is contained in:
parent
c9216203a9
commit
9dbc66a18e
|
@ -12,8 +12,8 @@
|
|||
</ion-button>
|
||||
</ion-buttons>
|
||||
</ion-toolbar>
|
||||
<ion-toolbar>
|
||||
<ion-title size="small"> {{ pageTitle }} </ion-title>
|
||||
<ion-toolbar v-if="pageTitle">
|
||||
<ion-title> {{ pageTitle }} </ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content fullscreen="true">
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<ion-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" :router-link="`/collections/${collection.id}`">
|
||||
<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 : 'Imagem de coleção sem nome'"></ion-img>
|
||||
</ion-thumbnail>
|
||||
|
@ -33,3 +33,11 @@ export default {
|
|||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.collection-list-item {
|
||||
--border-color: var(--ion-color-step-900, #e6e6e6);
|
||||
}
|
||||
.collection-list-item ion-img {
|
||||
--border-radius: 4px;
|
||||
}
|
||||
</style>
|
|
@ -1,8 +1,8 @@
|
|||
<template>
|
||||
<ion-row>
|
||||
<ion-row class="items-list-container">
|
||||
<ion-col size="6" v-for="item of items" :key="item.id">
|
||||
<ion-card button color="light" >
|
||||
<ion-img :src="(item.thumbnail && item.thumbnail.medium && item.thumbnail.medium[0]) ? item.thumbnail.medium[0] : thumbnailPlaceholder" :alt="item.title ? item.title : 'Imagem de item sem título'"></ion-img>
|
||||
<ion-img :src="(item.thumbnail && item.thumbnail['tainacan-medium'] && item.thumbnail['tainacan-medium'][0]) ? item.thumbnail['tainacan-medium'][0] : thumbnailPlaceholder" :alt="item.title ? item.title : 'Imagem de item sem título'"></ion-img>
|
||||
<ion-card-header>
|
||||
<ion-card-title v-if="item.title"> {{ item.title ? item.title : 'Item sem título' }} </ion-card-title>
|
||||
</ion-card-header>
|
||||
|
@ -39,4 +39,22 @@ export default {
|
|||
return { thumbnailPlaceholder }
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.items-list-container {
|
||||
--ion-grid-column-padding: 0px;
|
||||
padding: 12px;
|
||||
}
|
||||
.items-list-container ion-card {
|
||||
box-shadow: none;
|
||||
margin: 4px;
|
||||
}
|
||||
.items-list-container ion-card-header {
|
||||
padding: 12px;
|
||||
}
|
||||
.items-list-container ion-card-title {
|
||||
font-size: 0.875rem;
|
||||
font-weight: normal;
|
||||
}
|
||||
</style>
|
|
@ -66,7 +66,7 @@ export default {
|
|||
},
|
||||
async created() {
|
||||
this.setIsLoading(true);
|
||||
await this.tainacanStore.fetchCollections("4", "modified");
|
||||
await this.tainacanStore.fetchCollections({ perPage: "4", orderBy: "modified" });
|
||||
await this.tainacanStore.fetchItems();
|
||||
this.setIsLoading(false);
|
||||
}
|
||||
|
|
|
@ -15,44 +15,72 @@ const useTainacanStore = defineStore("tainacan", {
|
|||
},
|
||||
|
||||
actions: {
|
||||
async fetchCollections(perPage: string, orderBy: string) {
|
||||
async fetchCollections(params: { perPage: string, orderBy: string }) {
|
||||
try {
|
||||
const wpStore = useWpStore();
|
||||
const response = await axios.get(
|
||||
`${wpStore.userSiteUrl}/wp-json/tainacan/v2/collections?${
|
||||
perPage ? "perpage=" + perPage : ""
|
||||
}&${orderBy ? "orderby=" + orderBy : ""}`
|
||||
);
|
||||
|
||||
let endpoint = `${wpStore.userSiteUrl}/wp-json/tainacan/v2/collections?`;
|
||||
|
||||
if (params && params.perPage)
|
||||
endpoint += '&perpage=' + params.perPage;
|
||||
|
||||
if (params && params.orderBy)
|
||||
endpoint += '&orderby=' + params.orderBy;
|
||||
|
||||
const response = await axios.get(endpoint);
|
||||
|
||||
this.collections = response.data;
|
||||
|
||||
} catch (err) {
|
||||
this.collections = [];
|
||||
|
||||
console.error("Erro no carregamento das coleções:", err);
|
||||
|
||||
return err;
|
||||
}
|
||||
},
|
||||
|
||||
async fetchItemsByCollection(collectionId: string) {
|
||||
async fetchItemsByCollection(collectionId: string, params: { perPage: string, orderBy: string }) {
|
||||
try {
|
||||
const wpStore = useWpStore();
|
||||
this.collectionItems = [];
|
||||
const response = await axios.get(
|
||||
`${wpStore.userSiteUrl}/wp-json/tainacan/v2/collection/${collectionId}/items?perpage=12&orderby=modified&fetch_only=id,title,thumbnail`
|
||||
);
|
||||
|
||||
let endpoint = `${wpStore.userSiteUrl}/wp-json/tainacan/v2/collection/${collectionId}/items?fetch_only=id,title,thumbnail`;
|
||||
|
||||
if (params && params.perPage)
|
||||
endpoint += '&perpage=' + params.perPage;
|
||||
|
||||
if (params && params.orderBy)
|
||||
endpoint += '&orderby=' + params.orderBy;
|
||||
|
||||
const response = await axios.get(endpoint);
|
||||
|
||||
this.collectionItems = response.data.items;
|
||||
|
||||
} catch (err) {
|
||||
this.collectionItems = [];
|
||||
|
||||
console.error("Erro no carregamento dos items da coleção:", err);
|
||||
|
||||
return err;
|
||||
}
|
||||
},
|
||||
|
||||
async fetchItems() {
|
||||
async fetchItems(params: { perPage: string, orderBy: string }) {
|
||||
try {
|
||||
const wpStore = useWpStore();
|
||||
this.items = [];
|
||||
const response = await axios.get(
|
||||
`${wpStore.userSiteUrl}/wp-json/tainacan/v2/items?perpage=12&orderby=modified&fetch_only=id,title,thumbnail`
|
||||
);
|
||||
|
||||
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;
|
||||
|
||||
const response = await axios.get(endpoint);
|
||||
|
||||
this.items = response.data.items;
|
||||
} catch (err) {
|
||||
this.items = [];
|
||||
|
|
Loading…
Reference in New Issue