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

118219: Allow dragging of table rows

Browse Source
This commit is contained in:
Andreas Awouters
2024-09-11 10:09:03 +02:00
parent a230eee76d
commit be99cc5c23
3 changed files with 10 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/app/item-page/edit-item-page/item-bitstreams/item-bitstreams.component.scss
View File

@@ -1,7 +1,4 @@
.drag-handle { .drag-handle {
visibility: hidden;
&:hover { &:hover {
cursor: move; cursor: move;
} }
@@ -11,10 +8,6 @@
cursor: move; cursor: move;
} }
:host ::ng-deep .bitstream-row:hover .drag-handle, :host ::ng-deep .bitstream-row-drag-handle:focus .drag-handle {
visibility: visible !important;
}
.cdk-drag-preview { .cdk-drag-preview {
margin-left: 0; margin-left: 0;
box-sizing: border-box; box-sizing: border-box;

7
src/app/item-page/edit-item-page/item-bitstreams/item-edit-bitstream-bundle/item-edit-bitstream-bundle.component.html
View File

@@ -27,7 +27,7 @@
</tr> </tr>
</thead> </thead>
<tbody> <tbody cdkDropList (cdkDropListDropped)="drop($event)">
<tr class="bundle-row"> <tr class="bundle-row">
<th id="{{ bundleName }}" class="span" colspan="3" scope="colgroup"> <th id="{{ bundleName }}" class="span" colspan="3" scope="colgroup">
{{'item.edit.bitstreams.bundle.name' | translate:{ name: bundleName } }} {{'item.edit.bitstreams.bundle.name' | translate:{ name: bundleName } }}
@@ -65,10 +65,13 @@
</tr> </tr>
<ng-container *ngFor="let entry of (tableEntries$ | async)"> <ng-container *ngFor="let entry of (tableEntries$ | async)">
<tr *ngIf="updates[entry.id] as update" [ngClass]="getRowClass(update)" class="bitstream-row"> <tr *ngIf="updates[entry.id] as update" [ngClass]="getRowClass(update)" class="bitstream-row" cdkDrag>
<th class="bitstream-name row-element {{ columnSizes.columns[0].buildClasses() }}" <th class="bitstream-name row-element {{ columnSizes.columns[0].buildClasses() }}"
scope="row" id="{{ entry.nameStripped }}" headers="{{ bundleName }} name"> scope="row" id="{{ entry.nameStripped }}" headers="{{ bundleName }} name">
<div class="drag-handle text-muted float-left p-1 mr-2" tabindex="0" cdkDragHandle>
<i class="fas fa-grip-vertical fa-fw" [title]="'item.edit.bitstreams.edit.buttons.drag' | translate"></i>
</div>
{{ entry.name }} {{ entry.name }}
</th> </th>
<td class="row-element {{ columnSizes.columns[1].buildClasses() }}" <td class="row-element {{ columnSizes.columns[1].buildClasses() }}"

5
src/app/item-page/edit-item-page/item-bitstreams/item-edit-bitstream-bundle/item-edit-bitstream-bundle.component.ts
View File

@@ -28,6 +28,7 @@ import { PaginationService } from '../../../../core/pagination/pagination.servic
import { PaginationComponent } from '../../../../shared/pagination/pagination.component'; import { PaginationComponent } from '../../../../shared/pagination/pagination.component';
import { RequestService } from '../../../../core/data/request.service'; import { RequestService } from '../../../../core/data/request.service';
import { ItemBitstreamsService } from '../item-bitstreams.service'; import { ItemBitstreamsService } from '../item-bitstreams.service';
import { CdkDragDrop } from '@angular/cdk/drag-drop';
/** /**
* Interface storing all the information necessary to create a row in the bitstream edit table * Interface storing all the information necessary to create a row in the bitstream edit table
@@ -286,4 +287,8 @@ export class ItemEditBitstreamBundleComponent implements OnInit {
this.paginationComponent.doPageSizeChange(pageSize); this.paginationComponent.doPageSizeChange(pageSize);
} }
drop(event: CdkDragDrop<any>) {
console.log('dropEvent:', event);
}
} }