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