From c83b4956da825c221309d7d86ac76b1620486a8e Mon Sep 17 00:00:00 2001
From: Alex ORLUC <alex.orluc@maarch.org>
Date: Tue, 4 Aug 2020 15:32:16 +0200
Subject: [PATCH] FEAT #14457 TIME 1:15 front users import add var lang +
delimiter choose
---
.../user/import/users-import.component.html | 49 +++++++++++++----
.../user/import/users-import.component.scss | 4 --
.../user/import/users-import.component.ts | 52 ++++++++++++-------
src/lang/lang-en.json | 6 ++-
src/lang/lang-fr.json | 6 ++-
src/lang/lang-nl.json | 6 ++-
6 files changed, 86 insertions(+), 37 deletions(-)
diff --git a/src/frontend/app/administration/user/import/users-import.component.html b/src/frontend/app/administration/user/import/users-import.component.html
index 63c58d63d74..ae23dc0607b 100644
--- a/src/frontend/app/administration/user/import/users-import.component.html
+++ b/src/frontend/app/administration/user/import/users-import.component.html
@@ -4,12 +4,27 @@
<mat-toolbar class="import-tool" [class.hide]="csvData.length === 0 || loading">
<input type="file" name="files[]" #uploadFile id="uploadFile" (change)="uploadCsv($event)" accept=".csv"
style="flex:1;">
- <span class="example-spacer"></span>
- <span style="flex:1;text-align: right;"><i class="fa fa-users" color="primary"></i> {{'lang.usersOfFile' | translate}} : <b color="primary">{{countAll}}</b>
+ <span style="flex: 1;text-align: center;display: flex;align-items: center;justify-content: center;">
+ {{'lang.delimiter' | translate}} :
+ <mat-form-field style="font-size: 14px;width: 100px !important;font-weight: bold;text-align: center;"
+ color="primary" (click)="$event.stopPropagation()">
+ <mat-select [(ngModel)]="currentDelimiter" (click)="$event.stopPropagation()">
+ <mat-option *ngFor="let delimiter of delimiters" [value]="delimiter">
+ {{delimiter}}
+ </mat-option>
+ </mat-select>
+ </mat-form-field>
+ </span>
+ <span style="flex:1;text-align: right;"><i class="fa fa-users"
+ color="primary"></i> {{'lang.usersOfFile' | translate}} : <b color="primary">{{countAll}}</b>
<ng-container *ngIf="countAll > 10"> (10 {{'lang.previewed' | translate}})</ng-container>
</span>
- <span style="flex:1;text-align: right;"><i class="fa fa-user-plus" color="primary"></i> {{'lang.additions' | translate}} : <b color="primary">{{countAdd}}</b></span>
- <span style="flex:1;text-align: right;"><i class="fa fa-user-edit" color="primary"></i> {{'lang.modifications' | translate}} : <b color="primary">{{countUp}}</b></span>
+ <span style="flex:1;text-align: right;"><i class="fa fa-user-plus"
+ color="primary"></i> {{'lang.additions' | translate}} : <b
+ color="primary">{{countAdd}}</b></span>
+ <span style="flex:1;text-align: right;"><i class="fa fa-user-edit"
+ color="primary"></i> {{'lang.modifications' | translate}} : <b
+ color="primary">{{countUp}}</b></span>
</mat-toolbar>
<ng-container *ngIf="loading; else elseTemplate">
<div class="loader">
@@ -18,16 +33,26 @@
</ng-container>
<ng-template #elseTemplate>
<div *ngIf="csvData.length === 0" appUploadFileDragDrop (click)="uploadFile.click()"
- (onFileDropped)="dndUploadFile($event)"
- class="dndFile">
- {{'lang.dndFileCsvDesc' | translate}}
+ (onFileDropped)="dndUploadFile($event)" class="dndFile">
+ <div>
+ {{'lang.dndFileCsvDesc' | translate}}
+ <mat-form-field appearance="outline" style="font-size:14px;" (click)="$event.stopPropagation()">
+ <mat-label>{{'lang.delimiter' | translate}}</mat-label>
+ <mat-select [(ngModel)]="currentDelimiter" (click)="$event.stopPropagation()">
+ <mat-option *ngFor="let delimiter of delimiters" [value]="delimiter">
+ {{delimiter}}
+ </mat-option>
+ </mat-select>
+ </mat-form-field>
+ </div>
</div>
<mat-table *ngIf="csvData.length > 0" #table [dataSource]="dataSource">
<ng-container *ngFor="let column of userColmuns;let i=index;">
<ng-container [matColumnDef]="column">
<mat-header-cell *matHeaderCellDef>
- <i class="fas fa-database" color="primary" [title]="'lang.dbColumn' | translate"></i> <b
- color="primary" [title]="'lang.dbColumn' | translate">{{column}}</b>
+ <i class="fas fa-database" color="primary"
+ [title]="'lang.dbColumn' | translate"></i> <b color="primary"
+ [title]="'lang.dbColumn' | translate">{{column}}</b>
<i class="fas fa-arrows-alt-h"></i>
<i class="fas fa-file-csv" [title]="'lang.csvColumn' | translate"></i> <mat-form-field
[title]="'lang.csvColumn' | translate" (click)="$event.stopPropagation()"
@@ -53,7 +78,9 @@
</div>
<span class="divider-modal"></span>
<div mat-dialog-actions class="actions">
- <button mat-raised-button mat-button *ngIf="csvData.length > 0" color="primary" [disabled]="loading" (click)="onSubmit()">{{'lang.validate' | translate}}</button>
- <button mat-raised-button mat-button [disabled]="loading" [mat-dialog-close]="">{{'lang.cancel' | translate }}</button>
+ <button mat-raised-button mat-button *ngIf="csvData.length > 0" color="primary" [disabled]="loading"
+ (click)="onSubmit()">{{'lang.validate' | translate}}</button>
+ <button mat-raised-button mat-button [disabled]="loading"
+ [mat-dialog-close]="">{{'lang.cancel' | translate }}</button>
</div>
</div>
\ No newline at end of file
diff --git a/src/frontend/app/administration/user/import/users-import.component.scss b/src/frontend/app/administration/user/import/users-import.component.scss
index a2186acd5d0..9b74fa7e1bd 100644
--- a/src/frontend/app/administration/user/import/users-import.component.scss
+++ b/src/frontend/app/administration/user/import/users-import.component.scss
@@ -15,10 +15,6 @@
font-size: 14px;
}
-.example-spacer {
- flex: 1 1 auto;
-}
-
.dndFile {
height: 100%;
display: flex;
diff --git a/src/frontend/app/administration/user/import/users-import.component.ts b/src/frontend/app/administration/user/import/users-import.component.ts
index 3a2a5726a6d..d8c5a947ec1 100644
--- a/src/frontend/app/administration/user/import/users-import.component.ts
+++ b/src/frontend/app/administration/user/import/users-import.component.ts
@@ -9,6 +9,8 @@ import { ConfirmComponent } from '../../../../plugins/modal/confirm.component';
import { filter, exhaustMap, tap, catchError } from 'rxjs/operators';
import { of } from 'rxjs/internal/observable/of';
import { AlertComponent } from '../../../../plugins/modal/alert.component';
+import { LocalStorageService } from '../../../../service/local-storage.service';
+import { HeaderService } from '../../../../service/header.service';
@Component({
templateUrl: 'users-import.component.html',
@@ -30,6 +32,9 @@ export class UsersImportComponent implements OnInit {
];
+ delimiters = [';', ',', 'TAB'];
+ currentDelimiter = ';';
+
associatedColmuns: any = {};
dataSource = new MatTableDataSource(null);
csvData: any[] = [];
@@ -43,17 +48,19 @@ export class UsersImportComponent implements OnInit {
public http: HttpClient,
private notify: NotificationService,
private functionsService: FunctionsService,
+ private localStorage: LocalStorageService,
+ private headerService: HeaderService,
public dialog: MatDialog,
public dialogRef: MatDialogRef<UsersImportComponent>,
@Inject(MAT_DIALOG_DATA) public data: any,
) {
}
- ngOnInit(): void { }
+ ngOnInit(): void {
+ this.setConfiguration();
+ }
changeColumn(coldb: string, colCsv: string) {
- console.log(coldb);
- console.log(colCsv);
this.userData = [];
const limit = this.csvData.length < 10 ? this.csvData.length : 10;
for (let index = 0; index < limit; index++) {
@@ -81,10 +88,9 @@ export class UsersImportComponent implements OnInit {
reader.readAsText(fileInput.target.files[0]);
reader.onload = (value: any) => {
- console.log(value.target.result.split('\n'));
rawCsv = value.target.result.split('\n');
- if (rawCsv[0].split(';').map(s => s.replace(/"/gi, '').trim()).length >= this.userColmuns.length) {
+ if (rawCsv[0].split(this.currentDelimiter).map(s => s.replace(/"/gi, '').trim()).length >= this.userColmuns.length) {
this.csvColumns = rawCsv[0].split(';').map(s => s.replace(/"/gi, '').trim());
let dataCol = [];
let objData = {};
@@ -102,8 +108,9 @@ export class UsersImportComponent implements OnInit {
this.initData();
this.countAdd = this.csvData.filter((data: any) => this.functionsService.empty(data[this.associatedColmuns['id']])).length;
this.countUp = this.csvData.filter((data: any) => !this.functionsService.empty(data[this.associatedColmuns['id']])).length;
+ this.localStorage.save(`importUsersFields_${this.headerService.user.id}`, this.currentDelimiter);
} else {
- this.dialog.open(AlertComponent, { panelClass: 'maarch-modal', autoFocus: false, disableClose: true, data: { title: 'Erreur', msg: 'Les données doivent avoir au mimimum <b>6</b> valeurs' } });
+ this.notify.error(this.translate.instant('lang.mustAtLeastMinValues'));
}
this.loading = false;
};
@@ -149,9 +156,13 @@ export class UsersImportComponent implements OnInit {
}
onSubmit() {
- console.log('test');
const dataToSend: any[] = [];
- let dialogRef = this.dialog.open(ConfirmComponent, { panelClass: 'maarch-modal', autoFocus: false, disableClose: true, data: { title: 'Importer', msg: 'Voulez-vous importer <b>' + this.countAll + '</b> utilisateurs ?<br/>(<b>' + this.countAdd + '</b> créations et <b>' + this.countUp + '</b> modifications)' } });
+ let confirmText = '';
+ this.translate.get('lang.confirmImportUsers', {0: this.countAll}).subscribe((res: string) => {
+ confirmText = `${res} ?<br/><br/>`;
+ confirmText += `<ul><li><b>${this.countAdd}</b> ${this.translate.instant('lang.additions')}</li><li><b>${this.countUp}</b> ${this.translate.instant('lang.modifications')}</li></ul>`;
+ });
+ let dialogRef = this.dialog.open(ConfirmComponent, { panelClass: 'maarch-modal', autoFocus: false, disableClose: true, data: { title: this.translate.instant('lang.import'), msg: confirmText } });
dialogRef.afterClosed().pipe(
filter((data: string) => data === 'ok'),
tap(() => {
@@ -169,26 +180,23 @@ export class UsersImportComponent implements OnInit {
}),
exhaustMap(() => this.http.put(`../rest/users/import`, { users: dataToSend })),
tap((data: any) => {
- let text = '';
+ let textModal = '';
if (data.warnings.count > 0) {
- text = `<br/>${data.warning.count} ${this.translate.instant('lang.widthWarnings')} : <ul>`;
+ textModal = `<br/>${data.warning.count} ${this.translate.instant('lang.withWarnings')} : <ul>`;
data.errors.details.forEach(element => {
- text += `<li> ${this.translate.instant('element.lang')} (${this.translate.instant('lang.line')} : ${element.index + 1})</li>`;
+ textModal += `<li> ${this.translate.instant('element.lang')} (${this.translate.instant('lang.line')} : ${element.index + 1})</li>`;
});
- text += '</ul>';
+ textModal += '</ul>';
}
if (data.errors.count > 0) {
- text = `<br/>${data.errors.count} ${this.translate.instant('lang.widthErrors')} : <ul>`;
+ textModal += `<br/>${data.errors.count} ${this.translate.instant('lang.withErrors')} : <ul>`;
data.errors.details.forEach(element => {
- text += `<li> ${this.translate.instant('element.lang')} (${this.translate.instant('lang.line')} : ${element.index + 1})</li>`;
+ textModal += `<li> ${this.translate.instant('element.lang')} (${this.translate.instant('lang.line')} : ${element.index + 1})</li>`;
});
- text += '</ul>';
+ textModal += '</ul>';
}
- dialogRef = this.dialog.open(AlertComponent, { panelClass: 'maarch-modal', autoFocus: false, disableClose: true, data: { title: 'Importer', msg: '<b>' + data.success + '</b> / <b>' + this.countAll + '</b> utilisateurs importés.' + text } });
-
- // FOR TEST
- // dialogRef = this.dialog.open(ConfirmComponent, { panelClass: 'maarch-modal', autoFocus: false, disableClose: true, data: { title: 'Importer', msg: 'success!' } });
+ dialogRef = this.dialog.open(AlertComponent, { panelClass: 'maarch-modal', autoFocus: false, disableClose: true, data: { title: this.translate.instant('lang.import'), msg: '<b>' + data.success + '</b> / <b>' + this.countAll + '</b> ' + this.translate.instant('lang.importedUsers') + '.' + textModal } });
}),
exhaustMap(() => dialogRef.afterClosed()),
tap(() => {
@@ -201,4 +209,10 @@ export class UsersImportComponent implements OnInit {
})
).subscribe();
}
+
+ setConfiguration() {
+ if (this.localStorage.get(`importUsersFields_${this.headerService.user.id}`) !== null) {
+ this.currentDelimiter = this.localStorage.get(`importUsersFields_${this.headerService.user.id}`);
+ }
+ }
}
diff --git a/src/lang/lang-en.json b/src/lang/lang-en.json
index a73a4586c30..3fca548e7a1 100644
--- a/src/lang/lang-en.json
+++ b/src/lang/lang-en.json
@@ -1881,5 +1881,9 @@
"csvColumn": "Csv file column",
"withWarnings": "with warnings",
"withErrors": "with errors",
- "line": "line"
+ "line": "line",
+ "importedUsers": "imported users",
+ "import": "Import",
+ "confirmImportUsers": "Do you want to import <b>{{0}}</b> users",
+ "mustAtLeastMinValues": "The data must have at least <b>6</b> values"
}
\ No newline at end of file
diff --git a/src/lang/lang-fr.json b/src/lang/lang-fr.json
index 928a6a735c0..0f22198726e 100644
--- a/src/lang/lang-fr.json
+++ b/src/lang/lang-fr.json
@@ -1876,5 +1876,9 @@
"csvColumn": "Colonne fichier csv",
"withWarnings": "avec avertissements",
"withErrors": "avec erreurs",
- "line": "ligne"
+ "line": "ligne",
+ "importedUsers": "utilisateurs importés",
+ "import": "Importer",
+ "confirmImportUsers": "Voulez-vous importer <b>{{0}}</b> utilisateurs",
+ "mustAtLeastMinValues": "Les données doivent avoir au mimimum <b>6</b> valeurs"
}
\ No newline at end of file
diff --git a/src/lang/lang-nl.json b/src/lang/lang-nl.json
index ffcfb157908..54f985c3fe0 100644
--- a/src/lang/lang-nl.json
+++ b/src/lang/lang-nl.json
@@ -1893,5 +1893,9 @@
"csvColumn": "Colonne fichier csv__TO_TRANSLATE",
"withWarnings": "avec avertissements__TO_TRANSLATE",
"withErrors": "avec erreurs__TO_TRANSLATE",
- "line": "ligne__TO_TRANSLATE"
+ "line": "ligne__TO_TRANSLATE",
+ "importedUsers": "utilisateurs importés__TO_TRANSLATE",
+ "import": "Importer__TO_TRANSLATE",
+ "confirmImportUsers": "Voulez-vous importer <b>{{0}}</b> utilisateurs__TO_TRANSLATE",
+ "mustAtLeastMinValues": "Les données doivent avoir au mimimum <b>6</b> valeurs__TO_TRANSLATE"
}
\ No newline at end of file
--
GitLab