Commit 38964bf1 authored by Lukas Burgey's avatar Lukas Burgey

Make answers user editable

parent 1b7ba703
...@@ -19,8 +19,6 @@ export class DialogService { ...@@ -19,8 +19,6 @@ export class DialogService {
credentialsDialog: MatDialogRef<any>; credentialsDialog: MatDialogRef<any>;
messageDialog: MatDialogRef<any>; messageDialog: MatDialogRef<any>;
constructor( constructor(
private dialog: MatDialog, private dialog: MatDialog,
) { } ) { }
...@@ -52,9 +50,7 @@ export class DialogService { ...@@ -52,9 +50,7 @@ export class DialogService {
public openQuestionnaire(stateItem: DeploymentState) { public openQuestionnaire(stateItem: DeploymentState) {
this.questionnaireDialog = this.dialog.open( this.questionnaireDialog = this.dialog.open(
QuestionnaireComponent, QuestionnaireComponent,
this.settingsData({ this.settingsData(stateItem),
stateItem: stateItem,
}),
); );
} }
......
<div class="mat-typography"> <div *ngIf="(state$ | async) as state" class="mat-typography">
<h2>Data questionnaire</h2> <h2>Data questionnaire</h2>
<p> <p>
The site {{stateItem.site.name}} needs the following data to give you access to the service {{ The site {{ state.site.name }} needs the following data to give you access to the service {{ state.service.name }}.
stateItem.service.name}}. </p>
</p> <form *ngIf="(answers$ | async) as answers" class="form-vertical" #answerForm="ngForm">
<form class="form-vertical" #questionnaireForm="ngForm"> <mat-form-field *ngFor="let key of (state.questionnaire | ObjKeys)">
<mat-form-field *ngFor="let key of stateItem.questionnaire | ObjKeys"> <input matInput required placeholder="{{ state.questionnaire[key] }}" [(ngModel)]="answers[key]" [name]="key">
<input matInput required </mat-form-field>
placeholder="{{stateItem.questionnaire[key]}}" [(ngModel)]="answers[key]" name="key"> <button (click)="sendAnswers(state, answers)" color="primary" type="submit" [disabled]="!answerForm.form.valid" mat-dialog-close mat-raised-button>
</mat-form-field> Submit
<button mat-dialog-close mat-raised-button (click)="sendAnswers()" color="primary" type="submit" [disabled]="!questionnaireForm.form.valid">Submit</button> </button>
</form> </form>
</div> </div>
import { Component, OnInit, Inject } from '@angular/core'; import { Component, OnInit, Inject } from '@angular/core';
import { MAT_DIALOG_DATA } from '@angular/material'; import { MAT_DIALOG_DATA } from '@angular/material';
import { Observable, BehaviorSubject } from 'rxjs';
import { UserService } from '../../user.service'; import { UserService } from '../../user.service';
import * as t from '../../types/types.module'; import { JSONObject, DeploymentState } from '../../types/types.module';
@Component({ @Component({
selector: 'app-questionnaire', selector: 'app-questionnaire',
...@@ -10,23 +12,42 @@ import * as t from '../../types/types.module'; ...@@ -10,23 +12,42 @@ import * as t from '../../types/types.module';
styleUrls: ['./questionnaire.component.css'] styleUrls: ['./questionnaire.component.css']
}) })
export class QuestionnaireComponent implements OnInit { export class QuestionnaireComponent implements OnInit {
public answers: Object = {};
public stateItem: t.DeploymentState; public answers$ = <BehaviorSubject<JSONObject>> new BehaviorSubject(undefined);;
constructor( constructor(
public userService: UserService, public userService: UserService,
@Inject(MAT_DIALOG_DATA) public data: any, @Inject(MAT_DIALOG_DATA) public state$: Observable<DeploymentState>,
) { ) {
this.stateItem = data.stateItem;
} }
ngOnInit() { ngOnInit() {
} this.state$.subscribe(
(state: DeploymentState) => {
let answers = undefined;
sendAnswers() { // initialize the answers if needed
this.userService.sentQuestionnaire( if (state.answers == undefined) {
this.stateItem.id, answers = state.questionnaire;
this.answers,
Object.keys(state.questionnaire).forEach(
(key: string) => {
answers[key] = "";
}
);
// console.log('Initialized answers');
} else {
answers = state.answers;
// console.log('Old answers:', answers);
}
this.answers$.next(answers);
}
); );
} }
sendAnswers(state: DeploymentState, answers: JSONObject) {
this.userService.sentQuestionnaire(state.id, answers);
}
} }
...@@ -4,6 +4,7 @@ import { Pipe, PipeTransform } from '@angular/core'; ...@@ -4,6 +4,7 @@ import { Pipe, PipeTransform } from '@angular/core';
@Pipe({ name: 'ObjKeys', pure: false }) @Pipe({ name: 'ObjKeys', pure: false })
export class ObjKeysPipe implements PipeTransform { export class ObjKeysPipe implements PipeTransform {
transform(value: any, args: any[] = null): any { transform(value: any, args: any[] = null): any {
return Object.keys(value);//.map(key => value[key]); const transformation = Object.keys(value);//.map(key => value[key]);
return transformation;
} }
} }
...@@ -44,6 +44,14 @@ ...@@ -44,6 +44,14 @@
</span> </span>
</td> </td>
<td *ngIf="stateItem.answers != undefined" matTooltip="Change previously submitted answers" class="spaced">
<span>
<button (click)="dialog.openQuestionnaire(state$)" mat-icon-button>
<mat-icon>edit</mat-icon>
</button>
</span>
</td>
<td class="spaced"> <td class="spaced">
<span *ngIf="!stateItem.is_pending && stateItem.is_credential_pending" class="spaced"> <span *ngIf="!stateItem.is_pending && stateItem.is_credential_pending" class="spaced">
<mat-progress-spinner diameter="24" mode="indeterminate"></mat-progress-spinner> <mat-progress-spinner diameter="24" mode="indeterminate"></mat-progress-spinner>
......
...@@ -56,7 +56,7 @@ export interface Service { ...@@ -56,7 +56,7 @@ export interface Service {
vos: VO[]; vos: VO[];
} }
interface JSONObject { export interface JSONObject {
[key: string]: string; [key: string]: string;
} }
...@@ -68,13 +68,14 @@ export interface CredentialState { ...@@ -68,13 +68,14 @@ export interface CredentialState {
} }
export interface DeploymentState { export interface DeploymentState {
answers: JSONObject | undefined;
credential_states: CredentialState[]; credential_states: CredentialState[];
credentials: JSONObject; credentials: JSONObject;
id: number; id: number;
is_credential_pending: boolean; is_credential_pending: boolean;
is_pending: boolean; is_pending: boolean;
message: string; message: string;
questionnaire: JSONObject; questionnaire: JSONObject | undefined;
service: Service; service: Service;
site: Site; site: Site;
state: string; state: string;
......
...@@ -11,7 +11,7 @@ import { SnackBarService } from './snackbar.service'; ...@@ -11,7 +11,7 @@ import { SnackBarService } from './snackbar.service';
import { IdpService } from './idp.service'; import { IdpService } from './idp.service';
import { import {
VO, User, Update, State, Deployment, DeploymentState, SSHKey, NewSSHKey, IdP, Service, Site VO, User, Update, State, Deployment, DeploymentState, SSHKey, NewSSHKey, IdP, Service, Site, JSONObject
} from './types/types.module'; } from './types/types.module';
...@@ -261,14 +261,14 @@ export class UserService { ...@@ -261,14 +261,14 @@ export class UserService {
); );
} }
public sentQuestionnaire(stateItemID: number, answers: Object) { public sentQuestionnaire(stateItemID: number, answers: JSONObject) {
return this.http.patch<DeploymentState>( return this.http.patch<DeploymentState>(
`/rest/dep-state?id=${ stateItemID }`, `/rest/dep-state?id=${ stateItemID }`,
{ {
'questionnaire': answers, 'answers': answers,
}, },
).pipe( ).pipe(
catchError(this.handleError(true, "Error submitting questionnaire")), catchError(this.handleError(true, "Error submitting answers")),
).subscribe( ).subscribe(
(state: DeploymentState) => this.updateDeploymentState(state), (state: DeploymentState) => this.updateDeploymentState(state),
this.logErrorAndFetch, this.logErrorAndFetch,
......
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