diff --git a/src/frontend/app/administration/list/list-administration.component.html b/src/frontend/app/administration/list/list-administration.component.html
index af9187048c9f49d126f1a6eb1a009a40e7cbcca1..5b803e9f8d0a7a44f731e1ff9aed0d41e54f52d5 100644
--- a/src/frontend/app/administration/list/list-administration.component.html
+++ b/src/frontend/app/administration/list/list-administration.component.html
@@ -7,42 +7,66 @@
<div class="col-md-6">
<mat-form-field appearance="outline">
<mat-label>Délimiteur</mat-label>
- <input matInput placeholder="Délimiteur" value=";">
+ <mat-select placeholder="Délimiteur" [(ngModel)]="exportModel.delimiter">
+ <mat-option *ngFor="let delimiter of delimiters" [value]="delimiter">
+ {{delimiter}}
+ </mat-option>
+ </mat-select>
</mat-form-field>
</div>
<div class="col-md-6">
-
- </div>
- </div>
- <div class="row">
- <div class="col-md-12">
<mat-form-field appearance="outline">
- <input matInput placeholder="Rechercher une donnée" #listFilter>
+ <mat-label>Encodage</mat-label>
+ <mat-select placeholder="Encodage" [(ngModel)]="exportModel.encoding">
+ <mat-option *ngFor="let encoding of encodings" [value]="encoding">
+ {{encoding}}
+ </mat-option>
+ </mat-select>
</mat-form-field>
</div>
</div>
- <div class="row exportList">
- <div class="col-md-6 available-data">
- <h2>Donnée(s) disponible(s)</h2>
- <div cdkDropList #dataAvailableList="cdkDropList" [cdkDropListData]="dataAvailable"
- [cdkDropListConnectedTo]="[dataExportList]" class="cdk-list" (cdkDropListDropped)="drop($event)">
- <div class="columns" *ngFor="let item of dataAvailable | filterList:listFilter.value:'label'" cdkDrag id="{{item.id}}" >{{item.label}}</div>
- <div *ngIf="dataAvailable.length == 0" class="noData">Aucune donnée disponible</div>
+ <mat-accordion>
+ <mat-expansion-panel (opened)="panelOpenState = true" (closed)="panelOpenState = false">
+ <mat-expansion-panel-header>
+ <mat-panel-title>
+ Donnée(s) d'exportation
+ </mat-panel-title>
+ </mat-expansion-panel-header>
+
+ <div class="row">
+ <div class="col-md-12">
+ <mat-form-field appearance="outline" class="listFilter">
+ <input matInput placeholder="Rechercher une donnée" #listFilter cdkFocusInitial>
+ </mat-form-field>
+ </div>
</div>
- </div>
- <div style="display: flex;align-items: center;">
- <i class="fas fa-arrow-right"></i>
- </div>
+ <div class="row exportList">
+ <div class="col-md-6 available-data">
+ <h2><span class="title">Donnée(s) disponible(s)</span> <i class="fa fa-plus-circle removeAllDatas" color="primary" title="Ajouter toutes les données disponibles" (click)="addAllData()"></i></h2>
+ <div cdkDropList #dataAvailableList="cdkDropList" [cdkDropListData]="dataAvailable"
+ [cdkDropListConnectedTo]="[dataExportList]" class="cdk-list" (cdkDropListDropped)="drop($event)">
+ <div class="columns" *ngFor="let item of dataAvailable | filterList:listFilter.value:'label';let i=index"
+ cdkDrag id="{{item.id}}">{{item.label}} <i class="fa fa-plus" color="primary" style="cursor:pointer;"
+ (click)="addData(item, i)"></i></div>
+ <div *ngIf="dataAvailable.length == 0" class="noData">Aucune donnée disponible</div>
+ </div>
+ </div>
+ <div style="display: flex;align-items: center;">
+ <i class="fas fa-arrow-right"></i>
+ </div>
- <div class="col-md-6 active-data">
- <h2>Donnée(s) exportée(s)</h2>
- <div cdkDropList #dataExportList="cdkDropList" [cdkDropListData]="dataExport" [cdkDropListConnectedTo]="[dataAvailableList]"
- class="cdk-list" (cdkDropListDropped)="drop($event)">
- <div class="columns" *ngFor="let item of dataExport" cdkDrag>{{item.label}}</div>
- <div *ngIf="dataExport.length == 0" class="noData">Aucune donnée sélectionnée</div>
+ <div class="col-md-6 active-data">
+ <h2><span class="title">Donnée(s) exportée(s)</span> <i class="fa fa-eraser removeAllDatas" color="warn" title="Enlever toutes les données sélectionnées" (click)="removeAllData()"></i></h2>
+ <div cdkDropList #dataExportList="cdkDropList" [cdkDropListData]="dataExport"
+ [cdkDropListConnectedTo]="[dataAvailableList]" class="cdk-list" (cdkDropListDropped)="drop($event)">
+ <div class="columns" *ngFor="let item of dataExport;let i=index" cdkDrag>{{item.label}} <i
+ class="fa fa-minus" color="warn" style="cursor:pointer;" (click)="removeData(i)"></i></div>
+ <div *ngIf="dataExport.length == 0" class="noData">Aucune donnée sélectionnée</div>
+ </div>
+ </div>
</div>
- </div>
- </div>
+ </mat-expansion-panel>
+ </mat-accordion>
</div>
<div mat-dialog-actions class="actions">
diff --git a/src/frontend/app/administration/list/list-administration.component.scss b/src/frontend/app/administration/list/list-administration.component.scss
index a1a31b1d7b8f724e1fe070d8562ed5fdeb4f5c23..7e465cb2ba91a3d86c95b5827ed8323028ec65d5 100644
--- a/src/frontend/app/administration/list/list-administration.component.scss
+++ b/src/frontend/app/administration/list/list-administration.component.scss
@@ -3,19 +3,43 @@
}
.mat-dialog-content {
- min-height: 65vh;
+ // min-height: 65vh;
+ padding-bottom: 10px;
overflow-x: hidden;
}
+::ng-deep.mat-expansion-panel-body {
+ padding-bottom: 50px;
+}
+
+.mat-expansion-panel-header {
+ opacity: 0.5;
+}
+
.noData {
text-align: center;
opacity: 0.5;
}
+.removeAllDatas {
+ float: right;
+ font-size: 14px;
+ opacity: 1;
+ cursor: pointer;
+ margin-right: 10px;
+}
+
+.listFilter {
+ font-size: 10px;
+ margin-bottom: -20px;
+}
+
.exportList {
display: flex;
- h2 {
+ .title {
+ float: left;
+ height: 20px;
font-size: 10px;
font-weight: bold;
opacity: 0.5;
@@ -27,7 +51,7 @@
}
.cdk-list {
- width: 200px;
+ width: 100%;
max-width: 100%;
border: solid 1px #ccc;
min-height: 60px;
@@ -38,7 +62,7 @@
}
.columns {
- width: 200px;
+ width: 100%;
height: 50px;
padding: 20px 10px;
border-bottom: solid 1px #ccc;
diff --git a/src/frontend/app/administration/list/list-administration.component.ts b/src/frontend/app/administration/list/list-administration.component.ts
index e54bbec86151096dd9a902e5e7a2f2309108eee7..8750aeb080332db04687aeccc03fbea7e3f3c020 100644
--- a/src/frontend/app/administration/list/list-administration.component.ts
+++ b/src/frontend/app/administration/list/list-administration.component.ts
@@ -17,53 +17,62 @@ export class ListAdministrationComponent implements OnInit {
loading: boolean = false;
loadingExport: boolean = false;
- @ViewChild('listFilter') private listFilter : any;
+ @ViewChild('listFilter') private listFilter: any;
+
+ delimiters = [';', ',',':','_TAB_'];
+ encodings = ['UTF-8', 'ANSI'];
+
+ exportModel: any = {
+ delimiter : ';',
+ encoding : 'UTF-8',
+ datas : []
+ };
dataAvailable = [
{
- label : 'Numéro GED',
- id : 'res_id'
- },{
- label : 'Numéro Chrono',
- id : 'alt_identifier'
- },{
- label : 'Categorie',
- id : 'category'
- },{
- label : 'Date d\'arrivée',
- id : 'doc_date'
- },{
- label : 'Date limite de traitement',
- id : 'process_limit_date'
- },{
- label : 'Prénom de l\'expéditeur',
- id : 'contact_firstname'
- },{
- label : 'Nom de l\'expéditeur',
- id : 'contact_lastname'
+ label: 'Numéro GED',
+ id: 'res_id'
+ }, {
+ label: 'Numéro Chrono',
+ id: 'alt_identifier'
+ }, {
+ label: 'Categorie',
+ id: 'category'
+ }, {
+ label: 'Date d\'arrivée',
+ id: 'doc_date'
+ }, {
+ label: 'Date limite de traitement',
+ id: 'process_limit_date'
+ }, {
+ label: 'Prénom de l\'expéditeur',
+ id: 'contact_firstname'
+ }, {
+ label: 'Nom de l\'expéditeur',
+ id: 'contact_lastname'
}
];
dataExport = [
{
- label : 'Société de l\'expéditeur',
- id : 'contact_society'
+ label: 'Société de l\'expéditeur',
+ id: 'contact_society'
},
{
- label : 'Service destinataire',
- id : 'destination'
+ label: 'Service destinataire',
+ id: 'destination'
},
{
- label : 'Destinataire',
- id : 'dest_user'
+ label: 'Destinataire',
+ id: 'dest_user'
},
{
- label : 'Objet',
- id : 'subject'
+ label: 'Objet',
+ id: 'subject'
},
{
- label : 'Type de courrier',
- id : 'type_id'
+ label: 'Type de courrier',
+ id: 'type_id'
}
];
@@ -101,4 +110,34 @@ export class ListAdministrationComponent implements OnInit {
this.notify.handleErrors(err);
});*/
}
+
+ addData(item: any, i: number) {
+ const fakeIndex = $j('.available-data .columns')[i].id;
+ const realIndex = this.dataAvailable.map((dataAv: any) => (dataAv.id)).indexOf(fakeIndex);
+
+ transferArrayItem(this.dataAvailable,
+ this.dataExport,
+ realIndex,
+ this.dataExport.length);
+
+ this.listFilter.nativeElement.value = '';
+ }
+
+ removeData(i: number) {
+ transferArrayItem(this.dataExport,
+ this.dataAvailable,
+ i,
+ this.dataAvailable.length);
+ }
+
+ removeAllData() {
+ this.dataAvailable = this.dataAvailable.concat(this.dataExport);
+ this.dataExport = [];
+ }
+
+ addAllData() {
+ this.dataExport = this.dataExport.concat(this.dataAvailable);
+ this.dataAvailable = [];
+ this.listFilter.nativeElement.value = '';
+ }
}
\ No newline at end of file
diff --git a/src/frontend/app/list/filters/filters-tool.component.ts b/src/frontend/app/list/filters/filters-tool.component.ts
index 18d6179003362e3c8359830f89651eec5df2d63b..7890bf13ade77b0de0f1a15484fc84f330ed5dde 100644
--- a/src/frontend/app/list/filters/filters-tool.component.ts
+++ b/src/frontend/app/list/filters/filters-tool.component.ts
@@ -272,9 +272,8 @@ export class FiltersToolComponent implements OnInit {
}
openListAdmin(): void {
- console.log('toto');
const dialogRef = this.dialog.open(ListAdministrationComponent, {
- /*width: '250px',*/
+ width: '800px',
data: {}
});