Skip to content
Snippets Groups Projects
Commit 2f7c5533 authored by Alex ORLUC's avatar Alex ORLUC
Browse files

FEAT #14457 TIME 4 front users import

parent f5b7bbba
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/frontend/app/administration/user/import/users-import.component.html
+ 48
− 24
View file @ 2f7c5533
<div class="mat-dialog-content-container">
<h1 mat-dialog-title>Importer des utilisateurs</h1>
<div mat-dialog-content>
<input type="file" name="files[]" id="uploadFile" (change)="uploadCsv($event)" accept=".csv">
<mat-table #table [dataSource]="dataSource" matSort matSortDirection="asc">
<ng-container *ngFor="let column of userColmuns;let i=index;">
<ng-container [matColumnDef]="column">
<mat-header-cell *matHeaderCellDef mat-sort-header>
<i class="fas fa-database" color="primary"></i>&nbsp;<b color="primary">{{column}}</b>
&nbsp;<i class="fas fa-arrows-alt-h"></i>&nbsp;
<i class="fas fa-file-csv"></i>&nbsp;<mat-form-field (click)="$event.stopPropagation()" style="width: 80px !important;">
<mat-select [(ngModel)]="associatedColmuns[column]" (selectionChange)="changeColumn(column, $event.value)">
<mat-option *ngFor="let col of csvColumns" [value]="col">
{{col}}
</mat-option>
</mat-select>
</mat-form-field>
</mat-header-cell>
<mat-cell *matCellDef="let element">
{{element[column]}}
</mat-cell>
<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><i class="fa fa-user"></i>&nbsp;Utilisateurs du fichier : <b color="primary">{{countAll}}</b>
({{countAll < 10 ? countAll : '10' }} prévisualisées)</span>
<span class="example-spacer"></span>
<span style="flex:1;"><i class="fa fa-user-plus"></i>&nbsp;Ajouts : <b color="primary">{{countAdd}}</b></span>
<span style="flex:1;"><i class="fa fa-user-edit"></i>&nbsp;Modifications : <b color="primary">{{countUp}}</b></span>
</mat-toolbar>
<ng-container *ngIf="loading; else elseTemplate">
<div class="loader">
<mat-spinner></mat-spinner>
</div>
</ng-container>
<ng-template #elseTemplate>
<div *ngIf="csvData.length === 0" appUploadFileDragDrop (click)="uploadFile.click()"
(onFileDropped)="dndUploadFile($event)"
class="dndFile">
Cliquez ici ou clissez-déposez un fichier csv
</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]="'colonne base de données'"></i>&nbsp;<b
color="primary" [title]="'colonne base de données'">{{column}}</b>
&nbsp;<i class="fas fa-arrows-alt-h"></i>&nbsp;
<i class="fas fa-file-csv" [title]="'colonne fichier csv'"></i>&nbsp;<mat-form-field
[title]="'colonne fichier csv'" (click)="$event.stopPropagation()"
style="width: 80px !important;">
<mat-select [(ngModel)]="associatedColmuns[column]"
(selectionChange)="changeColumn(column, $event.value)">
<mat-option *ngFor="let col of csvColumns" [value]="col">
{{col}}
</mat-option>
</mat-select>
</mat-form-field>
</mat-header-cell>
<mat-cell *matCellDef="let element">
{{element[column]}}
</mat-cell>
</ng-container>
</ng-container>
</ng-container>
<mat-header-row *matHeaderRowDef="userColmuns"></mat-header-row>
<mat-row *matRowDef="let row; columns: userColmuns;"></mat-row>
</mat-table>
<mat-header-row *matHeaderRowDef="userColmuns"></mat-header-row>
<mat-row *matRowDef="let row; columns: userColmuns;"></mat-row>
</mat-table>
</ng-template>
</div>
<span class="divider-modal"></span>
<div mat-dialog-actions class="actions">
<button mat-raised-button mat-button color="primary">Valider</button>
<button mat-raised-button mat-button [mat-dialog-close]="">{{'lang.cancel' | translate }}</button>
<button mat-raised-button mat-button *ngIf="csvData.length > 0" color="primary" [disabled]="loading" (click)="onSubmit()">Valider</button>
<button mat-raised-button mat-button [disabled]="loading" [mat-dialog-close]="">{{'lang.cancel' | translate }}</button>
</div>
</div>
\ No newline at end of file
src/frontend/app/administration/user/import/users-import.component.scss
+ 30
− 0
View file @ 2f7c5533
@import '../../../../css/vars.scss';
.loader {
display: flex;
height: 100%;
align-items: center;
justify-content: center;
}
.hide {
display: none;
}
.import-tool {
font-size: 14px;
}
.example-spacer {
flex: 1 1 auto;
}
.dndFile {
height: 100%;
display: flex;
align-items: center;
margin: 0px;
justify-content: center;
font-size: 30px;
opacity: 0.5 !important;
cursor: pointer;
}
\ No newline at end of file
src/frontend/app/administration/user/import/users-import.component.ts
+ 115
− 42
View file @ 2f7c5533
import { Component, OnInit, Inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { NotificationService } from '../../../../service/notification/notification.service';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { MAT_DIALOG_DATA, MatDialogRef, MatDialog } from '@angular/material/dialog';
import { TranslateService } from '@ngx-translate/core';
import { MatTableDataSource } from '@angular/material/table';
import { FunctionsService } from '../../../../service/functions.service';
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';
@Component({
templateUrl: 'users-import.component.html',
......@@ -11,13 +16,14 @@ import { MatTableDataSource } from '@angular/material/table';
})
export class UsersImportComponent implements OnInit {
loading: boolean = false;
userColmuns: string[] = [
'id',
'userId',
'user_id',
'firstname',
'lastname',
'mail',
'phone',
'email'
];
csvColumns: string[] = [
......@@ -28,11 +34,16 @@ export class UsersImportComponent implements OnInit {
dataSource = new MatTableDataSource(null);
csvData: any[] = [];
userData: any[] = [];
countAll: number = 0;
countAdd: number = 0;
countUp: number = 0;
constructor(
private translate: TranslateService,
public http: HttpClient,
private notify: NotificationService,
private functionsService: FunctionsService,
public dialog: MatDialog,
public dialogRef: MatDialogRef<UsersImportComponent>,
@Inject(MAT_DIALOG_DATA) public data: any,
) {
......@@ -43,17 +54,16 @@ export class UsersImportComponent implements OnInit {
changeColumn(coldb: string, colCsv: string) {
console.log(coldb);
console.log(colCsv);
this.userData = [];
for (let index = 0; index < 10; index++) {
const data = this.csvData[index];
this.userData.push({
'id': coldb === 'id' ? data[this.csvColumns.filter(col => col === colCsv)[0]] : data[this.associatedColmuns['id']],
'userId': coldb === 'userId' ? data[this.csvColumns.filter(col => col === colCsv)[0]] : data[this.associatedColmuns['userId']],
'user_id': coldb === 'user_id' ? data[this.csvColumns.filter(col => col === colCsv)[0]] : data[this.associatedColmuns['user_id']],
'firstname': coldb === 'firstname' ? data[this.csvColumns.filter(col => col === colCsv)[0]] : data[this.associatedColmuns['firstname']],
'lastname': coldb === 'lastname' ? data[this.csvColumns.filter(col => col === colCsv)[0]] : data[this.associatedColmuns['lastname']],
'phone': coldb === 'phone' ? data[this.csvColumns.filter(col => col === colCsv)[0]] : data[this.associatedColmuns['phone']],
'email': coldb === 'email' ? data[this.csvColumns.filter(col => col === colCsv)[0]] : data[this.associatedColmuns['email']]
'mail': coldb === 'mail' ? data[this.csvColumns.filter(col => col === colCsv)[0]] : data[this.associatedColmuns['mail']],
'phone': coldb === 'phone' ? data[this.csvColumns.filter(col => col === colCsv)[0]] : data[this.associatedColmuns['phone']]
});
}
......@@ -61,7 +71,9 @@ export class UsersImportComponent implements OnInit {
}
uploadCsv(fileInput: any) {
if (fileInput.target.files && fileInput.target.files[0]) {
if (fileInput.target.files && fileInput.target.files[0] && fileInput.target.files[0].type === 'text/csv') {
this.loading = true;
let rawCsv = [];
const reader = new FileReader();
......@@ -70,46 +82,107 @@ export class UsersImportComponent implements OnInit {
reader.onload = (value: any) => {
console.log(value.target.result.split('\n'));
rawCsv = value.target.result.split('\n');
this.csvColumns = rawCsv[0].split(';').map(s => s.replace(/"/gi, '').trim());
let dataCol = [];
let objData = {};
for (let index = 1; index < rawCsv.length; index++) {
objData = {};
dataCol = rawCsv[index].split(';').map(s => s.replace(/"/gi, '').trim());
dataCol.forEach((element: any, index2: number) => {
objData[this.csvColumns[index2]] = element;
});
this.csvData.push(objData);
if (rawCsv[0].split(';').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 = {};
this.countAll = rawCsv.length - 1;
for (let index = 1; index < rawCsv.length; index++) {
objData = {};
dataCol = rawCsv[index].split(';').map(s => s.replace(/"/gi, '').trim());
dataCol.forEach((element: any, index2: number) => {
objData[this.csvColumns[index2]] = element;
});
this.csvData.push(objData);
}
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;
} 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.initData();
this.loading = false;
};
} else {
this.dialog.open(AlertComponent, { panelClass: 'maarch-modal', autoFocus: false, disableClose: true, data: { title: this.translate.instant('lang.notAllowedExtension') + ' !', msg: this.translate.instant('lang.file') + ' : <b>' + fileInput.target.files[0].name + '</b>, ' + this.translate.instant('lang.type') + ' : <b>' + fileInput.target.files[0].type + '</b><br/><br/><u>' + this.translate.instant('lang.allowedExtensions') + '</u> : <br/>' + 'text/csv' } });
}
}
initData() {
if (this.csvColumns.length >= this.userColmuns.length) {
for (let index = 0; index < 10; index++) {
const data = this.csvData[index];
this.associatedColmuns['id'] = this.csvColumns[0];
this.associatedColmuns['userId'] = this.csvColumns[1];
this.associatedColmuns['firstname'] = this.csvColumns[2];
this.associatedColmuns['lastname'] = this.csvColumns[3];
this.associatedColmuns['phone'] = this.csvColumns[4];
this.associatedColmuns['email'] = this.csvColumns[5];
this.userData.push({
'id': data[this.csvColumns[0]],
'userId': data[this.csvColumns[1]],
'firstname': data[this.csvColumns[2]],
'lastname': data[this.csvColumns[3]],
'phone': data[this.csvColumns[4]],
'email': data[this.csvColumns[5]]
});
}
this.dataSource = new MatTableDataSource(this.userData);
} else {
alert('Pas assez de données');
this.userData = [];
for (let index = 0; index < 10; index++) {
const data = this.csvData[index];
this.associatedColmuns['id'] = this.csvColumns[0];
this.associatedColmuns['user_id'] = this.csvColumns[1];
this.associatedColmuns['firstname'] = this.csvColumns[2];
this.associatedColmuns['lastname'] = this.csvColumns[3];
this.associatedColmuns['mail'] = this.csvColumns[4];
this.associatedColmuns['phone'] = this.csvColumns[5];
this.userData.push({
'id': data[this.csvColumns[0]],
'user_id': data[this.csvColumns[1]],
'firstname': data[this.csvColumns[2]],
'lastname': data[this.csvColumns[3]],
'mail': data[this.csvColumns[4]],
'phone': data[this.csvColumns[5]]
});
}
this.dataSource = new MatTableDataSource(this.userData);
}
dndUploadFile(event: any) {
const fileInput = {
target: {
files: [
event[0]
]
}
};
this.uploadCsv(fileInput);
}
onSubmit() {
console.log('test');
const 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)' } });
dialogRef.afterClosed().pipe(
filter((data: string) => data === 'ok'),
tap(() => {
this.loading = true;
const dataToSend: any[] = [];
this.csvData.forEach(element => {
this.associatedColmuns['id'] = this.csvColumns[0];
this.associatedColmuns['user_id'] = this.csvColumns[1];
this.associatedColmuns['firstname'] = this.csvColumns[2];
this.associatedColmuns['lastname'] = this.csvColumns[3];
this.associatedColmuns['mail'] = this.csvColumns[4];
this.associatedColmuns['phone'] = this.csvColumns[5];
dataToSend.push({
'id': element[this.csvColumns[0]],
'user_id': element[this.csvColumns[1]],
'firstname': element[this.csvColumns[2]],
'lastname': element[this.csvColumns[3]],
'mail': element[this.csvColumns[4]],
'phone': element[this.csvColumns[5]]
});
});
console.log(dataToSend);
}),
/*exhaustMap(() => this.http.delete(`../rest/listTemplates/${this.currentEntity.listTemplate.id}`)),
tap(() => {
}),*/
catchError((err: any) => {
this.loading = false;
this.notify.handleSoftErrors(err);
return of(false);
})
).subscribe();
}
}
src/frontend/app/viewer/upload-file-dnd.directive.ts
+ 8
− 8
View file @ 2f7c5533
......@@ -11,7 +11,7 @@ export class DragDropDirective {
@HostBinding('style.background-color') private background = 'none';
@HostBinding('style.opacity') private opacity = '1';
//Dragover listener
// Dragover listener
@HostListener('dragover', ['$event']) onDragOver(evt: any) {
if (!this.disabled) {
evt.preventDefault();
......@@ -19,33 +19,33 @@ export class DragDropDirective {
this.background = '#9ecbec';
this.opacity = '0.8';
}
}
//Dragleave listener
// Dragleave listener
@HostListener('dragleave', ['$event']) public onDragLeave(evt: any) {
if (!this.disabled) {
evt.preventDefault();
evt.stopPropagation();
this.background = 'none';
this.background = 'rgba(255,255,255,0)';
this.opacity = '1';
}
}
//Drop listener
// Drop listener
@HostListener('drop', ['$event']) public ondrop(evt: any) {
if (!this.disabled) {
evt.preventDefault();
evt.stopPropagation();
this.background = 'none';
this.background = 'rgba(255,255,255,0)';
this.opacity = '1';
let files = evt.dataTransfer.files;
if (files.length > 0) {
this.onFileDropped.emit(files)
}
}
}
}
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment