Search bars: Remember search query & Automatically focus on desktop (#…

…2827) Signed-off-by: Florian Hotze <[email protected]>
openhab · Oct 24, 2024 · 785d8f6 · 785d8f6
1 parent 30e4d48
commit 785d8f6
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 37 deletions.
diff --git a/bundles/org.openhab.ui/web/src/pages/settings/model/model.vue b/bundles/org.openhab.ui/web/src/pages/settings/model/model.vue
@@ -7,7 +7,7 @@
       <f7-subnavbar :inner="false" v-show="initSearchbar">
         <f7-searchbar
           v-if="initSearchbar"
-          :init="initSearchbar"
+          ref="searchbar"
           search-container=".semantic-tree"
           search-item=".treeview-item"
           search-in=".treeview-item-label"
@@ -268,9 +268,6 @@ export default {
       eventSource: null,
       itemDetailsKey: this.$f7.utils.id()
     }
-  },
-  created () {
-
   },
   computed: {
     empty () {
@@ -287,7 +284,7 @@ export default {
     }
   },
   methods: {
-    onPageAfterIn (ev) {
+    onPageAfterIn () {
       this.$store.dispatch('startTrackingStates')
       if (this.selectedItem) {
         this.update()
@@ -299,6 +296,7 @@ export default {
       this.detailsOpened = false
       this.$store.dispatch('stopTrackingStates')
       this.stopEventSource()
+      this.$f7.data.lastModelSearchQuery = this.$refs.searchbar?.f7Searchbar.query
     },
     modelItem (item) {
       const modelItem = {
@@ -326,9 +324,16 @@ export default {
       return modelItem
     },
     load () {
+      if (this.initSearchbar) this.$f7.data.lastModelSearchQuery = this.$refs.searchbar?.f7Searchbar.query
+      this.initSearchbar = false
+
       this.loadModel().then(() => {
+        this.initSearchbar = true
         this.$nextTick(() => {
-          this.initSearchbar = true
+          if (this.$device.desktop && this.$refs.searchbar) {
+            this.$refs.searchbar.f7Searchbar.$inputEl[0].focus()
+          }
+          this.$refs.searchbar?.f7Searchbar.search(this.$f7.data.lastModelSearchQuery || '')
           this.applyExpandedOption()
         })
         if (!this.eventSource) this.startEventSource()

diff --git a/bundles/org.openhab.ui/web/src/pages/settings/pages/pages-list.vue b/bundles/org.openhab.ui/web/src/pages/settings/pages/pages-list.vue
@@ -1,17 +1,16 @@
 <template>
-  <f7-page @page:afterin="onPageAfterIn" @page:afterout="onPageAfterOut">
+  <f7-page @page:afterin="onPageAfterIn" @page:beforeout="onPageBeforeOut">
     <f7-navbar title="Pages" back-link="Settings" back-link-url="/settings/" back-link-force>
       <f7-nav-right>
         <developer-dock-icon />
         <f7-link icon-md="material:done_all" @click="toggleCheck()"
                  :text="(!$theme.md) ? ((showCheckboxes) ? 'Done' : 'Select') : ''" />
       </f7-nav-right>
-      <f7-subnavbar :inner="false" v-show="initSearchbar">
+      <f7-subnavbar :inner="false" v-show="ready">
         <f7-searchbar
-          v-if="initSearchbar"
+          v-if="ready"
           ref="searchbar"
           class="searchbar-pages"
-          :init="initSearchbar"
           search-container=".pages-list"
           search-item=".pagelist-item"
           search-in=".item-title, .item-subtitle, .item-header, .item-footer"
@@ -161,7 +160,6 @@ export default {
       ready: false,
       loading: false,
       pages: [],
-      initSearchbar: false,
       selectedItems: [],
       groupBy: 'alphabetical',
       showCheckboxes: false,
@@ -213,12 +211,16 @@ export default {
     onPageAfterIn () {
       this.load()
     },
-    onPageAfterOut () {
-
+    onPageBeforeOut () {
+      this.$f7.data.lastPagesSearchQuery = this.$refs.searchbar?.f7Searchbar.query
     },
     load () {
       if (this.loading) return
       this.loading = true
+
+      if (this.ready) this.$f7.data.lastPagesSearchQuery = this.$refs.searchbar?.f7Searchbar.query
+      this.ready = false
+
       this.$set(this, 'selectedItems', [])
       this.showCheckboxes = false
       let promises = [
@@ -233,14 +235,13 @@ export default {
 
         this.loading = false
         this.ready = true
-        setTimeout(() => {
-          this.initSearchbar = true
-          this.$refs.listIndex.update()
-          this.$nextTick(() => {
-            if (this.$device.desktop && this.$refs.searchbar) {
-              this.$refs.searchbar.f7Searchbar.$inputEl[0].focus()
-            }
-          })
+
+        this.$nextTick(() => {
+          if (this.$refs.listIndex) this.$refs.listIndex.update()
+          if (this.$device.desktop && this.$refs.searchbar) {
+            this.$refs.searchbar.f7Searchbar.$inputEl[0].focus()
+          }
+          this.$refs.searchbar?.f7Searchbar.search(this.$f7.data.lastPagesSearchQuery || '')
         })
       })
     },

diff --git a/bundles/org.openhab.ui/web/src/pages/settings/schedule/schedule.vue b/bundles/org.openhab.ui/web/src/pages/settings/schedule/schedule.vue
@@ -1,16 +1,16 @@
 <template>
-  <f7-page @page:afterin="onPageAfterIn" @page:afterout="stopEventSource">
+  <f7-page @page:afterin="onPageAfterIn" @page:beforeout="onPageBeforeOut">
     <f7-navbar title="Schedule" back-link="Settings" back-link-url="/settings/" back-link-force>
       <f7-nav-right>
         <developer-dock-icon />
         <f7-link icon-md="material:done_all" @click="toggleCheck()"
                  :text="(!$theme.md) ? ((showCheckboxes) ? 'Done' : 'Select') : ''" />
       </f7-nav-right>
-      <f7-subnavbar :inner="false" v-show="initSearchbar">
+      <f7-subnavbar :inner="false" v-show="ready">
         <f7-searchbar
-          v-if="initSearchbar"
+          v-if="ready"
+          ref="searchbar"
           class="searchbar-schedule"
-          :init="initSearchbar"
           search-container=".timeline"
           search-item=".timeline-item-inner"
           search-in=".timeline-item-title"
@@ -92,7 +92,6 @@ export default {
       rules: [],
       noRuleEngine: false,
       calendar: {},
-      initSearchbar: false,
       selectedItems: [],
       showCheckboxes: false,
       eventSource: null
@@ -105,17 +104,24 @@ export default {
     onPageAfterIn () {
       this.load()
     },
+    onPageBeforeOut () {
+      this.stopEventSource()
+      this.$f7.data.lastScheduleSearchQuery = this.$refs.searchbar?.f7Searchbar.query
+    },
     load () {
       if (this.loading) return
       this.loading = true
+
+      if (this.ready) this.$f7.data.lastScheduleSearchQuery = this.$refs.searchbar?.f7Searchbar.query
+      this.ready = false
+
       let occurrences = []
 
       let start = new Date(), limit = new Date()
       limit.setDate(start.getDate() + 31)
 
       this.$oh.api.get('/rest/rules/schedule/simulations?from=' + start.toISOString() + '&until=' + limit.toISOString()).then(data => {
         this.rules = data
-        this.initSearchbar = true
         this.loading = false
 
         // map RulesExecutions per time
@@ -139,7 +145,6 @@ export default {
           const dayISODate = day.toISOString().split('T')[0]
           const dayOccurrences = occurrences.filter((o) => {
             const occurrenceISODate = o[0].split('T')[0]
-            const rule = o[1]
             return occurrenceISODate === dayISODate
           })
           cal[year][month][dayofmonth] = dayOccurrences
@@ -148,6 +153,13 @@ export default {
 
         this.ready = true
         if (!this.eventSource) this.startEventSource()
+
+        this.$nextTick(() => {
+          if (this.$device.desktop && this.$refs.searchbar) {
+            this.$refs.searchbar.f7Searchbar.$inputEl[0].focus()
+          }
+          this.$refs.searchbar?.f7Searchbar.search(this.$f7.data.lastScheduleSearchQuery || '')
+        })
       }).catch((err, status) => {
         if (err === 'Not Found' || status === 404) {
           this.noRuleEngine = true

diff --git a/bundles/org.openhab.ui/web/src/pages/settings/things/things-list.vue b/bundles/org.openhab.ui/web/src/pages/settings/things/things-list.vue
@@ -1,17 +1,16 @@
 <template>
-  <f7-page @page:afterin="onPageAfterIn" @page:afterout="stopEventSource">
+  <f7-page @page:afterin="onPageAfterIn" @page:beforeout="onPageBeforeOut">
     <f7-navbar title="Things" back-link="Settings" back-link-url="/settings/" back-link-force>
       <f7-nav-right>
         <developer-dock-icon />
         <f7-link icon-md="material:done_all" @click="toggleCheck()"
                  :text="(!$theme.md) ? ((showCheckboxes) ? 'Done' : 'Select') : ''" />
       </f7-nav-right>
-      <f7-subnavbar :inner="false" v-show="initSearchbar">
+      <f7-subnavbar :inner="false" v-show="ready">
         <f7-searchbar
-          v-if="initSearchbar"
+          v-if="ready"
           ref="searchbar"
           class="searchbar-things"
-          :init="initSearchbar"
           search-container=".contacts-list"
           search-in=".item-inner"
           :placeholder="searchPlaceholder"
@@ -172,7 +171,6 @@ export default {
     return {
       ready: false,
       loading: false,
-      initSearchbar: false,
       things: [],
       inbox: [],
       selectedItems: [],
@@ -246,16 +244,27 @@ export default {
     onPageAfterIn () {
       this.load()
     },
+    onPageBeforeOut () {
+      this.stopEventSource()
+      this.$f7.data.lastThingsSearchQuery = this.$refs.searchbar?.$el.f7Searchbar.query
+    },
     load () {
+      if (this.loading) return
       this.loading = true
+
+      if (this.ready) this.$f7.data.lastThingsSearchQuery = this.$refs.searchbar?.f7Searchbar.query
+      this.ready = false
+
       this.$oh.api.get('/rest/things?summary=true').then((data) => {
         this.things = data.sort((a, b) => (a.label || a.UID).localeCompare(b.label || a.UID))
-        this.initSearchbar = true
         this.loading = false
         this.ready = true
-        setTimeout(() => {
-          this.$refs.listIndex.update()
-          if (this.$device.desktop && this.$refs.searchbar) this.$refs.searchbar.f7Searchbar.$inputEl[0].focus()
+        this.$nextTick(() => {
+          if (this.$refs.listIndex) this.$refs.listIndex.update()
+          if (this.$device.desktop && this.$refs.searchbar) {
+            this.$refs.searchbar.f7Searchbar.$inputEl[0].focus()
+          }
+          this.$refs.searchbar?.f7Searchbar.search(this.$f7.data.lastThingsSearchQuery || '')
         })
         if (!this.eventSource) this.startEventSource()
       })