Survey and database containers => done

client/src/app/admin/admin-routing.module.ts

@@ -3,9 +3,13 @@ import { RouterModule, Routes } from '@angular/router';
 
 import { AdminComponent } from './containers/admin.component';
 import { InstanceListComponent } from './containers/instance/instance-list.component';
+import { DatabaseListComponent } from './containers/database/database-list.component';
+import { NewDatabaseComponent } from './containers/database/new-database.component';
+import { EditDatabaseComponent } from './containers/database/edit-database.component';
 import { SurveyComponent } from './containers/survey/survey.component';
 import { SurveyListComponent } from './containers/survey/survey-list.component';
-import { DatabaseListComponent } from './containers/database/database-list.component';
+import { NewSurveyComponent } from './containers/survey/new-survey.component';
+import { EditSurveyComponent } from './containers/survey/edit-survey.component';
 import { SettingsComponent } from './containers/settings/settings.component';
 
 const routes: Routes = [
@@ -15,11 +19,15 @@ const routes: Routes = [
             { path: 'instance-list', component: InstanceListComponent },
             { 
                 path: 'survey', component: SurveyComponent, children: [
-                    { path: '', redirectTo: 'survey-list', pathMatch: 'full' },
-                    { path: 'survey-list', component: SurveyListComponent },
-                    { path: 'database-list', component: DatabaseListComponent }
+                    { path: '', redirectTo: 'database-list', pathMatch: 'full' },
+                    { path: 'database-list', component: DatabaseListComponent },
+                    { path: 'survey-list', component: SurveyListComponent }
                 ]
             },
+            { path: 'new-database', component: NewDatabaseComponent },
+            { path: 'edit-database/:id', component: EditDatabaseComponent },
+            { path: 'new-survey', component: NewSurveyComponent },
+            { path: 'edit-survey/:name', component: EditSurveyComponent },
             { path: 'settings', component: SettingsComponent },
             { path: 'settings/:select', component: SettingsComponent }
         ]
@@ -37,6 +45,10 @@ export const routedComponents = [
     InstanceListComponent,
     SurveyComponent,
     SurveyListComponent,
+    NewSurveyComponent,
+    EditSurveyComponent,
     DatabaseListComponent,
+    NewDatabaseComponent,
+    EditDatabaseComponent,
     SettingsComponent
 ];

client/src/app/admin/components/database/form-database.component.html → client/src/app/admin/components/database/database-form.component.html

-<form [formGroup]="databaseForm" (ngSubmit)="onSubmit.emit(databaseForm.getRawValue())" novalidate>
+<form [formGroup]="form" (ngSubmit)="submit()" novalidate>
     <div class="form-group">
         <label for="label">Label</label>
         <input type="text" class="form-control" id="label" name="label" formControlName="label">

client/src/app/admin/components/database/form-database.component.ts → client/src/app/admin/components/database/database-form.component.ts

-import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';
 import { FormGroup, FormControl, Validators } from '@angular/forms';
 
 import { Database } from 'src/app/metamodel/store/models';
 
 @Component({
-    selector: 'app-form-database',
-    templateUrl: 'form-database.component.html'
+    selector: 'app-database-form',
+    templateUrl: 'database-form.component.html'
 })
-export class FormDatabaseComponent {
+export class DatabaseFormComponent implements OnInit {
     @Input() database: Database;
     @Output() onSubmit: EventEmitter<Database> = new EventEmitter();
 
-    public databaseForm = new FormGroup({
+    public form = new FormGroup({
         label: new FormControl('', [Validators.required]),
         dbname: new FormControl('', [Validators.required]),
         dbtype: new FormControl('', [Validators.required]),
@@ -23,8 +23,18 @@ export class FormDatabaseComponent {
 
     ngOnInit() {
         if (this.database) {
-            this.databaseForm.setValue(this.database);
-            this.databaseForm.controls.name.disable();
+            this.form.patchValue(this.database);
+        }
+    }
+
+    submit() {
+        if (this.database) {
+            this.onSubmit.emit({
+                ...this.database,
+                ...this.form.value
+            });
+        } else {
+            this.onSubmit.emit(this.form.value);
         }
     }
 }

client/src/app/admin/components/database/database-table.component.html

@@ -27,7 +27,7 @@
                 <td class="align-middle">*******</td>
                 <td class="align-middle">{{ getNbSurveyByDatabase(database.id) }}</td>
                 <td class="align-middle">
-                    <a title="Edit this database" routerLink="/edit-database/{{database.id}}" class="btn btn-outline-primary">
+                    <a title="Edit this database" routerLink="/admin/edit-database/{{database.id}}" class="btn btn-outline-primary">
                         <span class="fas fa-edit"></span>
                     </a>
                 </td>

client/src/app/admin/components/database/index.ts

 import { DatabaseTableComponent } from "./database-table.component";
-import { FormDatabaseComponent } from "./form-database.component";
+import { DatabaseFormComponent } from "./database-form.component";
 
 export const databseComponents = [
     DatabaseTableComponent,
-    FormDatabaseComponent
+    DatabaseFormComponent
 ];

client/src/app/admin/components/index.ts

 import { sharedComponents } from "./shared";
 import { databseComponents } from "./database";
+import { surveyComponents } from "./survey";
 import { InstanceCardComponent } from "./instance/instance-card.component";
-import { SurveyTableComponent } from "./survey/survey-table.component";
 import { settingsComponents } from './settings';
 
 export const dummiesComponents = [
     sharedComponents,
     databseComponents,
+    surveyComponents,
     InstanceCardComponent,
-    SurveyTableComponent,
     settingsComponents
 ];

client/src/app/admin/components/survey/index.ts

+import { SurveyTableComponent } from "./survey-table.component";
+import { SurveyFormComponent } from "./survey-form.component";
+
+export const surveyComponents = [
+    SurveyTableComponent,
+    SurveyFormComponent
+];

client/src/app/admin/components/survey/survey-form.component.html

+<form [formGroup]="form" (ngSubmit)="submit()" novalidate>
+    <div class="form-group">
+        <label for="name">Name</label>
+        <input type="text" class="form-control" id="name" name="name" formControlName="name">
+    </div>
+    <div class="form-group">
+        <label for="label">Label</label>
+        <input type="text" class="form-control" id="label" name="label" formControlName="label">
+    </div>
+    <div class="form-group">
+        <label for="id_database">Database</label>
+        <select class="form-control" id="id_database" name="id_database" formControlName="id_database">
+            <option></option>
+            <option *ngFor="let database of databaseList" [value]="database.id" [selected]="survey && database.id === survey.id_database">{{database.label}}</option>
+        </select>
+    </div>
+    <div class="form-group">
+        <label for="description">Description</label>
+        <textarea class="form-control" rows="5" id="description" name="description" formControlName="description"></textarea>
+    </div>
+    <div class="form-group">
+        <div class="row">
+            <div class="col-md-6">
+                <label for="link">Link</label>
+                <input type="text" class="form-control" id="link" name="link" formControlName="link">
+            </div>
+            <div class="col-md-6">
+                <b>Test it</b>
+                <br>
+                <p style="margin-top: 13px;">
+                    <a [href]="form.controls.link.value" target="_blank">
+                        <i class="fa fa-link"></i> {{ form.controls.link.value }}
+                    </a>
+                </p>
+            </div>
+        </div>
+    </div>
+    <div class="form-group">
+        <label for="manager">Manager</label>
+        <input type="text" class="form-control" id="manager" name="manager" formControlName="manager">
+    </div>
+    <div class="form-group">
+        <ng-content></ng-content>
+    </div>
+</form>

client/src/app/admin/components/survey/survey-form.component.ts

+import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';
+import { FormGroup, FormControl, Validators } from '@angular/forms';
+
+import { Survey, Database } from 'src/app/metamodel/store/models';
+
+@Component({
+    selector: 'app-survey-form',
+    templateUrl: 'survey-form.component.html'
+})
+export class SurveyFormComponent implements OnInit {
+    @Input() survey: Survey;
+    @Input() databaseList: Database[];
+    @Output() onSubmit: EventEmitter<Survey> = new EventEmitter();
+
+    public form = new FormGroup({
+        name: new FormControl('', [Validators.required]),
+        label: new FormControl('', [Validators.required]),
+        id_database: new FormControl('', [Validators.required]),
+        description: new FormControl('', [Validators.required]),
+        link: new FormControl('', [Validators.required]),
+        manager: new FormControl('', [Validators.required])
+    });
+
+    ngOnInit() {
+        if (this.survey) {
+            this.form.patchValue(this.survey);
+        }
+    }
+
+    submit() {
+        if (this.survey) {
+            this.onSubmit.emit({
+                ...this.survey,
+                ...this.form.value
+            });
+        } else {
+            this.onSubmit.emit(this.form.value);
+        }
+    }
+}

client/src/app/admin/components/survey/survey-table.component.html

@@ -23,7 +23,7 @@
                 <td class="align-middle">{{ getDatabaseById(survey.id_database).label }}</td>
                 <td class="align-middle">{{ survey.nb_datasets }}</td>
                 <td class="align-middle">
-                    <a title="Edit this survey" routerLink="/edit-survey/{{survey.name}}" class="btn btn-outline-primary">
+                    <a title="Edit this survey" routerLink="/admin/edit-survey/{{survey.name}}" class="btn btn-outline-primary">
                         <span class="fas fa-edit"></span>
                     </a>
                 </td>

client/src/app/admin/containers/database/database-list.component.html

@@ -3,7 +3,7 @@
 <div *ngIf="(surveyListIsLoaded | async) && (databaseListIsLoaded | async)">
     <div class="row">
         <div class="col-12">
-            <button title="Add a new database" class="btn btn-outline-success float-right" routerLink="/new-database">
+            <button title="Add a new database" class="btn btn-outline-success float-right" routerLink="/admin/new-database">
                 <span class="fas fa-plus"></span> New database
             </button>
         </div>

client/src/app/admin/containers/database/database-list.component.ts

@@ -35,6 +35,6 @@ export class DatabaseListComponent implements OnInit {
     }
 
     deleteDatabase(database: Database) {
-        // this.store.dispatch(new databaseActions.DeleteDatabaseAction(database));
+        this.store.dispatch(databaseActions.deleteDatabase({ database }));
     }
 }

client/src/app/admin/containers/database/edit-database.component.html

+<div class="container-fluid">
+    <nav aria-label="breadcrumb">
+        <ol class="breadcrumb">
+            <li class="breadcrumb-item"><a routerLink="/survey/database-list">Databases</a></li>
+            <li *ngIf="(databaseListIsLoaded | async)" class="breadcrumb-item active" aria-current="page">Edit database {{ (database | async).label }}</li>
+        </ol>
+    </nav>
+</div>
+
+<div class="container">
+    <app-spinner *ngIf="(databaseListIsLoading | async)"></app-spinner>
+
+    <div *ngIf="databaseListIsLoaded | async" class="row">
+        <div class="col-12">
+            <app-database-form [database]="database | async" (onSubmit)="editDatabase($event)" #formDatabase>
+                <button [disabled]="!formDatabase.form.valid || formDatabase.form.pristine" type="submit" class="btn btn-primary">
+                    <i class="fa fa-database"></i> Update database information
+                </button>
+                &nbsp;
+                <a routerLink="/admin/survey/database-list" class="btn btn-danger">Cancel</a>
+            </app-database-form>
+        </div>
+    </div>
+</div>

client/src/app/admin/containers/database/edit-database.component.ts

+import { Component, OnInit} from '@angular/core';
+import { Observable } from 'rxjs';
+import { Store } from '@ngrx/store';
+
+import { Database } from 'src/app/metamodel/store/models';
+import * as databaseActions from 'src/app/metamodel/store/actions/database.actions';
+import * as databaseSelector from 'src/app/metamodel/store/selectors/database.selector';
+
+@Component({
+    selector: 'app-edit-database',
+    templateUrl: 'edit-database.component.html'
+})
+export class EditDatabaseComponent implements OnInit {
+    public databaseListIsLoading: Observable<boolean>;
+    public databaseListIsLoaded: Observable<boolean>;
+    public database: Observable<Database>;
+
+    constructor(private store: Store<{ }>) {
+        this.databaseListIsLoading = store.select(databaseSelector.selectDatabaseListIsLoading);
+        this.databaseListIsLoaded = store.select(databaseSelector.selectDatabaseListIsLoaded);
+        this.database = store.select(databaseSelector.selectDatabaseByRouteId);
+    }
+
+    ngOnInit() {
+        this.store.dispatch(databaseActions.loadDatabaseList());
+    }
+
+    editDatabase(database: Database) {
+        this.store.dispatch(databaseActions.editDatabase({ database }));
+    }
+}

client/src/app/admin/containers/database/new-database.component.html

+<div class="container-fluid">
+    <nav aria-label="breadcrumb">
+        <ol class="breadcrumb">
+            <li class="breadcrumb-item"><a routerLink="/survey/database-list">Databases</a></li>
+            <li class="breadcrumb-item active" aria-current="page">New database</li>
+        </ol>
+    </nav>
+</div>
+
+<div class="container">
+    <div class="row">
+        <div class="col-12">
+            <app-database-form (onSubmit)="addNewDatabase($event)" #formDatabase>
+                <button [disabled]="!formDatabase.form.valid || formDatabase.form.pristine" type="submit" class="btn btn-primary">
+                    <i class="fa fa-database"></i> Add the new database
+                </button>
+                &nbsp;
+                <a routerLink="/admin/survey/database-list" type="button" class="btn btn-danger">Cancel</a>
+            </app-database-form>
+        </div>
+    </div>
+</div>

client/src/app/admin/containers/database/new-database.component.ts

+import { Component } from '@angular/core';
+import { Store } from '@ngrx/store';
+
+import { Database } from 'src/app/metamodel/store/models';
+import * as databaseActions from 'src/app/metamodel/store/actions/database.actions';
+
+@Component({
+    selector: 'app-new-database',
+    templateUrl: 'new-database.component.html'
+})
+export class NewDatabaseComponent {
+    constructor(private store: Store<{ }>) { }
+
+    addNewDatabase(database: Database) {
+        this.store.dispatch(databaseActions.addDatabase({ database }));
+    }
+}

client/src/app/admin/containers/survey/edit-survey.component.html

+<div class="container-fluid">
+    <nav aria-label="breadcrumb">
+        <ol class="breadcrumb">
+            <li class="breadcrumb-item"><a routerLink="/survey/survey-list">Surveys</a></li>
+            <li *ngIf="(surveyListIsLoaded | async)" class="breadcrumb-item active" aria-current="page">Edit survey {{ (survey | async).name }}</li>
+        </ol>
+    </nav>
+</div>
+
+<div class="container">
+    <app-spinner *ngIf="(databaseListIsLoading | async) || (surveyListIsLoading | async)"></app-spinner>
+
+    <div *ngIf="(databaseListIsLoaded | async) && (surveyListIsLoaded | async)" class="row">
+        <div class="col-12">
+            <app-survey-form [survey]="survey | async" [databaseList]="databaseList | async" (onSubmit)="editSurvey($event)" #formSurvey>
+                <button [disabled]="!formSurvey.form.valid || formSurvey.form.pristine" type="submit" class="btn btn-primary">
+                    <i class="fa fa-database"></i> Update survey information
+                </button>
+                &nbsp;
+                <a routerLink="/survey/survey-list" type="button" class="btn btn-danger">Cancel</a>
+            </app-survey-form>
+        </div>
+    </div>
+</div>

client/src/app/admin/containers/survey/edit-survey.component.ts

+import { Component, OnInit} from '@angular/core';
+import { Observable } from 'rxjs';
+import { Store } from '@ngrx/store';
+
+import { Survey, Database } from 'src/app/metamodel/store/models';
+import * as surveyActions from 'src/app/metamodel/store/actions/survey.actions';
+import * as databaseActions from 'src/app/metamodel/store/actions/database.actions';
+import * as surveySelector from 'src/app/metamodel/store/selectors/survey.selector';
+import * as databaseSelector from 'src/app/metamodel/store/selectors/database.selector';
+
+@Component({
+    selector: 'app-edit-survey',
+    templateUrl: 'edit-survey.component.html'
+})
+export class EditSurveyComponent implements OnInit {
+    public surveyListIsLoading: Observable<boolean>;
+    public surveyListIsLoaded: Observable<boolean>;
+    public survey: Observable<Survey>;
+    public databaseListIsLoading: Observable<boolean>;
+    public databaseListIsLoaded: Observable<boolean>;
+    public databaseList: Observable<Database[]>;
+
+    constructor(private store: Store<{ }>) {
+        this.surveyListIsLoading = store.select(surveySelector.selectSurveyListIsLoading);
+        this.surveyListIsLoaded = store.select(surveySelector.selectSurveyListIsLoaded);
+        this.survey = store.select(surveySelector.selectSurveyByRouteName);
+        this.databaseListIsLoading = store.select(databaseSelector.selectDatabaseListIsLoading);
+        this.databaseListIsLoaded = store.select(databaseSelector.selectDatabaseListIsLoaded);
+        this.databaseList = this.store.select(databaseSelector.selectAllDatabases);
+    }
+
+    ngOnInit() {
+        this.store.dispatch(surveyActions.loadSurveyList());
+        this.store.dispatch(databaseActions.loadDatabaseList());
+    }
+
+    editSurvey(survey: Survey) {
+        this.store.dispatch(surveyActions.editSurvey({ survey }));
+    }
+}

client/src/app/admin/containers/survey/new-survey.component.html

+<div class="container-fluid">
+    <nav aria-label="breadcrumb">
+        <ol class="breadcrumb">
+            <li class="breadcrumb-item"><a routerLink="/survey/survey-list">Surveys</a></li>
+            <li class="breadcrumb-item active" aria-current="page">New survey</li>
+        </ol>
+    </nav>
+</div>
+
+<div class="container">
+    <app-spinner *ngIf="databaseListIsLoading | async"></app-spinner>
+
+    <div *ngIf="databaseListIsLoaded | async" class="row">
+        <div class="col-12">
+            <app-survey-form [databaseList]="databaseList | async" (onSubmit)="addNewSurvey($event)" #formSurvey>
+                <button [disabled]="!formSurvey.form.valid || formSurvey.form.pristine" type="submit" class="btn btn-primary">
+                    <i class="fa fa-database"></i> Add the new survey
+                </button>
+                &nbsp;
+                <a routerLink="/admin/survey/survey-list" type="button" class="btn btn-danger">Cancel</a>
+            </app-survey-form>
+        </div>
+    </div>
+</div>

client/src/app/admin/containers/survey/new-survey.component.ts

+import { Component, OnInit } from '@angular/core';
+import { Observable } from 'rxjs';
+import { Store } from '@ngrx/store';
+
+import { Survey, Database } from 'src/app/metamodel/store/models'
+import * as surveyActions from 'src/app/metamodel/store/actions/survey.actions';
+import * as databaseActions from 'src/app/metamodel/store/actions/database.actions';
+import * as databaseSelector from 'src/app/metamodel/store/selectors/database.selector';
+
+@Component({
+    selector: 'app-new-survey',
+    templateUrl: 'new-survey.component.html'
+})
+export class NewSurveyComponent implements OnInit {
+    public databaseListIsLoading: Observable<boolean>;
+    public databaseListIsLoaded: Observable<boolean>;
+    public databaseList: Observable<Database[]>;
+
+    constructor(private store: Store<{ }>) {
+        this.databaseListIsLoading = store.select(databaseSelector.selectDatabaseListIsLoading);
+        this.databaseListIsLoaded = store.select(databaseSelector.selectDatabaseListIsLoaded);
+        this.databaseList = store.select(databaseSelector.selectAllDatabases);
+    }
+
+    ngOnInit() {
+        this.store.dispatch(databaseActions.loadDatabaseList());
+    }
+
+    addNewSurvey(survey: Survey) {
+        this.store.dispatch(surveyActions.addSurvey({ survey }));
+    }
+}