From e782e6160dcc3cc82651aa207ce9748fa1fe2c40 Mon Sep 17 00:00:00 2001
From: Boubaker Khanfir <boubaker.khanfir@exoplatform.com>
Date: Fri, 17 May 2024 12:40:02 +0100
Subject: [PATCH] feat: Add Page Templates text filtering - MEED-6844 -
 Meeds-io/MIPs#133 (#64)

---
 .../components/header/Toolbar.vue                      |  2 +-
 .../components/list/PageTemplates.vue                  | 10 +++++++++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/layout-webapp/src/main/webapp/vue-app/page-templates-management/components/header/Toolbar.vue b/layout-webapp/src/main/webapp/vue-app/page-templates-management/components/header/Toolbar.vue
index bf6b0eb99..2a3177b1e 100644
--- a/layout-webapp/src/main/webapp/vue-app/page-templates-management/components/header/Toolbar.vue
+++ b/layout-webapp/src/main/webapp/vue-app/page-templates-management/components/header/Toolbar.vue
@@ -28,7 +28,7 @@
       placeholder: $t('pageTemplates.filter.placeholder'),
       tooltip: $t('pageTemplates.filter.placeholder'),
     }"
-    @filter-text-input-end-typing="$emit('page-templates-filter', $event)">
+    @filter-text-input="$emit('page-templates-filter', $event)">
     <template #left>
       <v-btn
         id="applicationToolbarLeftButton"
diff --git a/layout-webapp/src/main/webapp/vue-app/page-templates-management/components/list/PageTemplates.vue b/layout-webapp/src/main/webapp/vue-app/page-templates-management/components/list/PageTemplates.vue
index 3b7754a47..e40f79aac 100644
--- a/layout-webapp/src/main/webapp/vue-app/page-templates-management/components/list/PageTemplates.vue
+++ b/layout-webapp/src/main/webapp/vue-app/page-templates-management/components/list/PageTemplates.vue
@@ -1,7 +1,7 @@
 <template>
   <v-data-table
     :headers="headers"
-    :items="pageTemplates"
+    :items="filteredPageTemplates"
     :loading="loading"
     :disable-sort="$root.isMobile"
     :hide-default-header="$root.isMobile"
@@ -56,6 +56,14 @@ export default {
         },
       ];
     },
+    filteredPageTemplates() {
+      return this.keyword?.length && this.pageTemplates.filter(t => {
+        const name = this.$te(t.name) ? this.$t(t.name) : t.name;
+        const description = this.$te(t.description) ? this.$t(t.description) : t.description;
+        return name?.toLowerCase?.()?.includes(this.keyword.toLowerCase())
+          || this.$utils.htmlToText(description)?.toLowerCase?.()?.includes(this.keyword.toLowerCase());
+      }) || this.pageTemplates;
+    },
   },
   created() {
     this.refreshPageTemplates();