Split card-list.component into api-card-list and plan-card-list
MODIFY
src/app/app.module.ts
src/app/app.module.ts
@@ -8,7 +8,6 @@ import { AppComponent } from './app.component';
import { HeaderComponent } from './components/header/header.component';
import { FooterComponent } from './components/footer/footer.component';
import { ApiCardComponent } from './components/api-card/api-card.component';
-import { CardListComponent } from './components/card-list/card-list.component';
import { MarketplaceApiDetailsComponent } from './components/marketplace-api-details/marketplace-api-details.component';
import { HomeComponent } from './components/home/home.component';
import { MarketplaceApiTermsComponent } from './components/marketplace-api-terms/marketplace-api-terms.component';
@@ -29,6 +28,8 @@ import {ActivatedRoute, ActivationEnd, NavigationEnd, Router, RouterEvent} from
import {HeroService} from './services/hero/hero.service';
import {ConfigService} from './services/config/config.service';
import {NavigationComponent} from './components/navigation/navigation.component';
+import { ApiCardListComponent } from './components/api-card-list/api-card-list.component';
+import { PlanCardListComponent } from './components/plan-card-list/plan-card-list.component';
export function initializeApp(configService: ConfigService,
devPortalInitializer: InitializerService): () => Promise<void> {
@@ -66,7 +67,6 @@ export function createTranslateLoader(http: HttpClient) {
HeaderComponent,
FooterComponent,
ApiCardComponent,
- CardListComponent,
MarketplaceApiDetailsComponent,
MarketplaceApiTermsComponent,
MarketplaceSignupStepperComponent,
@@ -76,7 +76,9 @@ export function createTranslateLoader(http: HttpClient) {
MarketplaceApiDescriptionComponent,
PlanCardComponent,
MarketplaceComponent,
- NavigationComponent
+ NavigationComponent,
+ ApiCardListComponent,
+ PlanCardListComponent
],
imports: [
MaterialModule,

ADD
src/app/components/api-card-list/api-card-list.component.html
+<ng-container *ngIf="listType==='api'">
+ <mat-form-field>
+ <mat-icon matPrefix>search</mat-icon>
+ <input matInput type="search"
+ placeholder="search here"
+ class="search-input"
+ (input)="inputEvent = OnInput($event)" >
+ </mat-form-field>
+</ng-container>
+<ng-container class="api-card-list">
+ <app-api-card *ngFor="let api of apiService.apis;" [api]="api" class="api-card"></app-api-card>
+</ng-container>
+<ng-container *ngIf="listType==='api'">
+ <mat-paginator [length]="apiService.totalSize"
+ [pageSize]="apiService.searchCriteria.paging.pageSize"
+ [pageSizeOptions]="[4, 8, 12, 16]"
+ (page)="pageEvent = OnPageChange($event)">
+ </mat-paginator>
+</ng-container>

ADD
src/app/components/api-card-list/api-card-list.component.sass
src/app/components/api-card-list/api-card-list.component.sass
RENAME
src/app/components/card-list/card-list.component.spec.ts
src/app/components/api-card-list/api-card-list.component.spec.ts
import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { CardListComponent } from './card-list.component';
+import { ApiCardListComponent } from './api-card-list.component';
describe('ApiCardListComponent', () => {
- let component: CardListComponent;
- let fixture: ComponentFixture<CardListComponent>;
+ let component: ApiCardListComponent;
+ let fixture: ComponentFixture<ApiCardListComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
- declarations: [ CardListComponent ]
+ declarations: [ ApiCardListComponent ]
})
.compileComponents();
});
beforeEach(() => {
- fixture = TestBed.createComponent(CardListComponent);
+ fixture = TestBed.createComponent(ApiCardListComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});

RENAME
src/app/components/card-list/card-list.component.ts
src/app/components/api-card-list/api-card-list.component.ts
import {Component, Input, OnInit} from '@angular/core';
-import {Plan} from "../../interfaces/plan";
-import { ApiService } from "../../services/api/api.service";
-import {PlanService} from "../../services/plan/plan.service";
import {ApiSummaryBean} from "../../services/backend/backend.service";
+import {ApiService} from "../../services/api/api.service";
import {PageEvent} from "@angular/material/paginator";
@Component({
- selector: 'app-card-list',
- templateUrl: './card-list.component.html',
- styleUrls: ['./card-list.component.sass']
+ selector: 'app-api-card-list',
+ templateUrl: './api-card-list.component.html',
+ styleUrls: ['./api-card-list.component.sass']
})
-export class CardListComponent implements OnInit {
+export class ApiCardListComponent implements OnInit {
apis: ApiSummaryBean[] = [];
- plans: Plan[] = [];
-
@Input() listType = "";
- @Input() cardType = "";
pageEvent: void;
inputEvent: void;
- constructor(public apiService: ApiService,
- private planService: PlanService) { }
+ constructor(public apiService: ApiService) { }
ngOnInit(): void {
if (this.listType === "api") {
this.getApis();
} else if (this.listType === "featuredApi") {
this.getFeaturedApis();
- } else {
- this.getPlans();
}
}
@@ -54,10 +46,4 @@ export class CardListComponent implements OnInit {
getFeaturedApis(): void {
this.apiService.getFeaturedApis();
}
-
- // ToDo Change to backend call
- getPlans(): void {
- this.planService.getPlans()
- .subscribe(plans => this.plans = plans);
- }
}

DELETE
src/app/components/card-list/card-list.component.html
-<ng-container *ngIf="cardType==='api'">
- <ng-container *ngIf="listType==='api'">
- <mat-form-field>
- <mat-icon matPrefix>search</mat-icon>
- <input matInput type="search"
- placeholder="search here"
- class="search-input"
- (input)="inputEvent = OnInput($event)" >
- </mat-form-field>
- </ng-container>
- <div class="api-card-list">
- <app-api-card *ngFor="let api of apiService.apis;" [api]="api" class="api-card"></app-api-card>
- </div>
- <ng-container *ngIf="listType==='api'">
- <mat-paginator [length]="apiService.totalSize"
- [pageSize]="apiService.searchCriteria.paging.pageSize"
- [pageSizeOptions]="[4, 8, 12, 16]"
- (page)="pageEvent = OnPageChange($event)">
- </mat-paginator>
- </ng-container>
-</ng-container>
-<ng-container class="plan-card" *ngIf="cardType==='plan'">
- <app-plan-card *ngFor="let plan of plans;" [plan]="plan"></app-plan-card>
-</ng-container>

DELETE
src/app/components/card-list/card-list.component.sass
-.api-card-list
- display: grid
- justify-content: stretch
- align-items: center
- grid-template-columns: repeat(auto-fit, 400px)
- grid-gap: 2.2rem

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

MODIFY
src/app/components/marketplace-api-details/marketplace-api-details.component.html
src/app/components/marketplace-api-details/marketplace-api-details.component.html
<ng-container *ngIf="apiService.currentApi">
<app-marketplace-api-description [api]="apiService.currentApi"></app-marketplace-api-description>
<h2>Plans</h2>
- <app-card-list [cardType]="'plan'"></app-card-list>
+ <app-plan-card-list></app-plan-card-list>
</ng-container>

MODIFY
src/app/components/marketplace/marketplace.component.html
src/app/components/marketplace/marketplace.component.html
<h2>{{'MPLACE.TITLE' | translate}}</h2>
-<app-card-list [cardType]="'api'" [listType]="'api'"></app-card-list>
+<app-api-card-list [listType]="'api'"></app-api-card-list>

ADD
src/app/components/plan-card-list/plan-card-list.component.html
+<app-plan-card *ngFor="let plan of plans;" [plan]="plan"></app-plan-card>

ADD
src/app/components/plan-card-list/plan-card-list.component.sass
src/app/components/plan-card-list/plan-card-list.component.sass
ADD
src/app/components/plan-card-list/plan-card-list.component.spec.ts
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PlanCardListComponent } from './plan-card-list.component';
+
+describe('PlanCardListComponent', () => {
+ let component: PlanCardListComponent;
+ let fixture: ComponentFixture<PlanCardListComponent>;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ declarations: [ PlanCardListComponent ]
+ })
+ .compileComponents();
+ });
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(PlanCardListComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});

ADD
src/app/components/plan-card-list/plan-card-list.component.ts
+import { Component, OnInit } from '@angular/core';
+import {Plan} from "../../interfaces/plan";
+import {PlanService} from "../../services/plan/plan.service";
+
+@Component({
+ selector: 'app-plan-card-list',
+ templateUrl: './plan-card-list.component.html',
+ styleUrls: ['./plan-card-list.component.sass']
+})
+export class PlanCardListComponent implements OnInit {
+
+
+ plans: Plan[] = [];
+
+ constructor(private planService: PlanService) { }
+
+ ngOnInit(): void {
+ this.getPlans();
+ }
+
+ // ToDo Change to backend call
+ getPlans(): void {
+ this.planService.getPlans()
+ .subscribe(plans => this.plans = plans);
+ }
+}

Split card-list.component into api-card-list and plan-card-list