tmdinosaurcenter
/
tainacan-mobile
mirror of https://github.com/tainacan/tainacan-mobile.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Better styling and store functions parameters.

This commit is contained in:
mateuswetah 2022-05-26 16:53:59 -03:00
parent c9216203a9
commit 9dbc66a18e
5 changed files with 75 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/base/BaseLayout.vue
View File

@ -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">

10
src/components/lists/CollectionsList.vue
View File

@ -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>

24
src/components/lists/ItemsList.vue
View File

@ -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>

2
src/pages/HomePage.vue
View File

@ -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);
}

56
src/store/storeTainacan.ts
View File

@ -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 = [];