feat(app): add scope filter for api list

Closes #23
ng-doc · Mar 3, 2023 · 911196c · 911196c
1 parent b07598c
commit 911196c
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 16 deletions.
diff --git a/libs/app/components/api-list/api-list.component.html b/libs/app/components/api-list/api-list.component.html
@@ -6,43 +6,65 @@ <h1 ng-doc-text>API List</h1>
 				<ng-template #leftContent>
 					<ng-doc-icon icon="search"></ng-doc-icon>
 				</ng-template>
-				<input ngDocInputString [formControl]="formGroup.controls.filter" placeholder="Type the name">
+				<input ngDocInputString [formControl]="formGroup.controls.filter" placeholder="Type the name" />
 			</ng-doc-input-wrapper>
 		</label>
 
+		<label class="ng-doc-api-filter-item" ng-doc-label="Scope">
+			<ng-doc-combobox
+				[formControl]="formGroup.controls.scope"
+				[valueContent]="comboboxItem"
+				[readonly]="true"
+				placeholder="Choose the scope"
+			>
+				<ng-doc-list *ngDocData>
+					<ng-doc-option *ngFor="let scope of scopes" [value]="scope">
+						<ng-container *ngTemplateOutlet="comboboxItem; context: {$implicit: scope}"></ng-container>
+					</ng-doc-option>
+				</ng-doc-list>
+				<ng-template let-value #comboboxItem>
+					{{ value }}
+				</ng-template>
+			</ng-doc-combobox>
+		</label>
+
 		<label class="ng-doc-api-filter-item" ng-doc-label="Type">
-			<ng-doc-combobox [formControl]="formGroup.controls.type" [valueContent]="comboboxItem" [readonly]="true">
+			<ng-doc-combobox
+				[formControl]="formGroup.controls.type"
+				[valueContent]="comboboxItem"
+				[readonly]="true"
+				placeholder="Choose the entity type"
+			>
 				<ng-doc-list *ngDocData>
 					<ng-doc-option *ngFor="let type of types" [value]="type">
 						<ng-container *ngTemplateOutlet="comboboxItem; context: {$implicit: type}"></ng-container>
 					</ng-doc-option>
 				</ng-doc-list>
 				<ng-template let-value #comboboxItem>
 					<div ng-doc-text>
-						<ng-doc-kind-icon [kind]="value"
-										  [ngDocTooltip]="value"
-										  [positions]="['left-center', 'right-center']"
-										  ngDocTextLeft>
+						<ng-doc-kind-icon
+							[kind]="value"
+							[ngDocTooltip]="value"
+							[positions]="['left-center', 'right-center']"
+							ngDocTextLeft
+						>
 						</ng-doc-kind-icon>
-						{{value}}
+						{{ value }}
 					</div>
 				</ng-template>
 			</ng-doc-combobox>
 		</label>
 	</form>
 	<div class="ng-doc-api-list">
 		<div class="ng-doc-api-scope" *ngFor="let scope of api">
-			<h3 class="ng-doc-scope-title" ng-doc-text>{{scope.title}}</h3>
+			<h3 class="ng-doc-scope-title" ng-doc-text>{{ scope.title }}</h3>
 			<ul class="ng-doc-scope-items" *ngIf="scope.items.length">
-				<li class="ng-doc-scope-item"
-					*ngFor="let apiReference of scope.items">
+				<li class="ng-doc-scope-item" *ngFor="let apiReference of scope.items">
 					<a class="ng-doc-scope-item-link" [routerLink]="[apiReference.route]">
-						<ng-doc-kind-icon [kind]="apiReference.type"
-										  [ngDocTooltip]="apiReference.type">
+						<ng-doc-kind-icon [kind]="apiReference.type" [ngDocTooltip]="apiReference.type">
 						</ng-doc-kind-icon>
-						{{apiReference.name}}
+						{{ apiReference.name }}
 					</a>
-
 				</li>
 			</ul>
 		</div>

diff --git a/libs/app/components/api-list/api-list.component.ts b/libs/app/components/api-list/api-list.component.ts
@@ -12,6 +12,7 @@ import {debounceTime, map, startWith} from 'rxjs/operators';
 
 interface ApiFilterForm {
 	filter: FormControl<string | null>;
+	scope: FormControl<string | null>;
 	type: FormControl<string | null>;
 }
 
@@ -35,12 +36,14 @@ export class NgDocApiListComponent {
 	) {
 		this.formGroup = this.formBuilder.group({
 			filter: [''],
+			scope: [''],
 			type: [''],
 		});
 
 		this.route.queryParamMap.pipe(untilDestroyed(this)).subscribe((paramMap: ParamMap) =>
 			this.formGroup.setValue({
 				filter: paramMap.get('filter') || null,
+				scope: paramMap.get('scope') || null,
 				type: paramMap.get('type') || null,
 			}),
 		);
@@ -61,6 +64,7 @@ export class NgDocApiListComponent {
 			map(() => this.formGroup.value),
 			map((form: NgDocFormPartialValue<typeof this.formGroup>) =>
 				this.apiList
+					.filter((api: NgDocApiList) => !form?.scope || api.title === form?.scope)
 					.map((api: NgDocApiList) => ({
 						...api,
 						items: api.items
@@ -74,13 +78,17 @@ export class NgDocApiListComponent {
 									a.type.localeCompare(b.type) || a.name.localeCompare(b.name),
 							),
 					}))
-					.filter((api: NgDocApiList) => api.items.length)
-					.sort((a: NgDocApiList, b: NgDocApiList) => a.title.localeCompare(b.title)),
+					.filter((api: NgDocApiList) => api.items.length),
 			),
 			untilDestroyed(this),
 		);
 	}
 
+	@ngDocMakePure
+	get scopes(): string[] {
+		return asArray(new Set(this.apiList.flatMap((api: NgDocApiList) => api.title))).sort();
+	}
+
 	@ngDocMakePure
 	get types(): string[] {
 		return asArray(