Restructure the dialogues

src/app/app.module.ts

@@ -6,59 +6,29 @@ import {JsonPipe} from '@angular/common';
 import {HttpModule} from '@angular/http';
 import {HttpClientModule, HttpClientXsrfModule} from '@angular/common/http';
 
-import {MatButtonModule} from '@angular/material';
-import {MatToolbarModule} from '@angular/material';
-import {MatTableModule} from '@angular/material/table';
-import {MatSnackBarModule} from '@angular/material/snack-bar';
-import {MatExpansionModule} from '@angular/material/expansion';
-import {MatIconModule} from '@angular/material/icon';
-import {MatDialogModule} from '@angular/material/dialog';
-import {MatFormFieldModule} from '@angular/material/form-field';
-import {MatSelectModule} from '@angular/material/select';
-import {MatInputModule} from '@angular/material/input';
-import {MatCheckboxModule} from '@angular/material/checkbox';
-import {MatTooltipModule} from '@angular/material/tooltip';
-import {MatProgressBarModule} from '@angular/material/progress-bar';
-import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
-
 // Other libs
 import {StompRService} from '@stomp/ng2-stompjs';
 import {CookieService} from 'ngx-cookie-service';
 
 // Our stuff
+//
+// services
 import {UserService} from './user.service';
 import {SnackBarService} from './snackbar.service';
-import {DialogService} from './dialog.service';
 
+// imports
+import {DialoguesModule} from './dialogues/dialogues.module';
+import {MaterialModule} from './material/material.module';
+import {SharedModule} from './shared/shared.module';
+
+// declarations
 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,
     BrowserAnimationsModule,
@@ -69,37 +39,24 @@ export class ObjNgFor implements PipeTransform {
       cookieName: 'csrftoken',
       headerName: 'HTTP_X_CSRFTOKEN',
     }),
-    MatButtonModule,
-    MatToolbarModule,
-    MatTableModule,
-    MatSnackBarModule,
-    MatExpansionModule,
-    MatIconModule,
-    MatDialogModule,
-    MatFormFieldModule,
-    MatSelectModule,
-    MatInputModule,
-    MatCheckboxModule,
-    MatTooltipModule,
-    MatProgressBarModule,
-    MatProgressSpinnerModule,
+    DialoguesModule,
+    MaterialModule,
+    SharedModule,
+  ],
+  declarations: [
+    AppComponent,
+    MgmtComponent,
+    LoginComponent,
+    ServiceComponent,
   ],
   providers: [
     CookieService,
     UserService,
     SnackBarService,
-    DialogService,
     StompRService,
     JsonPipe,
-    ObjNgFor,
   ],
   bootstrap: [AppComponent],
-  entryComponents: [
-    ProfileComponent,
-    SshKeysComponent,
-    AccountComponent,
-    QuestionnaireComponent,
-  ],
 })
 export class AppModule {
   constructor() {

src/app/dialog.service.spec.ts

-import { TestBed, inject } from '@angular/core/testing';
-
-import { DialogService } from './dialog.service';
-
-describe('DialogService', () => {
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      providers: [DialogService]
-    });
-  });
-
-  it('should be created', inject([DialogService], (service: DialogService) => {
-    expect(service).toBeTruthy();
-  }));
-});

src/app/account/account.component.ts → src/app/dialogues/account/account.component.ts

 import { Component, OnInit } from '@angular/core';
 
-import { UserService } from '../user.service';
+import { UserService } from '../../user.service';
 
 @Component({
   selector: 'app-account',

src/app/dialogues/dialogues.module.spec.ts

+import { DialoguesModule } from './dialogues.module';
+
+describe('DialoguesModule', () => {
+  let dialoguesModule: DialoguesModule;
+
+  beforeEach(() => {
+    dialoguesModule = new DialoguesModule();
+  });
+
+  it('should create an instance', () => {
+    expect(dialoguesModule).toBeTruthy();
+  });
+});

src/app/dialogues/dialogues.module.ts

+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {FormsModule} from '@angular/forms';
+
+// imports
+import {MaterialModule} from '../material/material.module';
+import {SharedModule} from '../shared/shared.module';
+
+// declarations
+import {QuestionnaireComponent} from './questionnaire/questionnaire.component';
+import {ProfileComponent} from './profile/profile.component';
+import {SshKeysComponent} from './ssh-keys/ssh-keys.component';
+import {AccountComponent} from './account/account.component';
+
+//providers
+import {DialogService} from './dialog.service';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    MaterialModule,
+    SharedModule,
+  ],
+  declarations: [
+    QuestionnaireComponent,
+    ProfileComponent,
+    SshKeysComponent,
+    AccountComponent,
+  ],
+  entryComponents: [
+    QuestionnaireComponent,
+    ProfileComponent,
+    SshKeysComponent,
+    AccountComponent,
+  ],
+  providers: [
+    DialogService,
+  ],
+})
+export class DialoguesModule { }

