add plans and policies to Api-Details Page
MODIFY
src/app/components/marketplace-api-description/marketplace-api-description.component.html
src/app/components/marketplace-api-description/marketplace-api-description.component.html
</div>
</mat-grid-tile>
</mat-grid-list>
- <h2 class="primary mt-40">Plans</h2>
<app-plan-card-list [apiVersion]="api"></app-plan-card-list>
</mat-expansion-panel>

MODIFY
src/app/components/marketplace-api-details/marketplace-api-details.component.ts
src/app/components/marketplace-api-details/marketplace-api-details.component.ts
import { Component, OnInit } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
+import { ActivatedRoute } from '@angular/router';
import { ApiService } from '../../services/api/api.service';
import { HeroService } from '../../services/hero/hero.service';
import { switchMap } from 'rxjs/operators';
@@ -15,8 +15,7 @@ export class MarketplaceApiDetailsComponent implements OnInit {
constructor(
private route: ActivatedRoute,
public apiService: ApiService,
- private heroService: HeroService,
- private router: Router
+ private heroService: HeroService
) {}
api!: IApi;
@@ -53,6 +52,8 @@ export class MarketplaceApiDetailsComponent implements OnInit {
return forkJoin(newVersions);
})
)
- .subscribe((data) => (this.apis = data));
+ .subscribe((data) => {
+ this.apis = data
+ });
}
}

MODIFY
src/app/components/plan-card-list/plan-card-list.component.html
src/app/components/plan-card-list/plan-card-list.component.html
+<ng-container *ngIf="plans.length > 0">
+ <h2 class="primary mt-40">Plans</h2>
+</ng-container>
<div id="plan-grid">
<ng-container *ngFor="let plan of plans">
<mat-card class="plan-card">
<mat-card-header class="card-header">
- <mat-card-title class="card-header-content">{{ plan.title }}</mat-card-title>
- <mat-card-subtitle class="card-header-content">{{ plan.subtitle }}</mat-card-subtitle>
+ <mat-card-title class="card-header-content">{{ plan.planName }}</mat-card-title>
+ <mat-card-subtitle class="card-header-content">{{ plan.planDescription }}</mat-card-subtitle>
</mat-card-header>
- <mat-card-content>
+ <mat-card-content [ngSwitch]="plan.planId + ':' + plan.version">
<mat-list>
- <ng-container *ngFor="let policy of plan.policies">
- <mat-list-item>
+ <ng-container *ngIf="apiPolicies.length > 0">
+ <mat-list-item *ngFor="let policy of apiPolicies">
<p>
- {{ policy.title }}
- <span class="right">{{ policy.configuration }}</span>
+ {{ policy.shortName }}
+ <span class="right">{{ policy.shortDescription }}</span>
</p>
</mat-list-item>
<mat-divider></mat-divider>
</ng-container>
+ <ng-container *ngFor="let planPolicies of planPoliciesMap | keyvalue">
+ <ng-container *ngSwitchCase="planPolicies.key">
+ <mat-list-item *ngFor="let policy of planPolicies.value">
+ <p>
+ {{ policy.shortName }}
+ <span class="right">{{ policy.shortDescription }}</span>
+ </p>
+ </mat-list-item>
+ <mat-divider></mat-divider>
+ </ng-container>
+ </ng-container>
</mat-list>
</mat-card-content>
<mat-card-actions id="plan-card-actions">

