feat/style: x button for api filter, show all button css, colorize api header when expanded
MODIFY
.eslintrc.json
.eslintrc.json
"rules": {
"@typescript-eslint/no-unsafe-assignment": "off",
"@typescript-eslint/explicit-module-boundary-types": "off",
- "@typescript-eslint/restrict-plus-operands": "off"
+ "@typescript-eslint/restrict-plus-operands": "off",
+ "@typescript-eslint/no-floating-promises": "off"
+ // "function-call-argument-newline": ["error", "consistent"]
+ // "newline-per-chained-call": ["error", { "ignoreChainWithDepth": 2 }]
}
},
// NOTE: WE ARE NOT APPLYING PRETTIER IN THIS OVERRIDE, ONLY @ANGULAR-ESLINT/TEMPLATE

MODIFY
src/app/components/api-card-list/api-card-list.component.html
src/app/components/api-card-list/api-card-list.component.html
<div *ngIf="listType === 'api'" class="align">
- <mat-form-field>
+ <mat-form-field id="search-form-field">
<mat-icon matPrefix color="primary">search</mat-icon>
<input
matInput
type="search"
[placeholder]="'MPLACE.SEARCH' | translate"
class="search-input"
- value="{{searchTerm}}"
+ [value]="searchTerm"
(input)="OnInput($event)"
/>
+ <button *ngIf="searchTerm.length > 0" mat-button matSuffix mat-icon-button aria-label="Clear" color="primary" (click)="search('')">
+ <mat-icon>clear</mat-icon>
+ </button>
</mat-form-field>
</div>
<ng-container *ngIf="apis.length > 0 && ready; else NoDataMsg">

MODIFY
src/app/components/api-card-list/api-card-list.component.scss
src/app/components/api-card-list/api-card-list.component.scss
display: grid;
justify-content: center;
align-items: end;
- grid-template-columns: repeat(auto-fit, 370px);
+ grid-template-columns: repeat(auto-fit, 360px);
grid-column-gap: 32px;
grid-row-gap: 32px;
}
grid-template-columns: repeat(auto-fit, 300px);
}
}
+
+#search-form-field{
+ width: 234px;
+}

