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

Adds pull refresh to every pages!

This commit is contained in:
mateuswetah 2022-05-27 11:31:56 -03:00
parent 7107954e21
commit a54832c8c7
7 changed files with 187 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
src/App.vue
View File

@ -1,31 +1,31 @@
<template>
<ion-app>
<ion-router-outlet />
</ion-app>
<ion-app>
<ion-router-outlet />
</ion-app>
</template>
<script lang="ts">
import { IonApp, IonRouterOutlet } from '@ionic/vue';
import { defineComponent } from 'vue';
import { Device, DevicePlugin } from '@capacitor/device';
import { IonApp, IonRouterOutlet } from "@ionic/vue";
import { defineComponent } from "vue";
import { Device, DevicePlugin } from "@capacitor/device";
export default defineComponent({
name: 'App',
components: {
IonApp,
IonRouterOutlet
},
mounted() {
const device: DevicePlugin = Device;
device.getLanguageCode().then((res) => {
console.log('Default lang', res.value);
if (res.value.includes('-')) {
const language = res.value.split('-')[0];
this.$i18n.locale = language;
} else {
this.$i18n.locale = res.value;
}
})
}
name: "App",
components: {
IonApp,
IonRouterOutlet,
},
mounted() {
const device: DevicePlugin = Device;
device.getLanguageCode().then((res) => {
console.log("Default lang", res.value);
if (res.value.includes("-")) {
const language = res.value.split("-")[0];
this.$i18n.locale = language;
} else {
this.$i18n.locale = res.value;
}
});
},
});
</script>

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

@ -1,10 +1,10 @@
<template>
<ion-row class="items-list-container">
<ion-col size="4" v-for="item of items" :key="item.id">
<ion-col size="4" v-for="(item, index) of items" :key="index">
<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.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 : $t('label_item_without_title') }}</ion-card-title>
</ion-card-header>
</ion-card>
</ion-col>

31
src/pages/CollectionPage.vue
View File

@ -1,5 +1,8 @@
<template>
<base-layout :page-title="$t('collection')" page-default-back-link="/collections">
<ion-refresher slot="fixed" @ionRefresh="doRefresh($event)">
<ion-refresher-content></ion-refresher-content>
</ion-refresher>
<ion-loading
:is-open="isLoading"
:message="$t('label_loading')"
@ -17,7 +20,9 @@ import { useRoute } from "vue-router";
import { ref } from 'vue';
import {
IonLoading
IonLoading,
IonRefresher,
IonRefresherContent
} from '@ionic/vue';
import BaseLayout from '@/components/base/BaseLayout.vue';
@ -27,12 +32,23 @@ export default {
components: {
BaseLayout,
ItemsList,
IonLoading
IonLoading,
IonRefresher,
IonRefresherContent
},
setup() {
const isLoading = ref(false);
const setIsLoading = (state: boolean) => isLoading.value = state;
const route = useRoute();
const collectionId = route.params.id + '';
const loadItemsByCollection = async () => {
await tainacanStore.fetchItemsByCollection(collectionId, { perPage: '24', orderBy: 'modified'});
}
const doRefresh = async (event: any) => {
await loadItemsByCollection();
if (event && event.target)
event.target.complete();
}
let tainacanStore = useTainacanStore();
@ -40,14 +56,15 @@ export default {
isLoading,
tainacanStore,
setIsLoading,
items: [],
collectionId: route.params.id,
loadItemsByCollection,
doRefresh,
collectionId
}
},
async created() {
this.setIsLoading(true)
await this.tainacanStore.fetchItemsByCollection(this.collectionId)
this.setIsLoading(false)
this.setIsLoading(true);
await this.loadItemsByCollection();
this.setIsLoading(false);
},
}
</script>

43
src/pages/CollectionsPage.vue
View File

