Vyhledavani v POI

src/components/ListFilters.vue

@@ -0,0 +1,30 @@
+<script setup>
+import {commonProps} from "src/composables/inputs";
+import {ref, watch} from "vue";
+import {debounce} from "quasar";
+
+const props = defineProps({
+  emitDebounce: {
+    type: Number,
+    required: false,
+    default: 200
+  }
+})
+const emits = defineEmits(["filtersChanged"]);
+
+const filters = ref({
+  search: ""
+});
+
+watch((() => filters.value), debounce(() => {
+  emits("filtersChanged", filters.value)
+}, props.emitDebounce), {deep: true});
+</script>
+
+<template>
+  <q-input v-model="filters.search" v-bind="commonProps" clearable>
+    <template #prepend>
+      <q-icon name="search"/>
+    </template>
+  </q-input>
+</template>

src/components/poi/POIList.vue

@@ -33,7 +33,7 @@ const getRoute = (item) => {
     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">

src/graphql/queries/poi.js

@@ -2,8 +2,8 @@ import gql from "graphql-tag";
 import {FRAGMENT_POI_FULL_INFO, FRAGMENT_POI_FULL_PRIVATE_INFO, FRAGMENT_POI_LIST_INFO} from "src/graphql/fragments/poi";
 
 export const POI_LIST = gql`
-query poiList($limit: Int!, $offset: Int) {
+query poiList($limit: Int!, $offset: Int, $search: String) {
-  pointsOfInterest (limit: $limit, offset: $offset) {
+  pointsOfInterest (limit: $limit, offset: $offset, search: $search) {
     totalItemsCount
     items {
       ...pointOfInterestListInfo

src/pages/profile/poi/PointsOfInterestPage.vue

@@ -6,21 +6,28 @@ import BasicListSkeleton from "components/basicSkeletons/BasicListSkeleton.vue";
 import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
 import {usePointsOfInterestStore} from "stores/PointsOfInterest";
 import {storeToRefs} from "pinia";
-import {loadPage, paginationLimit} from "src/composables/pagination";
+import {loadPage, paginationLimit, paginationOffset} from "src/composables/pagination";
+import ListFilters from "components/ListFilters.vue";
 
 useAppStore().setPageTitle("Zajímavá místa");
 
 paginationLimit.value = 15;
-const loadNextPage = (appendItems) => loadPage({
+const loadNextPage = (appendItems, filters = {}) => loadPage({
   fetchFunc: usePointsOfInterestStore().fetch,
-  appendItems
+  filters, appendItems
 });
 loadNextPage(false);
+const handleFiltersChanged = (filters) => {
+  paginationOffset.value = 0;
+  loadNextPage(false, filters);
+}
 
 const {isQueryRunning, totalItemsCount, pointsOfInterest} = storeToRefs(usePointsOfInterestStore());
 </script>
 
 <template>
+  <ListFilters @filters-changed="handleFiltersChanged"/>
+
   <BasicListSkeleton :items="10" v-if="isQueryRunning && !pointsOfInterest.length"/>
   <BasicInfoBanner
     v-else-if="!isQueryRunning && pointsOfInterest.length === 0"
@@ -40,6 +47,5 @@ const {isQueryRunning, totalItemsCount, pointsOfInterest} = storeToRefs(usePoint
     :items-per-page="paginationLimit"
     @load-more="loadNextPage(true)"
   />
-
   <FAB :router-link="{name: 'addPOI'}" mode="add"/>
 </template>

src/stores/PointsOfInterest.js

@@ -30,10 +30,10 @@ export const usePointsOfInterestStore = defineStore('PointsOfInterest', () => {
     return item;
   });
 
-  const fetch = ({limit = 100, offset = 0, appendItems}) => query({
+  const fetch = ({limit = 100, offset = 0, appendItems, search = undefined}) => query({
     isQueryRunning,
     query: POI_LIST,
-    variables: {limit, offset}
+    variables: {limit, offset, search}
   }).then(data => setItems(data, appendItems, pointsOfInterest, totalItemsCount));
 
   const fetchPublic = ({limit, offset, appendItems}) => query({