Fixed operation list pagination and API list reload issues. (#625)

Azure · May 20, 2020 · 0d75fe4 · 0d75fe4
1 parent d36c486
commit 0d75fe4
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 32 deletions.
diff --git a/src/components/apis/list-of-apis/ko/runtime/api-list-dropdown.html b/src/components/apis/list-of-apis/ko/runtime/api-list-dropdown.html
@@ -15,11 +15,13 @@
 
     <div class="collapsible-dropdown collapsible-content">
         <div class="search-input">
-            <input type="search" role="searchbox" aria-label="Search" placeholder="Search APIs"
-                data-bind="textInput: pattern" autofocus />
-            <button type="button" class="search-button" aria-label="Search APIs">
-                <i class="icon icon-magnifier"></i>
-            </button>
+            <div class="input-group">
+                <input type="search" role="searchbox" aria-label="Search" placeholder="Search APIs"
+                    data-bind="textInput: pattern" autofocus />
+                <button type="button" class="search-button" aria-label="Search APIs">
+                    <i class="icon icon-magnifier"></i>
+                </button>
+            </div>
         </div>
         <!-- <tag-input params="{ scope: 'apis', onChange: onTagsChange }"></tag-input> -->
         <div role="list">
@@ -33,24 +35,27 @@
                 <div class="tag-group">
                     <span class="tag-item" role="group" data-bind="text: group.tag"></span>
                 </div>
-                <div class="collapsible-container" role="list">
-                    <!-- ko foreach: { data: group.items, as: 'item' } -->
-                    <a href="#" role="listitem" class="nav-link text-truncate" data-bind="attr: { href: $component.getReferenceUrl(item) }">
-                        <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>
+                <div class="collapsible-container">
+                    <div class="menu menu-vertical" role="list">
+                        <!-- ko foreach: { data: group.items, as: 'item' } -->
+                        <a href="#" role="listitem" class="nav-link text-truncate"
+                            data-bind="attr: { href: $component.getReferenceUrl(item) }, css: { 'nav-link-active': $component.selectedApiName() === item.name }">
+                            <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>
                         <!-- /ko -->
-                    </a>
-                    <!-- /ko -->
+                    </div>
                 </div>
             </div>
             <!-- /ko -->
 
             <!-- ko if: apiGroups().length === 0 -->
-            <p>No APIs found</p>
+            <div class="list-item-empty">No APIs found</div>
             <!-- /ko -->
 
             <!-- ko if: hasPager -->

diff --git a/src/components/apis/list-of-apis/ko/runtime/api-list-dropdown.ts b/src/components/apis/list-of-apis/ko/runtime/api-list-dropdown.ts
@@ -2,12 +2,12 @@ import * as ko from "knockout";
 import * as Constants from "../../../../../constants";
 import template from "./api-list-dropdown.html";
 import { Component, RuntimeComponent, OnMounted, Param, OnDestroyed } from "@paperbits/common/ko/decorators";
-import { RouteHelper } from "./../../../../../routing/routeHelper";
+import { Router } from "@paperbits/common/routing";
+import { RouteHelper } from "../../../../../routing/routeHelper";
 import { Api } from "../../../../../models/api";
 import { ApiService } from "../../../../../services/apiService";
 import { TagGroup } from "../../../../../models/tagGroup";
 import { SearchQuery } from "../../../../../contracts/searchQuery";
-import { Router } from "@paperbits/common/routing";
 import { Utils } from "../../../../../utils";
 import { Tag } from "../../../../../models/tag";
 
@@ -86,12 +86,11 @@ export class ApiListDropdown {
     private async onRouteChange(): Promise<void> {
         const apiName = this.routeHelper.getApiName();
 
-        if (apiName !== this.selectedApiName()) {
-            await this.resetSearch();
+        if (apiName === this.selectedApiName()) {
             return;
         }
 
-        await this.resetSearch();
+        this.checkSelection();
     }
 
     /**
@@ -112,9 +111,7 @@ export class ApiListDropdown {
 
             const pageOfTagResources = await this.apiService.getApisByTags(query);
             const apiGroups = pageOfTagResources.value;
-
             this.apiGroups(apiGroups);
-            this.checkSelection(apiGroups);
 
             const nextLink = pageOfTagResources.nextLink;
 
@@ -129,13 +126,13 @@ export class ApiListDropdown {
         }
     }
 
-    private checkSelection(apiGroups: TagGroup<Api>[]): void {
+    private checkSelection(): void {
         if (!this.allowSelection()) {
             return;
         }
 
         const selectedApiName = this.routeHelper.getApiName();
-        const listOfApis = apiGroups.map(group => group.items || []).flat();
+        const listOfApis = this.apiGroups().map(group => group.items || []).flat();
         const selectedApi = listOfApis.find(x => x.name === selectedApiName);
 
         if (!selectedApiName && listOfApis.length > 0) {

diff --git a/src/components/operations/operation-list/ko/runtime/operation-list.html b/src/components/operations/operation-list/ko/runtime/operation-list.html
@@ -94,7 +94,7 @@
     <!-- ko if: hasPrevPage -->
     <li class="page-item">
         <a href="#" class="page-link" role="button" aria-label="Previous page"
-            data-bind="click: prevPage, enable: hasPrePage">
+            data-bind="click: prevPage, enable: hasPrevPage">
             <i class="icon icon-chevron-left"></i>
         </a>
     </li>

diff --git a/src/components/products/product-list/ko/runtime/product-list-dropdown.html b/src/components/products/product-list/ko/runtime/product-list-dropdown.html
@@ -10,11 +10,13 @@
 
     <div class="collapsible-dropdown collapsible-content">
         <div class="search-input">
-            <input type="search" role="searchbox" aria-label="Search" placeholder="Search products" spellcheck="false"
-                data-bind="textInput: pattern" />
-            <button type="button" class="search-button" aria-label="Search products">
-                <i class="icon icon-magnifier"></i>
-            </button>
+            <div class="input-group">
+                <input type="search" role="searchbox" aria-label="Search" placeholder="Search products"
+                    spellcheck="false" data-bind="textInput: pattern" />
+                <button type="button" class="search-button" aria-label="Search products">
+                    <i class="icon icon-magnifier"></i>
+                </button>
+            </div>
         </div>
 
         <div role="list">