awx/awx/ui/client/features/output/search.partial.html

<!-- todo: markup, styling, css etc. - disposition according to project lib conventions -->
<!-- todo: further componentization -->
<form ng-submit="vm.submitSearch()">
    <div class="input-group">
        <input type="text"
            class="form-control at-Input"
            ng-disabled="vm.disabled"
            ng-class="{ 'at-Input--rejected': vm.rejected }"
            ng-model="vm.value"
            ng-attr-placeholder="{{ vm.running ?
                vm.strings.get('search.PLACEHOLDER_RUNNING') :
                vm.strings.get('search.PLACEHOLDER_DEFAULT') }}">
        <span class="input-group-btn input-group-append">
            <button class="btn at-ButtonHollow--default at-Input-button"
                ng-click="vm.submitSearch()"
                ng-disabled="vm.disabled || !vm.value || vm.value === ''"
                type="button">
                <i class="fa fa-search"></i>
            </button>
            <button class="btn jobz-Button-searchKey"
                ng-if="vm.key"
                ng-disabled="vm.disabled"
                ng-click="vm.toggleSearchKey()"
                type="button"> {{:: vm.strings.get('search.KEY') }}
            </button>
            <button class="btn at-ButtonHollow--default at-Input-button"
                ng-if="!vm.key"
                ng-disabled="vm.disabled"
                ng-click="vm.toggleSearchKey()"
                type="button"> {{:: vm.strings.get('search.KEY') }}
            </button>
        </span>
    </div>
    <p ng-if="vm.rejected" class="at-InputMessage--rejected">{{ vm.message }}</p>
</form>

<div class="jobz-tagz">
    <div ng-repeat="tag in vm.tags track by $index">
        <at-tag tag="tag" remove-tag="vm.removeSearchTag($index)"></at-tag>
    </div>
    <div class="jobz-searchClearAllContainer">
        <a class="jobz-searchClearAll"
            ng-click="vm.clearSearch()"
            ng-show="!(vm.tags | isEmpty)"
            href> {{:: vm.strings.get('search.CLEAR_ALL') }}
        </a>
    </div>
</div>

<div class="jobz-searchKeyPaneContainer" ng-show="vm.key">
    <div class="jobz-searchKeyPane">
        <div class="SmartSearch-keyRow">
            <div class="SmartSearch-examples">
                <div class="SmartSearch-examples--title">
                    <b>{{:: vm.strings.get('search.EXAMPLES') }}:</b>
                </div>
                <div class="SmartSearch-examples--search"
                    ng-repeat="tag in vm.examples">{{ tag }}
                </div>
            </div>
        </div>
        <div class="SmartSearch-keyRow">
            <b>{{:: vm.strings.get('search.FIELDS') }}:</b>
            <span ng-repeat="field in vm.fields">{{ field }}<span ng-if="!$last">, </span></span>
        </div>
        <div class="SmartSearch-keyRow">
            <b>{{:: vm.strings.get('search.ADDITIONAL_INFORMATION_HEADER') }}:</b>
            {{:: vm.strings.get('search.ADDITIONAL_INFORMATION') }}
            <a ng-attr-href="{{ vm.docLink }}" target="_blank">
                {{:: vm.strings.get('search.DOCUMENTATION') }}.
            </a>
        </div>
    </div>
</div>