Merged in task/dspace-cris-2023_02_x/DSC-2002 (pull request DSpace#2518)

Task/dspace cris 2023 02 x/DSC-2002

Approved-by: Francesco Molinaro

Author: Simone-Ramundi

src/app/shared/form/chips/chips.component.html

@@ -4,16 +4,20 @@
 </ng-template>
 
 <div [className]="'float-left w-100 ' + wrapperClass">
-  <div  *ngIf="isPlatformBrowser" role="list" class="nav nav-pills d-flex flex-column flex-sm-row" cdkDropList cdkDropListOrientation="horizontal" (cdkDropListDropped)="onDrop($event)">
+  <div  *ngIf="isPlatformBrowser" role="list" class="nav nav-pills d-flex flex-column flex-sm-row" cdkDropListGroup>
     <ng-container *ngFor="let c of chips.getChips(); let i = index">
       <ng-template #tipContent>
         <p class="text-left p-0 m-0" *ngFor="let tip of (tipText$ | async)">
           {{tip}}
         </p>
       </ng-template>
-      <div role="listitem" class="nav-item mr-2 mb-1"
+      <div role="listitem" class="nav-item mr-2 mb-1 d-flex flex-row"
            #t="ngbTooltip"
            triggers="manual"
+           cdkDropList
+           [cdkDropListData]="{ index: i }"
+           cdkDropListOrientation="horizontal"
+           (cdkDropListDropped)="onDrop($event)"
            [ngbTooltip]="tipContent"
            (mouseover)="showTooltip(t, i)"
            (mouseout)="t.close()">

src/app/shared/form/chips/chips.component.scss

@@ -1,7 +1,7 @@
 .cdk-drag-placeholder {
-  filter: grayscale(100%);
-  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
-}
+    filter: grayscale(100%);
+    margin: 0 0.25rem;
+  }
 
 .cdk-drag-preview {
   color: white;

src/app/shared/form/chips/chips.component.spec.ts

@@ -101,9 +101,9 @@ describe('ChipsComponent test suite', () => {
 
     it('should update chips item order when drag and drop end', fakeAsync(() => {
       spyOn(chipsComp.chips, 'updateOrder');
-      const de = chipsFixture.debugElement.query(By.css('div[role="list"]'));
+      const de = chipsFixture.debugElement.query(By.css('div[role="listitem"]'));
 
-      de.triggerEventHandler('cdkDropListDropped', { previousIndex: 0, currentIndex: 1 });
+      de.triggerEventHandler('cdkDropListDropped', { previousIndex: 0, currentIndex: 1, previousContainer: { data: { index: 0 }}, container: { data: { index: 1 }} });
 
       expect(chipsComp.dragged).toBe(-1);
       expect(chipsComp.chips.updateOrder).toHaveBeenCalled();

src/app/shared/form/chips/chips.component.ts

@@ -83,8 +83,18 @@ export class ChipsComponent implements OnChanges {
     this.dragged = index;
   }
 
-  onDrop(event: CdkDragDrop<ChipsItem[]>) {
-    moveItemInArray(this.chips.chipsItems.getValue(), event.previousIndex, event.currentIndex);
+  onDrop(event: CdkDragDrop<{ index: number }>) {
+    const previousContainerIndex = event.previousContainer.data.index;
+    const currentContainerIndex = event.container.data.index;
+
+    const currentPositionInCurrentContainer = event.currentIndex;
+
+    // if we move forward we need to adjust the new position
+    const directionAdjuster = currentContainerIndex > previousContainerIndex ? -1 : 0;
+
+    moveItemInArray(this.chips.chipsItems.getValue(),
+      previousContainerIndex,
+      currentContainerIndex + currentPositionInCurrentContainer + directionAdjuster);
     this.dragged = -1;
     this.chips.updateOrder();
     this.isDragging.next(false);