refactor: interfaces, css, language, table empty row, select row -> orga and client input field, highlighting for selected row
MODIFY
src/app/components/marketplace-api-terms/marketplace-api-terms.component.html
src/app/components/marketplace-api-terms/marketplace-api-terms.component.html
>
</mat-form-field>
-<mat-card class="mb-20">
+<mat-card class="mb-20" id="terms-card">
<mat-card-title>Agreement</mat-card-title>
<mat-card-content>
<p>
- <mat-checkbox [(ngModel)]="acceptedTerms" (change)="onClick()"
+ <mat-checkbox color="primary" [(ngModel)]="acceptedTerms" (change)="onClick()"
>I agree to the
<a [href]="termsLink">terms and conditions</a></mat-checkbox
>
</p>
<p>
- <mat-checkbox [(ngModel)]="acceptedPrivacyTerms" (change)="onClick()"
+ <mat-checkbox color="primary" [(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.scss
src/app/components/marketplace-api-terms/marketplace-api-terms.component.scss
@@ -2,10 +2,10 @@ mat-form-field {
width: 100%;
}
-mat-card {
- width: 25%;
-}
-
.mat-input-element:disabled{
color: black;
}
+
+#terms-card{
+ width: fit-content;
+}

MODIFY
src/app/components/marketplace-client-app/marketplace-client-app.component.html
src/app/components/marketplace-client-app/marketplace-client-app.component.html
<div class="container">
<form>
<mat-form-field *ngIf="organizations.length > 1" class="mr-20">
- <mat-label>Organization</mat-label>
+ <mat-label>{{'COMMON.ORGANIZATION' | translate}}</mat-label>
<mat-select [(ngModel)]="organizationId" name="orgSelect">
<mat-option *ngFor="let org of organizations" [value]="org.id">
{{ org.name }}
<table mat-table [dataSource]="dataSource" class="mat-elevation-z2 mt-20 mb-20">
<!-- Org Name Column - only displayed if user has more than 1 -->
<ng-container matColumnDef="org-name">
- <th mat-header-cell *matHeaderCellDef>Organization Name</th>
- <td mat-cell *matCellDef="let element">{{ element.organizationName }}</td>
+ <th mat-header-cell *matHeaderCellDef>{{'COMMON.ORGANIZATION' | translate}}</th>
+ <td mat-cell *matCellDef="let element"><span [class.primary]="clickedRows.has(element)">{{ element.organizationName }}</span></td>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="name">
- <th mat-header-cell *matHeaderCellDef>Application Name</th>
- <td mat-cell *matCellDef="let element">{{ element.name }}</td>
+ <th mat-header-cell *matHeaderCellDef>{{'COMMON.APPLICATION' | translate}}</th>
+ <td mat-cell *matCellDef="let element"><span [class.primary]="clickedRows.has(element)">{{ element.name }}</span></td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
mat-row
*matRowDef="let row; columns: displayedColumns"
(click)="selectClient(row)"
- [class.is-selected]="clickedRows.has(row)"
></tr>
+ <tr class="mat-row" *matNoDataRow>
+ <td class="mat-cell" colspan="2">{{'COMMON.NO_DATA_FOUND' | translate}}</td>
+ </tr>
</table>

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, EventEmitter, Output, OnInit } from '@angular/core';
import { BackendService } from '../../services/backend/backend.service';
import { MatTableDataSource } from '@angular/material/table';
-import { IClient, IOrganizationSummary } from '../../interfaces/ICommunication';
+import { IClientSummary, IOrganizationSummary } from '../../interfaces/ICommunication';
@Component({
selector: 'app-marketplace-client-app',
@@ -10,13 +10,13 @@ import { IClient, IOrganizationSummary } from '../../interfaces/ICommunication';
})
export class MarketplaceClientAppComponent implements OnInit {
displayedColumns: string[] = ['name'];
- dataSource = new MatTableDataSource<IClient>([]);
- clickedRows = new Set<IClient>();
+ dataSource = new MatTableDataSource<IClientSummary>([]);
+ clickedRows = new Set<IClientSummary>();
clientName = '';
organizationId = '';
organizations: IOrganizationSummary[] = [];
- @Output() selectedClients = new EventEmitter<Set<IClient>>();
+ @Output() selectedClients = new EventEmitter<Set<IClientSummary>>();
constructor(private backend: BackendService) {}
@@ -24,11 +24,12 @@ export class MarketplaceClientAppComponent implements OnInit {
this.loadClients();
}
- public selectClient(client: IClient): void {
+ public selectClient(client: IClientSummary): void {
// always clear, because at the moment we only allow one client to be selected
this.clickedRows.clear();
this.clickedRows.add(client);
this.clientName = client.name;
+ this.organizationId = client.organizationId;
this.selectedClients.emit(this.clickedRows);
}
@@ -36,7 +37,6 @@ export class MarketplaceClientAppComponent implements OnInit {
* Add a new client
*/
public addClient(): void {
- console.log(this.organizations);
const orgId: string =
this.organizations.length > 1
? this.organizationId
@@ -62,8 +62,8 @@ export class MarketplaceClientAppComponent implements OnInit {
(error) => console.error(error)
);
- this.backend.getClients().subscribe(
- (clients: IClient[]) => {
+ this.backend.getEditableClients().subscribe(
+ (clients: IClientSummary[]) => {
this.dataSource = new MatTableDataSource(clients);
},
(error) => console.error(error)

MODIFY
src/app/components/marketplace-signup-stepper/marketplace-signup-stepper.component.ts
src/app/components/marketplace-signup-stepper/marketplace-signup-stepper.component.ts
-import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core';
+import { Component, OnInit } 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, IClient } from '../../interfaces/ICommunication';
+import { IClientSummary } from '../../interfaces/ICommunication';
import { STEPPER_GLOBAL_OPTIONS } from '@angular/cdk/stepper';
import { MatStepper } from '@angular/material/stepper';
import { SnackbarService } from '../../services/snackbar/snackbar.service';
@@ -20,7 +19,7 @@ import { SnackbarService } from '../../services/snackbar/snackbar.service';
],
})
export class MarketplaceSignupStepperComponent implements OnInit {
- selectedClients = new Set<IClient>();
+ selectedClients = new Set<IClientSummary>();
agreedTermsAndPrivacy: boolean | undefined;
constructor(
@@ -40,7 +39,7 @@ export class MarketplaceSignupStepperComponent implements OnInit {
});
}
- checkApplications($event: Set<IClient>) {
+ checkApplications($event: Set<IClientSummary>) {
this.selectedClients = $event;
}
@@ -50,7 +49,6 @@ export class MarketplaceSignupStepperComponent implements OnInit {
nextStep1(stepper: MatStepper) {
if (this.selectedClients.size == 0) {
- // TODO translate
this.snackbar.showErrorSnackBar(
this.translator.instant('WIZARD.APPLICATION_ERROR')
);

MODIFY
src/app/services/backend/backend.service.ts
src/app/services/backend/backend.service.ts
@@ -7,7 +7,7 @@ import {
IApi,
IApiVersion,
IApiVersionSummary,
- IClient, IContract, IContractSummary,
+ IClient, IClientSummary, IContract, IContractSummary,
IOrganization,
IOrganizationSummary,
ISearchCriteria,
@@ -167,12 +167,6 @@ export class BackendService {
return this.http.get<IApiVersion>(url, this.httpOptions);
}
- public getClients(): Observable<Array<IClient>> {
- const username = this.keycloak.getKeycloakInstance().profile?.username;
- const url = this.endpoint + `/users/${username}/editable-clients`;
- return this.http.get(url) as Observable<Array<IClient>>;
- }
-
public getClientOrgs(): Observable<Array<IOrganizationSummary>> {
const username = this.keycloak.getKeycloakInstance().profile?.username;
const url = this.endpoint + `/users/${username}/clientorgs`;

MODIFY
src/styles.scss
src/styles.scss
@@ -181,3 +181,7 @@ a {
.mat-form-field-suffix {
margin-left: 10px;
}
+
+.mat-simple-snackbar{
+ color: white;
+}

refactor: interfaces, css, language, table empty row, select row -> orga and client input field, highlighting for selected row