Skip to content

Commit

Permalink
added "group by tag" toggle for api list dropdown widget; implemented…
Browse files Browse the repository at this point in the history 
… logic for "default group by ag enabled" (#2180)
  • Loading branch information
@malincrist
malincrist authored May 31, 2023
1 parent 3869cf4 commit 655f8ef
Show file tree
Hide file tree
Showing 2 changed files with 96 additions and 17 deletions.
54 changes: 49 additions & 5 deletions src/components/apis/list-of-apis/ko/runtime/api-list-dropdown.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,17 +23,61 @@

<!-- <tag-input params="{ scope: 'apis', onChange: onTagsChange }"></tag-input> -->

<div>
<label>Group by tag
<div class="switch">
<input type="checkbox" data-bind="checked: $component.groupByTag">
<span class="slider round"></span>
</div>
</label>
</div>

<!-- ko if: working -->
<spinner class="block" role="presentation"></spinner>
<!-- /ko -->

<!-- ko ifnot: working -->
<!-- ko if: groupByTag -->
<!-- ko foreach: { data: apiGroups, as: 'group' } -->
<div class="tag-group">
<span class="tag-item" role="group" data-bind="text: group.tag"></span>
<div>
<button class="tag-group tag-group-collapsible no-border"
data-bind="class: $component.groupTagsExpanded().has(group.tag) ? '' : 'active', click: () => $component.groupTagCollapseToggle(group.tag)">
<span class="tag-item" role="rowgroup" data-bind="text: group.tag"></span>
<i class="icon-emb icon-emb-chevron-down"></i>
</button>
<!-- ko if: $component.groupTagsExpanded().has(group.tag) -->
<div class="menu menu-vertical" role="list">
<!-- ko foreach: { data: group.items, as: 'item' } -->
<a href="#" role="listitem" class="nav-link text-truncate" data-dismiss
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.type === 'websocket' -->
<span class="badge badge-soap">WebSocket</span>
<!-- /ko -->
<!-- ko if: item.type === 'graphql' -->
<span class="badge badge-soap">GraphQL</span>
<!-- /ko -->
<!-- ko if: item.apiVersion -->
- <span data-bind="text: item.apiVersion"></span>
<!-- /ko -->
</a>
<!-- /ko -->
</div>
<!-- /ko -->
</div>
<!-- /ko -->

<!-- ko if: apiGroups().length === 0 -->
<div class="list-item-empty">No APIs found</div>
<!-- /ko -->
<!-- /ko -->

<!-- ko ifnot: groupByTag -->
<!-- ko foreach: { data: apis, as: 'item' } -->
<div class="menu menu-vertical" role="list">
<!-- ko foreach: { data: group.items, as: 'item' } -->
<a href="#" role="listitem" class="nav-link text-truncate" data-dismiss
data-bind="attr: { href: $component.getReferenceUrl(item) }, css: { 'nav-link-active': $component.selectedApiName() === item.name }">
<span data-bind="text: item.displayName"></span>
Expand All @@ -50,13 +94,13 @@
- <span data-bind="text: item.apiVersion"></span>
<!-- /ko -->
</a>
<!-- /ko -->
</div>
<!-- /ko -->

<!-- ko if: apiGroups().length === 0 -->
<!-- ko if: apis().length === 0 -->
<div class="list-item-empty">No APIs found</div>
<!-- /ko -->
<!-- /ko -->

<!-- ko ifnot: working -->
<!-- ko if: $component.totalPages() > 1 -->
Expand Down
59 changes: 47 additions & 12 deletions src/components/apis/list-of-apis/ko/runtime/api-list-dropdown.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ import { Tag } from "../../../../../models/tag";
template: template
})
export class ApiListDropdown {
public readonly apis: ko.ObservableArray<Api>;
public readonly apiGroups: ko.ObservableArray<TagGroup<Api>>;
public readonly selectedApi: ko.Observable<Api>;
public readonly selectedApiName: ko.Observable<string>;
Expand All @@ -28,14 +29,20 @@ export class ApiListDropdown {
public readonly pageNumber: ko.Observable<number>;
public readonly totalPages: ko.Observable<number>;
public readonly selection: ko.Computed<string>;
public readonly groupByTag: ko.Observable<boolean>;
public readonly groupTagsExpanded: ko.Observable<Set<string>>;

constructor(
private readonly apiService: ApiService,
private readonly router: Router,
private readonly routeHelper: RouteHelper
) {
this.apis = ko.observableArray([]);
this.detailsPageUrl = ko.observable();
this.allowSelection = ko.observable(false);
this.defaultGroupByTagToEnabled = ko.observable(false);
this.groupByTag = ko.observable(false);
this.groupTagsExpanded = ko.observable(new Set<string>());
this.working = ko.observable();
this.selectedApi = ko.observable();
this.selectedApiName = ko.observable();
Expand All @@ -56,8 +63,14 @@ export class ApiListDropdown {
@Param()
public detailsPageUrl: ko.Observable<string>;

@Param()
public defaultGroupByTagToEnabled: ko.Observable<boolean>;


@OnMounted()
public async initialize(): Promise<void> {
this.groupByTag(this.defaultGroupByTagToEnabled());

await this.resetSearch();
await this.checkSelection();

Expand All @@ -68,6 +81,9 @@ export class ApiListDropdown {
this.tags
.subscribe(this.resetSearch);

this.groupByTag
.subscribe(this.resetSearch);

this.router.addRouteChangeListener(this.onRouteChange);
this.pageNumber.subscribe(this.loadPageOfApis);
}
Expand All @@ -94,26 +110,39 @@ export class ApiListDropdown {
* Loads page of APIs.
*/
public async loadPageOfApis(): Promise<void> {
const pageNumber = this.pageNumber() - 1;

const query: SearchQuery = {
pattern: this.pattern(),
tags: this.tags(),
skip: pageNumber * Constants.defaultPageSize,
take: Constants.defaultPageSize
};

try {
this.working(true);

const pageNumber = this.pageNumber() - 1;
let totalItems: number;

if (this.groupByTag()) {
const pageOfTagResources = await this.apiService.getApisByTags(query);
const apiGroups = pageOfTagResources.value;

const query: SearchQuery = {
pattern: this.pattern(),
tags: this.tags(),
skip: pageNumber * Constants.defaultPageSize,
take: Constants.defaultPageSize
};
this.apiGroups(apiGroups);
totalItems = pageOfTagResources.count;
}
else {
const pageOfApis = await this.apiService.getApis(query);
const apis = pageOfApis ? pageOfApis.value : [];

const pageOfTagResources = await this.apiService.getApisByTags(query);
const apiGroups = pageOfTagResources.value;
this.apiGroups(apiGroups);
this.apis(apis);
totalItems = pageOfApis.count;
}

this.totalPages(Math.ceil(pageOfTagResources.count / Constants.defaultPageSize));
this.totalPages(Math.ceil(totalItems / Constants.defaultPageSize));
}
catch (error) {
throw new Error(`Unable to load APIs. ${error.message}`);
throw new Error(`Unable to load APIs. Error: ${error.message}`);
}
finally {
this.working(false);
Expand Down Expand Up @@ -149,6 +178,12 @@ export class ApiListDropdown {
this.tags(tags);
}

public groupTagCollapseToggle(tag: string): void {
const newSet = this.groupTagsExpanded();
newSet.has(tag) ? newSet.delete(tag) : newSet.add(tag);
this.groupTagsExpanded(newSet);
}

@OnDestroyed()
public dispose(): void {
this.router.removeRouteChangeListener(this.onRouteChange);
Expand Down

0 comments on commit 655f8ef

Please sign in to comment.