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

FEAT #13271 TIME 3 fix subinfo move + display

parent e909cad7
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/frontend/app/administration/search/search-administration.component.html
+ 34
− 27
View file @ 656e305e
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
</div> </div>
<div class="container" [class.fullContainer]="appService.getViewMode()"> <div class="container" [class.fullContainer]="appService.getViewMode()">
<div class="container-content"> <div class="container-content">
<mat-card class="card-app-content"> <mat-card class="card-app-content" *ngIf="!loading">
<mat-form-field appearance="outline"> <mat-form-field appearance="outline">
<mat-label>{{'lang.tabProcessPosition' | translate}}</mat-label> <mat-label>{{'lang.tabProcessPosition' | translate}}</mat-label>
<mat-select [(ngModel)]="selectedProcessTool.defaultTab"> <mat-select [(ngModel)]="selectedProcessTool.defaultTab">
...@@ -47,7 +47,8 @@ ...@@ -47,7 +47,8 @@
</button> </button>
<mat-menu #menu="matMenu"> <mat-menu #menu="matMenu">
<button mat-menu-item *ngFor="let colNum of templateDisplayedSecondaryData" <button mat-menu-item *ngFor="let colNum of templateDisplayedSecondaryData"
(click)="selectedTemplateDisplayedSecondaryData=colNum;reorderDisplayedData()">{{colNum}} {{'lang.columns' | translate}}</button> (click)="selectedTemplateDisplayedSecondaryData=colNum;">{{colNum}}
{{'lang.columns' | translate}}</button>
</mat-menu> </mat-menu>
</span> </span>
<span class="area"> <span class="area">
...@@ -56,9 +57,10 @@ ...@@ -56,9 +57,10 @@
<input id="availableData" name="availableData" type="text" matInput <input id="availableData" name="availableData" type="text" matInput
[formControl]="dataControl" placeholder="{{'lang.availableDatas' | translate}}" [formControl]="dataControl" placeholder="{{'lang.availableDatas' | translate}}"
[matAutocomplete]="auto"> [matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete" (optionSelected)="addData($event)"> <mat-autocomplete #auto="matAutocomplete"
<mat-option *ngFor="let item of filteredDataOptions | async" [value]="item" (optionSelected)="addData($event.option.value)">
class="dataList"> <mat-option *ngFor="let item of filteredDataOptions | async"
[value]="item.value" class="dataList">
<span class="optionContent"> <span class="optionContent">
<span class="dataIcon"> <span class="dataIcon">
<i color="primary" class="fa {{item.icon}} fa-2x"></i> <i color="primary" class="fa {{item.icon}} fa-2x"></i>
...@@ -80,17 +82,20 @@ ...@@ -80,17 +82,20 @@
</span> </span>
</mat-toolbar> </mat-toolbar>
<mat-card> <mat-card>
<div *ngIf="displayedSecondaryData.length > 0" cdkDropListGroup style="border: solid 1px #F9983066;border-radius: 4px;"> <div *ngIf="displayedSecondaryData.length > 0" dnd-sortable-container
<mat-toolbar *ngFor="let displayedData of displayedSecondaryData;let indexDisplayedData=index" class="secondaryInformations example-list column-{{selectedTemplateDisplayedSecondaryData}}-list" cdkDropListOrientation="horizontal" cdkDropList [dropZones]="['boxers-zone']" [sortableData]="displayedSecondaryData"
[cdkDropListData]="displayedData" (cdkDropListDropped)="drop($event)"> style="border: solid 1px #F9983066;border-radius: 4px;">
<ng-container *ngFor="let item of displayedData;let itData=index"> <mat-toolbar
<span class="example-box" *ngIf="item.value != 'getFolders'" cdkDrag> class="secondaryInformations example-list column-{{selectedTemplateDisplayedSecondaryData}}-list">
<ng-container *ngFor="let item of displayedSecondaryData;let i=index">
<span class="example-box" *ngIf="item.value != 'getFolders'" dnd-sortable
[sortableIndex]="i">
<button *ngIf="displayMode=='label'" color="primary" mat-icon-button <button *ngIf="displayMode=='label'" color="primary" mat-icon-button
[matMenuTriggerFor]="menu"> [matMenuTriggerFor]="menu">
<mat-icon fontSet="fas" fontIcon="fa-ellipsis-v fa-2x"></mat-icon> <mat-icon fontSet="fas" fontIcon="fa-ellipsis-v fa-2x"></mat-icon>
</button> </button>
<mat-menu #menu="matMenu"> <mat-menu #menu="matMenu">
<button mat-menu-item (click)="removeData(item,itData,indexDisplayedData)"> <button mat-menu-item (click)="removeData(item,i)">
<mat-icon class="secondaryInformations_icon" color="warn" fontSet="fas" <mat-icon class="secondaryInformations_icon" color="warn" fontSet="fas"
fontIcon="fa-trash fa-2x"></mat-icon> fontIcon="fa-trash fa-2x"></mat-icon>
<span>{{'lang.delete' | translate}}</span> <span>{{'lang.delete' | translate}}</span>
...@@ -143,6 +148,8 @@ ...@@ -143,6 +148,8 @@
</span> </span>
</span> </span>
</ng-container> </ng-container>
</mat-toolbar> </mat-toolbar>
</div> </div>
<div class="resultRow newRow"> <div class="resultRow newRow">
...@@ -181,23 +188,23 @@ ...@@ -181,23 +188,23 @@
</button> </button>
</mat-button-toggle-group> </mat-button-toggle-group>
</div> </div>
<div *ngFor="let displayedData of displayedSecondaryData;let indexDisplayedData=index"> <div *ngFor="let item of displayedSecondaryData;let i=index" class="folder-info">
<div *ngFor="let item of displayedData;let itData=index" class="folder-info"> <ng-container *ngIf="item.value=='getFolders'">
<ng-container *ngIf="item.value=='getFolders'"> <button *ngIf="displayMode=='label'" color="primary" mat-icon-button
<button *ngIf="displayMode=='label'" color="primary" mat-icon-button [matMenuTriggerFor]="menu"> [matMenuTriggerFor]="menu">
<mat-icon fontSet="fas" fontIcon="fa-ellipsis-v fa-2x"></mat-icon> <mat-icon fontSet="fas" fontIcon="fa-ellipsis-v fa-2x"></mat-icon>
</button>
<mat-menu #menu="matMenu">
<button mat-menu-item (click)="removeData(item,i)">
<mat-icon class="secondaryInformations_icon" color="warn" fontSet="fas"
fontIcon="fa-trash fa-2x">
</mat-icon>
<span>{{'lang.delete' | translate}}</span>
</button> </button>
<mat-menu #menu="matMenu"> </mat-menu>
<button mat-menu-item (click)="removeData(item,itData, indexDisplayedData)"> <span class="badge badge-folder"><i class="fa fa-folder"></i>
<mat-icon class="secondaryInformations_icon" color="warn" fontSet="fas" fontIcon="fa-trash fa-2x"> {{item[displayMode]}}</span>
</mat-icon> </ng-container>
<span>{{'lang.delete' | translate}}</span>
</button>
</mat-menu>
<span class="badge badge-folder"><i class="fa fa-folder"></i>
{{item[displayMode]}}</span>
</ng-container>
</div>
</div> </div>
</mat-card> </mat-card>
<div class="row"> <div class="row">
......
src/frontend/app/administration/search/search-administration.component.ts
+ 34
− 97
View file @ 656e305e
...@@ -20,7 +20,7 @@ declare var $: any; ...@@ -20,7 +20,7 @@ declare var $: any;
export class SearchAdministrationComponent implements OnInit { export class SearchAdministrationComponent implements OnInit {
loading: boolean = false; loading: boolean = true;
customFieldsFormControl = new FormControl({ value: '', disabled: false }); customFieldsFormControl = new FormControl({ value: '', disabled: false });
...@@ -147,13 +147,13 @@ export class SearchAdministrationComponent implements OnInit { ...@@ -147,13 +147,13 @@ export class SearchAdministrationComponent implements OnInit {
'icon': 'fa-barcode' 'icon': 'fa-barcode'
} }
]; ];
availableDataClone: any = []; availableDataClone: any[] = [];
displayedSecondaryData: any = []; displayedSecondaryData: any[] = [];
displayedSecondaryDataClone: any = []; displayedSecondaryDataClone: any[] = [];
displayMode: string = 'label'; displayMode: string = 'label';
dataControl = new FormControl(); dataControl = new FormControl();
filteredDataOptions: Observable<string[]>; filteredDataOptions: Observable<any[]>;
listEvent: any[] = [ listEvent: any[] = [
{ {
id: 'detailDoc', id: 'detailDoc',
...@@ -248,38 +248,22 @@ export class SearchAdministrationComponent implements OnInit { ...@@ -248,38 +248,22 @@ export class SearchAdministrationComponent implements OnInit {
this.headerService.setHeader(this.translate.instant('lang.searchAdministration')); this.headerService.setHeader(this.translate.instant('lang.searchAdministration'));
await this.initCustomFields(); await this.initCustomFields();
await this.getTemplate(); await this.getTemplate();
this.filteredDataOptions = this.dataControl.valueChanges
.pipe(
startWith(''),
map(value => this._filterData(value))
);
this.availableDataClone = JSON.parse(JSON.stringify(this.availableData)); this.availableDataClone = JSON.parse(JSON.stringify(this.availableData));
let indexData: number;
this.selectedTemplateDisplayedSecondaryDataClone = this.selectedTemplateDisplayedSecondaryData; this.selectedTemplateDisplayedSecondaryDataClone = this.selectedTemplateDisplayedSecondaryData;
const tmpData = [];
this.displayedSecondaryData.forEach((element: any) => {
indexData = this.availableData.map((e: any) => e.value).indexOf(element.value);
this.availableData[indexData].cssClasses = element.cssClasses;
this.displayedSecondaryData.push(this.availableData[indexData]);
tmpData.push(this.availableData[indexData]);
this.availableData.splice(indexData, 1);
});
let previousIndex = 0;
this.displayedSecondaryData = [];
tmpData.forEach((object: any, index: any) => {
if (index % this.selectedTemplateDisplayedSecondaryData === 0 && index !== 0) {
const tmp = tmpData.slice(previousIndex, index);
this.displayedSecondaryData.push(tmp);
previousIndex = index;
}
});
this.displayedSecondaryData.push(tmpData.slice(previousIndex));
this.selectedListEvent = this.searchAdv.listEvent; this.selectedListEvent = this.searchAdv.listEvent;
this.selectedListEventClone = this.selectedListEvent; this.selectedListEventClone = this.selectedListEvent;
this.selectedProcessToolClone = JSON.parse(JSON.stringify(this.selectedProcessTool)); this.selectedProcessToolClone = JSON.parse(JSON.stringify(this.selectedProcessTool));
this.displayedSecondaryDataClone = JSON.parse(JSON.stringify(this.displayedSecondaryData)); this.displayedSecondaryDataClone = JSON.parse(JSON.stringify(this.displayedSecondaryData));
setTimeout(() => {
this.filteredDataOptions = this.dataControl.valueChanges
.pipe(
startWith(''),
map(value => this._filterData(value))
);
}, 0);
this.loading = false;
} }
initCustomFields() { initCustomFields() {
...@@ -341,27 +325,26 @@ export class SearchAdministrationComponent implements OnInit { ...@@ -341,27 +325,26 @@ export class SearchAdministrationComponent implements OnInit {
} }
} }
addData(event: any) { addData(id: any) {
const i = this.availableData.map((e: any) => e.value).indexOf(event.option.value.value); const i = this.availableData.map((e: any) => e.value).indexOf(id);
if ((this.displayedSecondaryData.length === 0) || (this.displayedSecondaryData[this.displayedSecondaryData.length - 1].length >= this.selectedTemplateDisplayedSecondaryData)) {
this.displayedSecondaryData.push([]); this.displayedSecondaryData.push(this.availableData.filter((item: any) => item.value === id)[0]);
}
this.displayedSecondaryData[this.displayedSecondaryData.length - 1].push(event.option.value);
this.availableData.splice(i, 1); this.availableData.splice(i, 1);
$('#availableData').blur(); $('#availableData').blur();
this.dataControl.setValue(''); this.dataControl.setValue('');
} }
removeData(rmData: any, i: number, indexDisplayedData) { removeData(rmData: any, i: number) {
this.availableData.push(rmData); this.availableData.push(rmData);
this.displayedSecondaryData[indexDisplayedData].splice(i, 1); this.displayedSecondaryData.splice(i, 1);
this.dataControl.setValue(''); this.dataControl.setValue('');
} }
removeAllData() { removeAllData() {
this.displayedSecondaryData.forEach(element => { this.displayedSecondaryData = this.displayedSecondaryData.concat();
this.availableData = this.availableData.concat(element); this.availableData = this.availableData.concat(this.displayedSecondaryData);
});
this.dataControl.setValue(''); this.dataControl.setValue('');
this.displayedSecondaryData = []; this.displayedSecondaryData = [];
} }
...@@ -384,24 +367,17 @@ export class SearchAdministrationComponent implements OnInit { ...@@ -384,24 +367,17 @@ export class SearchAdministrationComponent implements OnInit {
} }
getTemplate() { getTemplate() {
this.displayedSecondaryData = [];
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
this.http.get('../rest/search/configuration').pipe( this.http.get('../rest/search/configuration').pipe(
tap((templateData: any) => { tap((templateData: any) => {
const defaultTab = templateData.configuration.listEvent.defaultTab;
const subInfos = templateData.configuration.listDisplay.subInfos;
const displayData = JSON.parse(JSON.stringify(subInfos));
this.selectedTemplateDisplayedSecondaryData = templateData.configuration.listDisplay.templateColumns; this.selectedTemplateDisplayedSecondaryData = templateData.configuration.listDisplay.templateColumns;
this.selectedProcessTool.defaultTab = defaultTab; this.selectedProcessTool.defaultTab = templateData.configuration.listEvent.defaultTab;
displayData.forEach((element: { value: any; cssClasses: any; icon: any; }) => {
const sampleValue = this.availableData.filter((t: { value: any; }) => t.value === element.value)[0].sample; templateData.configuration.listDisplay.subInfos.forEach((element: any) => {
const label = this.availableData.filter((t: { value: any; }) => t.value === element.value)[0].label; this.addData(element.value);
this.displayedSecondaryData.push({ this.displayedSecondaryData[this.displayedSecondaryData.length - 1].cssClasses = element.cssClasses;
'value': element.value,
'label': label,
'sample': sampleValue,
'cssClasses': element.cssClasses,
'icon': element.icon
});
}); });
resolve(true); resolve(true);
}), }),
...@@ -414,30 +390,17 @@ export class SearchAdministrationComponent implements OnInit { ...@@ -414,30 +390,17 @@ export class SearchAdministrationComponent implements OnInit {
} }
saveTemplate() { saveTemplate() {
const template: any = [];
this.displayedSecondaryData.forEach((subArray: any) => {
subArray.forEach((element: any) => {
template.push(
{
'value': element.value,
'cssClasses': element.cssClasses,
'icon': element.icon,
}
);
});
});
const objToSend = { const objToSend = {
templateColumns: this.selectedTemplateDisplayedSecondaryData, templateColumns: this.selectedTemplateDisplayedSecondaryData,
subInfos: template subInfos: this.displayedSecondaryData
}; };
this.selectedListEvent = JSON.parse(JSON.stringify({ this.selectedListEvent = JSON.parse(JSON.stringify({
'defaultTab' : this.selectedProcessTool.defaultTab 'defaultTab': this.selectedProcessTool.defaultTab
})); }));
this.http.put('../rest/configurations/admin_search ', { 'listDisplay': objToSend, 'listEvent': this.selectedListEvent, 'list_event_data': this.selectedProcessTool }) this.http.put('../rest/configurations/admin_search ', { 'listDisplay': objToSend, 'listEvent': this.selectedListEvent, 'list_event_data': this.selectedProcessTool })
.subscribe(() => { .subscribe(() => {
this.displayedSecondaryDataClone = JSON.parse(JSON.stringify(this.displayedSecondaryData)); this.displayedSecondaryDataClone = JSON.parse(JSON.stringify(this.displayedSecondaryData));
this.searchAdv.listDisplay = template; this.searchAdv.listDisplay = this.displayedSecondaryData;
this.searchAdv.listEvent = this.selectedListEvent; this.searchAdv.listEvent = this.selectedListEvent;
this.selectedListEventClone = this.selectedListEvent; this.selectedListEventClone = this.selectedListEvent;
this.searchAdv.list_event_data = this.selectedProcessTool; this.searchAdv.list_event_data = this.selectedProcessTool;
...@@ -474,17 +437,10 @@ export class SearchAdministrationComponent implements OnInit { ...@@ -474,17 +437,10 @@ export class SearchAdministrationComponent implements OnInit {
this.selectedProcessTool = JSON.parse(JSON.stringify(this.selectedProcessToolClone)); this.selectedProcessTool = JSON.parse(JSON.stringify(this.selectedProcessToolClone));
this.availableData = JSON.parse(JSON.stringify(this.availableDataClone)); this.availableData = JSON.parse(JSON.stringify(this.availableDataClone));
this.selectedTemplateDisplayedSecondaryData = JSON.parse(JSON.stringify(this.selectedTemplateDisplayedSecondaryDataClone)); this.selectedTemplateDisplayedSecondaryData = JSON.parse(JSON.stringify(this.selectedTemplateDisplayedSecondaryDataClone));
let indexData: number = 0;
this.displayedSecondaryData.forEach((element: any) => {
indexData = this.availableData.map((e: any) => e.value).indexOf(element.value);
this.availableData.splice(indexData, 1);
});
this.dataControl.setValue(''); this.dataControl.setValue('');
} }
hasFolder() { hasFolder() {
// tslint:disable-next-line: no-shadowed-variable
if (this.displayedSecondaryData.map((data: any) => data.value).indexOf('getFolders') > -1) { if (this.displayedSecondaryData.map((data: any) => data.value).indexOf('getFolders') > -1) {
return true; return true;
} else { } else {
...@@ -507,23 +463,4 @@ export class SearchAdministrationComponent implements OnInit { ...@@ -507,23 +463,4 @@ export class SearchAdministrationComponent implements OnInit {
this.selectedProcessTool.canUpdateModel = state; this.selectedProcessTool.canUpdateModel = state;
} }
} }
reorderDisplayedData() {
let mergedArray = [];
this.displayedSecondaryData.forEach((subArray: any) => {
mergedArray = mergedArray.concat(subArray);
});
let previousIndex = 0;
this.displayedSecondaryData = [];
mergedArray.forEach((object: any, index: any) => {
if (index % this.selectedTemplateDisplayedSecondaryData === 0 && index !== 0) {
const tmp = mergedArray.slice(previousIndex, index);
this.displayedSecondaryData.push(tmp);
previousIndex = index;
}
});
this.displayedSecondaryData.push(mergedArray.slice(previousIndex));
}
} }
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