From c9aa2948049518019e1b3133a3a5cfb8492d9ccc Mon Sep 17 00:00:00 2001
From: Alex ORLUC <alex.orluc@maarch.org>
Date: Thu, 26 Sep 2019 18:08:25 +0200
Subject: [PATCH] FIX #11781 TIME 0:20 add dnd order indexing actions
---
.../indexing-administration.component.html | 27 +++++++++++-----
.../indexing-administration.component.scss | 32 ++++++++++++++++++-
.../indexing-administration.component.ts | 21 ++++++++++--
3 files changed, 69 insertions(+), 11 deletions(-)
diff --git a/src/frontend/app/administration/group/indexing/indexing-administration.component.html b/src/frontend/app/administration/group/indexing/indexing-administration.component.html
index 798a8188149..524c85682c5 100644
--- a/src/frontend/app/administration/group/indexing/indexing-administration.component.html
+++ b/src/frontend/app/administration/group/indexing/indexing-administration.component.html
@@ -3,10 +3,12 @@
</div>
<div class="row" style="margin:0px;">
<div class="col-md-12">
- <div *ngIf="!indexingInfo.canIndex" class="alert-message alert-message-danger" role="alert" style="margin-top: 30px;">{{lang.warnIndex}}
+ <div *ngIf="!indexingInfo.canIndex" class="alert-message alert-message-danger" role="alert"
+ style="margin-top: 30px;">{{lang.warnIndex}}
<button mat-raised-button (click)="toggleIndex(!indexingInfo.canIndex)">{{lang.enableIndex}}</button>
</div>
- <button *ngIf="indexingInfo.canIndex" color="warn" mat-raised-button (click)="toggleIndex(!indexingInfo.canIndex)">{{lang.disableIndex}}</button>
+ <button *ngIf="indexingInfo.canIndex" color="warn" mat-raised-button
+ (click)="toggleIndex(!indexingInfo.canIndex)">{{lang.disableIndex}}</button>
</div>
<div class="col-md-8" style="margin-top:20px;">
<div class="formType">
@@ -16,11 +18,19 @@
<mat-hint class="infoActions">
{{lang.actionsInfo}}
</mat-hint>
- <plugin-autocomplete [labelPlaceholder]="'Associer une nouvelle action'" [labelList]="'Action(s) disponible(s)'"
- [datas]="actionList" [targetSearchKey]="'label_action'" (triggerEvent)="addAction($event)"></plugin-autocomplete>
- <mat-list class="selectedActionList" role="list">
- <mat-list-item class="selectedAction" role="listitem" *ngFor="let action of indexingInfo.actions;let i=index">
- <div class="actionLabel">{{action.label_action}}</div>
+ <plugin-autocomplete [labelPlaceholder]="'Associer une nouvelle action'"
+ [labelList]="'Action(s) disponible(s)'" [datas]="actionList" [targetSearchKey]="'label_action'"
+ (triggerEvent)="addAction($event)"></plugin-autocomplete>
+ <mat-list cdkDropList [cdkDropListData]="indexingInfo.actions" (cdkDropListDropped)="drop($event)"
+ class="selectedActionList" role="list">
+ <mat-list-item class="selectedAction" role="listitem"
+ *ngFor="let action of indexingInfo.actions;let i=index" [cdkDragData]="action" cdkDrag
+ cdkDragLockAxis="y">
+ <div>
+ <i class="fas fa-bars fa-2x" color="primary" style="cursor: move" cdkDragHandle></i>
+ </div>
+ <div class="actionLabel">
+ {{action.label_action}}</div>
<div>
<button mat-icon-button color="warn" (click)="removeAction(i)">
<mat-icon class="fa fa-trash"></mat-icon>
@@ -38,7 +48,8 @@
</div>
<mat-form-field appearance="outline">
<mat-icon color="primary" class="fa fa-search" matPrefix></mat-icon>
- <input matInput id="jstree_search" name="jstree_search" type="text" placeholder="{{lang.searchEntities}}">
+ <input matInput id="jstree_search" name="jstree_search" type="text"
+ placeholder="{{lang.searchEntities}}">
</mat-form-field>
<div #jstree id="jstree"></div>
</div>
diff --git a/src/frontend/app/administration/group/indexing/indexing-administration.component.scss b/src/frontend/app/administration/group/indexing/indexing-administration.component.scss
index 271348c973e..626eeaa940b 100644
--- a/src/frontend/app/administration/group/indexing/indexing-administration.component.scss
+++ b/src/frontend/app/administration/group/indexing/indexing-administration.component.scss
@@ -19,6 +19,7 @@
height: 70px;
.actionLabel {
+ padding-left: 10px;
flex: 1;
}
}
@@ -62,4 +63,33 @@ a {
.mat-form-field-appearance-outline {
font-size: 11px;
}
-}
\ No newline at end of file
+}
+
+.cdk-drag-preview {
+ background: white;
+ i, .mat-icon-button {
+ visibility: hidden;
+ }
+
+ border-radius: 4px;
+ box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
+ 0 8px 10px 1px rgba(0, 0, 0, 0.14),
+ 0 3px 14px 2px rgba(0, 0, 0, 0.12);
+ }
+
+ .cdk-drag-placeholder {
+ opacity: 0;
+ }
+
+ .cdk-drag-animating {
+ transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+ }
+
+ .selectedAction:last-child {
+ border: none;
+ }
+
+ .selectedAction.cdk-drop-list-dragging .selectedAction:not(.cdk-drag-placeholder) {
+ transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+ }
+
\ No newline at end of file
diff --git a/src/frontend/app/administration/group/indexing/indexing-administration.component.ts b/src/frontend/app/administration/group/indexing/indexing-administration.component.ts
index 998d0e7e95c..ef7efca2ca1 100644
--- a/src/frontend/app/administration/group/indexing/indexing-administration.component.ts
+++ b/src/frontend/app/administration/group/indexing/indexing-administration.component.ts
@@ -8,6 +8,7 @@ import { of } from 'rxjs';
import { MatDialogRef, MatDialog } from '@angular/material/dialog';
import { ConfirmComponent } from '../../../../plugins/modal/confirm.component';
import { HeaderService } from '../../../../service/header.service';
+import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
declare function $j(selector: any): any;
@@ -120,7 +121,7 @@ export class IndexingAdministrationComponent implements OnInit {
"three_state": false //no cascade selection
},
'core': {
- force_text : true,
+ force_text: true,
'themes': {
'name': 'proton',
'responsive': true
@@ -335,5 +336,21 @@ export class IndexingAdministrationComponent implements OnInit {
})
).subscribe();
}
-
+ drop(event: CdkDragDrop<string[]>) {
+
+ if (event.previousContainer === event.container) {
+ moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
+ const newActionListIds = this.indexingInfo.actions.map((action: any) => action.id);
+
+ this.http.put('../../rest/groups/' + this.groupId + '/indexing', { actions: newActionListIds }).pipe(
+ tap(() => {
+ this.notify.success(this.lang.actionAdded);
+ }),
+ catchError((err: any) => {
+ this.notify.handleErrors(err);
+ return of(false);
+ })
+ ).subscribe();
+ }
+ }
}
--
GitLab