refactor: support multiple orgs
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-select [(ngModel)]="organizationId" name="orgSelect">
+ <mat-option *ngFor="let org of organizations" [value]="org.id">
+ {{ org.name }}
+ </mat-option>
+ </mat-select></mat-form-field
+ >
<mat-form-field>
<mat-label>{{ "COMMON.SEARCH" | translate }}</mat-label>
<input
<p class="primary">{{ "CLIENT_CREATE.SELECT" | translate }}</p>
<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>
+ </ng-container>
+
<!-- Name Column -->
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef>Application Name</th>

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 { switchMap } from 'rxjs/operators';
-import { IClient } from '../../interfaces/ICommunication';
+import { IClient, IOrganizationSummary } from '../../interfaces/ICommunication';
@Component({
selector: 'app-marketplace-client-app',
@@ -14,6 +13,8 @@ export class MarketplaceClientAppComponent implements OnInit {
dataSource = new MatTableDataSource<IClient>([]);
clickedRows = new Set<IClient>();
clientName = '';
+ organizationId = '';
+ organizations: IOrganizationSummary[] = [];
@Output() selectedClients = new EventEmitter<Set<IClient>>();
@@ -35,14 +36,12 @@ export class MarketplaceClientAppComponent implements OnInit {
* Add a new client
*/
public addClient(): void {
- this.backend
- .getClientOrgs()
- .pipe(
- switchMap((orgs) => {
- return this.backend.createClient(orgs[0].id, this.clientName);
- })
- )
- .subscribe(
+ console.log(this.organizations);
+ const orgId: string =
+ this.organizations.length > 1
+ ? this.organizationId
+ : this.organizations[0].id;
+ this.backend.createClient(orgId, this.clientName).subscribe(
() => this.loadClients(),
(error) => console.error(error)
);
@@ -52,18 +51,27 @@ export class MarketplaceClientAppComponent implements OnInit {
* Refresh list of clients
* @private
*/
- private loadClients() {
+ private loadClients(): void {
+ this.backend.getClientOrgs().subscribe(
+ (orgs: IOrganizationSummary[]) => {
+ this.organizations = orgs;
+ if (orgs.length > 1) {
+ this.displayedColumns = ['org-name', 'name'];
+ }
+ },
+ (error) => console.error(error)
+ );
+
this.backend.getClients().subscribe(
(clients: IClient[]) => {
this.dataSource = new MatTableDataSource(clients);
},
- (error) => {
- console.error(error);
- }
+ (error) => console.error(error)
);
}
- public applyFilter(event: Event) {
+ public applyFilter(event: Event): void {
+ this.clickedRows.clear();
// https://material.angular.io/components/table/examples
const filterValue = (event.target as HTMLInputElement).value;
this.dataSource.filter = filterValue.trim().toLowerCase();

MODIFY
src/assets/i18n/de.json
src/assets/i18n/de.json
"CANCEL": "Abbrechen",
"YES": "Ja",
"NO": "Nein",
- "SEARCH": "Suchen",
+ "SEARCH": "Suchen oder erstellen",
"CREATE": "Erstellen",
"NEXT": "Weiter",
"FINISH": "Fertig"

MODIFY
src/assets/i18n/en.json
src/assets/i18n/en.json
"CANCEL": "Cancel",
"YES": "Yes",
"NO": "No",
- "SEARCH": "Search",
+ "SEARCH": "Search or create",
"CREATE": "Create",
"NEXT": "Next",
"FINISH": "Finish"

refactor: support multiple orgs