Transformations list: Persist & restore last search query (#3404)

Persistence was never implemented for the search box for
transformations. This was part of the TODO-V3.1 updates required.

Signed-off-by: Jeff James <jeff@james-online.com>

bundles/org.openhab.ui/web/src/js/stores/useLastSearchQueryStore.ts

@@ -9,6 +9,7 @@ export const useLastSearchQueryStore = defineStore('lastSearchQuery', () => {
   const lastScheduleSearchQuery = ref<string>('')
   const lastModelSearchQuery = ref<string>('')
   const lastRulesSearchQuery = ref<object>({})
+  const lastTransformationSearchQuery = ref<string>('')
 
   return {
     lastItemSearchQuery,
@@ -16,6 +17,7 @@ export const useLastSearchQueryStore = defineStore('lastSearchQuery', () => {
     lastPagesSearchQuery,
     lastScheduleSearchQuery,
     lastModelSearchQuery,
-    lastRulesSearchQuery
+    lastRulesSearchQuery,
+    lastTransformationSearchQuery
   }
 })

bundles/org.openhab.ui/web/src/pages/settings/transformations/transformations-list.vue

@@ -1,5 +1,5 @@
 <template>
-  <f7-page @page:afterin="onPageAfterIn">
+  <f7-page @page:afterin="onPageAfterIn" @page:beforeout="onPageBeforeOut">
     <f7-navbar>
       <oh-nav-content title="Transformations" back-link="Settings" back-link-url="/settings/">
         <template #right>
@@ -169,6 +169,9 @@ import ClipboardIcon from '@/components/util/clipboard-icon.vue'
 import EmptyStatePlaceholder from '@/components/empty-state-placeholder.vue'
 
 import { useRuntimeStore } from '@/js/stores/useRuntimeStore'
+import { useLastSearchQueryStore } from '@/js/stores/useLastSearchQueryStore'
+
+const lastSearchQueryStore = useLastSearchQueryStore()
 
 export default {
   props: {
@@ -189,8 +192,7 @@ export default {
       initSearchbar: false,
       selectedTransformations: [],
       groupBy: 'alphabetical',
-      showCheckboxes: false,
-      searchQuery: ''    // TODO-V3.1 - this was never implemented in exisitng UI
+      showCheckboxes: false
     }
   },
   computed: {
@@ -228,18 +230,28 @@ export default {
     onPageAfterIn () {
       this.load()
     },
+    onPageBeforeOut (event) {
+      lastSearchQueryStore.lastTransformationSearchQuery = this.$refs.searchbar?.$el.f7Searchbar.query
+    },
     load () {
       if (this.loading) return
       this.loading = true
-      this.loading = true
+
+      if (this.initSearchbar) {
+        lastSearchQueryStore.lastTransformationSearchQuery = this.$refs.searchbar?.$el.f7Searchbar.query
+      }
+      this.initSearchbar = false
+
       this.$oh.api.get('/rest/transformations').then((data) => {
         this.transformations = data.sort((a, b) => (a.label || a.uid).localeCompare(b.label || a.uid))
         this.loading = false
         this.ready = true
-        setTimeout(() => {
-          this.initSearchbar = true
+        this.initSearchbar = true
+
+        nextTick(() => {
           if (this.$refs.listIndex) this.$refs.listIndex.update()
           if (this.$device.desktop && this.$refs.searchbar) this.$refs.searchbar.$el.f7Searchbar.$inputEl[0].focus()
+          this.$refs.searchbar?.$el.f7Searchbar.search(lastSearchQueryStore.lastTransformationSearchQuery || '')
         })
       })
     },