Commit e3854327 authored by Lukas Burgey's avatar Lukas Burgey

Make credential dialogue reactive

parent 7ec40c26
<div class="mat-typography"> <div *ngIf="(stateItem$ | async) as stateItem" class="mat-typography">
<h2>Credentials</h2> <h2>Credentials</h2>
<p> <p>
For access to the service {{ service.name }} at {{ service.site.name }} additional credentials are needed. For access to the service {{ stateItem.service.name }} at {{ stateItem.service.site.name }} additional credentials are needed.
The additional credentials are listed below. The additional credentials are listed below.
</p> </p>
<div *ngIf="credentialCount > 0" style="margin-bottom: 50px;"> <div *ngIf="credentialCount > 0" style="margin-bottom: 50px;">
......
import { Component, OnInit, Inject } from '@angular/core'; import { Component, OnInit, Inject } from '@angular/core';
import { MAT_DIALOG_DATA, MatTableDataSource } from '@angular/material'; import { MAT_DIALOG_DATA, MatTableDataSource } from '@angular/material';
import { Observable } from 'rxjs';
import { UserService } from '../../user.service'; import { UserService } from '../../user.service';
import { DeploymentState, Service, CredentialState } from '../../types/types.module'; import { DeploymentState, Service, CredentialState } from '../../types/types.module';
...@@ -12,7 +14,7 @@ import { DeploymentState, Service, CredentialState } from '../../types/types.mod ...@@ -12,7 +14,7 @@ import { DeploymentState, Service, CredentialState } from '../../types/types.mod
export class CredentialsComponent implements OnInit { export class CredentialsComponent implements OnInit {
public columns = ["name", "value"]; public columns = ["name", "value"];
public stateItem: DeploymentState; public stateItem$: Observable<DeploymentState>;
public service: Service; public service: Service;
public credentialCount: number = 0; public credentialCount: number = 0;
public table: MatTableDataSource<any>; public table: MatTableDataSource<any>;
...@@ -21,26 +23,32 @@ export class CredentialsComponent implements OnInit { ...@@ -21,26 +23,32 @@ export class CredentialsComponent implements OnInit {
public userService: UserService, public userService: UserService,
@Inject(MAT_DIALOG_DATA) public data: any, @Inject(MAT_DIALOG_DATA) public data: any,
) { ) {
if (data) {
this.stateItem$ = data.stateItem$;
}
} }
ngOnInit() { ngOnInit() {
if (this.data) { if (this.stateItem$) {
this.stateItem = this.data.stateItem; this.stateItem$.subscribe(
this.service = this.stateItem.service; (stateItem: DeploymentState) => {
this.service = stateItem.service;
const credentialList = []; const credentialList = [];
for (const key in this.stateItem.credentials) { for (const key in stateItem.credentials) {
if (this.stateItem.credentials.hasOwnProperty(key)) { if (stateItem.credentials.hasOwnProperty(key)) {
credentialList.push( credentialList.push(
{ {
name: key, name: key,
value: this.stateItem.credentials[key], value: stateItem.credentials[key],
}
);
} }
); }
this.credentialCount = credentialList.length;
this.table = new MatTableDataSource(credentialList);
} }
} );
this.credentialCount = credentialList.length;
this.table = new MatTableDataSource(credentialList);
} }
} }
} }
import { Injectable } from '@angular/core'; import { Injectable } from '@angular/core';
import { MatDialog, MatDialogRef } from '@angular/material/dialog'; import { MatDialog, MatDialogRef } from '@angular/material/dialog';
import { Observable } from 'rxjs';
import { ProfileComponent } from './profile/profile.component'; import { ProfileComponent } from './profile/profile.component';
import { AccountComponent } from './account/account.component'; import { AccountComponent } from './account/account.component';
import { QuestionnaireComponent } from './questionnaire/questionnaire.component'; import { QuestionnaireComponent } from './questionnaire/questionnaire.component';
import { CredentialsComponent } from './credentials/credentials.component'; import { CredentialsComponent } from './credentials/credentials.component';
import { MessageComponent } from './message/message.component'; import { MessageComponent } from './message/message.component';
import * as t from '../types/types.module'; import { User, DeploymentState } from '../types/types.module';
@Injectable() @Injectable()
export class DialogService { export class DialogService {
...@@ -38,7 +40,7 @@ export class DialogService { ...@@ -38,7 +40,7 @@ export class DialogService {
} }
} }
public openProfile(user: t.User) { public openProfile(user: User) {
this.profileDialog = this.dialog.open( this.profileDialog = this.dialog.open(
ProfileComponent, ProfileComponent,
this.settingsData({ this.settingsData({
...@@ -54,7 +56,7 @@ export class DialogService { ...@@ -54,7 +56,7 @@ export class DialogService {
); );
} }
public openQuestionnaire(stateItem: t.DeploymentState) { public openQuestionnaire(stateItem: DeploymentState) {
this.questionnaireDialog = this.dialog.open( this.questionnaireDialog = this.dialog.open(
QuestionnaireComponent, QuestionnaireComponent,
this.settingsData({ this.settingsData({
...@@ -63,16 +65,16 @@ export class DialogService { ...@@ -63,16 +65,16 @@ export class DialogService {
); );
} }
public openCredentials(stateItem: t.DeploymentState) { public openCredentials(stateItem$: Observable<DeploymentState>) {
this.credentialsDialog = this.dialog.open( this.credentialsDialog = this.dialog.open(
CredentialsComponent, CredentialsComponent,
this.settingsData({ this.settingsData({
stateItem: stateItem, stateItem$: stateItem$,
}), }),
); );
} }
public openMessage(stateItem: t.DeploymentState) { public openMessage(stateItem: DeploymentState) {
this.messageDialog = this.dialog.open( this.messageDialog = this.dialog.open(
MessageComponent, MessageComponent,
this.settingsData({ this.settingsData({
......
...@@ -51,7 +51,7 @@ ...@@ -51,7 +51,7 @@
<button (click)="dialog.openQuestionnaire(stateItem)" mat-raised-button class="mat-elevation-z6"> Questionnaire </button> <button (click)="dialog.openQuestionnaire(stateItem)" mat-raised-button class="mat-elevation-z6"> Questionnaire </button>
</td> </td>
<td *ngIf="stateItem.state === 'deployed'"> <td *ngIf="stateItem.state === 'deployed'">
<button (click)="dialog.openCredentials(stateItem)" mat-raised-button class="mat-elevation-z6"> Credentials </button> <button (click)="dialog.openCredentials(subscribeStateItem(site, service))" mat-raised-button class="mat-elevation-z6"> Credentials </button>
</td> </td>
<td *ngIf="stateItem.state === 'failed'"> <td *ngIf="stateItem.state === 'failed'">
<button (click)="dialog.openMessage(stateItem)" mat-raised-button class="mat-elevation-z6"> Failure </button> <button (click)="dialog.openMessage(stateItem)" mat-raised-button class="mat-elevation-z6"> Failure </button>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment