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>
<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.
</p>
<div *ngIf="credentialCount > 0" style="margin-bottom: 50px;">
......
import { Component, OnInit, Inject } from '@angular/core';
import { MAT_DIALOG_DATA, MatTableDataSource } from '@angular/material';
import { Observable } from 'rxjs';
import { UserService } from '../../user.service';
import { DeploymentState, Service, CredentialState } from '../../types/types.module';
......@@ -12,7 +14,7 @@ import { DeploymentState, Service, CredentialState } from '../../types/types.mod
export class CredentialsComponent implements OnInit {
public columns = ["name", "value"];
public stateItem: DeploymentState;
public stateItem$: Observable<DeploymentState>;
public service: Service;
public credentialCount: number = 0;
public table: MatTableDataSource<any>;
......@@ -21,26 +23,32 @@ export class CredentialsComponent implements OnInit {
public userService: UserService,
@Inject(MAT_DIALOG_DATA) public data: any,
) {
if (data) {
this.stateItem$ = data.stateItem$;
}
}
ngOnInit() {
if (this.data) {
this.stateItem = this.data.stateItem;
this.service = this.stateItem.service;
if (this.stateItem$) {
this.stateItem$.subscribe(
(stateItem: DeploymentState) => {
this.service = stateItem.service;
const credentialList = [];
for (const key in this.stateItem.credentials) {
if (this.stateItem.credentials.hasOwnProperty(key)) {
credentialList.push(
{
name: key,
value: this.stateItem.credentials[key],
const credentialList = [];
for (const key in stateItem.credentials) {
if (stateItem.credentials.hasOwnProperty(key)) {
credentialList.push(
{
name: 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 { MatDialog, MatDialogRef } from '@angular/material/dialog';
import { Observable } from 'rxjs';
import { ProfileComponent } from './profile/profile.component';
import { AccountComponent } from './account/account.component';
import { QuestionnaireComponent } from './questionnaire/questionnaire.component';
import { CredentialsComponent } from './credentials/credentials.component';
import { MessageComponent } from './message/message.component';
import * as t from '../types/types.module';
import { User, DeploymentState } from '../types/types.module';
@Injectable()
export class DialogService {
......@@ -38,7 +40,7 @@ export class DialogService {
}
}
public openProfile(user: t.User) {
public openProfile(user: User) {
this.profileDialog = this.dialog.open(
ProfileComponent,
this.settingsData({
......@@ -54,7 +56,7 @@ export class DialogService {
);
}
public openQuestionnaire(stateItem: t.DeploymentState) {
public openQuestionnaire(stateItem: DeploymentState) {
this.questionnaireDialog = this.dialog.open(
QuestionnaireComponent,
this.settingsData({
......@@ -63,16 +65,16 @@ export class DialogService {
);
}
public openCredentials(stateItem: t.DeploymentState) {
public openCredentials(stateItem$: Observable<DeploymentState>) {
this.credentialsDialog = this.dialog.open(
CredentialsComponent,
this.settingsData({
stateItem: stateItem,
stateItem$: stateItem$,
}),
);
}
public openMessage(stateItem: t.DeploymentState) {
public openMessage(stateItem: DeploymentState) {
this.messageDialog = this.dialog.open(
MessageComponent,
this.settingsData({
......
......@@ -51,7 +51,7 @@
<button (click)="dialog.openQuestionnaire(stateItem)" mat-raised-button class="mat-elevation-z6"> Questionnaire </button>
</td>
<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 *ngIf="stateItem.state === 'failed'">
<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