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-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-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-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> </ion-item>
</template> </template>
@ -13,7 +29,9 @@ import {
IonImg, IonImg,
IonThumbnail, IonThumbnail,
IonLabel, IonLabel,
IonIcon
} from '@ionic/vue'; } from '@ionic/vue';
import { lockClosedOutline, readerOutline, trashOutline } from 'ionicons/icons';
import { computed } from 'vue'; import { computed } from 'vue';
export default { export default {
@ -25,10 +43,11 @@ export default {
IonImg, IonImg,
IonThumbnail, IonThumbnail,
IonLabel, IonLabel,
IonIcon
}, },
setup() { setup() {
const thumbnailPlaceholder = computed (() => require('../../assets/placeholder_square_small.png')) const thumbnailPlaceholder = computed (() => require('../../assets/placeholder_square_small.png'))
return { thumbnailPlaceholder } return { thumbnailPlaceholder, lockClosedOutline, readerOutline, trashOutline }
}, },
} }
</script> </script>

View File

@ -1,10 +1,10 @@
<template> <template>
<ion-row class="items-list-container"> <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-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-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-header>
</ion-card> </ion-card>
</ion-col> </ion-col>

View File

@ -1,9 +1,9 @@
export const translationStrings = { export const translationStrings = {
en: { en: {
collections: 'Collections', collections: 'Collections',
label_view_all_collections: 'View all collections', label_view_all_collections: 'View all {0} collections',
items: 'Items', items: 'Items',
label_view_all_items: 'View all items', label_view_all_items: 'View all {0} items',
label_loading: 'Loading...', label_loading: 'Loading...',
label_items_list: 'Items list', label_items_list: 'Items list',
label_collections_list: 'Collections list', label_collections_list: 'Collections list',
@ -16,13 +16,16 @@ export const translationStrings = {
placeholder_user_password: 'your password here', placeholder_user_password: 'your password here',
label_access_archive: 'Access archive', label_access_archive: 'Access archive',
label_item_without_title: 'Item without title', 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: { pt: {
collections: "Coleções", collections: "Coleções",
label_view_all_collections: "Ver todas as coleções", label_view_all_collections: "Ver todas as {0} coleções",
items: 'Itens', items: 'Itens',
label_view_all_items: 'Ver todos os itens', label_view_all_items: 'Ver todos os {0} itens',
label_loading: 'Carregando...', label_loading: 'Carregando...',
label_items_list: 'Lista de itens', label_items_list: 'Lista de itens',
label_collections_list: 'Lista de coleções', label_collections_list: 'Lista de coleções',
@ -35,6 +38,9 @@ export const translationStrings = {
placeholder_user_password: 'sua senha de usuário aqui', placeholder_user_password: 'sua senha de usuário aqui',
label_access_archive: 'Acessar acervo', label_access_archive: 'Acessar acervo',
label_item_without_title: 'Item sem título', 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> </ion-list-header>
<collections-list :collections="tainacanStore.collections"></collections-list> <collections-list :collections="tainacanStore.collections"></collections-list>
</ion-list> </ion-list>
<ion-button fill="clear" size="small" routerLink="/collections"> <ion-button
{{ $t('label_view_all_collections') }} v-if="tainacanStore.collections.length < tainacanStore.totalCollections"
fill="clear"
size="small"
routerLink="/collections">
{{ $t('label_view_all_collections', [tainacanStore.totalCollections]) }}
</ion-button> </ion-button>
<ion-list> <ion-list>
<ion-list-header> <ion-list-header>
{{ $t('items') }} {{ $t('items') }}
</ion-list-header> </ion-list-header>
<items-list :items="tainacanStore.items"></items-list> <items-list :items="tainacanStore.items"></items-list>
<ion-button fill="clear" size="small" routerLink="/items"> <ion-button
{{ $t('label_view_all_items') }} v-if="tainacanStore.items.length < tainacanStore.totalItems"
fill="clear"
size="small"
routerLink="/items">
{{ $t('label_view_all_items', [tainacanStore.totalItems]) }}
</ion-button> </ion-button>
</ion-list> </ion-list>
</base-layout> </base-layout>
@ -39,7 +47,7 @@ import {
IonButton, IonButton,
IonLoading, IonLoading,
IonList, IonList,
IonListHeader, IonListHeader
} from '@ionic/vue'; } from '@ionic/vue';
export default { export default {

View File

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