Cleanup in search

[u/erikhf/frm.git] / src / components / search / search.html

<div id="search">

    <!-- Search bar -->
    <label class="sr-only" for="livesearch">Search</label>

    <form id="searchform">
        <div class="row">
            <input
                    mou-live-search
                    (results)="orgunits = $event"
                    (loading)="loading = $event"
                    type="text"
                    autofocus
                    class="livesearch col-md-10"
                    name="livesearch"
                    id="livesearch"
                    placeholder="Search"
                    onblur="this.placeholder = 'Search'"
                    onfocus="this.placeholder = ''"
                    value=""/>

            <!--Show or hide, and empty filtermenu-->
            <button type="button" class="filterbutton col-md-2" (click)="toggle()"
                    data-toggle="collapse" data-target="#dropdown-menu">
                {{ visible ? '&xdtri;' : '&khcy;' }}
            </button>
        </div>
    </form>

    <!-- Searchresult -->
    <div class="row">
        <span [hidden]="hideDiv()">
            <div class="divresult col-md-10" id="divresult" [hidden]="checkOrgunits()">
                <ul class="dropdown-menu result">
                    <li>
                        <!--exit results-->
                        <button type="button" class="btn btn-default emptyresult" (click)="emptyByClick()">
                            <span class="glyphicon glyphicon-remove"></span></button>
                    </li>
                    <li *ng-for="#orgunit of filteredOrgunits" id="orglist" (click)="getMoreInfo(orgunit)">
                        <a id="left-menu" href="#"><span class="glyphicon glyphicon-map-marker glyresult"></span>  {{orgunit.name}}</a>
                    </li>
                    <li *ng-if="filteredOrgunits.length == 0">
                        <p class="nomatch"><span class="glyphicon glyphicon-info-sign glyinfo"></span>  No matching results </p>
                    </li>
                </ul>
            </div>
        </span>

        <!-- Filter selectors to be filled inn by getUnitGroupSets() -->
        <div id="dropdowndiv" class="btn-group collapse col-md-2">
            <ul id="dropdown-menu" role="menu" class="dropdown-menu filtermenu">
                <li>Facility</li>
                <li class="dropdown-header">Ownership</li>
                <li>
                    <select class="form-control filteroption" id="ownershipSelector" (click)="setFilter()"></select>
                </li>
                <li class="dropdown-header">Type</li>
                <li>
                    <select class="form-control filteroption" id="typeSelector" (click)="setFilter()"></select>
                </li>
                <li class="divider"></li>
                <li>Location</li>
                <li class="dropdown-header">Rural/Urban</li>
                <li>
                    <select class="form-control filteroption" id="locationSelector" (click)="setFilter()"></select>
                </li>
            </ul>
        </div>
    </div>
</div>