50 lines
1.5 KiB
Vue
50 lines
1.5 KiB
Vue
<script setup>
|
|
import {usePointsOfInterestStore} from "stores/PointsOfInterest";
|
|
import {storeToRefs} from "pinia";
|
|
import BasicListSkeleton from "components/basicSkeletons/BasicListSkeleton.vue";
|
|
import POIList from "components/poi/POIList.vue";
|
|
import {useAppStore} from "stores/App";
|
|
import {useMeta} from "quasar";
|
|
import {metaData} from "src/composables/meta";
|
|
import {loadPage, paginationLimit, paginationOffset} from "src/composables/pagination";
|
|
import ListFilters from "components/ListFilters.vue";
|
|
|
|
useAppStore().setPageTitle("Místa");
|
|
useAppStore().setBreadcrumbs([
|
|
{to: {name: 'homepage'}, label: "Polétání.cz"},
|
|
{label: "Místa"},
|
|
]);
|
|
useMeta(() => metaData({
|
|
title: "Místa"
|
|
}))
|
|
|
|
const loadNextPage = (appendItems, filters) => loadPage({
|
|
fetchFunc: usePointsOfInterestStore().fetchPublic,
|
|
filters, appendItems
|
|
});
|
|
loadNextPage(false);
|
|
const handleFiltersChanged = (filters) => {
|
|
paginationOffset.value = 0;
|
|
loadNextPage(false, filters);
|
|
}
|
|
|
|
const {pointsOfInterest, totalItemsCount, isQueryRunning} = storeToRefs(usePointsOfInterestStore());
|
|
</script>
|
|
|
|
<template>
|
|
<div class="q-pa-md">
|
|
<ListFilters @filters-changed="handleFiltersChanged"/>
|
|
|
|
<BasicListSkeleton :items="paginationLimit" v-if="isQueryRunning && !pointsOfInterest.length"/>
|
|
<POIList
|
|
v-else
|
|
:public="true"
|
|
:items="pointsOfInterest"
|
|
:total-items-count="totalItemsCount"
|
|
:is-query-running="isQueryRunning"
|
|
:items-per-page="paginationLimit"
|
|
@load-more="loadNextPage(true)"
|
|
/>
|
|
</div>
|
|
</template>
|