hazza/dspace-angular
1
0
Fork 1
mirror of https://github.com/DSpace/dspace-angular.git synced 2025-10-07 10:04:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #3654 from 4Science/task/dspace-8_x/DURACOM-302_2

Browse Source 
#3624 - Fix Multi-Row Drag-and-Drop Issue for Chips in Item Submission Form
This commit is contained in:
Tim Donohue
2024-12-19 16:24:43 -06:00
committed by GitHub
parent 76a02b296f 23d8730d5b
commit 6bcac36c14
4 changed files with 23 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/app/shared/form/chips/chips.component.html
View File

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

3
src/app/shared/form/chips/chips.component.scss
View File

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

4
src/app/shared/form/chips/chips.component.spec.ts
View File

@@ -143,9 +143,9 @@ describe('ChipsComponent test suite', () => {
it('should update chips item order when drag and drop end', fakeAsync(() => { it('should update chips item order when drag and drop end', fakeAsync(() => {
spyOn(chipsComp.chips, 'updateOrder'); 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.dragged).toBe(-1);
expect(chipsComp.chips.updateOrder).toHaveBeenCalled(); expect(chipsComp.chips.updateOrder).toHaveBeenCalled();

15
src/app/shared/form/chips/chips.component.ts
View File

@@ -2,6 +2,7 @@ import {
CdkDrag, CdkDrag,
CdkDragDrop, CdkDragDrop,
CdkDropList, CdkDropList,
CdkDropListGroup,
moveItemInArray, moveItemInArray,
} from '@angular/cdk/drag-drop'; } from '@angular/cdk/drag-drop';
import { import {
@@ -48,6 +49,7 @@ import { ChipsItem } from './models/chips-item.model';
TranslateModule, TranslateModule,
CdkDrag, CdkDrag,
CdkDropList, CdkDropList,
CdkDropListGroup,
], ],
standalone: true, standalone: true,
}) })
@@ -105,8 +107,17 @@ export class ChipsComponent implements OnChanges {
this.dragged = index; this.dragged = index;
} }
onDrop(event: CdkDragDrop<ChipsItem[]>) { onDrop(event: CdkDragDrop<{ index: number }>) {
moveItemInArray(this.chips.chipsItems.getValue(), event.previousIndex, event.currentIndex); const previousContainerIndex = event.previousContainer.data.index;
const currentContainerIndex = event.container.data.index;
const currentPositionInCurrentContainer = event.currentIndex;
const directionAdjuster = currentContainerIndex > previousContainerIndex ? -1 : 0;
moveItemInArray(this.chips.chipsItems.getValue(),
previousContainerIndex,
currentContainerIndex + currentPositionInCurrentContainer + directionAdjuster);
this.dragged = -1; this.dragged = -1;
this.chips.updateOrder(); this.chips.updateOrder();
this.isDragging.next(false); this.isDragging.next(false);