apim-developer-portal2/src/components/apis/list-of-apis/ko/runtime/api-list.html

API management developer portal

<div class="form-inline search-input">
    <div class="d-block flex-grow">
        <div class="input-group">
            <input type="search" role="searchbox" aria-label="Search APIs" placeholder="Search APIs" spellcheck="false" data-bind="textInput: pattern" />
            <button type="button" class="search-button" aria-label="Search APIs">
                <i class="icon icon-magnifier"></i>
            </button>
        </div>
        <tag-input params="{ scope: 'apis', 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>

<div class="table" role="table" aria-label="APIs">
    <div class="table-head" role="rowgroup">
        <div class="table-row" role="row">
            <div tabindex="0" class="col-5" role="columnheader">Name</div>
            <div tabindex="0" class="col-7" role="columnheader">Description</div>
        </div>
    </div>

    <!-- ko if: working -->
    <div class="table-body">
        <spinner></spinner>
    </div>
    <!-- /ko -->

    <!-- ko ifnot: working -->
    <div class="table-body animation-fade-in" role="presentation">
        <!-- ko if: groupByTag -->
        <!-- ko foreach: { data: apiGroups, as: 'group' } -->
        <div tabindex="0" class="tag-group" role="presentation">
            <span class="tag-item" role="rowgroup" data-bind="text: group.tag"></span>
        </div>
        <!-- ko foreach: { data: group.items, as: 'item' } -->
        <div class="table-row" role="row">
            <div class="col-5 text-truncate" role="cell">
                <a href="#"
                    data-bind="attr: { href: $component.getReferenceUrl(item), title: item.displayName }">
                    <span data-bind="text: item.displayName"></span>
                    <!-- ko if: item.type === 'soap' -->
                    <span class="badge badge-soap">SOAP</span>
                    <!-- /ko -->
                    <!-- ko if: item.apiVersion -->
                    - <span data-bind="text: item.apiVersion"></span>
                    <!-- /ko -->
                </a>
            </div>
            <div class="col-7" role="cell">
                <div tabindex="0" data-bind="markdown: { source: item.description, truncateAt: 250 }"></div>
            </div>
        </div>
        <!-- /ko -->
        <!-- /ko -->

        <!-- ko if: apiGroups().length === 0 -->
        <div class="table-row" role="row">
            <div class="col-12">
                No APIs found
            </div>
        </div>
        <!-- /ko -->
        <!-- /ko -->

        <!-- ko ifnot: groupByTag -->
        <!-- ko foreach: { data: apis, as: 'item' } -->
        <div class="table-row" role="row">
            <div class="col-5 text-truncate" role="cell">
                <a href="#"
                    data-bind="attr: { href: $component.getReferenceUrl(item), title: item.displayName }">
                    <span data-bind="text: item.displayName"></span>
                    <!-- ko if: item.type === 'soap' -->
                    <span class="badge badge-soap">SOAP</span>
                    <!-- /ko -->
                    <!-- ko if: item.apiVersion -->
                    - <span data-bind="text: item.apiVersion"></span>
                    <!-- /ko -->
                </a>
            </div>
            <div class="col-7" role="cell">
                <div tabindex="0" data-bind="markdown: { source: item.description, truncateAt: 250 }"></div>
            </div>
        </div>
        <!-- /ko -->

        <!-- ko if: apis().length === 0 -->
        <div class="table-row" role="row">
            <div class="col-12">
                No APIs found
            </div>
        </div>
        <!-- /ko -->

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

    <!-- ko if: hasPager -->
    <!-- ko ifnot: working -->
    <div class="table-footer" role="presentation">
        <ul class="pagination justify-content-center" role="navigation" aria-label="Pagination">
            <!-- ko if: hasPrevPage -->
            <li role="presentation">
                <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 role="presentation">
                <span class="page-link" data-bind="text: page"></span>
            </li>
            <!-- ko if: hasNextPage -->
            <li role="presentation">
                <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>
    </div>
    <!-- /ko -->
    <!-- /ko -->
</div>