From a3bba99380c0dbcf2b187b04d398ca68cfe361bb Mon Sep 17 00:00:00 2001
From: Alex ORLUC <alex.orluc@maarch.org>
Date: Thu, 18 Jun 2020 15:22:51 +0200
Subject: [PATCH] FEAT #13671 TIME 1:20 front database installer
---
.../database/database.component.html | 78 ++++++++-----------
.../database/database.component.scss | 5 +-
.../installer/database/database.component.ts | 46 +++++++----
.../app/installer/installer.component.html | 2 +-
src/frontend/lang/lang-fr.ts | 7 +-
5 files changed, 75 insertions(+), 63 deletions(-)
diff --git a/src/frontend/app/installer/database/database.component.html b/src/frontend/app/installer/database/database.component.html
index ae030db1f88..f77fa26efc9 100644
--- a/src/frontend/app/installer/database/database.component.html
+++ b/src/frontend/app/installer/database/database.component.html
@@ -1,49 +1,33 @@
<div class="stepContent">
- <h2 class="stepContentTitle"><i class="fa fa-database"></i> Base de données</h2>
- <p>
- Maarch Courrier nécessite une connexion à une base de données afin de stocker les métas-données des documents
- stockés ainsi que la configuration de l'application.
- </p>
- <form [formGroup]="stepFormGroup" style="display: contents;">
- <mat-accordion>
- <mat-expansion-panel [expanded]="!connectionState">
- <mat-expansion-panel-header>
- <mat-panel-title>
- Connexion à la base de données
- </mat-panel-title>
- </mat-expansion-panel-header>
- <mat-form-field appearance="outline" style="color: initial;">
- <mat-label>Serveur</mat-label>
- <input matInput formControlName="dbHostCtrl">
- </mat-form-field>
- <mat-form-field appearance="outline" style="color: initial;">
- <mat-label>Port</mat-label>
- <input matInput formControlName="dbPortCtrl">
- </mat-form-field>
- <mat-form-field appearance="outline" style="color: initial;">
- <mat-label>Utilisateur</mat-label>
- <input matInput formControlName="dbLoginCtrl">
- </mat-form-field>
- <mat-form-field appearance="outline" style="color: initial;">
- <mat-label>Mot de passe</mat-label>
- <input matInput formControlName="dbPasswordCtrl">
- </mat-form-field>
- <div style="text-align: center;">
- <button mat-raised-button type="button" color="default" (click)="checkConnection()">Tester la
- connexion</button>
- </div>
- </mat-expansion-panel>
- <mat-expansion-panel [disabled]="!connectionState" [expanded]="connectionState">
- <mat-expansion-panel-header>
- <mat-panel-title>
- Base de donnée de l'application
- </mat-panel-title>
- </mat-expansion-panel-header>
- <mat-form-field appearance="outline" style="color: moccasin;">
- <mat-label>Nom de la base de données</mat-label>
- <input matInput formControlName="dbNameCtrl">
- </mat-form-field>
- </mat-expansion-panel>
- </mat-accordion>
+ <h2 class="stepContentTitle"><i class="fa fa-database"></i> {{lang.database}}</h2>
+ <div class="alert-message alert-message-info" role="alert" style="margin-top: 30px;min-width: 100%;">
+ {{lang.stepDatabase_desc}}
+ </div>
+ <form [formGroup]="stepFormGroup" style="width: 850px;margin: auto;">
+ <mat-form-field appearance="outline">
+ <mat-label>{{lang.host}}</mat-label>
+ <input matInput formControlName="dbHostCtrl" required>
+ </mat-form-field>
+ <mat-form-field appearance="outline">
+ <mat-label>{{lang.port}}</mat-label>
+ <input matInput formControlName="dbPortCtrl" required>
+ </mat-form-field>
+ <mat-form-field appearance="outline">
+ <mat-label>{{lang.user}}</mat-label>
+ <input matInput formControlName="dbLoginCtrl" required>
+ </mat-form-field>
+ <mat-form-field appearance="outline">
+ <mat-label>{{lang.password}}</mat-label>
+ <input matInput formControlName="dbPasswordCtrl" required>
+ </mat-form-field>
+ <mat-form-field appearance="outline">
+ <mat-label>{{lang.dbName}}</mat-label>
+ <input matInput formControlName="dbNameCtrl" required>
+ </mat-form-field>
+ <div style="text-align:center;">
+ <button mat-raised-button type="button" color="primary" (click)="checkConnection()">
+ {{lang.checkInformations}}
+ </button>
+ </div>
</form>
-</div>
+</div>
\ No newline at end of file
diff --git a/src/frontend/app/installer/database/database.component.scss b/src/frontend/app/installer/database/database.component.scss
index aef06d2d80a..a69d0b879fd 100644
--- a/src/frontend/app/installer/database/database.component.scss
+++ b/src/frontend/app/installer/database/database.component.scss
@@ -1,7 +1,10 @@
+@import '../../../css/vars.scss';
+
.stepContent {
- max-width: 850px;
+ // max-width: 850px;
margin: auto;
.stepContentTitle {
+ color: $primary;
margin-bottom: 30px;
border-bottom: solid 1px;
padding: 0;
diff --git a/src/frontend/app/installer/database/database.component.ts b/src/frontend/app/installer/database/database.component.ts
index 3eccbc5909e..14b8b384fde 100644
--- a/src/frontend/app/installer/database/database.component.ts
+++ b/src/frontend/app/installer/database/database.component.ts
@@ -1,6 +1,11 @@
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators, ValidationErrors } from '@angular/forms';
import { NotificationService } from '../../notification.service';
+import { HttpClient } from '@angular/common/http';
+import { tap } from 'rxjs/internal/operators/tap';
+import { catchError } from 'rxjs/internal/operators/catchError';
+import { of } from 'rxjs/internal/observable/of';
+import { LANG } from '../../translate.component';
@Component({
selector: 'app-database',
@@ -8,12 +13,13 @@ import { NotificationService } from '../../notification.service';
styleUrls: ['./database.component.scss']
})
export class DatabaseComponent implements OnInit {
-
+ lang: any = LANG;
stepFormGroup: FormGroup;
connectionState: boolean = false;
constructor(
+ public http: HttpClient,
private _formBuilder: FormBuilder,
private notify: NotificationService,
) {
@@ -22,32 +28,46 @@ export class DatabaseComponent implements OnInit {
dbLoginCtrl: ['', Validators.required],
dbPortCtrl: ['5432', Validators.required],
dbPasswordCtrl: ['', Validators.required],
- dbNameCtrl: ['', Validators.required]
+ dbNameCtrl: ['', Validators.required],
+ stateStep: ['', Validators.required]
});
- }
-
- ngOnInit(): void {
-
- // this.stepFormGroup.controls['firstCtrl'].setValue(this.checkStep());
- // this.stepFormGroup.controls['firstCtrl'].markAsUntouched();
}
+ ngOnInit(): void { }
+
isValidConnection() {
return false;
}
checkConnection() {
- this.connectionState = true;
+
+ const info = {
+ server: this.stepFormGroup.controls['dbHostCtrl'].value,
+ port: this.stepFormGroup.controls['dbPortCtrl'].value,
+ user: this.stepFormGroup.controls['dbLoginCtrl'].value,
+ password: this.stepFormGroup.controls['dbPasswordCtrl'].value,
+ name: this.stepFormGroup.controls['dbNameCtrl'].value
+ };
+
+ this.http.get(`../rest/installer/databaseConnection`, { params: info }).pipe(
+ tap((data: any) => {
+ this.notify.success(this.lang.rightInformations);
+ this.stepFormGroup.controls['stateStep'].setValue('success');
+ }),
+ catchError((err: any) => {
+ this.notify.error(this.lang.badInformations);
+ this.stepFormGroup.markAllAsTouched();
+ this.stepFormGroup.controls['stateStep'].setValue('');
+ return of(false);
+ })
+ ).subscribe();
}
checkStep() {
- let state = 'success';
- return state;
+ return this.stepFormGroup.valid;
}
isValidStep() {
- console.log(this.stepFormGroup.valid);
-
/*Object.keys(this.stepFormGroup.controls).forEach(key => {
const controlErrors: ValidationErrors = this.stepFormGroup.get(key).errors;
diff --git a/src/frontend/app/installer/installer.component.html b/src/frontend/app/installer/installer.component.html
index 1ad88176336..754523b0872 100644
--- a/src/frontend/app/installer/installer.component.html
+++ b/src/frontend/app/installer/installer.component.html
@@ -33,7 +33,7 @@
</div>
</mat-step>
<mat-step [stepControl]="appDatabase.getFormGroup()">
- <ng-template matStepLabel>Base de données</ng-template>
+ <ng-template matStepLabel>{{lang.database}}</ng-template>
<div class="stepContainer">
<div class="stepContent">
<app-database #appDatabase></app-database>
diff --git a/src/frontend/lang/lang-fr.ts b/src/frontend/lang/lang-fr.ts
index edbcb0b0218..72e6057c5ab 100755
--- a/src/frontend/lang/lang-fr.ts
+++ b/src/frontend/lang/lang-fr.ts
@@ -1726,7 +1726,7 @@ export const LANG_FR = {
"warnPrivateKeyTitle": "La clé privée de chiffrement n'a pas été modifiée !",
"warnPrivateKey": "Cela compromet la sécurité de l'application.",
"prerequisite": "Pré-requis",
- "stepPrerequisite_desc": "L'installation de Maarch Courrier nécessite un certain nombre de pré-requis au niveau de l'installation de PHP. Reportez-vous cette page pour les détails",
+ "stepPrerequisite_desc": "L'installation de Maarch Courrier nécessite un certain nombre de pré-requis au niveau de l'installation de PHP. Pour plus d'informations",
"install_phpVersionValid": "Version minimum de PHP (>= 7.2)",
"install_unoconv": "unoconv",
"install_unoconv_desc": "Outils de conversion de documents bureautiques soffice/unoconv installés",
@@ -1766,4 +1766,9 @@ export const LANG_FR = {
"general": "Générale",
"phpExtensions": "Extensions PHP",
"phpConfiguration": "Configuration PHP",
+ "dbName": "Nom de la base de données",
+ "stepDatabase_desc": "Maarch Courrier nécessite une connexion à une base de données afin de stocker les métas-données des documents stockés ainsi que la configuration de l'application.",
+ "checkInformations": "Vérifier les informations",
+ "badInformations": "Les informations sont incorrectes",
+ "rightInformations": "Les informations sont correctes",
};
\ No newline at end of file
--
GitLab