studio/www/html/menu.html

<style>

.search-box {
    background-color: #f3f3f3;
    display:grid;
    grid-template-columns: auto 50px ;
    gap:4px;
    align-content:center;
    
}    
.search-box input[type=text]{
    
    padding:4px;
    outline:0;
    border: 4px solid transparent;
    background-color: #d3d3d3;
}
.search-box input[type=text]:focus {
    border-left-color: #4682b4;;
}
.search-results {
    height:350px;
    overflow:hidden;
    overflow-y: auto;
    scroll-behavior: smooth;
}
.labels .button {padding:4px; margin:4px; align-items: center; display:grid; grid-template-columns: 50px auto; gap:8px; font-weight:bold;}
.labels img {width:30px; margin:4px;}

.studio .output {padding:4px;}

</style>
<script>
    var _init = function (){
        var http = HttpClient.instance()
        var uri = (['{{system.context}}','api/dbe/get']).join('/')
        http.get(uri,function (x){
            var labels = JSON.parse(x.responseText)
            
            labels.forEach(_data => {
                
                _icon = $('<img/>').attr('src',_data.icon) //'www/html/_assets/images/'+_data.provider+'.png')
                _label = $('<div></div>').html(_data.label)
                _div = $('<div class="active button"></div>').append(_icon,_label).attr('label',_data.label).attr('provider',_data.provider)
                
                _div[0]._data = _data
                _div[0].onclick = function (){
                    _id = '.studio-pane .'+this._data.label.trim()
                    $('.studio').slideUp()
                    if ($(_id).length == 0){
                        _object = new studio.frame(this._data)
                        _object.render()
                    }else{
                        $(_id).slideDown()
                    }

                }
                $('.search-results .labels').append(_div)
            });
        })
    }
    var _find = function (){
        var _val = $('.search-box .search-label').val().trim()
        if (_val.length > 2){
            // $('.search-results .labels .button').slideUp()
            var _nodes = $('.search-results .labels .button')
            _nodes.each(_index => {
                _item = _nodes[_index]
                console.log($(_item).attr(''))
                console.log([' **** '])
                p = $(_item).attr('provider')
                q = $(_item).attr('label')
                rgx = new RegExp(_val)
                if (p.match(rgx) || q.match(rgx)){
                    $(_item).slideDown()
                }else{
                    $(_item).slideUp()
                }
            })
        }else{
            $('.search-results .labels .button').slideDown()
        }
    }
    _reset = function (){
        $('.search-box .search-label').val('')
        _find()
    }
    var _open = function (_id){
        $('.setting-frame').slideUp(function (){
            $(_id).slideDown()
        })
    }
    $(document).ready(function (){
        
        _init()
        var _layout = {on:{load:{}}}            
        // $('.pane .tabs label')[0].click()
         
        // var tabs = new QCMSTabs(_layout,'{{system.context}}','.pane .tabs')
        // tabs.init()
        // _layout.on.load = {'form':['www/html/_assets/wizard/technologies.html']}
        // bootup.init('{{system.context}}',_layout)
    })
</script>

<div style="padding-left:10px;">
  
   
    <div class="settings">
        <div class="setting-frame new-connection" style="display:none">
           <ul class="">
            <i class="fa-solid fa-minus"></i> Create a new connection to a database, and label it.
            <br><i class="fa-solid fa-minus"></i> The database will be referenced by its label

           <br>
           <div class="border-round border" style="width:150px;" onclick="dialog.show({uri:'www/html/wizard.html',title:'Create New Connection',context:'{{system.context}}'})">
                <div class="active bold">
                   <i class="fa-solid fa-power-off" style="color:#4682B4"></i> Start Now
                </div>
           </div>
           </ul>
        </div>
        <div class="setting-frame lookup">

            <div class="search-box border" style="margin-bottom:4px;">
                <input type="text" class="search-label" placeholder="[Search transport registry]" onkeyup="_find()"/>
                <div class="border-left" align="center">
                    <div class="active" onclick="_reset()"><i class="fa-solid fa-trash"></i> </div>
                </div>
            </div>
            <div class=" border" style="padding:8px; margin-top:10px;">
                <div class="search-results" style="margin:4px; ">
                    
                        <div class="labels"></div>
                        
                </div>

            </div>

        </div>
    </div>
   
</div>