Vyhledavani i ve verejnych POI

src/graphql/queries/poi.js

@@ -15,8 +15,8 @@ ${FRAGMENT_POI_LIST_INFO}
 `;
 
 export const POI_PUBLIC_LIST = gql`
-query poiList($limit: Int!, $offset: Int) {
-  pointsOfInterest(limit: $limit, offset: $offset, public: true) {
+query poiList($limit: Int!, $offset: Int, $search: String) {
+  pointsOfInterest(limit: $limit, offset: $offset, search: $search, public: true) {
     totalItemsCount
     items {
       ...pointOfInterestListInfo

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>

src/stores/PointsOfInterest.js

@@ -36,10 +36,10 @@ export const usePointsOfInterestStore = defineStore('PointsOfInterest', () => {
     variables: {limit, offset, search}
   }).then(data => setItems(data, appendItems, pointsOfInterest, totalItemsCount));
 
-  const fetchPublic = ({limit, offset, appendItems}) => query({
+  const fetchPublic = ({limit, offset, appendItems, search = undefined}) => query({
     isQueryRunning,
     query: POI_PUBLIC_LIST,
-    variables: {limit, offset}
+    variables: {limit, offset, search}
   }).then(data => setItems(data, appendItems, pointsOfInterest, totalItemsCount));
 
   const create = (input) => mutate({