@ -5,16 +5,24 @@
:message="$t('label_loading')"
>
</ion-loading>
<ion-refresher slot="fixed" @ionRefresh="doRefresh($event)">
<ion-refresher-content></ion-refresher-content>
</ion-refresher>
<ion-list>
<collections-list :collections="tainacanStore.collections"></collections-list>
</ion-list>
</base-layout>
</template>
<script>
<script lang="ts">
import CollectionsList from '@/components/lists/CollectionsList.vue';
import BaseLayout from '@/components/base/BaseLayout.vue';
import { IonLoading, IonList } from '@ionic/vue';
import {
IonLoading,
IonList,
IonRefresher,
IonRefresherContent
} from '@ionic/vue';
import {
useTainacanStore
@ -27,18 +35,37 @@ export default {
CollectionsList,
BaseLayout,
IonLoading,
IonList
IonList,
IonRefresher,
IonRefresherContent
},
setup() {
const isLoading = ref(false);
const setOpen = (state) => isLoading.value = state;
const setIsLoading = (state: boolean) => isLoading.value = state;
const loadCollections = async () => {
await tainacanStore.fetchCollections({ perPage: '24', orderBy: 'modified'});
}
const doRefresh = async (event: any) => {
await loadCollections();
if (event && event.target)
event.target.complete();
}
let tainacanStore = useTainacanStore();
return { tainacanStore, isLoading, setOpen }
return {
tainacanStore,
isLoading,
setIsLoading,
doRefresh,
loadCollections
}
},
async created(){
this.setOpen(true);
await this.tainacanStore.fetchCollections();
this.setOpen(false);
this.setIsLoading(true);
await this.loadCollections();
this.setIsLoading(false);
},
}

43
src/pages/HomePage.vue
View File

@ -1,5 +1,8 @@
<template>
<base-layout>
<ion-refresher slot="fixed" @ionRefresh="doRefresh($event)">
<ion-refresher-content></ion-refresher-content>
</ion-refresher>
<ion-loading
:is-open="isLoading"
:message="$t('label_loading')"
@ -7,28 +10,28 @@
</ion-loading>
<ion-list>
<ion-list-header>
{{ $t('collections') }}
{{ $t('label_last_modified_collections') }}
</ion-list-header>
<collections-list :collections="tainacanStore.collections"></collections-list>
<collections-list :collections="tainacanStore.homeCollections"></collections-list>
</ion-list>
<ion-button
v-if="tainacanStore.collections.length < tainacanStore.totalCollections"
v-if="tainacanStore.homeCollections.length < tainacanStore.totalHomeCollections"
fill="clear"
size="small"
routerLink="/collections">
{{ $t('label_view_all_collections', [tainacanStore.totalCollections]) }}
{{ $t('label_view_all_collections', [tainacanStore.totalHomeCollections]) }}
</ion-button>
<ion-list>
<ion-list-header>
{{ $t('items') }}
{{ $t('label_last_modified_items') }}
</ion-list-header>
<items-list :items="tainacanStore.items"></items-list>
<items-list :items="tainacanStore.homeItems"></items-list>
<ion-button
v-if="tainacanStore.items.length < tainacanStore.totalItems"
v-if="tainacanStore.homeItems.length < tainacanStore.totalHomeItems"
fill="clear"
size="small"
routerLink="/items">
{{ $t('label_view_all_items', [tainacanStore.totalItems]) }}
{{ $t('label_view_all_items', [tainacanStore.totalHomeItems]) }}
</ion-button>
</ion-list>
</base-layout>
@ -47,7 +50,9 @@ import {
IonButton,
IonLoading,
IonList,
IonListHeader
IonListHeader,
IonRefresher,
IonRefresherContent
} from '@ionic/vue';
export default {
@ -58,24 +63,36 @@ export default {
IonList,
IonListHeader,
IonButton,
IonLoading
IonLoading,
IonRefresher,
IonRefresherContent
},
setup() {
const isLoading = ref(false);
const setIsLoading = (state: boolean) => isLoading.value = state;
const loadCollectionsAndItems = async () => {
await tainacanStore.fetchHomeCollections();
await tainacanStore.fetchHomeItems();
}
const doRefresh = async (event: any) => {
await loadCollectionsAndItems();
if (event && event.target)
event.target.complete();
}
let tainacanStore = useTainacanStore();
return {
tainacanStore,
isLoading,
setIsLoading
setIsLoading,
loadCollectionsAndItems,
doRefresh
}
},
async created() {
this.setIsLoading(true);
await this.tainacanStore.fetchCollections({ perPage: "4", orderBy: "modified" });
await this.tainacanStore.fetchItems();
await this.loadCollectionsAndItems();
this.setIsLoading(false);
}
}