MODIFY
src/app/components/plan-card-list/plan-card-list.component.ts
src/app/components/plan-card-list/plan-card-list.component.ts
import {Component, Input, OnInit} from '@angular/core';
-import { Plan } from '../../interfaces/plan';
import { PlanService } from '../../services/plan/plan.service';
import { ActivatedRoute, Router } from "@angular/router";
import { SignUpService } from "../../services/sign-up/sign-up.service";
-import {IApiVersion} from "../../interfaces/ICommunication";
+import {IApiPlanSummary, IApiVersion} from "../../interfaces/ICommunication";
+import {IPolicyExt} from "../../interfaces/IPolicyExt";
+import {flatMap} from "rxjs/internal/operators";
+import {PolicyService} from "../../services/policy/policy.service";
@Component({
selector: 'app-plan-card-list',
@@ -12,29 +14,66 @@ import {IApiVersion} from "../../interfaces/ICommunication";
})
export class PlanCardListComponent implements OnInit {
@Input() apiVersion!: IApiVersion;
- plans: Plan[] = [];
+ plans: IApiPlanSummary[] = [];
constructor(private route: ActivatedRoute,
private planService: PlanService,
+ private policyService: PolicyService,
private signUpService: SignUpService,
private router: Router
) {}
+
+ planPoliciesMap = new Map<string, IPolicyExt[]>();
+ apiPolicies: IPolicyExt[] = [];
orgId = '';
apiId = '';
ngOnInit(): void {
this.orgId = this.route.snapshot.paramMap.get('orgId')!;
this.apiId = this.route.snapshot.paramMap.get('apiId')!;
- this.getPlans();
+ this.fetchPlansAndPolicies();
}
- // ToDo Change to backend call
- getPlans(): void {
- this.planService.getPlans().subscribe((plans) => (this.plans = plans));
+ onSignUp(plan: IApiPlanSummary) {
+ const policies: IPolicyExt[] = [];
+ const planIdVersionMapped = plan.planId + ':' + plan.version;
+ const foundPlanPolicies = this.planPoliciesMap.get(planIdVersionMapped);
+
+ if (foundPlanPolicies) {
+ policies.push(...foundPlanPolicies);
+ }
+ if (this.apiPolicies.length > 0) {
+ policies.concat(this.apiPolicies);
}
- onSignUp(plan: Plan) {
- this.signUpService.setSignUpInfo(this.apiVersion, plan, this.orgId);
+ this.signUpService.setSignUpInfo(this.orgId, this.apiVersion, plan, policies);
this.router.navigate(['/api-signup', this.orgId, this.apiId]);
}
+
+ private fetchPlansAndPolicies(): void {
+ this.planService.getPlans(this.orgId, this.apiId, this.apiVersion.version).pipe(
+ flatMap((apiPlanSummaries: IApiPlanSummary[]) => {
+ this.plans = apiPlanSummaries;
+ return apiPlanSummaries
+ }),
+ flatMap((apiPlanSummary: IApiPlanSummary) => {
+ return this.policyService.getPlanPolicies(this.orgId, apiPlanSummary.planId, apiPlanSummary.version)
+ })
+ ).subscribe((extendedPolicy: IPolicyExt) => {
+ this.extractPolicy(extendedPolicy);
+ });
+ this.policyService.getApiPolicies(this.orgId, this.apiId, this.apiVersion.version).subscribe((extendedApiPolicy: IPolicyExt) => {
+ this.apiPolicies.push(extendedApiPolicy);
+ })
+ }
+
+ private extractPolicy(policyExt: IPolicyExt) {
+ const planIdVersionMapped = policyExt.planId + ':' + policyExt.planVersion;
+ const foundPolicies = this.planPoliciesMap.get(planIdVersionMapped);
+ if (foundPolicies) {
+ this.planPoliciesMap.set(planIdVersionMapped, foundPolicies.concat(policyExt))
+ } else {
+ this.planPoliciesMap.set(planIdVersionMapped, [policyExt]);
+ }
+ }
}

MODIFY
src/app/interfaces/ISignUpInfo.ts
src/app/interfaces/ISignUpInfo.ts
-import { IApiVersion } from './ICommunication';
-import { Plan } from './plan';
+import {IApiPlanSummary, IApiVersion} from './ICommunication';
+import {IPolicyExt} from "./IPolicyExt";
export interface ISignUpInfo {
apiVersion: IApiVersion;
- plan: Plan;
+ plan: IApiPlanSummary;
+ policies: IPolicyExt[];
organizationId: string;
}

MODIFY
src/app/services/sign-up/sign-up.service.ts
src/app/services/sign-up/sign-up.service.ts
import { Injectable } from '@angular/core';
import { ISignUpInfo } from '../../interfaces/ISignUpInfo';
-import { IApiVersion } from '../../interfaces/ICommunication';
-import { Plan } from '../../interfaces/plan';
+import {IApiPlanSummary, IApiVersion} from '../../interfaces/ICommunication';
+import {IPolicyExt} from "../../interfaces/IPolicyExt";
@Injectable({
providedIn: 'root',
@@ -14,14 +14,16 @@ export class SignUpService {
}
public setSignUpInfo(
+ orgId: string,
apiVersion: IApiVersion,
- plan: Plan,
- organizationId: string
+ plan: IApiPlanSummary,
+ policies: IPolicyExt[]
): void {
this.signUpInfo = {
apiVersion: apiVersion,
plan: plan,
- organizationId: organizationId,
+ organizationId: orgId,
+ policies: policies
};
}
}

add plans and policies to Api-Details Page