68 lines
1.8 KiB
Vue
68 lines
1.8 KiB
Vue
<script setup>
|
|
import LoadMoreList from "components/LoadMoreList.vue";
|
|
import BasicListSkeleton from "components/basicSkeletons/BasicListSkeleton.vue";
|
|
|
|
const props = defineProps({
|
|
items: {
|
|
type: Array,
|
|
required: false
|
|
},
|
|
public: {
|
|
type: Boolean,
|
|
required: true
|
|
},
|
|
totalItemsCount: {
|
|
type: Number,
|
|
required: true
|
|
},
|
|
itemsPerPage: {
|
|
type: Number,
|
|
required: false,
|
|
default: 5,
|
|
},
|
|
isQueryRunning: {
|
|
type: Boolean,
|
|
required: false,
|
|
default: false
|
|
}
|
|
});
|
|
|
|
const getRoute = (item) => {
|
|
if (props.public)
|
|
return {name: "publicPOIDetail", params: {slug: item.urlSlug}}
|
|
else
|
|
return {name: "poiDetail", params: {id: item.id}}
|
|
};
|
|
</script>
|
|
<template>
|
|
<LoadMoreList :total-items-count="totalItemsCount" :items-length="items.length">
|
|
<template #items>
|
|
<q-list bordered separator>
|
|
<q-item clickable v-ripple v-for="poi of items" :key="poi" :to="getRoute(poi)">
|
|
<q-item-section avatar>
|
|
<q-avatar v-if="poi.titlePhoto">
|
|
<img :src="poi.titlePhoto.thumbnailUrl" alt=""/>
|
|
</q-avatar>
|
|
<q-avatar v-else :icon="poi.type?.icon || 'place'" color="primary" text-color="white"/>
|
|
</q-item-section>
|
|
<q-item-section>
|
|
{{ poi.name }}
|
|
<div class="text-secondary" v-if="poi.type">
|
|
{{ poi.type.name }}
|
|
</div>
|
|
</q-item-section>
|
|
<q-item-section side top v-if="!props.public && poi.isPublic">
|
|
<q-icon name="visibility"></q-icon>
|
|
</q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
</template>
|
|
<template #skeleton>
|
|
<BasicListSkeleton :items="itemsPerPage"/>
|
|
</template>
|
|
<template #loadMoreText>
|
|
Další
|
|
</template>
|
|
</LoadMoreList>
|
|
</template>
|