refactor: change stepper
MODIFY
src/app/components/marketplace-api-terms/marketplace-api-terms.component.html
src/app/components/marketplace-api-terms/marketplace-api-terms.component.html
<mat-card-title>Agreement</mat-card-title>
<mat-card-content>
<p>
- <mat-checkbox [(ngModel)]="agreed"
+ <mat-checkbox [(ngModel)]="acceptedTerms" (change)="onClick()"
>I agree to the
<a [href]="termsLink">terms and conditions</a></mat-checkbox
>
</p>
<p>
- <mat-checkbox [(ngModel)]="accepted"
+ <mat-checkbox [(ngModel)]="acceptedPrivacyTerms" (change)="onClick()"
>I accept the <a [href]="privacyLink">privacy policy</a></mat-checkbox
>
</p>

MODIFY
src/app/components/marketplace-api-terms/marketplace-api-terms.component.ts
src/app/components/marketplace-api-terms/marketplace-api-terms.component.ts
-import { Component, OnInit } from '@angular/core';
+import { Component, EventEmitter, OnInit, Output } from '@angular/core';
@Component({
selector: 'app-marketplace-api-terms',
@@ -6,8 +6,9 @@ import { Component, OnInit } from '@angular/core';
styleUrls: ['./marketplace-api-terms.component.scss'],
})
export class MarketplaceApiTermsComponent implements OnInit {
- agreed = false;
- accepted = false;
+ @Output() agreedTermsAndPrivacy = new EventEmitter<boolean>();
+ acceptedTerms = false;
+ acceptedPrivacyTerms = false;
termsLink = 'https://www.apache.org/licenses/LICENSE-2.0';
privacyLink = 'https://www.apache.org/licenses/LICENSE-2.0';
@@ -67,4 +68,9 @@ export class MarketplaceApiTermsComponent implements OnInit {
constructor() {}
ngOnInit(): void {}
+
+ onClick() {
+ if (this.acceptedPrivacyTerms && this.acceptedTerms)
+ this.agreedTermsAndPrivacy.emit(true);
+ }
}

MODIFY
src/app/components/marketplace-client-app/marketplace-client-app.component.ts
src/app/components/marketplace-client-app/marketplace-client-app.component.ts
-import { Component, OnInit } from '@angular/core';
+import { Component, EventEmitter, Output, OnInit } from '@angular/core';
import { BackendService } from '../../services/backend/backend.service';
import { MatTableDataSource } from '@angular/material/table';
import { switchMap } from 'rxjs/operators';
@@ -15,6 +15,8 @@ export class MarketplaceClientAppComponent implements OnInit {
clickedRows = new Set<IClient>();
clientName = '';
+ @Output() selectedClients = new EventEmitter<Set<IClient>>();
+
constructor(private backend: BackendService) {}
ngOnInit(): void {
@@ -26,6 +28,7 @@ export class MarketplaceClientAppComponent implements OnInit {
this.clickedRows.clear();
this.clickedRows.add(client);
this.clientName = client.name;
+ this.selectedClients.emit(this.clickedRows);
}
/**

MODIFY
src/app/components/marketplace-signup-stepper/marketplace-signup-stepper.component.html
src/app/components/marketplace-signup-stepper/marketplace-signup-stepper.component.html
-<h1>Signup Stepper</h1>
-
-<mat-stepper linear>
- <mat-step label="{{ 'WIZARD.FIRST_STEP_LABEL' | translate }}">
+<div id="center">
+ <mat-stepper #stepper linear>
+ <mat-step
+ label="{{ 'WIZARD.FIRST_STEP_LABEL' | translate }}"
+ [completed]="selectedClients.size >= 1"
+ >
<mat-card>
<mat-card-header>
<mat-card-title>{{
}}</mat-card-title>
</mat-card-header>
<mat-card-content class="mat-card-header-text">
- <app-marketplace-client-app></app-marketplace-client-app>
+ <app-marketplace-client-app
+ (selectedClients)="checkApplications($event)"
+ ></app-marketplace-client-app>
</mat-card-content>
<mat-divider></mat-divider>
<mat-card-actions class="right">
- <button mat-raised-button matStepperNext color="primary">
+ <button
+ mat-raised-button
+ color="primary"
+ (click)="nextStep1(stepper)"
+ >
{{ "COMMON.NEXT" | translate }}
</button>
</mat-card-actions>
</mat-card>
</mat-step>
- <mat-step label="{{ 'WIZARD.SECOND_STEP_LABEL' | translate }}">
+ <mat-step
+ label="{{ 'WIZARD.SECOND_STEP_LABEL' | translate }}"
+ [completed]="agreedTermsAndPrivacy"
+ >
<mat-card>
<mat-card-header>
<mat-card-title>{{
}}</mat-card-title>
</mat-card-header>
<mat-card-content class="mat-card-header-text">
- <app-marketplace-api-terms></app-marketplace-api-terms>
+ <app-marketplace-api-terms
+ (agreedTermsAndPrivacy)="checkTerms($event)"
+ ></app-marketplace-api-terms>
</mat-card-content>
<mat-divider></mat-divider>
<mat-card-actions class="right">
- <button mat-raised-button matStepperNext color="primary">
+ <button
+ mat-raised-button
+ matStepperNext
+ color="primary"
+ (click)="nextStep2()"
+ >
{{ "COMMON.NEXT" | translate }}
</button>
</mat-card-actions>
</mat-card-actions>
</mat-card>
</mat-step>
- <mat-step label="{{ 'WIZARD.FORTH_STEP_LABEL' | translate }}">
+ <mat-step label="{{ 'WIZARD.FORTH_STEP_LABEL' | translate }}" state="phone">
<mat-card>
<mat-card-header>
<mat-card-title>{{
</mat-card>
</mat-step>
</mat-stepper>
+</div>

MODIFY
src/app/components/marketplace-signup-stepper/marketplace-signup-stepper.component.scss
src/app/components/marketplace-signup-stepper/marketplace-signup-stepper.component.scss
display: flex;
justify-content: flex-end;
}
+
+mat-stepper {
+ min-width: 30vw;
+ max-width: 50vw;
+}
+
+#center {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}

MODIFY
src/app/components/marketplace-signup-stepper/marketplace-signup-stepper.component.ts
src/app/components/marketplace-signup-stepper/marketplace-signup-stepper.component.ts
-import { Component, OnInit } from '@angular/core';
+import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { HeroService } from '../../services/hero/hero.service';
import { TranslateService } from '@ngx-translate/core';
import { ApiService } from '../../services/api/api.service';
-import { IApiVersion } from '../../interfaces/ICommunication';
+import { IApiVersion, IClient } from '../../interfaces/ICommunication';
+import { STEPPER_GLOBAL_OPTIONS } from '@angular/cdk/stepper';
+import { MatStepper } from '@angular/material/stepper';
+import { SnackbarService } from '../../services/snackbar/snackbar.service';
@Component({
selector: 'app-marketplace-signup-stepper',
templateUrl: './marketplace-signup-stepper.component.html',
styleUrls: ['./marketplace-signup-stepper.component.scss'],
+ providers: [
+ {
+ provide: STEPPER_GLOBAL_OPTIONS,
+ useValue: { showError: true },
+ },
+ ],
})
export class MarketplaceSignupStepperComponent implements OnInit {
- // ToDo replace fixed api mockData with backendCall
- api!: IApiVersion;
-
- features: string[] = ['fast', 'free', 'fancy features'];
- markdown: string =
- '# In inmotae messes et tamen sustinuit fieri\n' +
- '\n' +
- '## Iam nataque prospexit\n' +
- '\n' +
- 'Lorem markdownum accingere levatae inspicitur leve Nereides offensa *renidenti\n' +
- 'deflent illis* licet operum sonitum descendere multo, errorem nec ille. Monstra\n' +
- 'superest, si negat diebus alimenta vibrantia aderas loquendo in nec **bicorni**\n' +
- 'advena dixit herosmaxime adpulit arduus dum!\n' +
- '\n' +
- '1. Cristis vetus totumque celeremque creber sacris et\n' +
- '2. Care membra positis centum\n' +
- '3. Sparsitque Bacchus\n' +
- '4. Ausim dixi vittam orbem\n' +
- '5. Tempora pars mutua Oceano soporiferam Iove imis\n' +
- '6. Quem metus\n' +
- '\n' +
- 'Se vitae, sede visus illa, virgaque amnis matris protinus parentis se furor\n' +
- 'quotiens, tempora. Nec iuro et fieri et flere redit opta arma et quidem\n' +
- '[plurimus](http://negat.org/) cuius. Palustris Bromumque transformat tu virtus\n' +
- 'tritumque armat formam iube varias crudelesque dedit. Supplex ipse, omnes neque\n' +
- 'Haemoniam ipsoque sanguine mox suppressa montes. Cervos renuente, pavor aere\n' +
- 'durat revocata?\n' +
- '\n' +
- ' var ios = -2;\n' +
- ' fileItunesSchema = software;\n' +
- ' cold_meta_wimax += boxExpansion - ribbonWord * version_ripcording_os(\n' +
- ' languageHyperlinkStatus);\n' +
- '\n' +
- '## De pastor natos refluum\n' +
- '\n' +
- 'Et ora, est et moderere intra procorum, suam ut instare nam. Obstipuere\n' +
- '**secundi vertice**. Levavit cum molitur caput dederat lumina.\n' +
- '\n' +
- '1. Ibat pependit auguris quid\n' +
- '2. Lupos vietum\n' +
- '3. Rerum sumptis percusso texitur ferrum novitatis quodque\n' +
- '\n' +
- 'Producet fluentia prope Titania extenuatur Arethusa corpora *tela geras reddita*\n' +
- 'fallaces sola tibi et admonitu, formosior. Suos reduxit *supremo* amicius!\n' +
- '\n' +
- '> Regione magorum iuvenis latosque coeunt: necis enim,\n' +
- '> [Theseu](http://www.exsiccata-vultu.net/) Arethusae vincat *altera carcere*\n' +
- '> vetito tenetque regales, leonem? Praestiteris alas: sagitta satis sua retexit\n' +
- '> restare amore aliquis montesque. Quoque egressa exhalat inque; si Procris?\n' +
- '\n' +
- 'Inplevere maior. Ubi aut supplicium Averna, ciet percussis Praebuimus saepe\n' +
- 'fugisse quae est: a.';
+ selectedClients = new Set<IClient>();
+ agreedTermsAndPrivacy: boolean | undefined;
constructor(
private heroService: HeroService,
- private apiService: ApiService,
private route: ActivatedRoute,
- private translator: TranslateService
+ private translator: TranslateService,
+ private snackbar: SnackbarService
) {}
ngOnInit(): void {
this.setUpHero();
- this.getApi();
}
private setUpHero() {
@@ -82,14 +40,28 @@ export class MarketplaceSignupStepperComponent implements OnInit {
});
}
- private getApi(): void {
- const orgId = this.route.snapshot.paramMap.get('orgId')!;
- const apiId = this.route.snapshot.paramMap.get('apiId')!;
+ checkApplications($event: Set<IClient>) {
+ this.selectedClients = $event;
+ }
- this.apiService.getApi(orgId, apiId);
+ checkTerms($event: boolean) {
+ this.agreedTermsAndPrivacy = $event;
+ }
- this.apiService.currentApi.subscribe((api) => {
- //this.api = api;
- });
+ nextStep1(stepper: MatStepper) {
+ if (this.selectedClients.size == 0) {
+ // TODO translate
+ this.snackbar.showErrorSnackBar(
+ this.translator.instant('WIZARD.APPLICATION_ERROR')
+ );
+ }
+ stepper.next();
+ }
+
+ nextStep2() {
+ if (!this.agreedTermsAndPrivacy)
+ this.snackbar.showErrorSnackBar(
+ this.translator.instant('WIZARD.TERMS_ERROR')
+ );
}
}

MODIFY
src/assets/i18n/en.json
src/assets/i18n/en.json
"FIRST_STEP_TITLE": "Select or create an new application",
"SECOND_STEP_TITLE": "Terms and Conditions",
"THIRD_STEP_TITLE": "Summary",
- "FORTH_STEP_TITLE": "Confirmation"
+ "FORTH_STEP_TITLE": "Confirmation",
+ "APPLICATION_ERROR": "You have to select one application first",
+ "TERMS_ERROR": "You have to accept the service terms"
}
}

refactor: change stepper