Fix: replace drag drop & clipboard dependencies with Angular CDK (#4362)

* Swap ngx-drag-drop dependency for Angular CDK

* Swap ngx-clipboard dependency for Angular CDK

src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.html

@@ -3,10 +3,6 @@
   [title]="savedView.name"
   [loading]="loading"
   [draggable]="savedView"
-  (dndStart)="dndStart.emit($event)"
-  (dndMoved)="dndMoved.emit($event)"
-  (dndCanceled)="dndCanceled.emit($event)"
-  (dndEnd)="dndEnd.emit($event)"
 >
 
   <a *ngIf="documents.length" class="btn-link text-decoration-none" header-buttons [routerLink]="[]" (click)="showAll()" i18n>Show all</a>

src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.spec.ts

@@ -28,7 +28,7 @@ import { WidgetFrameComponent } from '../widget-frame/widget-frame.component'
 import { SavedViewWidgetComponent } from './saved-view-widget.component'
 import { By } from '@angular/platform-browser'
 import { SafeUrlPipe } from 'src/app/pipes/safeurl.pipe'
-import { DndModule } from 'ngx-drag-drop'
+import { DragDropModule } from '@angular/cdk/drag-drop'
 
 const savedView: PaperlessSavedView = {
   id: 1,
@@ -91,7 +91,7 @@ describe('SavedViewWidgetComponent', () => {
         HttpClientTestingModule,
         NgbModule,
         RouterTestingModule.withRoutes(routes),
-        DndModule,
+        DragDropModule,
       ],
     }).compileComponents()
 

src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.ts

@@ -1,10 +1,8 @@
 import {
   Component,
-  EventEmitter,
   Input,
   OnDestroy,
   OnInit,
-  Output,
   QueryList,
   ViewChildren,
 } from '@angular/core'
@@ -53,18 +51,6 @@ export class SavedViewWidgetComponent
   @Input()
   savedView: PaperlessSavedView
 
-  @Output()
-  dndStart: EventEmitter<DragEvent> = new EventEmitter()
-
-  @Output()
-  dndMoved: EventEmitter<DragEvent> = new EventEmitter()
-
-  @Output()
-  dndCanceled: EventEmitter<DragEvent> = new EventEmitter()
-
-  @Output()
-  dndEnd: EventEmitter<DragEvent> = new EventEmitter()
-
   documents: PaperlessDocument[] = []
 
   unsubscribeNotifier: Subject<any> = new Subject()

src-ui/src/app/components/dashboard/widgets/statistics-widget/statistics-widget.component.spec.ts

@@ -12,12 +12,12 @@ import { RouterTestingModule } from '@angular/router/testing'
 import { routes } from 'src/app/app-routing.module'
 import { PermissionsGuard } from 'src/app/guards/permissions.guard'
 import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
-import { DndModule } from 'ngx-drag-drop'
 import {
   ConsumerStatusService,
   FileStatus,
 } from 'src/app/services/consumer-status.service'
 import { Subject } from 'rxjs'
+import { DragDropModule } from '@angular/cdk/drag-drop'
 
 describe('StatisticsWidgetComponent', () => {
   let component: StatisticsWidgetComponent
@@ -38,7 +38,7 @@ describe('StatisticsWidgetComponent', () => {
         HttpClientTestingModule,
         NgbModule,
         RouterTestingModule.withRoutes(routes),
-        DndModule,
+        DragDropModule,
       ],
     }).compileComponents()
 

src-ui/src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.spec.ts

@@ -25,7 +25,7 @@ import { PermissionsService } from 'src/app/services/permissions.service'
 import { UploadDocumentsService } from 'src/app/services/upload-documents.service'
 import { WidgetFrameComponent } from '../widget-frame/widget-frame.component'
 import { UploadFileWidgetComponent } from './upload-file-widget.component'
-import { DndModule } from 'ngx-drag-drop'
+import { DragDropModule } from '@angular/cdk/drag-drop'
 
 describe('UploadFileWidgetComponent', () => {
   let component: UploadFileWidgetComponent
@@ -54,7 +54,7 @@ describe('UploadFileWidgetComponent', () => {
         NgbModule,
         RouterTestingModule.withRoutes(routes),
         NgbAlertModule,
-        DndModule,
+        DragDropModule,
       ],
     }).compileComponents()
 

src-ui/src/app/components/dashboard/widgets/widget-frame/widget-frame.component.html

@@ -1,15 +1,8 @@
-<div class="card shadow-sm bg-light"
-  [dndDraggable]="draggable"
-  dndEffectAllowed="move"
-  [dndDisableIf]="!draggable"
-  (dndStart)="dndStart.emit($event)"
-  (dndMoved)="dndMoved.emit($event)"
-  (dndCanceled)="dndCanceled.emit($event)"
-  (dndEnd)="dndEnd.emit($event)">
+<div class="card shadow-sm bg-light" cdkDrag [cdkDragDisabled]="!draggable" cdkDragPreviewContainer="parent">
   <div class="card-header">
     <div class="d-flex justify-content-between align-items-center">
       <div class="d-flex">
-        <div *ngIf="draggable" class="ms-n2 me-1" dndHandle>
+        <div *ngIf="draggable" class="ms-n2 me-1" cdkDragHandle>
           <svg class="sidebaricon text-muted" fill="currentColor">
             <use xlink:href="assets/bootstrap-icons.svg#grip-vertical"/>
           </svg>

src-ui/src/app/components/dashboard/widgets/widget-frame/widget-frame.component.spec.ts

@@ -1,10 +1,10 @@
 import { Component } from '@angular/core'
 import { ComponentFixture, TestBed } from '@angular/core/testing'
 import { By } from '@angular/platform-browser'
-import { NgbAlertModule, NgbAlert } from '@ng-bootstrap/ng-bootstrap'
+import { NgbAlertModule } from '@ng-bootstrap/ng-bootstrap'
 import { PermissionsGuard } from 'src/app/guards/permissions.guard'
 import { WidgetFrameComponent } from './widget-frame.component'
-import { DndModule } from 'ngx-drag-drop'
+import { DragDropModule } from '@angular/cdk/drag-drop'
 
 @Component({
   template: `
@@ -30,7 +30,7 @@ describe('WidgetFrameComponent', () => {
     TestBed.configureTestingModule({
       declarations: [WidgetFrameComponent, WidgetFrameComponent],
       providers: [PermissionsGuard],
-      imports: [NgbAlertModule, DndModule],
+      imports: [NgbAlertModule, DragDropModule],
     }).compileComponents()
 
     fixture = TestBed.createComponent(WidgetFrameComponent)

src-ui/src/app/components/dashboard/widgets/widget-frame/widget-frame.component.ts

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core'
+import { Component, Input } from '@angular/core'
 
 @Component({
   selector: 'pngx-widget-frame',
@@ -16,16 +16,4 @@ export class WidgetFrameComponent {
 
   @Input()
   draggable: any
-
-  @Output()
-  dndStart: EventEmitter<DragEvent> = new EventEmitter()
-
-  @Output()
-  dndMoved: EventEmitter<DragEvent> = new EventEmitter()
-
-  @Output()
-  dndCanceled: EventEmitter<DragEvent> = new EventEmitter()
-
-  @Output()
-  dndEnd: EventEmitter<DragEvent> = new EventEmitter()
 }