Feat/select bays in sidebar #253
Conversation
There was a problem hiding this comment.
You could. It was meant as an abstraction layer if any changes comes from the api or if you need to consolidate data before sending it to you plugin. It's part of good practices to have those kind of layers (maybe it feel a bit overengineering here with our API, but it's a good habit to have ;) )
| function handleSearch() { | ||
| filteredIEDs = IEDs.filter(ied => ied.label.toLowerCase().includes(searchQuery.toLowerCase())) | ||
| filteredBays = bays.filter(bay => bay.toLowerCase().includes(searchQuery.toLowerCase())) | ||
| } |
There was a problem hiding this comment.
I think you should avoid mutating variable available in the global scope like that. If you are changing the values elsewhere, you will have some strange side effect.
You could wrap the whole in a new object that you will return or make filteredIEDs & filteredBays directly reactive. Something like (not tested) :
$: filteredIEDs: (searchQuery && IEDs?.filter(ied => ied.label.toLowerCase().includes(searchQuery.toLowerCase()))) || IEDs| on:input={handleSearch} | ||
| on:focus={handleSearchFocus} | ||
| on:blur={handleSearchBlur} |
There was a problem hiding this comment.
Making filteredIEDs & filteredBays reactive will make these function irrelevant I think.
| {#if searchFocus} | ||
| <div class="dropdown"> | ||
| {#if filteredIEDs.length > 0} | ||
| <div class="dropdown_label"> | ||
| IEDs ({filteredIEDs.length}) | ||
| </div> | ||
| {#each filteredIEDs as ied} | ||
| <div class="dropdown_content" role="button" tabindex="0" on:mousedown={handleDropdownSelect}> | ||
| {ied.label} | ||
| </div> | ||
| {/each} | ||
| {#if filteredBays.length > 0} | ||
| <hr> | ||
| {/if} |
There was a problem hiding this comment.
Ha I see that you still need the focus variable. To make it less verbose you can write this like that :
<script>
let isIEDSearchInputFocused = false
</script>
<input
type="text"
placeholder="Filter IED or bay"
bind:value={searchQuery}
on:focus={() => isIEDSearchInputFocused = true}
on:blur={() => isIEDSearchInputFocused = false}
</input>Making the variable name very specific, will also lower the risks to reuse the variables for another input and have weird side effects.
🗒 Description
reworked the communication explorer sidebar selection menu.
Now both IEDs and bays can be selected. Selecting a bay will select all contained IEDs
📷 Demo screen recording or Screenshots
OpenSCD.Mozilla.Firefox.2025-01-17.17-07-15.mp4
📋 Checklist
You may remove tasks that do not make sense in this PR.
🔦 Useful commits
You can add specific commits which are worth taking a look into