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

issue #6 collection

This commit is contained in:
joycitta-siqueira 2022-05-01 18:19:54 -03:00
parent 424b453869
commit a1d607c94c
4 changed files with 46 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/components/CollectionList.vue
View File

@ -1,12 +1,6 @@
<template>
<ion-loading
:is-open="isOpenRef"
cssClass="my-custom-class"
message="Carregando..."
>
</ion-loading>
<ion-list>
<ion-item v-for="collection of collectionStore.collections" :key="collection.id" :router-link="`/collections/${collection.id}`">
<ion-item v-for="collection of collections" :key="collection.id" :router-link="`/collections/${collection.id}`">
<ion-thumbnail slot="start">
<ion-img v-if="collection.thumbnail.thumbnail[0]" :src="collection.thumbnail.thumbnail[0]" :alt="collection.name"></ion-img>
<ion-img v-else :src="image" :alt="collection.name"></ion-img>
@ -17,39 +11,29 @@
</template>
<script lang="ts">
import {
useCollectionsStore
} from '../store/storeCollection';
import {
IonList,
IonItem,
IonImg,
IonThumbnail,
IonLoading,
IonLabel,
} from '@ionic/vue';
import { computed, ref } from 'vue';
import { computed } from 'vue';
export default {
props: [
"collections"
],
components: {
IonList,
IonItem,
IonImg,
IonThumbnail,
IonLabel,
IonLoading
},
setup() {
const image = computed (() => require('../assets/placeholder_square_small.png'))
const isOpenRef = ref(false);
const setOpen = (state: boolean) => isOpenRef.value = state;
let collectionStore = useCollectionsStore();
return { image, isOpenRef, setOpen, collectionStore }
},
async created(){
this.setOpen(true);
await this.collectionStore.fetchCollections();
this.setOpen(false);
return { image }
},
}
</script>

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

@ -3,6 +3,9 @@
<ion-header>
<ion-toolbar>
<ion-img width="80" height="80" :src="image" />
<ion-button expand="block" @click="logOff">
LogOff
</ion-button>
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="start">
@ -24,6 +27,11 @@
import {
useCollectionsStore
} from '../../store/storeCollection';
import {
useUserStore
} from '../../store/storeUser';
import {
IonPage,
IonHeader,
@ -35,6 +43,7 @@ import {
IonImg,
} from '@ionic/vue';
import { computed } from 'vue';
export default {
props: ['pageTitle', 'pageDefaultBackLink'],
components: {
@ -50,10 +59,17 @@ export default {
setup(){
const image = computed (() => require('../../assets/logo.png'))
let collectionStore = useCollectionsStore();
let userStore = useUserStore();
return {
image, collectionStore,
}
image, collectionStore, userStore
}
},
methods: {
async logOff(){
await this.userStore.userLogOff();
this.$router.go();
}
}
}
</script>

52
src/pages/ColletionsFull.vue
View File

@ -1,60 +1,44 @@
<template>
<base-layout page-title="Collections List">
<ion-loading
:is-open="isOpenRef"
cssClass="my-custom-class"
message="Carregando..."
>
</ion-loading>
<ion-list>
<ion-item v-for="collection of collectionStore.collections" :key="collection.id" :router-link="`/collections/${collection.id}`">
<ion-thumbnail slot="start">
<ion-img v-if="collection.thumbnail.thumbnail[0]" :src="collection.thumbnail.thumbnail[0]" :alt="collection.name"></ion-img>
<ion-img v-else :src="image" :alt="collection.name"></ion-img>
</ion-thumbnail>
<ion-label> {{ collection.name }} </ion-label>
</ion-item>
</ion-list>
<base-layout>
<ion-toolbar>
<ion-label>Coleções</ion-label>
</ion-toolbar>
<base-collection-list :collections="collectionStore.collections"></base-collection-list>
</base-layout>
</template>
<script lang="ts">
<script>
import BaseCollectionList from '@/components/CollectionList.vue';
import BaseLayout from '@/components/base/BaseLayout.vue';
import {
useCollectionsStore
} from '../store/storeCollection';
import {
IonList,
IonItem,
IonImg,
IonThumbnail,
IonLoading,
IonLabel,
} from '@ionic/vue';
import BaseLayout from '@/components/base/BaseLayout.vue';
import { computed, ref } from 'vue';
import { ref } from 'vue';
export default {
components: {
IonList,
IonItem,
IonImg,
IonThumbnail,
IonLabel,
IonLoading,
BaseLayout
BaseCollectionList,
BaseLayout,
},
setup() {
const image = computed (() => require('../assets/placeholder_square_small.png'))
const isOpenRef = ref(false);
const setOpen = (state: boolean) => isOpenRef.value = state;
const setOpen = (state) => isOpenRef.value = state;
let collectionStore = useCollectionsStore();
return { image, isOpenRef, setOpen, collectionStore }
return { collectionStore, isOpenRef, setOpen }
},
async created(){
this.setOpen(true);
await this.collectionStore.fetchFullCollections();
await this.collectionStore.fetchCollections();
this.setOpen(false);
},
}
</script>
</script>

15
src/store/storeCollection.ts
View File

@ -14,21 +14,10 @@ const useCollectionsStore = defineStore('collections', {
},
actions: {
async fetchCollections() {
async fetchCollections(perPage :string, orderBy :string) {
try {
const userStore = useUserStore();
const response = await axios.get(`${userStore.userSiteUrl}/wp-json/tainacan/v2/collections?perpage=4&orderby=modified`);
this.collections = response.data;
} catch (err) {
this.collections = [];
console.error('Erro no carregamento das coleções:', err);
return err;
}
},
async fetchFullCollections() {
try {
const userStore = useUserStore();
const response = await axios.get(`${userStore.userSiteUrl}/wp-json/tainacan/v2/collections`);
const response = await axios.get(`${userStore.userSiteUrl}/wp-json/tainacan/v2/collections?${perPage?"perpage="+perPage:""}&${orderBy?"orderby="+orderBy:""}`);
this.collections = response.data;
} catch (err) {
this.collections = [];