From bf0a642c0468c04c11388e2e24f1ad6575ce7037 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fran=C3=A7ois=20Agneray?= <francois.agneray@lam.fr>
Date: Mon, 28 Jun 2021 20:59:11 +0200
Subject: [PATCH] Survey and database containers => done
---
client/src/app/admin/admin-routing.module.ts | 20 +++++++--
...nent.html => database-form.component.html} | 2 +-
...omponent.ts => database-form.component.ts} | 24 +++++++---
.../database/database-table.component.html | 2 +-
.../app/admin/components/database/index.ts | 4 +-
client/src/app/admin/components/index.ts | 4 +-
.../src/app/admin/components/survey/index.ts | 7 +++
.../survey/survey-form.component.html | 45 +++++++++++++++++++
.../survey/survey-form.component.ts | 40 +++++++++++++++++
.../survey/survey-table.component.html | 2 +-
.../database/database-list.component.html | 2 +-
.../database/database-list.component.ts | 2 +-
.../database/edit-database.component.html | 24 ++++++++++
.../database/edit-database.component.ts | 31 +++++++++++++
.../database/new-database.component.html | 22 +++++++++
.../database/new-database.component.ts | 17 +++++++
.../survey/edit-survey.component.html | 24 ++++++++++
.../survey/edit-survey.component.ts | 40 +++++++++++++++++
.../survey/new-survey.component.html | 24 ++++++++++
.../containers/survey/new-survey.component.ts | 32 +++++++++++++
.../survey/survey-list.component.html | 2 +-
.../survey/survey-list.component.ts | 2 +-
.../containers/survey/survey.component.html | 6 +--
.../store/effects/database.effects.ts | 14 ++++--
.../metamodel/store/effects/survey.effects.ts | 14 ++++--
.../store/selectors/database.selector.ts | 6 +++
.../store/selectors/survey.selector.ts | 6 +++
27 files changed, 387 insertions(+), 31 deletions(-)
rename client/src/app/admin/components/database/{form-database.component.html => database-form.component.html} (94%)
rename client/src/app/admin/components/database/{form-database.component.ts => database-form.component.ts} (57%)
create mode 100644 client/src/app/admin/components/survey/index.ts
create mode 100644 client/src/app/admin/components/survey/survey-form.component.html
create mode 100644 client/src/app/admin/components/survey/survey-form.component.ts
create mode 100644 client/src/app/admin/containers/database/edit-database.component.html
create mode 100644 client/src/app/admin/containers/database/edit-database.component.ts
create mode 100644 client/src/app/admin/containers/database/new-database.component.html
create mode 100644 client/src/app/admin/containers/database/new-database.component.ts
create mode 100644 client/src/app/admin/containers/survey/edit-survey.component.html
create mode 100644 client/src/app/admin/containers/survey/edit-survey.component.ts
create mode 100644 client/src/app/admin/containers/survey/new-survey.component.html
create mode 100644 client/src/app/admin/containers/survey/new-survey.component.ts
diff --git a/client/src/app/admin/admin-routing.module.ts b/client/src/app/admin/admin-routing.module.ts
index 8730cc45..e9674a64 100644
--- a/client/src/app/admin/admin-routing.module.ts
+++ b/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
];
diff --git a/client/src/app/admin/components/database/form-database.component.html b/client/src/app/admin/components/database/database-form.component.html
similarity index 94%
rename from client/src/app/admin/components/database/form-database.component.html
rename to client/src/app/admin/components/database/database-form.component.html
index 0b8c30b8..e346a1da 100644
--- a/client/src/app/admin/components/database/form-database.component.html
+++ b/client/src/app/admin/components/database/database-form.component.html
@@ -1,4 +1,4 @@
-<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">
diff --git a/client/src/app/admin/components/database/form-database.component.ts b/client/src/app/admin/components/database/database-form.component.ts
similarity index 57%
rename from client/src/app/admin/components/database/form-database.component.ts
rename to client/src/app/admin/components/database/database-form.component.ts
index d891c3b0..6883073c 100644
--- a/client/src/app/admin/components/database/form-database.component.ts
+++ b/client/src/app/admin/components/database/database-form.component.ts
@@ -1,17 +1,17 @@
-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);
}
}
}
diff --git a/client/src/app/admin/components/database/database-table.component.html b/client/src/app/admin/components/database/database-table.component.html
index 51d8a27b..c4734e54 100644
--- a/client/src/app/admin/components/database/database-table.component.html
+++ b/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>
diff --git a/client/src/app/admin/components/database/index.ts b/client/src/app/admin/components/database/index.ts
index 64ff7dd9..ec055f55 100644
--- a/client/src/app/admin/components/database/index.ts
+++ b/client/src/app/admin/components/database/index.ts
@@ -1,7 +1,7 @@
import { DatabaseTableComponent } from "./database-table.component";
-import { FormDatabaseComponent } from "./form-database.component";
+import { DatabaseFormComponent } from "./database-form.component";
export const databseComponents = [
DatabaseTableComponent,
- FormDatabaseComponent
+ DatabaseFormComponent
];
diff --git a/client/src/app/admin/components/index.ts b/client/src/app/admin/components/index.ts
index eb4e5e21..9dc7074d 100644
--- a/client/src/app/admin/components/index.ts
+++ b/client/src/app/admin/components/index.ts
@@ -1,13 +1,13 @@
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
];
diff --git a/client/src/app/admin/components/survey/index.ts b/client/src/app/admin/components/survey/index.ts
new file mode 100644
index 00000000..896736ff
--- /dev/null
+++ b/client/src/app/admin/components/survey/index.ts
@@ -0,0 +1,7 @@
+import { SurveyTableComponent } from "./survey-table.component";
+import { SurveyFormComponent } from "./survey-form.component";
+
+export const surveyComponents = [
+ SurveyTableComponent,
+ SurveyFormComponent
+];
diff --git a/client/src/app/admin/components/survey/survey-form.component.html b/client/src/app/admin/components/survey/survey-form.component.html
new file mode 100644
index 00000000..ae53465a
--- /dev/null
+++ b/client/src/app/admin/components/survey/survey-form.component.html
@@ -0,0 +1,45 @@
+<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>
diff --git a/client/src/app/admin/components/survey/survey-form.component.ts b/client/src/app/admin/components/survey/survey-form.component.ts
new file mode 100644
index 00000000..3af1111c
--- /dev/null
+++ b/client/src/app/admin/components/survey/survey-form.component.ts
@@ -0,0 +1,40 @@
+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);
+ }
+ }
+}
diff --git a/client/src/app/admin/components/survey/survey-table.component.html b/client/src/app/admin/components/survey/survey-table.component.html
index a30dc370..e92d696d 100644
--- a/client/src/app/admin/components/survey/survey-table.component.html
+++ b/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>
diff --git a/client/src/app/admin/containers/database/database-list.component.html b/client/src/app/admin/containers/database/database-list.component.html
index 3059a3ac..de6db507 100644
--- a/client/src/app/admin/containers/database/database-list.component.html
+++ b/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>
diff --git a/client/src/app/admin/containers/database/database-list.component.ts b/client/src/app/admin/containers/database/database-list.component.ts
index d892e1d3..895c09e2 100644
--- a/client/src/app/admin/containers/database/database-list.component.ts
+++ b/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 }));
}
}
diff --git a/client/src/app/admin/containers/database/edit-database.component.html b/client/src/app/admin/containers/database/edit-database.component.html
new file mode 100644
index 00000000..3b12c7a9
--- /dev/null
+++ b/client/src/app/admin/containers/database/edit-database.component.html
@@ -0,0 +1,24 @@
+<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>
+
+ <a routerLink="/admin/survey/database-list" class="btn btn-danger">Cancel</a>
+ </app-database-form>
+ </div>
+ </div>
+</div>
diff --git a/client/src/app/admin/containers/database/edit-database.component.ts b/client/src/app/admin/containers/database/edit-database.component.ts
new file mode 100644
index 00000000..396a76c9
--- /dev/null
+++ b/client/src/app/admin/containers/database/edit-database.component.ts
@@ -0,0 +1,31 @@
+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 }));
+ }
+}
diff --git a/client/src/app/admin/containers/database/new-database.component.html b/client/src/app/admin/containers/database/new-database.component.html
new file mode 100644
index 00000000..4bbd42a9
--- /dev/null
+++ b/client/src/app/admin/containers/database/new-database.component.html
@@ -0,0 +1,22 @@
+<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>
+
+ <a routerLink="/admin/survey/database-list" type="button" class="btn btn-danger">Cancel</a>
+ </app-database-form>
+ </div>
+ </div>
+</div>
diff --git a/client/src/app/admin/containers/database/new-database.component.ts b/client/src/app/admin/containers/database/new-database.component.ts
new file mode 100644
index 00000000..b588d861
--- /dev/null
+++ b/client/src/app/admin/containers/database/new-database.component.ts
@@ -0,0 +1,17 @@
+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 }));
+ }
+}
diff --git a/client/src/app/admin/containers/survey/edit-survey.component.html b/client/src/app/admin/containers/survey/edit-survey.component.html
new file mode 100644
index 00000000..3ee4393e
--- /dev/null
+++ b/client/src/app/admin/containers/survey/edit-survey.component.html
@@ -0,0 +1,24 @@
+<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>
+
+ <a routerLink="/survey/survey-list" type="button" class="btn btn-danger">Cancel</a>
+ </app-survey-form>
+ </div>
+ </div>
+</div>
diff --git a/client/src/app/admin/containers/survey/edit-survey.component.ts b/client/src/app/admin/containers/survey/edit-survey.component.ts
new file mode 100644
index 00000000..8df926f8
--- /dev/null
+++ b/client/src/app/admin/containers/survey/edit-survey.component.ts
@@ -0,0 +1,40 @@
+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 }));
+ }
+}
diff --git a/client/src/app/admin/containers/survey/new-survey.component.html b/client/src/app/admin/containers/survey/new-survey.component.html
new file mode 100644
index 00000000..1b61f923
--- /dev/null
+++ b/client/src/app/admin/containers/survey/new-survey.component.html
@@ -0,0 +1,24 @@
+<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>
+
+ <a routerLink="/admin/survey/survey-list" type="button" class="btn btn-danger">Cancel</a>
+ </app-survey-form>
+ </div>
+ </div>
+</div>
diff --git a/client/src/app/admin/containers/survey/new-survey.component.ts b/client/src/app/admin/containers/survey/new-survey.component.ts
new file mode 100644
index 00000000..d383ad42
--- /dev/null
+++ b/client/src/app/admin/containers/survey/new-survey.component.ts
@@ -0,0 +1,32 @@
+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 }));
+ }
+}
diff --git a/client/src/app/admin/containers/survey/survey-list.component.html b/client/src/app/admin/containers/survey/survey-list.component.html
index 55f3cb56..88b84d50 100644
--- a/client/src/app/admin/containers/survey/survey-list.component.html
+++ b/client/src/app/admin/containers/survey/survey-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 survey" class="btn btn-outline-success float-right" routerLink="/new-survey">
+ <button title="Add a new survey" class="btn btn-outline-success float-right" routerLink="/admin/new-survey">
<span class="fas fa-plus"></span> New survey
</button>
</div>
diff --git a/client/src/app/admin/containers/survey/survey-list.component.ts b/client/src/app/admin/containers/survey/survey-list.component.ts
index 276c6619..58a9697d 100644
--- a/client/src/app/admin/containers/survey/survey-list.component.ts
+++ b/client/src/app/admin/containers/survey/survey-list.component.ts
@@ -35,6 +35,6 @@ export class SurveyListComponent implements OnInit {
}
deleteSurvey(survey: Survey) {
- // this.store.dispatch(new surveyActions.DeleteSurveyAction(survey));
+ this.store.dispatch(surveyActions.deleteSurvey({ survey }));
}
}
diff --git a/client/src/app/admin/containers/survey/survey.component.html b/client/src/app/admin/containers/survey/survey.component.html
index 009c9509..ee1e4b27 100644
--- a/client/src/app/admin/containers/survey/survey.component.html
+++ b/client/src/app/admin/containers/survey/survey.component.html
@@ -1,8 +1,8 @@
<div class="container-fluid">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
- <li *ngIf="isSurveyList()" class="breadcrumb-item active" aria-current="page">Surveys</li>
<li *ngIf="isDatabaseList()" class="breadcrumb-item active" aria-current="page">Databases</li>
+ <li *ngIf="isSurveyList()" class="breadcrumb-item active" aria-current="page">Surveys</li>
</ol>
</nav>
</div>
@@ -12,10 +12,10 @@
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item">
- <a class="nav-link" routerLink="survey-list" routerLinkActive="active">Survey list</a>
+ <a class="nav-link" routerLink="database-list" routerLinkActive="active">Database list</a>
</li>
<li class="nav-item">
- <a class="nav-link" routerLink="database-list" routerLinkActive="active">Database list</a>
+ <a class="nav-link" routerLink="survey-list" routerLinkActive="active">Survey list</a>
</li>
</ul>
</div>
diff --git a/client/src/app/metamodel/store/effects/database.effects.ts b/client/src/app/metamodel/store/effects/database.effects.ts
index 7e43a8bd..ddbb25c6 100644
--- a/client/src/app/metamodel/store/effects/database.effects.ts
+++ b/client/src/app/metamodel/store/effects/database.effects.ts
@@ -1,8 +1,9 @@
import { Injectable } from '@angular/core';
+import { Router } from '@angular/router';
+
import { Actions, createEffect, ofType } from '@ngrx/effects';
import { of } from 'rxjs';
import { map, tap, mergeMap, catchError } from 'rxjs/operators';
-
import { ToastrService } from 'ngx-toastr';
import * as databaseActions from '../actions/database.actions';
@@ -37,7 +38,10 @@ export class DatabaseEffects {
addDatabaseSuccess$ = createEffect(() =>
this.actions$.pipe(
ofType(databaseActions.addDatabaseSuccess),
- tap(() => this.toastr.success('Database successfully added', 'The new database was added into the database'))
+ tap(() => {
+ this.router.navigate(['/admin/survey/database-list']);
+ this.toastr.success('Database successfully added', 'The new database was added into the database')
+ })
), { dispatch: false}
);
@@ -63,7 +67,10 @@ export class DatabaseEffects {
editDatabaseSuccess$ = createEffect(() =>
this.actions$.pipe(
ofType(databaseActions.editDatabaseSuccess),
- tap(() => this.toastr.success('Database successfully edited', 'The existing database has been edited into the database'))
+ tap(() => {
+ this.router.navigate(['/admin/survey/database-list']);
+ this.toastr.success('Database successfully edited', 'The existing database has been edited into the database')
+ })
), { dispatch: false}
);
@@ -103,6 +110,7 @@ export class DatabaseEffects {
constructor(
private actions$: Actions,
private databaseService: DatabaseService,
+ private router: Router,
private toastr: ToastrService
) {}
}
diff --git a/client/src/app/metamodel/store/effects/survey.effects.ts b/client/src/app/metamodel/store/effects/survey.effects.ts
index fb139db4..bd48a421 100644
--- a/client/src/app/metamodel/store/effects/survey.effects.ts
+++ b/client/src/app/metamodel/store/effects/survey.effects.ts
@@ -1,8 +1,9 @@
import { Injectable } from '@angular/core';
+import { Router } from '@angular/router';
+
import { Actions, createEffect, ofType } from '@ngrx/effects';
import { of } from 'rxjs';
import { map, tap, mergeMap, catchError } from 'rxjs/operators';
-
import { ToastrService } from 'ngx-toastr';
import * as surveyActions from '../actions/survey.actions';
@@ -37,7 +38,10 @@ export class SurveyEffects {
addSurveySuccess$ = createEffect(() =>
this.actions$.pipe(
ofType(surveyActions.addSurveySuccess),
- tap(() => this.toastr.success('Survey successfully added', 'The new survey was added into the database'))
+ tap(() => {
+ this.router.navigate(['/admin/survey/survey-list']);
+ this.toastr.success('Survey successfully added', 'The new survey was added into the database')
+ })
), { dispatch: false}
);
@@ -63,7 +67,10 @@ export class SurveyEffects {
editSurveySuccess$ = createEffect(() =>
this.actions$.pipe(
ofType(surveyActions.editSurveySuccess),
- tap(() => this.toastr.success('Survey successfully edited', 'The existing survey has been edited into the database'))
+ tap(() => {
+ this.router.navigate(['/admin/survey/survey-list']);
+ this.toastr.success('Survey successfully edited', 'The existing survey has been edited into the database')
+ })
), { dispatch: false}
);
@@ -103,6 +110,7 @@ export class SurveyEffects {
constructor(
private actions$: Actions,
private surveyService: SurveyService,
+ private router: Router,
private toastr: ToastrService
) {}
}
diff --git a/client/src/app/metamodel/store/selectors/database.selector.ts b/client/src/app/metamodel/store/selectors/database.selector.ts
index 0f1acfb7..79a01e19 100644
--- a/client/src/app/metamodel/store/selectors/database.selector.ts
+++ b/client/src/app/metamodel/store/selectors/database.selector.ts
@@ -37,3 +37,9 @@ export const selectDatabaseListIsLoaded = createSelector(
selectDatabaseState,
fromDatabase.selectDatabaseListIsLoaded
);
+
+export const selectDatabaseByRouteId = createSelector(
+ selectDatabaseEntities,
+ reducer.selectRouterState,
+ (entities, router) => entities[router.state.params.id]
+);
diff --git a/client/src/app/metamodel/store/selectors/survey.selector.ts b/client/src/app/metamodel/store/selectors/survey.selector.ts
index c6b87928..16f26ac6 100644
--- a/client/src/app/metamodel/store/selectors/survey.selector.ts
+++ b/client/src/app/metamodel/store/selectors/survey.selector.ts
@@ -37,3 +37,9 @@ export const selectSurveyListIsLoaded = createSelector(
selectSurveyState,
fromSurvey.selectSurveyListIsLoaded
);
+
+export const selectSurveyByRouteName = createSelector(
+ selectSurveyEntities,
+ reducer.selectRouterState,
+ (entities, router) => entities[router.state.params.name]
+);
--
GitLab