Skip to content
Snippets Groups Projects
Commit 1177798c authored by Florian Azizian's avatar Florian Azizian
Browse files

FEAT #13271 TIME 0:30 search request sent twice + improve drag n drog admin search

parent 3027b1aa
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
+ 23
− 26
View file @ 1177798c
...@@ -47,8 +47,7 @@ ...@@ -47,8 +47,7 @@
</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">{{colNum}} (click)="selectedTemplateDisplayedSecondaryData=colNum;reorderDisplayedData()">{{colNum}} {{'lang.columns' | translate}}</button>
colonne(s)</button>
</mat-menu> </mat-menu>
</span> </span>
<span class="area"> <span class="area">
...@@ -81,19 +80,17 @@ ...@@ -81,19 +80,17 @@
</span> </span>
</mat-toolbar> </mat-toolbar>
<mat-card> <mat-card>
<ng-container *ngIf="displayedSecondaryData.length > 0"> <div *ngIf="(displayedSecondaryData.length > 0 && displayMode=='sample') || displayMode=='label'" cdkDropListGroup style="border: solid 1px #F9983066;border-radius: 4px;">
<mat-toolbar <mat-toolbar *ngFor="let displayedData of displayedSecondaryData;let indexDisplayedData=index" class="secondaryInformations example-list column-{{selectedTemplateDisplayedSecondaryData}}-list" cdkDropListOrientation="horizontal" cdkDropList
class="secondaryInformations example-list column-{{selectedTemplateDisplayedSecondaryData}}-list" [cdkDropListData]="displayedData" (cdkDropListDropped)="drop($event)">
cdkDropListOrientation="horizontal" cdkDropList <ng-container *ngFor="let item of displayedData;let itData=index">
[cdkDropListData]="displayedSecondaryData" (cdkDropListDropped)="drop($event)">
<ng-container *ngFor="let item of displayedSecondaryData;let itData=index">
<span class="example-box" *ngIf="item.value != 'getFolders'" cdkDrag> <span class="example-box" *ngIf="item.value != 'getFolders'" cdkDrag>
<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)"> <button mat-menu-item (click)="removeData(item,itData,indexDisplayedData)">
<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>
...@@ -147,7 +144,7 @@ ...@@ -147,7 +144,7 @@
</span> </span>
</ng-container> </ng-container>
</mat-toolbar> </mat-toolbar>
</ng-container> </div>
<div class="resultRow newRow"> <div class="resultRow newRow">
<span class="resultCol" *ngFor="let item of displayedMainData;let i=index" <span class="resultCol" *ngFor="let item of displayedMainData;let i=index"
[class]="item.cssClasses.join(' ')"> [class]="item.cssClasses.join(' ')">
...@@ -184,23 +181,23 @@ ...@@ -184,23 +181,23 @@
</button> </button>
</mat-button-toggle-group> </mat-button-toggle-group>
</div> </div>
<div *ngFor="let item of displayedSecondaryData;let itData=index" class="folder-info"> <div *ngFor="let displayedData of displayedSecondaryData;let indexDisplayedData=index">
<ng-container *ngIf="item.value=='getFolders'"> <div *ngFor="let item of displayedData;let itData=index" class="folder-info">
<button *ngIf="displayMode=='label'" color="primary" mat-icon-button <ng-container *ngIf="item.value=='getFolders'">
[matMenuTriggerFor]="menu"> <button *ngIf="displayMode=='label'" color="primary" mat-icon-button [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,itData)">
<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> <mat-menu #menu="matMenu">
<span class="badge badge-folder"><i class="fa fa-folder"></i> <button mat-menu-item (click)="removeData(item,itData, indexDisplayedData)">
{{item[displayMode]}}</span> <mat-icon class="secondaryInformations_icon" color="warn" fontSet="fas" fontIcon="fa-trash fa-2x">
</ng-container> </mat-icon>
<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.scss
+ 3
− 3
View file @ 1177798c
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
} }
.secondaryInformations { .secondaryInformations {
border: solid 1px #F9983066; // border: solid 1px #F9983066;
font-size: 10px; font-size: 10px;
height: 30px; height: 30px;
color: #666; color: #666;
...@@ -91,9 +91,9 @@ ...@@ -91,9 +91,9 @@
gap: 10px; gap: 10px;
height: auto; height: auto;
max-width: 100%; max-width: 100%;
border-radius: 4px; // border-radius: 4px;
// overflow: hidden; // overflow: hidden;
border: solid 1px #F9983066; // border: solid 1px #F9983066;
font-size: 10px; font-size: 10px;
background: #f5f5f5; background: #f5f5f5;
} }
......
src/frontend/app/administration/search/search-administration.component.ts
+ 62
− 13
View file @ 1177798c
...@@ -3,7 +3,7 @@ import { HttpClient } from '@angular/common/http'; ...@@ -3,7 +3,7 @@ import { HttpClient } from '@angular/common/http';
import { TranslateService } from '@ngx-translate/core'; import { TranslateService } from '@ngx-translate/core';
import { NotificationService } from '@service/notification/notification.service'; import { NotificationService } from '@service/notification/notification.service';
import { FormControl } from '@angular/forms'; import { FormControl } from '@angular/forms';
import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop'; import { CdkDragDrop, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';
import { startWith, map, tap, catchError } from 'rxjs/operators'; import { startWith, map, tap, catchError } from 'rxjs/operators';
import { Observable, of } from 'rxjs'; import { Observable, of } from 'rxjs';
import { AppService } from '@service/app.service'; import { AppService } from '@service/app.service';
...@@ -172,7 +172,7 @@ export class SearchAdministrationComponent implements OnInit { ...@@ -172,7 +172,7 @@ export class SearchAdministrationComponent implements OnInit {
} }
]; ];
templateDisplayedSecondaryData: number[] = [1, 2, 3, 4, 5, 6, 7]; templateDisplayedSecondaryData: number[] = [2, 3, 4, 5, 6, 7];
selectedTemplateDisplayedSecondaryData: number = 7; selectedTemplateDisplayedSecondaryData: number = 7;
selectedTemplateDisplayedSecondaryDataClone: number = 7; selectedTemplateDisplayedSecondaryDataClone: number = 7;
...@@ -256,13 +256,26 @@ export class SearchAdministrationComponent implements OnInit { ...@@ -256,13 +256,26 @@ export class SearchAdministrationComponent implements OnInit {
this.availableDataClone = JSON.parse(JSON.stringify(this.availableData)); this.availableDataClone = JSON.parse(JSON.stringify(this.availableData));
let indexData: number; let indexData: number;
this.selectedTemplateDisplayedSecondaryDataClone = this.selectedTemplateDisplayedSecondaryData; this.selectedTemplateDisplayedSecondaryDataClone = this.selectedTemplateDisplayedSecondaryData;
const tmpData = [];
this.displayedSecondaryData.forEach((element: any) => { this.displayedSecondaryData.forEach((element: any) => {
indexData = this.availableData.map((e: any) => e.value).indexOf(element.value); indexData = this.availableData.map((e: any) => e.value).indexOf(element.value);
// à revoir !! // à revoir !!
// this.availableData[indexData].cssClasses = element.cssClasses; // this.availableData[indexData].cssClasses = element.cssClasses;
// this.displayedSecondaryData.push(this.availableData[indexData]); // this.displayedSecondaryData.push(this.availableData[indexData]);
tmpData.push(this.availableData[indexData]);
this.availableData.splice(indexData, 1); 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));
...@@ -330,15 +343,18 @@ export class SearchAdministrationComponent implements OnInit { ...@@ -330,15 +343,18 @@ export class SearchAdministrationComponent implements OnInit {
addData(event: any) { addData(event: 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(event.option.value.value);
this.displayedSecondaryData.push(event.option.value); if (this.displayedSecondaryData[this.displayedSecondaryData.length - 1].length >= this.selectedTemplateDisplayedSecondaryData) {
this.displayedSecondaryData.push([]);
}
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) { removeData(rmData: any, i: number, indexDisplayedData) {
this.availableData.push(rmData); this.availableData.push(rmData);
this.displayedSecondaryData.splice(i, 1); this.displayedSecondaryData[indexDisplayedData].splice(i, 1);
this.dataControl.setValue(''); this.dataControl.setValue('');
} }
...@@ -351,7 +367,18 @@ export class SearchAdministrationComponent implements OnInit { ...@@ -351,7 +367,18 @@ export class SearchAdministrationComponent implements OnInit {
drop(event: CdkDragDrop<string[]>) { drop(event: CdkDragDrop<string[]>) {
if (event.previousContainer === event.container) { if (event.previousContainer === event.container) {
moveItemInArray(event.container.data, event.previousIndex, event.currentIndex); moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
} else {
transferArrayItem(event.previousContainer.data, event.container.data, event.previousIndex, event.currentIndex - 1);
this.displayedSecondaryData.forEach((subArray: any, index) => {
if (subArray.length > this.selectedTemplateDisplayedSecondaryData) {
transferArrayItem(subArray, this.displayedSecondaryData[index + 1], subArray.length, 0);
} else if (subArray.length < this.selectedTemplateDisplayedSecondaryData) {
transferArrayItem(this.displayedSecondaryData[index + 1], subArray, 0, subArray.length);
}
});
} }
} }
getTemplate() { getTemplate() {
...@@ -386,15 +413,18 @@ export class SearchAdministrationComponent implements OnInit { ...@@ -386,15 +413,18 @@ export class SearchAdministrationComponent implements OnInit {
saveTemplate() { saveTemplate() {
const template: any = []; const template: any = [];
this.displayedSecondaryData.forEach((element: any) => { this.displayedSecondaryData.forEach((subArray: any) => {
template.push( subArray.forEach((element: any) => {
{ template.push(
'value': element.value, {
'cssClasses': element.cssClasses, 'value': element.value,
'icon': element.icon, 'cssClasses': element.cssClasses,
} 'icon': element.icon,
); }
);
});
}); });
const objToSend = { const objToSend = {
templateColumns: this.selectedTemplateDisplayedSecondaryData, templateColumns: this.selectedTemplateDisplayedSecondaryData,
subInfos: template subInfos: template
...@@ -475,4 +505,23 @@ export class SearchAdministrationComponent implements OnInit { ...@@ -475,4 +505,23 @@ 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));
}
} }
src/frontend/app/adv-search/result-list/search-result-list.component.ts
+ 5
− 4
View file @ 1177798c
...@@ -247,16 +247,17 @@ export class SearchResultListComponent implements OnInit, OnDestroy { ...@@ -247,16 +247,17 @@ export class SearchResultListComponent implements OnInit, OnDestroy {
this.paginator.pageIndex = this.listProperties.page; this.paginator.pageIndex = this.listProperties.page;
this.paginator.pageSize = this.listProperties.pageSize; this.paginator.pageSize = this.listProperties.pageSize;
this.sort.sortChange.subscribe(() => this.paginator.pageIndex = 0); this.sort.sortChange.subscribe(() => this.paginator.pageIndex = 0);
// When list is refresh (sort, page, filters) // When list is refresh (sort, page, filters)
merge(this.sort.sortChange, this.paginator.page, this.filtersChange) merge(this.sort.sortChange, this.paginator.page, this.filtersChange)
.pipe( .pipe(
takeUntil(this.destroy$), takeUntil(this.destroy$),
startWith({}), startWith({}),
switchMap(() => { switchMap(() => {
this.isLoadingResults = true; if (!this.isLoadingResults) {
return this.resultListDatabase!.getRepoIssues( this.isLoadingResults = true;
this.sort.active, this.sort.direction, this.paginator.pageIndex, this.searchUrl, this.listProperties, this.paginator.pageSize, this.criteria); return this.resultListDatabase!.getRepoIssues(
this.sort.active, this.sort.direction, this.paginator.pageIndex, this.searchUrl, this.listProperties, this.paginator.pageSize, this.criteria);
}
}), }),
map((data: any) => { map((data: any) => {
// Flip flag to show that loading has finished. // Flip flag to show that loading has finished.
......
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