41
src/pages/ItemsPage.vue
View File

@ -5,6 +5,9 @@
:message="$t('label_loading')"
>
</ion-loading>
<ion-refresher slot="fixed" @ionRefresh="doRefresh($event)">
<ion-refresher-content></ion-refresher-content>
</ion-refresher>
<items-list :items="tainacanStore.items"></items-list>
</base-layout>
</template>
@ -14,7 +17,9 @@ import {
useTainacanStore
} from '../store/storeTainacan';
import {
IonLoading
IonLoading,
IonRefresher,
IonRefresherContent
} from '@ionic/vue';
import BaseLayout from '@/components/base/BaseLayout.vue';
import { ref } from 'vue';
@ -25,25 +30,37 @@ export default {
components: {
IonLoading,
ItemsList,
BaseLayout
BaseLayout,
IonRefresher,
IonRefresherContent
},
setup() {
const isLoading = ref(false);
const setOpen = (state: boolean) => isLoading.value = state;
const setIsLoading = (state: boolean) => isLoading.value = state;
const loadItems = async () => {
await tainacanStore.fetchItems({ perPage: '24', orderBy: 'modified'});
}
const doRefresh = async (event: any) => {
await loadItems();
if (event && event.target)
event.target.complete();
}
let tainacanStore = useTainacanStore();
return { isLoading, setOpen, tainacanStore }
},
data() {
return {
items: [],
collectionId: this.$route.params.id,
};
isLoading,
setIsLoading,
tainacanStore,
doRefresh,
loadItems
}
},
async created(){
this.setOpen(true)
await this.tainacanStore.fetchItems()
this.setOpen(false)
this.setIsLoading(true)
await this.loadItems();
this.setIsLoading(false)
},
}
</script>

45
src/store/storeTainacan.ts
View File

@ -5,6 +5,10 @@ import { useWpStore } from "./storeWp";
const useTainacanStore = defineStore("tainacan", {
state() {
return {
homeCollections: [],
totalHomeCollections: 0,
homeItems: [],
totalHomeItems: 0,
collections: [],
totalCollections: 0,
collectionItems: [],
@ -44,12 +48,32 @@ const useTainacanStore = defineStore("tainacan", {
}
},
async fetchHomeCollections() {
try {
const wpStore = useWpStore();
const endpoint = `${wpStore.userSiteUrl}/wp-json/tainacan/v2/collections?perpage=4&orderby=modified`;
const response = await axios.get(endpoint);
this.homeCollections = response.data;
this.totalHomeCollections = response.headers['x-wp-total'];
} catch (err) {
this.homeCollections = [];
this.totalHomeCollections = 0;
console.error("Erro no carregamento das coleções da home:", err);
return err;
}
},
async fetchItemsByCollection(collectionId: string, params: { perPage: string, orderBy: string }) {
try {
const wpStore = useWpStore();
this.collectionItems = [];
let endpoint = `${wpStore.userSiteUrl}/wp-json/tainacan/v2/collection/${collectionId}/items?fetch_only=id,title,thumbnail`;
let endpoint = `${wpStore.userSiteUrl}/wp-json/tainacan/v2/collection/${collectionId}/items?fetch_only=id,title,thumbnail&perpage=12&orderby=modified`;
if (params && params.perPage)
endpoint += '&perpage=' + params.perPage;
@ -71,10 +95,27 @@ const useTainacanStore = defineStore("tainacan", {
}
},
async fetchHomeItems() {
try {
const wpStore = useWpStore();
const endpoint = `${wpStore.userSiteUrl}/wp-json/tainacan/v2/items?fetch_only=id,title,thumbnail&perpage=12&orderby=modified`;
const response = await axios.get(endpoint);
this.homeItems = response.data.items;
this.totalHomeItems = response.headers['x-wp-total'];
} catch (err) {
this.homeItems = [];
this.totalHomeItems = 0;
console.error("Erro no carregamento dos items da home:", err);
return err;
}
},
async fetchItems(params: { perPage: string, orderBy: string }) {
try {
const wpStore = useWpStore();
this.items = [];
let endpoint = `${wpStore.userSiteUrl}/wp-json/tainacan/v2/items?fetch_only=id,title,thumbnail`;