Skip to content

Commit

Permalink
Developer sidebar: Add search for persistence configs & Style enhance…
Browse files Browse the repository at this point in the history 
…ments (#2208)

This adds support to the developer sidebar search to search persistence
configs by:
- serviceId
- label
- Items included in them

It also fixes a styling issue, where tools where to close to the search
bar and search results were far away from the search bar.

---------

Signed-off-by: Florian Hotze <florianh_dev@icloud.com>
  • Loading branch information
@florian-h05
florian-h05 authored Dec 9, 2023
1 parent 0c199ec commit 4fd7c8c
Show file tree
Hide file tree
Showing 2 changed files with 107 additions and 11 deletions.
96 changes: 87 additions & 9 deletions bundles/org.openhab.ui/web/src/components/developer/developer-sidebar.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -186,6 +186,26 @@
</ul>
</f7-list>
</f7-block>
<!-- Pinned Persistence configs -->
<f7-block class="no-margin no-padding" v-if="pinnedObjects.persistenceConfigs.length">
<f7-block-title class="padding-horizontal display-flex">
<span>Pinned Persistence Configs</span>
<span style="margin-left:auto">
<f7-link color="gray" icon-f7="multiply" icon-size="14" @click="unpinAll('persistenceConfigs')" />
</span>
</f7-block-title>
<f7-list media-list>
<ul>
<f7-list-item v-for="persistenceConfig in pinnedObjects.persistenceConfigs" :key="persistenceConfig.serviceId" media-item
:title="persistenceConfig.label" :footer="persistenceConfig.serviceId">
<div class="display-flex align-items-flex-end justify-content-flex-end" style="margin-top: 3px" slot="footer">
<f7-link class="margin-right" color="gray" icon-f7="pencil" icon-size="18" tooltip="Edit" :href="'/settings/persistence/' + persistenceConfig.serviceId" :animate="false" />
<f7-link color="red" icon-f7="pin_slash_fill" icon-size="18" tooltip="Unpin" @click="unpin('persistenceConfig', persistenceConfig, 'serviceId')" />
</div>
</f7-list-item>
</ul>
</f7-list>
</f7-block>
</div>

<div v-else-if="activeToolTab === 'events'">
Expand Down Expand Up @@ -302,7 +322,7 @@
<f7-popover ref="itemPopover" class="item-popover">
<item-standalone-control v-if="openedItem" :item="openedItem" :context="context" :no-border="true" />
</f7-popover>
<search-results v-if="searching" :searchResults="searchResults" :pinnedObjects="pinnedObjects" @pin="pin" @unpin="unpin" :cachedObjects="cachedObjects" :loading="searchResultsLoading" />
<search-results v-if="searching" class="margin-top" :searchResults="searchResults" :pinnedObjects="pinnedObjects" @pin="pin" @unpin="unpin" :cachedObjects="cachedObjects" :loading="searchResultsLoading" />
</f7-block>
</template>

Expand All @@ -316,7 +336,7 @@
width 100%
.developer-sidebar-content
padding-top 0.3rem
margin-top 1rem
&.page
background #e7e7e7 !important
Expand Down Expand Up @@ -367,7 +387,8 @@ export default {
scenes: [],
scripts: [],
pages: [],
transformations: []
transformations: [],
persistenceConfigs: []
},
pinnedObjects: {
items: [],
Expand All @@ -376,7 +397,8 @@ export default {
scenes: [],
scripts: [],
pages: [],
transformations: []
transformations: [],
persistenceConfigs: []
},
sseEvents: [],
openedItem: null,
Expand Down Expand Up @@ -546,6 +568,54 @@ export default {
if (p.slots && JSON.stringify(p.slots).toLowerCase().indexOf(query) >= 0) return true
return false
},
/**
* Search for the query string inside a persistence configuration.
* All searches are non case-intensive.
*
* Checks:
* - serviceId
* - label
* - Items
*
* @param pc persistence config
* @param query search query (as typed, not in lowercase)
* @returns {boolean}
*/
searchPersistenceConfigs (pc, query) {
query = query.toLowerCase()
if (pc.serviceId.toLowerCase().indexOf(query) >= 0) return true
if (pc.label.toLowerCase().indexOf(query) >= 0) return true
for (const conf of pc.configs) {
if (conf.items.toString().toLowerCase().indexOf(query) >= 0) return true
}
return false
},
/**
* Load all persistence configs and extend them with the persistence service label.
*
* @returns {Promise} load promise
*/
loadPersistenceConfigs () {
return this.$oh.api.get('/rest/persistence').then((data) => {
const labels = {}
data.forEach((p) => {
labels[p.id] = p.label
})
const loadPromises = data.map(p => this.$oh.api.get('/rest/persistence/' + p.id))
const configs = []
Promise.allSettled(loadPromises).then((results) => {
for (const result of results) {
if (result.value) {
result.value.label = labels[result.value.serviceId]
configs.push(result.value)
}
}
})
return configs
})
},
search (searchbar, query, previousQuery) {
if (!query) {
this.clearSearch()
Expand All @@ -563,20 +633,21 @@ export default {
Promise.resolve(this.cachedObjects[2]),
Promise.resolve(this.cachedObjects[3]),
Promise.resolve(this.cachedObjects[4]),
Promise.resolve(this.cachedObjects[5])
Promise.resolve(this.cachedObjects[5]),
Promise.resolve(this.cachedObjects[6])
] : [
this.$oh.api.get('/rest/items?staticDataOnly=true&metadata=.*'),
this.$oh.api.get('/rest/things?summary=true'),
this.$oh.api.get('/rest/rules?summary=false'),
Promise.resolve(this.$store.getters.pages),
this.$oh.api.get('/rest/transformations'),
this.$oh.api.get('/rest/ui/components/system:sitemap')
this.$oh.api.get('/rest/ui/components/system:sitemap'),
this.loadPersistenceConfigs()
]
this.searchResultsLoading = true
Promise.all(promises).then((data) => {
this.$set(this, 'cachedObjects', data)
this.searchResultsLoading = false
const items = data[0].filter((i) => this.searchItem(i, this.searchQuery)).sort((a, b) => {
const labelA = a.name
const labelB = b.name
Expand Down Expand Up @@ -606,23 +677,30 @@ export default {
const labelB = b.name
return (labelA) ? labelA.localeCompare(labelB) : 0
})
const persistenceConfigs = data[6].filter((pc) => this.searchPersistenceConfigs(pc, this.searchQuery)).sort((a, b) => {
const idA = a.id
const idB = b.id
return (idA) ? idA.localeCompare(idB) : 0
})
this.$set(this, 'searchResults', {
items,
things,
rules,
scenes,
scripts,
pages,
transformations
transformations,
persistenceConfigs
})
this.searchResultsLoading = false
})
},
clearSearch () {
this.searching = false
this.searchResultsLoading = false
this.searchSuery = ''
this.$set(this, 'cachedObjects', null)
this.$set(this, 'searchResults', { items: [], things: [], rules: [], pages: [] })
this.$set(this, 'searchResults', { items: [], things: [], rules: [], scenes: [], scripts: [], pages: [], transformations: [], persistenceConfigs: [] })
},
pin (type, obj) {
this.pinnedObjects[type].push(obj)
Expand Down
22 changes: 20 additions & 2 deletions bundles/org.openhab.ui/web/src/components/developer/search-results.vue
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<div class="after-big-title">
<div>
<f7-block v-if="loading" class="text-align-center">
<f7-preloader />
<div>Loading...</div>
Expand Down Expand Up @@ -126,6 +126,23 @@
</f7-list-button>
</f7-list>
</f7-block>
<!-- Persistence configs -->
<f7-block class="no-margin no-padding" v-if="searchResults.persistenceConfigs.length">
<f7-block-title class="padding-left">
<f7-icon class="margin-right" f7="download_circle" />Persistence Configs ({{ searchResults.persistenceConfigs.length }})
</f7-block-title>
<f7-list media-list>
<f7-list-item media-item v-for="persistenceConfig in filteredSearchResults.persistenceConfigs" :key="persistenceConfig.serviceId"
:title="persistenceConfig.label" :footer="persistenceConfig.serviceId" link="" no-chevron @click="(evt) => togglePin(evt, 'persistenceConfigs', persistenceConfig, 'serviceId')">
<f7-link slot="after" color="gray" icon-f7="pencil" icon-size="18" tooltip="Edit" :href="'/settings/persistence/' + persistenceConfig.serviceId" :animate="false" />
<f7-link slot="after" v-if="isPinned('persistenceConfigs', persistenceConfig, 'serviceId')" @click="$emit('unpin', 'persistenceConfigs', persistenceConfig, 'serviceId')" color="red" icon-f7="pin_slash_fill" icon-size="18" tooltip="Unpin" />
<f7-link slot="after" v-else @click="$emit('pin', 'persistenceConfigs', persistenceConfig, 'serviceId')" color="blue" icon-f7="unpin" icon-size="18" tooltip="Pin" />
</f7-list-item>
<f7-list-button v-if="!showingAll('persistenceConfigs')" color="blue" @click="$set(expandedTypes, 'persistenceConfigs', true)">
Show All
</f7-list-button>
</f7-list>
</f7-block>
</div>
</template>

Expand Down Expand Up @@ -161,7 +178,8 @@ export default {
const scripts = (this.expandedTypes.scripts) ? this.searchResults.scripts : (this.searchResults.scripts ? this.searchResults.scripts.slice(0, 5) : [])
const pages = (this.expandedTypes.pages) ? this.searchResults.pages : (this.searchResults.pages ? this.searchResults.pages.slice(0, 5) : [])
const transformations = (this.expandedTypes.transformations) ? this.searchResults.transformations : (this.searchResults.transformations ? this.searchResults.transformations.slice(0, 5) : [])
return { items, things, rules, scenes, scripts, pages, transformations }
const persistenceConfigs = (this.expandedTypes.persistenceConfigs) ? this.searchResults.persistenceConfigs : (this.searchResults.persistenceConfigs ? this.searchResults.persistenceConfigs.slice(0, 5) : [])
return { items, things, rules, scenes, scripts, pages, transformations, persistenceConfigs }
}
},
watch: {
Expand Down

0 comments on commit 4fd7c8c

Please sign in to comment.