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

Rename baseCollection

This commit is contained in:
joycitta-siqueira 2022-05-01 15:59:27 -03:00
parent 8585ba1ad4
commit 99a9ac491a
3 changed files with 4 additions and 111 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
src/components/base/BaseCollectionList.vue
View File

@ -1,56 +0,0 @@
<template>
<ion-loading
:is-open="isOpenRef"
cssClass="my-custom-class"
message="Carregando..."
>
</ion-loading>
<ion-list>
<ion-item v-for="collection of collectionsStore.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>
</template>
<script lang="ts">
import {
useCollectionsStore
} from '../../store/storeCollections';
import {
IonList,
IonItem,
IonImg,
IonThumbnail,
IonLoading,
IonLabel,
} from '@ionic/vue';
import { computed, ref } from 'vue';
export default {
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 collectionsStore = useCollectionsStore();
return { image, isOpenRef, setOpen, collectionsStore }
},
async created(){
this.setOpen(true);
await this.collectionsStore.fetchCollections();
this.setOpen(false);
},
}
</script>

51
src/components/base/BaseItemList.vue
View File

@ -1,51 +0,0 @@
<template>
<ion-loading
:is-open="isOpenRef"
cssClass="my-custom-class"
message="Carregando..."
>
</ion-loading>
<ion-card v-for="item of collectionsStore.items" :key="item.id">
<ion-card-title v-if="item.title"> {{ item.title }} </ion-card-title>
<ion-card-title v-else>Item não possui título</ion-card-title>
<ion-card-content>
<ion-img :src="item.thumbnail.medium[0]" :alt="item.title"></ion-img>
</ion-card-content>
</ion-card>
</template>
<script lang="ts">
import {
useCollectionsStore
} from '../../store/storeCollections';
import {
IonCard,
IonLoading,
} from '@ionic/vue';
import { ref } from 'vue';
export default {
components: {
IonCard,
IonLoading,
},
setup() {
const isOpenRef = ref(false);
const setOpen = (state: boolean) => isOpenRef.value = state;
let collectionsStore = useCollectionsStore();
return { isOpenRef, setOpen, collectionsStore }
},
data() {
return {
items: [],
collectionId: this.$route.params.id,
};
},
async created(){
this.setOpen(true)
await this.collectionsStore.fetchItems()
this.setOpen(false)
},
}
</script>

8
src/main.ts
View File

@ -2,8 +2,8 @@ import { createApp } from 'vue'
import App from './App.vue'
import BaseLayout from './components/base/BaseLayout.vue';
import BaseCollectionList from './components/base/BaseCollectionList.vue';
import BaseItemList from './components/base/BaseItemList.vue';
import CollectionList from './components/CollectionList.vue';
import ItemList from './components/ItemList.vue';
import router from './router';
import { createPinia } from 'pinia';
@ -36,8 +36,8 @@ const app = createApp(App)
.use(createPinia());
app.component('base-layout', BaseLayout);
app.component('base-collectionlist', BaseCollectionList);
app.component('base-itemlist', BaseItemList);
app.component('base-collectionlist', CollectionList);
app.component('base-itemlist', ItemList);
router.isReady().then(() => {
app.mount('#app');