MODIFY
src/app/components/api-card-list/api-card-list.component.ts
src/app/components/api-card-list/api-card-list.component.ts
@@ -5,9 +5,9 @@ import {map, switchMap } from 'rxjs/operators';
import { forkJoin } from 'rxjs';
import { SpinnerService } from '../../services/spinner/spinner.service';
import { IApiSummary, ISearchCriteria } from '../../interfaces/ICommunication';
-import {ActivatedRoute, Router} from "@angular/router";
-import {IApiSummaryExt} from "../../interfaces/IApiSummaryExt";
-import {isApiDocAvailable} from "../../shared/utility";
+import {ActivatedRoute, Params, Router} from '@angular/router';
+import { IApiSummaryExt } from '../../interfaces/IApiSummaryExt';
+import { isApiDocAvailable } from '../../shared/utility';
@Component({
selector: 'app-api-card-list',
@@ -49,8 +49,7 @@ export class ApiCardListComponent implements OnInit {
}
handleQueryParams(): void {
- this.route.queryParams
- .subscribe((params) => {
+ this.route.queryParams.subscribe((params: Params) => {
if (params.page) {
this.searchCriteria.paging.page = params.page;
} else {
@@ -69,18 +68,22 @@ export class ApiCardListComponent implements OnInit {
this.searchCriteria.filters[0].value = '*';
}
this.getApiList();
- })
+ });
}
OnInput(event: any): void {
this.searchTerm = event.target.value;
- this.router.navigate(['/marketplace'],
- {
+ this.search(this.searchTerm);
+ }
+
+ public search(searchTerm: string) {
+ this.router.navigate(['/marketplace'], {
queryParams: {
page: 1,
pageSize: this.searchCriteria.paging.pageSize,
- searchTerm: `*${event.target.value}*`
- }});
+ searchTerm: `*${searchTerm}*`
+ }
+ });
}
OnPageChange(event: PageEvent): void {

MODIFY
src/app/components/home/home.component.html
src/app/components/home/home.component.html
<div class="home-container">
<h2>Featured APIs</h2>
<app-api-card-list [listType]="'featuredApi'"></app-api-card-list>
- <div>
- <button
- id="show-all-btn"
- mat-raised-button
- color="primary"
- [routerLink]="['/marketplace']"
- >
+ <div id="show-all-wrapper">
+ <button mat-raised-button color="primary" [routerLink]="['/marketplace']">
{{ "HOME.SHOW_ALL" | translate }}
</button>
</div>
- <br />
</div>

MODIFY
src/app/components/home/home.component.scss
src/app/components/home/home.component.scss
-#show-all-btn{
- margin-top: 2em;
- float: right;
+#show-all-wrapper{
+ margin-top: 2rem;
+ text-align: right;
}

MODIFY
src/app/components/marketplace-api-description/marketplace-api-description.component.html
src/app/components/marketplace-api-description/marketplace-api-description.component.html
<mat-panel-title>
<div id="version-info">
Version {{ api.version }} of {{ api.api.name }}
- <strong *ngIf="isLatest" id="latest-tag" class="primary"
- >[latest]</strong
- >
+ <span *ngIf="isLatest" id="latest-tag" class="primary">[latest]</span>
</div>
<button
mat-raised-button

MODIFY
src/app/components/marketplace-api-description/marketplace-api-description.component.scss
src/app/components/marketplace-api-description/marketplace-api-description.component.scss
@@ -14,12 +14,8 @@ mat-divider {
mat-panel-title {
font-size: 1.3em;
justify-content: space-between;
-
- #version-info {
- margin-top: 0.3em;
- }
#latest-tag {
- margin-left: 1em;
+ margin-left: 0.3rem;
}
}
@@ -72,3 +68,7 @@ mat-grid-list {
border-bottom-style: solid;
border-bottom-color: rgba(0,0,0,0.12);
}
+
+.mat-expansion-panel-header.mat-expanded{
+ background-color: rgba(0, 0, 0, 0.02) !important;
+}

MODIFY
src/app/services/config/config.service.ts
src/app/services/config/config.service.ts
@@ -18,7 +18,7 @@ export class ConfigService {
constructor(private http: HttpClient) {}
async readAndEvaluateConfig(): Promise<IConfig> {
- this.config = <IConfig> await this.http.get('assets/config.json').toPromise();
+ this.config = <IConfig> (await this.http.get('assets/config.json').toPromise());
try {
JSON.stringify(this.config);

MODIFY
src/app/services/theme/theme.service.ts
src/app/services/theme/theme.service.ts
import { Injectable } from '@angular/core';
-import { ConfigService } from '../config/config.service';
@Injectable({
providedIn: 'root',

MODIFY
src/assets/config.json
src/assets/config.json
"showHomeLink": true,
"links": [
{
- "name": "External Puppy Link",
+ "name": "Puppy Link",
"link": "https://pbs.twimg.com/profile_images/704447240216051712/mTel0Q49_400x400.jpg",
"openInNewTab": true
}

MODIFY
src/assets/i18n/de.json
src/assets/i18n/de.json
"MPLACE": {
"TITLE": "Marktplatz",
"SUBTITLE": "Entdecken Sie unsere APIs",
- "SEARCH": "APIs und Tags suchen",
+ "SEARCH": "APIs und Tags",
"LEARN_MORE": "Mehr"
},
"ACCOUNT": {

MODIFY
src/assets/i18n/en.json
src/assets/i18n/en.json
"MPLACE": {
"TITLE": "Marketplace",
"SUBTITLE": "Discover our APIs",
- "SEARCH": "Search APIs and tags",
+ "SEARCH": "APIs and tags",
"LEARN_MORE": "Learn more"
},
"ACCOUNT": {

feat/style: x button for api filter, show all button css, colorize api header when expanded