Add questionnaire dialog

src/app/app.module.ts

+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 {

src/app/dialog.service.ts

@@ -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,
+        }
+      }
+    );
+  }
 }

src/app/questionnaire/questionnaire.component.html

+<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>

src/app/questionnaire/questionnaire.component.spec.ts

+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();
+  });
+});

src/app/questionnaire/questionnaire.component.ts

+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,
+    );
+  }
+}

src/app/service/service.component.html

@@ -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>

src/app/user.service.ts

@@ -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,27 +323,22 @@ 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) {
+    let item = this.taskItem(site, service);
+    if (item !== null) {
       return item.state;
     }
-      }
-    }
     return "done";
   }
 }

src/styles.css

@@ -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 {