apim-developer-portal1/src/components/operations/operation-list/ko/runtime/operation-list.html

API management developer portal

<div class="form-inline search-input">
    <div class="d-block flex-grow mw-100">
        <div class="input-group">
            <input type="search" aria-label="Search operations" placeholder="Search operations" spellcheck="false" data-bind="textInput: pattern" />
            <button type="button" class="search-button" aria-label="Search operations">
                <i class="icon icon-magnifier"></i>
            </button>
        </div>
        <tag-input params="{ scope: $component.tagScope, onChange: onTagsChange }"></tag-input>
    </div>
    <div class="form-group ml-auto">
        <label for="groupByTag">Group by tag
            <div class="switch">
                <input id="groupByTag" type="checkbox" data-bind="checked: $component.groupByTag">
                <span class="slider round"></span>
            </div>
        </label>
    </div>
</div>

<!-- ko if: groupByTag-->
<div class="menu menu-vertical d-block">
    <!-- ko if: working -->
    <spinner class="fit"></spinner>
    <!-- /ko -->

    <!-- ko ifnot: working -->
    <div class="animation-fade-in">
        <!-- ko if: groupByTag -->

        <!-- ko foreach: { data: operationGroups, as: 'group' } -->
        <div class="tag-group">
            <span class="tag-item" role="group" data-bind="text: group.tag"></span>
        </div>
        <ul class="nav" role="list">
            <!-- ko foreach: { data: group.items, as: 'item' } -->
            <li class="nav-item" role="presentation">
                <a href="#" role="listitem" class="nav-link text-truncate"
                    data-bind="attr: { href: $component.getReferenceUrl(item) }, css: { 'nav-link-active': $component.selectedOperationName() === item.name }">
                    <span data-bind="attr: { 'data-method': method }"></span>
                    <span class="operation-name" data-bind="text: item.displayName"></span>
                </a>
            </li>
            <!-- /ko -->
        </ul>
        <!-- /ko -->

        <!-- ko if: operationGroups().length === 0 -->
        <p>No operations found</p>
        <!-- /ko -->

        <!-- /ko -->
    </div>
    <!-- /ko -->
</div>
<!-- /ko -->

<!-- ko ifnot: groupByTag-->
<div class="flex flex-row">
    <!-- ko if: working-->
    <div class="flex-item flex-grow">
        <spinner class="fit"></spinner>
    </div>
    <!-- /ko -->

    <!-- ko ifnot: working-->
    <div class="menu menu-vertical d-block flex-item flex-grow animation-fade-in">
        <!-- ko if: operations -->
        <ul class="nav" role="list">
            <!-- ko foreach: { data: operations, as: 'item' } -->
            <li class="nav-item" role="presentation">
                <a href="#" role="listitem" class="nav-link text-truncate"
                    data-bind="attr: { href: $component.getReferenceUrl(item) }, css: { 'nav-link-active': $component.selectedOperationName() === item.name }">
                    <span data-bind="attr: { 'data-method': method }"></span>
                    <span class="operation-name" data-bind="text: item.displayName"></span>
                </a>
            </li>
            <!-- /ko -->
        </ul>
        <!-- /ko -->
        <!-- ko if: operations().length === 0 -->
        <div class="list-placeholder list-group-placeholder">
            No operations found
        </div>
        <!-- /ko -->
    </div>
    <!-- /ko -->
</div>
<!-- /ko -->

<!-- ko if: hasPager -->
<!-- ko ifnot: working -->
<ul class="pagination justify-content-center" role="navigation" aria-label="Pagination">
    <!-- ko if: hasPrevPage -->
    <li class="page-item">
        <a href="#" class="page-link" role="button" aria-label="Previous page"
            data-bind="click: prevPage, enable: hasPrevPage">
            <i class="icon icon-chevron-left"></i>
        </a>
    </li>
    <!-- /ko -->
    <li class="page-item">
        <span class="page-link" data-bind="text: pageNumber"></span>
    </li>
    <!-- ko if: hasNextPage -->
    <li class="page-item">
        <a href="#" class="page-link" role="button" aria-label="Next page"
            data-bind="click: nextPage, enable: hasNextPage">
            <i class="icon icon-chevron-right"></i>
        </a>
    </li>
    <!-- /ko -->
</ul>
<!-- /ko -->
<!-- /ko -->