Commit eb7e9d3a authored by Lukas Burgey's avatar Lukas Burgey

Add questionnaire dialog

parent 443cd846
import {NgModule,Pipe,PipeTransform} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {NgModule} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {JsonPipe} from '@angular/common';
import {HttpModule} from '@angular/http';
......@@ -34,20 +34,30 @@ import {AppComponent} from './app.component';
import {MgmtComponent} from './mgmt/mgmt.component';
import {LoginComponent} from './login/login.component';
import {ProfileComponent} from './profile/profile.component';
import {QuestionnaireComponent} from './questionnaire/questionnaire.component';
import {ServiceComponent} from './service/service.component';
import {SshKeysComponent} from './ssh-keys/ssh-keys.component';
import {AccountComponent} from './account/account.component';
@Pipe({ name: 'ObjNgFor', pure: false })
export class ObjNgFor implements PipeTransform {
transform(value: any, args: any[] = null): any {
return Object.keys(value);//.map(key => value[key]);
}
}
@NgModule({
declarations: [
AppComponent,
MgmtComponent,
LoginComponent,
ProfileComponent,
QuestionnaireComponent,
ServiceComponent,
SshKeysComponent,
AccountComponent,
ObjNgFor,
],
imports: [
BrowserModule,
......@@ -79,14 +89,16 @@ import {AccountComponent} from './account/account.component';
UserService,
SnackBarService,
DialogService,
JsonPipe,
StompRService,
JsonPipe,
ObjNgFor,
],
bootstrap: [AppComponent],
entryComponents: [
ProfileComponent,
SshKeysComponent,
AccountComponent,
QuestionnaireComponent,
],
})
export class AppModule {
......
......@@ -4,12 +4,14 @@ import { MatDialog, MatDialogRef } from '@angular/material/dialog';
import { ProfileComponent } from './profile/profile.component';
import { SshKeysComponent } from './ssh-keys/ssh-keys.component';
import { AccountComponent } from './account/account.component';
import { QuestionnaireComponent } from './questionnaire/questionnaire.component';
@Injectable()
export class DialogService {
profileDialog: MatDialogRef<any>;
sshKeysDialog: MatDialogRef<any>;
accountDialog: MatDialogRef<any>;
questionnaireDialog: MatDialogRef<any>;
settings = {
width: '80%',
......@@ -39,4 +41,15 @@ export class DialogService {
this.settings,
);
}
public openQuestionnaire(taskItem: any) {
this.questionnaireDialog = this.dialog.open(
QuestionnaireComponent,
{
data: {
taskItem: taskItem,
}
}
);
}
}
<div class="mat-typography">
<h2>Parameter questionnaire</h2>
<p>
The following data is requirred to access the service.
</p>
<form class="form-vertical" (ngSubmit)="sendAnswers()" #questionnaireForm="ngForm">
<mat-form-field *ngFor="let key of taskItem.questionnaire | ObjNgFor">
<input matInput required
placeholder="{{taskItem.questionnaire[key]}}" [(ngModel)]="answers[key]" name="key">
</mat-form-field>
<button mat-raised-button color="primary" type="submit" [disabled]="!questionnaireForm.form.valid">Submit</button>
</form>
</div>
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { ProfileComponent } from './profile.component';
describe('ProfileComponent', () => {
let component: ProfileComponent;
let fixture: ComponentFixture<ProfileComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ ProfileComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(ProfileComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should be created', () => {
expect(component).toBeTruthy();
});
});
import {Component, OnInit,Inject} from '@angular/core';
import {MAT_DIALOG_DATA} from '@angular/material';
import { UserService } from '../user.service';
@Component({
selector: 'app-questionnaire',
templateUrl: './questionnaire.component.html',
styleUrls: ['./questionnaire.component.css']
})
export class QuestionnaireComponent implements OnInit {
public answers: Object = {};
public taskItem: any;
constructor(
public userService: UserService,
@Inject(MAT_DIALOG_DATA) public data: any,
) {
this.taskItem = data.taskItem;
}
ngOnInit() {
}
sendAnswers() {
this.userService.sentQuestionnaire(
this.taskItem.id,
this.answers,
);
}
}
......@@ -12,25 +12,26 @@
</span>
<span [ngSwitch]="userService.taskState(site, serviceData)">
<span *ngSwitchCase="'pending'"
style="display: inline-block; vertical-align: middle"
mat-button mat-icon-button style="display: inline-block; vertical-align: middle"
matTooltip="This deployment is in progress">
<mat-progress-spinner diameter="24" mode="indeterminate"></mat-progress-spinner>
</span>
<span *ngSwitchCase="'done'"
style="display: inline-block; vertical-align: middle"
<button *ngSwitchCase="'done'"
mat-button mat-icon-button style="display: inline-block; vertical-align: middle"
matTooltip="This deployment was successful">
<mat-icon style="vertical-align: middle">done</mat-icon>
</span>
<span *ngSwitchCase="'failed'"
style="display: inline-block; vertical-align: middle"
</button>
<button *ngSwitchCase="'failed'"
mat-button mat-icon-button style="display: inline-block; vertical-align: middle"
matTooltip="This deployment has failed">
<mat-icon style="vertical-align: middle">error</mat-icon>
</span>
<span *ngSwitchCase="'rejected'"
style="display: inline-block; vertical-align: middle"
</button>
<button *ngSwitchCase="'rejected'"
(click)="dialog.openQuestionnaire(userService.taskItem(site, serviceData))"
mat-button mat-icon-button style="display: inline-block; vertical-align: middle"
matTooltip="This deployment was rejected. The client needs more data.">
<mat-icon style="vertical-align: middle">warning</mat-icon>
</span>
<mat-icon>warning</mat-icon>
</button>
</span>
</td>
</tr>
......
......@@ -9,6 +9,7 @@ import {CookieService} from 'ngx-cookie-service';
import {MatTableDataSource} from '@angular/material';
import {SnackBarService} from './snackbar.service';
import {DialogService} from './dialog.service';
import {StompConfig, StompRService} from '@stomp/ng2-stompjs';
import {Message} from '@stomp/stompjs';
......@@ -27,6 +28,7 @@ export class UserService {
constructor(
public dialog: DialogService,
public cookieService: CookieService,
public http: HttpClient,
public snackBar: SnackBarService,
......@@ -238,6 +240,23 @@ export class UserService {
);
}
public sentQuestionnaire(taskItemID: number, answers: any) {
const body = answers;
return this.http.post('/backend/api/questionnaire/'+String(taskItemID), body).subscribe(
(data) => {
this.dialog.questionnaireDialog.close();
this.snackBar.open('Uploaded questionnaire');
//this.snackBar.open('Deployed key ' + key.name);
this.updateData(data);
},
(err) => {
this.snackBar.open('Error uploading questionnaire');
console.log(err);
this.update();
}
);
}
public deleteUser() {
return this.http.delete('/backend/api/delete_user/').subscribe(
(data) => {
......@@ -304,26 +323,21 @@ export class UserService {
});
}
public taskInProgress(site, service): boolean {
public taskItem(site, service): any {
if (site && service) {
for (const item of this.user.deployment_task_items){
if (item.site.id == site.id && item.service.id == service.id) {
return true;
return item;
}
}
}
return false;
return null;
}
public taskState(site, service): string {
if (site && service) {
for (const item of this.user.deployment_task_items){
if (item.site.id == site.id && item.service.id == service.id) {
return item.state;
}
}
let item = this.taskItem(site, service);
if (item !== null) {
return item.state;
}
return "done";
}
......
......@@ -31,13 +31,17 @@ body {
}
.form-container {
.form-vertical {
display: flex;
flex-direction: column;
}
.form-container > * {
width: 50%;
.form-vertical > * {
width: 100%;
}
.form-vertical > button {
width: 25%;
}
.mat-form-field {
......
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