From 418469d81c8b8767736fad625a2987a3b17cc5e8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Michal=20Kv=C3=A1=C4=8Dek?= <michal.kvacek@performax.cz>
Date: Thu, 1 Feb 2024 08:32:27 +0100
Subject: [PATCH] Vyhledavani v POI

---
 src/components/ListFilters.vue                | 30 +++++++++++++++++++
 src/components/poi/POIList.vue                |  2 +-
 src/graphql/queries/poi.js                    |  4 +--
 .../profile/poi/PointsOfInterestPage.vue      | 14 ++++++---
 src/stores/PointsOfInterest.js                |  4 +--
 5 files changed, 45 insertions(+), 9 deletions(-)
 create mode 100644 src/components/ListFilters.vue

diff --git a/src/components/ListFilters.vue b/src/components/ListFilters.vue
new file mode 100644
index 0000000..7bec26a
--- /dev/null
+++ b/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>
diff --git a/src/components/poi/POIList.vue b/src/components/poi/POIList.vue
index 968294a..8b88003 100644
--- a/src/components/poi/POIList.vue
+++ b/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">
diff --git a/src/graphql/queries/poi.js b/src/graphql/queries/poi.js
index 73725fe..33cb14b 100644
--- a/src/graphql/queries/poi.js
+++ b/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) {
-  pointsOfInterest (limit: $limit, offset: $offset) {
+query poiList($limit: Int!, $offset: Int, $search: String) {
+  pointsOfInterest (limit: $limit, offset: $offset, search: $search) {
     totalItemsCount
     items {
       ...pointOfInterestListInfo
diff --git a/src/pages/profile/poi/PointsOfInterestPage.vue b/src/pages/profile/poi/PointsOfInterestPage.vue
index dce728c..da2049d 100644
--- a/src/pages/profile/poi/PointsOfInterestPage.vue
+++ b/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>
diff --git a/src/stores/PointsOfInterest.js b/src/stores/PointsOfInterest.js
index 74f9221..808b573 100644
--- a/src/stores/PointsOfInterest.js
+++ b/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({