src/app/profile/profile.component.ts → src/app/dialogues/profile/profile.component.ts

 import { Component, OnInit } from '@angular/core';
 import { MatTableDataSource } from '@angular/material';
 
-import { UserService } from '../user.service';
+import { UserService } from '../../user.service';
 
 @Component({
   selector: 'app-profile',

src/app/questionnaire/questionnaire.component.html → src/app/dialogues/questionnaire/questionnaire.component.html

 <div class="mat-typography">
-	<h2>Parameter questionnaire</h2>
+	<h2>Data questionnaire</h2>
 	<p>
-	The following data is requirred to access the service.
+	The site {{taskItem.site.name}} needs the following data to give you access to the service {{
+	taskItem.service.name}}.
 	</p>
 	<form class="form-vertical" (ngSubmit)="sendAnswers()" #questionnaireForm="ngForm">
-		<mat-form-field *ngFor="let key of taskItem.questionnaire | ObjNgFor">
+		<mat-form-field *ngFor="let key of taskItem.questionnaire | ObjKeys">
 			<input matInput required
 			   placeholder="{{taskItem.questionnaire[key]}}" [(ngModel)]="answers[key]" name="key">
 		</mat-form-field>

src/app/questionnaire/questionnaire.component.ts → src/app/dialogues/questionnaire/questionnaire.component.ts

 import {Component, OnInit,Inject} from '@angular/core';
 import {MAT_DIALOG_DATA} from '@angular/material';
 
-import { UserService } from '../user.service';
+import { UserService } from '../../user.service';
 
 @Component({
   selector: 'app-questionnaire',

src/app/ssh-keys/ssh-keys.component.ts → src/app/dialogues/ssh-keys/ssh-keys.component.ts

 import { Component, OnInit } from '@angular/core';
 import { MatTableDataSource } from '@angular/material';
 
-import { UserService } from '../user.service';
-import { SSHKey, NewSSHKey } from '../types/types.module';
+import { UserService } from '../../user.service';
+import { SSHKey, NewSSHKey } from '../../types/types.module';
 
 @Component({
   selector: 'app-ssh-keys',

src/app/login/login.component.ts

 import { Component } from '@angular/core';
 
-import { DialogService } from '../dialog.service';
+import { DialogService } from '../dialogues/dialog.service';
 import { UserService } from '../user.service';
 import { AllAuthInfo, IdP } from '../types/types.module';
 

src/app/material/material.module.spec.ts

+import { MaterialModule } from './material.module';
+
+describe('MaterialModule', () => {
+  let materialModule: MaterialModule;
+
+  beforeEach(() => {
+    materialModule = new MaterialModule();
+  });
+
+  it('should create an instance', () => {
+    expect(materialModule).toBeTruthy();
+  });
+});

src/app/material/material.module.ts

+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import {MatButtonModule} from '@angular/material';
+import {MatToolbarModule} from '@angular/material';
+import {MatTableModule} from '@angular/material/table';
+import {MatSnackBarModule} from '@angular/material/snack-bar';
+import {MatExpansionModule} from '@angular/material/expansion';
+import {MatIconModule} from '@angular/material/icon';
+import {MatDialogModule} from '@angular/material/dialog';
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {MatSelectModule} from '@angular/material/select';
+import {MatInputModule} from '@angular/material/input';
+import {MatCheckboxModule} from '@angular/material/checkbox';
+import {MatTooltipModule} from '@angular/material/tooltip';
+import {MatProgressBarModule} from '@angular/material/progress-bar';
+import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    MatButtonModule,
+    MatToolbarModule,
+    MatTableModule,
+    MatSnackBarModule,
+    MatExpansionModule,
+    MatIconModule,
+    MatDialogModule,
+    MatFormFieldModule,
+    MatSelectModule,
+    MatInputModule,
+    MatCheckboxModule,
+    MatTooltipModule,
+    MatProgressSpinnerModule,
+  ],
+  exports: [
+    MatButtonModule,
+    MatToolbarModule,
+    MatTableModule,
+    MatSnackBarModule,
+    MatExpansionModule,
+    MatIconModule,
+    MatDialogModule,
+    MatFormFieldModule,
+    MatSelectModule,
+    MatInputModule,
+    MatCheckboxModule,
+    MatTooltipModule,
+    MatProgressSpinnerModule,
+  ],
+})
+export class MaterialModule { }

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/service/service.component.html

@@ -13,23 +13,29 @@
 				<span [ngSwitch]="userService.taskState(site, serviceData)">
 					<span *ngSwitchCase="'pending'"
 						mat-button mat-icon-button style="display: inline-block; vertical-align: middle"
-						matTooltip="This deployment is in progress">
+						matTooltip="Waiting for site">
+						<mat-progress-spinner diameter="24" mode="indeterminate"></mat-progress-spinner>
+					</span>
+					<span *ngSwitchCase="'answered'"
+						mat-button mat-icon-button style="display: inline-block; vertical-align: middle"
+						matTooltip="Waiting for site">
 						<mat-progress-spinner diameter="24" mode="indeterminate"></mat-progress-spinner>
 					</span>
 					<button *ngSwitchCase="'done'"
 						mat-button mat-icon-button style="display: inline-block; vertical-align: middle"
-						matTooltip="This deployment was successful">
+						matTooltip="The credentials have the supposed state.">
 						<mat-icon style="vertical-align: middle">done</mat-icon>
 					</button>
 					<button *ngSwitchCase="'failed'"
 						mat-button mat-icon-button style="display: inline-block; vertical-align: middle"
-						matTooltip="This deployment has failed">
+						matTooltip="This site failed to deploy the credentials. It will retry the deployment.">
 						<mat-icon style="vertical-align: middle">error</mat-icon>
 					</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.">
+						matTooltip="This site needs more data to deploy the credentials. Please click to
+						submit the data.">
 						<mat-icon>warning</mat-icon>
 					</button>
 				</span>

src/app/service/service.component.ts

@@ -2,8 +2,7 @@ import { Component, OnInit, Input } from '@angular/core';
 import { MatCheckboxChange } from '@angular/material/checkbox';
 
 import { UserService } from '../user.service';
-import { DialogService } from '../dialog.service';
-import { SshKeysComponent } from '../ssh-keys/ssh-keys.component';
+import { DialogService } from '../dialogues/dialog.service';
 
 @Component({
   selector: 'app-service',

src/app/shared/obj-keys.pipe.ts

+import { Pipe, PipeTransform } from '@angular/core';
+
+
+@Pipe({ name: 'ObjKeys',  pure: false })
+export class ObjKeysPipe implements PipeTransform {
+    transform(value: any, args: any[] = null): any {
+        return Object.keys(value);//.map(key => value[key]);
+    }
+}

src/app/shared/shared.module.spec.ts

+import { SharedModule } from './shared.module';
+
+describe('SharedModule', () => {
+  let sharedModule: SharedModule;
+
+  beforeEach(() => {
+    sharedModule = new SharedModule();
+  });
+
+  it('should create an instance', () => {
+    expect(sharedModule).toBeTruthy();
+  });
+});

src/app/shared/shared.module.ts

+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import {ObjKeysPipe} from './obj-keys.pipe';
+
+@NgModule({
+  imports: [
+    CommonModule,
+  ],
+  declarations: [
+    ObjKeysPipe,
+  ],
+  exports: [
+    ObjKeysPipe,
+  ],
+})
+export class SharedModule { }

src/app/user.service.ts

@@ -9,7 +9,6 @@ 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';
 
@@ -28,7 +27,6 @@ export class UserService {
 
 
   constructor(
-    public dialog: DialogService,
     public cookieService: CookieService,
     public http: HttpClient,
     public snackBar: SnackBarService,
@@ -242,9 +240,8 @@ export class UserService {
 
   public sentQuestionnaire(taskItemID: number, answers: any) {
     const body = answers;
-    return this.http.post('/backend/api/questionnaire/'+String(taskItemID), body).subscribe(
+    return this.http.post('/backend/api/questionnaire?id='+String(taskItemID), body).subscribe(
       (data) => {
-        this.dialog.questionnaireDialog.close();
         this.snackBar.open('Uploaded questionnaire');
         //this.snackBar.open('Deployed key ' + key.name);
         this.updateData(data);