Vyhledavani i ve verejnych POI

src/pages/public/poi/PointsOfInterestPage.vue

@@ -6,8 +6,8 @@ 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} from "src/composables/pagination";
-
+import {loadPage, paginationLimit, paginationOffset} from "src/composables/pagination";
+import ListFilters from "components/ListFilters.vue";
 
 useAppStore().setPageTitle("Místa");
 useAppStore().setBreadcrumbs([
@@ -18,24 +18,32 @@ useMeta(() => metaData({
   title: "Místa"
 }))
 
-const loadNextPage = (appendItems) => loadPage({
+const loadNextPage = (appendItems, filters) => loadPage({
   fetchFunc: usePointsOfInterestStore().fetchPublic,
-  appendItems
+  filters, appendItems
 });
 loadNextPage(false);
+const handleFiltersChanged = (filters) => {
+  paginationOffset.value = 0;
+  loadNextPage(false, filters);
+}
 
 const {pointsOfInterest, totalItemsCount, isQueryRunning} = storeToRefs(usePointsOfInterestStore());
 </script>
 
 <template>
-  <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 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>