Adds totalItems and totalCollections info.

This commit is contained in:
mateuswetah 2022-05-27 10:40:54 -03:00
parent 726bd536f9
commit 7107954e21
5 changed files with 59 additions and 19 deletions

View File

@ -3,7 +3,23 @@
<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>
<ion-label> {{ collection.name ? collection.name : 'Coleção sem nome' }} </ion-label>
<ion-label>
<h2>
{{ collection.name ? collection.name : $t('label_collection_without_name') }}&nbsp;
<span v-if="collection.status === 'private'">
<ion-icon :icon="lockClosedOutline"></ion-icon>
</span>
<span v-else-if="collection.status === 'draft'">
<ion-icon :icon="readerOutline"></ion-icon>
</span>
<span v-else-if="collection.status === 'trash'">
<ion-icon :icon="trashOutline"></ion-icon>
</span>
</h2>
<p v-if="collection.total_items">
{{ $t('total_of_published_items', [collection.total_items.publish]) }}
</p>
</ion-label>
</ion-item>
</template>
@ -13,7 +29,9 @@ import {
IonImg,
IonThumbnail,
IonLabel,
IonIcon
} from '@ionic/vue';
import { lockClosedOutline, readerOutline, trashOutline } from 'ionicons/icons';
import { computed } from 'vue';
export default {
@ -25,10 +43,11 @@ export default {
IonImg,
IonThumbnail,
IonLabel,
IonIcon
},
setup() {
const thumbnailPlaceholder = computed (() => require('../../assets/placeholder_square_small.png'))
return { thumbnailPlaceholder }
return { thumbnailPlaceholder, lockClosedOutline, readerOutline, trashOutline }
},
}
</script>

View File

@ -1,10 +1,10 @@
<template>
<ion-row class="items-list-container">
<ion-col size="6" v-for="item of items" :key="item.id">
<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.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.thumbnail_alt ? item.thumbnail_alt : (item.title ? item.title : 'Imagem de item sem título'))"></ion-img>
<ion-card-header>
<ion-card-title> {{ item.title ? item.title : $('label_item_without_title') }} </ion-card-title>
<ion-card-title>{{ item.title ? item.title : $('label_item_without_title') }}</ion-card-title>
</ion-card-header>
</ion-card>
</ion-col>

View File

@ -1,9 +1,9 @@
export const translationStrings = {
en: {
collections: 'Collections',
label_view_all_collections: 'View all collections',
label_view_all_collections: 'View all {0} collections',
items: 'Items',
label_view_all_items: 'View all items',
label_view_all_items: 'View all {0} items',
label_loading: 'Loading...',
label_items_list: 'Items list',
label_collections_list: 'Collections list',
@ -16,13 +16,16 @@ export const translationStrings = {
placeholder_user_password: 'your password here',
label_access_archive: 'Access archive',
label_item_without_title: 'Item without title',
label_collection_without_name: 'Collection without name'
label_collection_without_name: 'Collection without name',
total_of_published_items: 'Total of {0} published items',
label_last_modified_collections: 'Last modified collections',
label_last_modified_items: 'Last modified itens'
},
pt: {
collections: "Coleções",
label_view_all_collections: "Ver todas as coleções",
label_view_all_collections: "Ver todas as {0} coleções",
items: 'Itens',
label_view_all_items: 'Ver todos os itens',
label_view_all_items: 'Ver todos os {0} itens',
label_loading: 'Carregando...',
label_items_list: 'Lista de itens',
label_collections_list: 'Lista de coleções',
@ -35,6 +38,9 @@ export const translationStrings = {
placeholder_user_password: 'sua senha de usuário aqui',
label_access_archive: 'Acessar acervo',
label_item_without_title: 'Item sem título',
label_collection_without_name: 'Coleção sem nome'
label_collection_without_name: 'Coleção sem nome',
total_of_published_items: 'Total de {0} itens públicos',
label_last_modified_collections: 'Coleções alteradas recentemente',
label_last_modified_items: 'Itens alterados recentemente'
}
}

View File

@ -11,16 +11,24 @@
</ion-list-header>
<collections-list :collections="tainacanStore.collections"></collections-list>
</ion-list>
<ion-button fill="clear" size="small" routerLink="/collections">
{{ $t('label_view_all_collections') }}
<ion-button
v-if="tainacanStore.collections.length < tainacanStore.totalCollections"
fill="clear"
size="small"
routerLink="/collections">
{{ $t('label_view_all_collections', [tainacanStore.totalCollections]) }}
</ion-button>
<ion-list>
<ion-list-header>
{{ $t('items') }}
</ion-list-header>
<items-list :items="tainacanStore.items"></items-list>
<ion-button fill="clear" size="small" routerLink="/items">
{{ $t('label_view_all_items') }}
<ion-button
v-if="tainacanStore.items.length < tainacanStore.totalItems"
fill="clear"
size="small"
routerLink="/items">
{{ $t('label_view_all_items', [tainacanStore.totalItems]) }}
</ion-button>
</ion-list>
</base-layout>
@ -39,7 +47,7 @@ import {
IonButton,
IonLoading,
IonList,
IonListHeader,
IonListHeader
} from '@ionic/vue';
export default {

View File

@ -6,8 +6,11 @@ const useTainacanStore = defineStore("tainacan", {
state() {
return {
collections: [],
totalCollections: 0,
collectionItems: [],
totalCollectionItems: 0,
items: [],
totalItems: 0,
siteUrl: "",
userLogin: "",
userPassword: "",
@ -30,10 +33,11 @@ const useTainacanStore = defineStore("tainacan", {
const response = await axios.get(endpoint);
this.collections = response.data;
this.totalCollections = response.headers['x-wp-total'];
} catch (err) {
this.collections = [];
this.totalCollections = 0;
console.error("Erro no carregamento das coleções:", err);
return err;
@ -56,10 +60,11 @@ const useTainacanStore = defineStore("tainacan", {
const response = await axios.get(endpoint);
this.collectionItems = response.data.items;
this.totalCollectionItems = response.headers['x-wp-total'];
} catch (err) {
this.collectionItems = [];
this.totalCollectionItems = 0;
console.error("Erro no carregamento dos items da coleção:", err);
return err;
@ -80,10 +85,12 @@ const useTainacanStore = defineStore("tainacan", {
endpoint += '&orderby=' + params.orderBy;
const response = await axios.get(endpoint);
this.items = response.data.items;
this.totalItems = response.headers['x-wp-total'];
} catch (err) {
this.items = [];
this.totalItems = 0;
console.error("Erro no carregamento dos items:", err);
return err;
}