diff --git a/src/components/apis/list-of-apis/ko/runtime/api-list.ts b/src/components/apis/list-of-apis/ko/runtime/api-list.ts index 02f36b095..5b9b22f0a 100644 --- a/src/components/apis/list-of-apis/ko/runtime/api-list.ts +++ b/src/components/apis/list-of-apis/ko/runtime/api-list.ts @@ -8,7 +8,6 @@ import { TagGroup } from "../../../../../models/tagGroup"; import { SearchQuery } from "../../../../../contracts/searchQuery"; import { RouteHelper } from "../../../../../routing/routeHelper"; import { Tag } from "../../../../../models/tag"; -import { Utils } from "../../../../../utils"; @RuntimeComponent({ @@ -61,6 +60,7 @@ export class ApiList { @OnMounted() public async initialize(): Promise { this.groupByTag(this.defaultGroupByTagToEnabled()); + this.tags.subscribe(this.resetSearch); await this.resetSearch(); @@ -68,11 +68,7 @@ export class ApiList { .extend({ rateLimit: { timeout: Constants.defaultInputDelayMs, method: "notifyWhenChangesStop" } }) .subscribe(this.resetSearch); - this.tags - .subscribe(this.resetSearch); - - this.groupByTag - .subscribe(this.resetSearch); + this.groupByTag.subscribe(this.resetSearch); } /** diff --git a/src/components/operations/operation-list/ko/runtime/operation-list.ts b/src/components/operations/operation-list/ko/runtime/operation-list.ts index a049dd5b1..177383774 100644 --- a/src/components/operations/operation-list/ko/runtime/operation-list.ts +++ b/src/components/operations/operation-list/ko/runtime/operation-list.ts @@ -93,6 +93,8 @@ export class OperationList { this.selectedOperationName(operationName); this.groupByTag(this.defaultGroupByTagToEnabled()); + this.tags.subscribe(this.resetSearch); + this.showUrlPath(this.defaultShowUrlPath()); if (this.selectedApiName()) { @@ -103,9 +105,6 @@ export class OperationList { .extend({ rateLimit: { timeout: Constants.defaultInputDelayMs, method: "notifyWhenChangesStop" } }) .subscribe(this.resetSearch); - this.tags - .subscribe(this.resetSearch); - this.groupByTag .subscribe(this.loadOperations); diff --git a/src/components/tag-input/tag-input.ts b/src/components/tag-input/tag-input.ts index 923a1106f..8fb85720e 100644 --- a/src/components/tag-input/tag-input.ts +++ b/src/components/tag-input/tag-input.ts @@ -5,6 +5,9 @@ import tagListTemplate from "./tag-list.html"; import { Component, Event, Param, OnMounted } from "@paperbits/common/ko/decorators"; import { Tag } from "../../models/tag"; import { TagService } from "../../services/tagService"; +import { RouteHelper } from "../../routing/routeHelper"; +import { TagContract } from "../../contracts/tag"; +import { Utils } from "../../utils"; @Component({ selector: "tag-input", @@ -19,7 +22,10 @@ export class TagInput { public readonly canAddTags: ko.Computed; public readonly availableTags: ko.Computed; - constructor(private readonly tagService: TagService) { + constructor( + private readonly tagService: TagService, + private readonly routeHelper: RouteHelper + ) { this.tags = ko.observableArray(); this.scope = ko.observable(); this.pattern = ko.observable(); @@ -43,6 +49,8 @@ export class TagInput { return; } + this.initTagsFilter(); + await this.resetSearch(); this.pattern @@ -53,6 +61,31 @@ export class TagInput { .subscribe(this.resetSearch); } + private initTagsFilter() { + const tagsValue = this.routeHelper.getTags(); + + if (tagsValue) { + const tags = tagsValue.split("|"); + const tagItems = []; + if (tags && tags.length > 0) { + for (let i = 0; i < tags.length; i++) { + const tag = tags[i]; + const tagContract: TagContract = Utils.armifyContract("tags", { + id: `/tags/${tag}`, + name: tag + }); + tagItems.push(new Tag(tagContract)); + + } + this.selection(tagItems); + if (this.onChange) { + this.onChange(this.selection()); + this.onDismiss.notifySubscribers(); + } + } + } + } + public async loadPageOfTags(): Promise { const pageOfTags = await this.tagService.getTags(this.scope(), this.pattern()); const tags = pageOfTags.value.filter(tag => !this.selection().map(x => x.id).includes(tag.id)); @@ -66,6 +99,7 @@ export class TagInput { public addTag(tag: Tag): void { this.selection.push(tag); + this.routeHelper.setHashParameter("tags", this.selection().map(t => t.name).join("|")); if (this.onChange) { this.onChange(this.selection()); @@ -75,6 +109,7 @@ export class TagInput { public removeTag(tag: Tag): void { this.selection.remove(tag); + this.routeHelper.setHashParameter("tags", this.selection().map(t => t.name).join("|")); if (this.onChange) { this.onChange(this.selection()); diff --git a/src/routing/routeHelper.ts b/src/routing/routeHelper.ts index abe4989ef..c80621be4 100644 --- a/src/routing/routeHelper.ts +++ b/src/routing/routeHelper.ts @@ -12,6 +12,19 @@ export class RouteHelper { return params.get(name); } + public setHashParameter(name: string, value: string): void { + const route = this.router.getCurrentRoute(); + const params = new URLSearchParams(route.hash ? `?${route.hash}` : ""); + + if(value) { + params.set(name, value); + } else { + params.delete(name); + } + + this.router.navigateTo(`#${params.toString()}`); + } + /** * Returns ARM resource name of the API specified in hash parameter of the current route, e.g. "httpbin". */ @@ -19,6 +32,13 @@ export class RouteHelper { return this.getHashParameter("api"); } + /** + * Returns ARM resource name of the API specified in hash parameter of the current route, e.g. "httpbin". + */ + public getTags(): string { + return this.getHashParameter("tags"); + } + /** * Returns ARM resource name of the operation specified in hash parameter of the current route, e.g. "status". */