From dfed63f748a561c5a96300737ad8fb0807829503 Mon Sep 17 00:00:00 2001
From: Jonas <jonas@freesources.org>
Date: Tue, 24 Sep 2024 18:48:27 +0200
Subject: [PATCH] fix(PageList): Add icon to clear the filter/search string

Fixes: #1501

Signed-off-by: Jonas <jonas@freesources.org>
---
 src/components/PageList.vue | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/components/PageList.vue b/src/components/PageList.vue
index 2eb76aead..f8acc67d1 100644
--- a/src/components/PageList.vue
+++ b/src/components/PageList.vue
@@ -10,7 +10,10 @@
 				:label="t('collectives', 'Search pages')"
 				:value.sync="filterString"
 				class="page-filter"
-				:placeholder="t('collectives', 'Search pages ...')" />
+				:placeholder="t('collectives', 'Search pages ...')"
+				trailing-button-icon="close"
+				:show-trailing-button="isFilteredView"
+				@trailing-button-click="clearFilterString" />
 			<NcActions class="toggle toggle-push-to-right">
 				<NcActionButton class="toggle-button"
 					:aria-label="labels.showTemplates"
@@ -95,9 +98,9 @@
 				:key="templateView.id"
 				:page="templateView"
 				:level="1"
-				:filtered-view="isFilteredview"
+				:filtered-view="isFilteredView"
 				:is-template="true" />
-			<div v-if="isFilteredview" ref="pageListFiltered" class="page-list-filtered">
+			<div v-if="isFilteredView" ref="pageListFiltered" class="page-list-filtered">
 				<NcAppNavigationCaption v-if="filteredPages.length > 0" :name="t('Collectives','Results in title')" />
 				<RecycleScroller v-if="filteredPages.length > 0"
 					v-slot="{ item }"
@@ -133,7 +136,7 @@
 			<Draggable v-else
 				:list="subpages"
 				:parent-id="rootPage.id"
-				:disable-sorting="isFilteredview">
+				:disable-sorting="isFilteredView">
 				<SubpageList v-for="page in subpages"
 					:key="page.id"
 					:data-page-id="page.id"
@@ -273,7 +276,7 @@ export default {
 			return (sortOrder) => this.sortByOrder === sortOrder
 		},
 
-		isFilteredview() {
+		isFilteredView() {
 			return this.filterString !== ''
 		},
 
@@ -351,6 +354,10 @@ export default {
 		...mapActions(usePagesStore, ['setPageOrder', 'toggleTemplates']),
 		...mapActions(useSearchStore, ['setSearchQuery']),
 
+		clearFilterString() {
+			this.filterString = ''
+		},
+
 		/**
 		 * Change page sort order and scroll to current page
 		 *