Skip to content
Snippets Groups Projects
Commit c096d105 authored by Guillaume Heurtier's avatar Guillaume Heurtier
Browse files

FEAT #13267 TIME 4:30 fix drag and drop admin basket list display

parent b5a692b8
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/frontend/app/administration/basket/list/list-administration.component.html
+ 24
− 22
View file @ c096d105
......@@ -52,7 +52,7 @@
{{selectedTemplateDisplayedSecondaryData}} <i class="fas fa-columns"></i>
</button>
<mat-menu #menu="matMenu">
<button mat-menu-item *ngFor="let colNum of templateDisplayedSecondaryData" (click)="selectedTemplateDisplayedSecondaryData=colNum">{{colNum}} colonne(s)</button>
<button mat-menu-item *ngFor="let colNum of templateDisplayedSecondaryData" (click)="selectedTemplateDisplayedSecondaryData=colNum;reorderDisplayedData()">{{colNum}} {{'lang.columns' | translate}}</button>
</mat-menu>
</span>
<span class="area">
......@@ -83,16 +83,16 @@
</span>
</mat-toolbar>
<mat-card>
<ng-container *ngIf="(displayedSecondaryData.length > 0 && displayMode=='sample') || displayMode=='label'">
<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>
......@@ -136,7 +136,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(' ')">
<span *ngIf="i == 0">
......@@ -170,21 +170,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">
......@@ -196,4 +198,4 @@
{{'lang.cancel' | translate}}
</button>
</div>
</div>
\ No newline at end of file
</div>
src/frontend/app/administration/basket/list/list-administration.component.scss
+ 3
− 3
View file @ c096d105
......@@ -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;
}
......
src/frontend/app/administration/basket/list/list-administration.component.ts
+ 62
− 17
View file @ c096d105
......@@ -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 } from 'rxjs/internal/Observable';
import { of } from 'rxjs/internal/observable/of';
......@@ -188,7 +188,7 @@ export class ListAdministrationComponent 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;
......@@ -273,12 +273,26 @@ export class ListAdministrationComponent implements OnInit {
let indexData: number = 0;
this.selectedTemplateDisplayedSecondaryData = this.basketGroup.list_display.templateColumns;
this.selectedTemplateDisplayedSecondaryDataClone = this.selectedTemplateDisplayedSecondaryData;
const tmpData = [];
this.basketGroup.list_display.subInfos.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.basketGroup.list_event;
this.selectedListEventClone = this.selectedListEvent;
......@@ -311,7 +325,6 @@ export class ListAdministrationComponent implements OnInit {
return data.customFields;
}),
tap((customs) => {
console.log(customs);
this.availableData = this.availableData.concat(customs);
resolve(true);
......@@ -357,15 +370,18 @@ export class ListAdministrationComponent 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(data: any, i: number) {
removeData(data: any, i: number, indexDisplayedData) {
this.availableData.push(data);
this.displayedSecondaryData.splice(i, 1);
this.displayedSecondaryData[indexDisplayedData].splice(i, 1);
this.dataControl.setValue('');
}
......@@ -378,23 +394,34 @@ export class ListAdministrationComponent 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);
}
});
}
}
saveTemplate() {
let objToSend = {};
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,
}
);
});
});
objToSend = {
const objToSend = {
templateColumns: this.selectedTemplateDisplayedSecondaryData,
subInfos: template
};
......@@ -472,4 +499,22 @@ export class ListAdministrationComponent 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));
}
}
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