diff --git a/src-ui/package-lock.json b/src-ui/package-lock.json index 29f3ed34c..414367e79 100644 --- a/src-ui/package-lock.json +++ b/src-ui/package-lock.json @@ -9,6 +9,7 @@ "version": "0.0.0", "hasInstallScript": true, "dependencies": { + "@angular/cdk": "^16.2.7", "@angular/common": "~16.2.7", "@angular/compiler": "~16.2.7", "@angular/core": "~16.2.7", @@ -28,7 +29,6 @@ "ngx-clipboard": "^16.0.0", "ngx-color": "^9.0.0", "ngx-cookie-service": "^16.0.1", - "ngx-drag-drop": "^16.1.0", "ngx-file-drop": "^16.0.0", "ngx-ui-tour-ng-bootstrap": "^13.0.4", "rxjs": "^7.8.1", @@ -1160,6 +1160,22 @@ "typescript": "*" } }, + "node_modules/@angular/cdk": { + "version": "16.2.7", + "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-16.2.7.tgz", + "integrity": "sha512-LLbCu0pHHsZWGjSpQW0qRoKYRCm09TuFH2vzsViyaQF7umDKlk52QcDFB/nMioyiWPgqXkyHyGMFG1vFBNSIeg==", + "dependencies": { + "tslib": "^2.3.0" + }, + "optionalDependencies": { + "parse5": "^7.1.2" + }, + "peerDependencies": { + "@angular/common": "^16.0.0 || ^17.0.0", + "@angular/core": "^16.0.0 || ^17.0.0", + "rxjs": "^6.5.3 || ^7.4.0" + } + }, "node_modules/@angular/cli": { "version": "16.2.4", "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-16.2.4.tgz", @@ -8918,7 +8934,7 @@ "version": "4.5.0", "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz", "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==", - "dev": true, + "devOptional": true, "engines": { "node": ">=0.12" }, @@ -14112,18 +14128,6 @@ "@angular/core": "^16.0.0" } }, - "node_modules/ngx-drag-drop": { - "version": "16.1.0", - "resolved": "https://registry.npmjs.org/ngx-drag-drop/-/ngx-drag-drop-16.1.0.tgz", - "integrity": "sha512-y2l9pJGD7OupsIRkCElN/JqTgzjg2V9ZxymKGQR7ZjjcdjaP1wKkiFWIgVEvLNtb8wgm10U+9tkGwLClGaHkQA==", - "dependencies": { - "tslib": "^2.3.0" - }, - "peerDependencies": { - "@angular/common": "^16.0.0", - "@angular/core": "^16.0.0" - } - }, "node_modules/ngx-file-drop": { "version": "16.0.0", "resolved": "https://registry.npmjs.org/ngx-file-drop/-/ngx-file-drop-16.0.0.tgz", @@ -15048,7 +15052,7 @@ "version": "7.1.2", "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.1.2.tgz", "integrity": "sha512-Czj1WaSVpaoj0wbhMzLmWD69anp2WH7FXMB9n1Sy8/ZFF9jolSQVMu1Ij5WIyGmcBmhk7EOndpO4mIpihVqAXw==", - "dev": true, + "devOptional": true, "dependencies": { "entities": "^4.4.0" }, diff --git a/src-ui/package.json b/src-ui/package.json index 1aa1b34b0..2412c397f 100644 --- a/src-ui/package.json +++ b/src-ui/package.json @@ -11,6 +11,7 @@ }, "private": true, "dependencies": { + "@angular/cdk": "^16.2.7", "@angular/common": "~16.2.7", "@angular/compiler": "~16.2.7", "@angular/core": "~16.2.7", @@ -30,7 +31,6 @@ "ngx-clipboard": "^16.0.0", "ngx-color": "^9.0.0", "ngx-cookie-service": "^16.0.1", - "ngx-drag-drop": "^16.1.0", "ngx-file-drop": "^16.0.0", "ngx-ui-tour-ng-bootstrap": "^13.0.4", "rxjs": "^7.8.1", diff --git a/src-ui/src/app/app.module.ts b/src-ui/src/app/app.module.ts index 42a226015..da7272fa6 100644 --- a/src-ui/src/app/app.module.ts +++ b/src-ui/src/app/app.module.ts @@ -99,7 +99,7 @@ import { ConsumptionTemplatesComponent } from './components/manage/consumption-t import { ConsumptionTemplateEditDialogComponent } from './components/common/edit-dialog/consumption-template-edit-dialog/consumption-template-edit-dialog.component' import { MailComponent } from './components/manage/mail/mail.component' import { UsersAndGroupsComponent } from './components/admin/users-groups/users-groups.component' -import { DndModule } from 'ngx-drag-drop' +import { DragDropModule } from '@angular/cdk/drag-drop' import { FileDropComponent } from './components/file-drop/file-drop.component' import localeAf from '@angular/common/locales/af' @@ -257,7 +257,7 @@ function initializeApp(settings: SettingsService) { NgSelectModule, ColorSliderModule, TourNgBootstrapModule, - DndModule, + DragDropModule, ], providers: [ { diff --git a/src-ui/src/app/components/dashboard/dashboard.component.html b/src-ui/src/app/components/dashboard/dashboard.component.html index df67040b8..bc93d90fc 100644 --- a/src-ui/src/app/components/dashboard/dashboard.component.html +++ b/src-ui/src/app/components/dashboard/dashboard.component.html @@ -5,10 +5,9 @@
@@ -23,14 +22,12 @@
+ (cdkDragStarted)="onDragStart($event)" + (cdkDragEnded)="onDragEnd($event)" + >
-
diff --git a/src-ui/src/app/components/dashboard/dashboard.component.scss b/src-ui/src/app/components/dashboard/dashboard.component.scss index de41297ee..6c2161957 100644 --- a/src-ui/src/app/components/dashboard/dashboard.component.scss +++ b/src-ui/src/app/components/dashboard/dashboard.component.scss @@ -1,3 +1,19 @@ .col-sidebar .row { top: 3.5rem; } + +:host ::ng-deep { + .cdk-drag-placeholder { + opacity: .5; + } + + /* Animate items as they're being sorted. */ + .cdk-drop-list-dragging .cdk-drag { + transition: transform 250ms cubic-bezier(0, 0, 0.2, 1); + } + + /* Animate an item that has been dropped. */ + .cdk-drag-animating { + transition: transform 300ms cubic-bezier(0, 0, 0.2, 1); + } +} diff --git a/src-ui/src/app/components/dashboard/dashboard.component.spec.ts b/src-ui/src/app/components/dashboard/dashboard.component.spec.ts index 45d397b98..ed084d670 100644 --- a/src-ui/src/app/components/dashboard/dashboard.component.spec.ts +++ b/src-ui/src/app/components/dashboard/dashboard.component.spec.ts @@ -1,5 +1,5 @@ import { ComponentFixture, TestBed } from '@angular/core/testing' -import { NgbAlertModule, NgbAlert } from '@ng-bootstrap/ng-bootstrap' +import { NgbAlertModule } from '@ng-bootstrap/ng-bootstrap' import { PermissionsGuard } from 'src/app/guards/permissions.guard' import { DashboardComponent } from './dashboard.component' import { HttpClientTestingModule } from '@angular/common/http/testing' @@ -17,9 +17,10 @@ import { RouterTestingModule } from '@angular/router/testing' import { TourNgBootstrapModule, TourService } from 'ngx-ui-tour-ng-bootstrap' import { LogoComponent } from '../common/logo/logo.component' import { of, throwError } from 'rxjs' -import { DndDropEvent, DndModule } from 'ngx-drag-drop' import { ToastService } from 'src/app/services/toast.service' import { SETTINGS_KEYS } from 'src/app/data/paperless-uisettings' +import { CdkDragDrop, DragDropModule } from '@angular/cdk/drag-drop' +import { PaperlessSavedView } from 'src/app/data/paperless-saved-view' const saved_views = [ { @@ -105,7 +106,7 @@ describe('DashboardComponent', () => { HttpClientTestingModule, RouterTestingModule, TourNgBootstrapModule, - DndModule, + DragDropModule, ], }).compileComponents() @@ -165,18 +166,18 @@ describe('DashboardComponent', () => { const settingsSpy = jest.spyOn(settingsService, 'updateDashboardViewsSort') const toastSpy = jest.spyOn(toastService, 'showInfo') jest.spyOn(settingsService, 'storeSettings').mockReturnValue(of(true)) - component.onDrop({ index: 2, data: saved_views[0] } as DndDropEvent) - component.onDragged(saved_views[0]) + component.onDrop({ previousIndex: 0, currentIndex: 1 } as CdkDragDrop< + PaperlessSavedView[] + >) expect(settingsSpy).toHaveBeenCalledWith([ saved_views[2], saved_views[0], saved_views[3], ]) expect(toastSpy).toHaveBeenCalled() - component.onDrop({ data: saved_views[3] } as DndDropEvent) }) - it('should update saved view sorting on drag + drop, show info2', () => { + it('should update saved view sorting on drag + drop, show error', () => { jest.spyOn(settingsService, 'get').mockImplementation((key) => { if (key === SETTINGS_KEYS.DASHBOARD_VIEWS_SORT_ORDER) return [] }) @@ -188,8 +189,9 @@ describe('DashboardComponent', () => { jest .spyOn(settingsService, 'storeSettings') .mockReturnValue(throwError(() => new Error('unable to save'))) - component.onDrop({ index: 2, data: saved_views[0] } as DndDropEvent) - component.onDragged(saved_views[0]) + component.onDrop({ previousIndex: 0, currentIndex: 2 } as CdkDragDrop< + PaperlessSavedView[] + >) expect(toastSpy).toHaveBeenCalled() }) }) diff --git a/src-ui/src/app/components/dashboard/dashboard.component.ts b/src-ui/src/app/components/dashboard/dashboard.component.ts index 45ab053a4..b39ce1663 100644 --- a/src-ui/src/app/components/dashboard/dashboard.component.ts +++ b/src-ui/src/app/components/dashboard/dashboard.component.ts @@ -4,9 +4,14 @@ import { SettingsService } from 'src/app/services/settings.service' import { ComponentWithPermissions } from '../with-permissions/with-permissions.component' import { TourService } from 'ngx-ui-tour-ng-bootstrap' import { PaperlessSavedView } from 'src/app/data/paperless-saved-view' -import { DndDropEvent } from 'ngx-drag-drop' import { ToastService } from 'src/app/services/toast.service' import { SETTINGS_KEYS } from 'src/app/data/paperless-uisettings' +import { + CdkDragDrop, + CdkDragEnd, + CdkDragStart, + moveItemInArray, +} from '@angular/cdk/drag-drop' @Component({ selector: 'pngx-dashboard', @@ -59,13 +64,21 @@ export class DashboardComponent extends ComponentWithPermissions { } } - onDragStart(event: DragEvent) { + onDragStart(event: CdkDragStart) { this.settingsService.globalDropzoneEnabled = false } - onDragged(v: PaperlessSavedView) { - const index = this.dashboardViews.indexOf(v) - this.dashboardViews.splice(index, 1) + onDragEnd(event: CdkDragEnd) { + this.settingsService.globalDropzoneEnabled = true + } + + onDrop(event: CdkDragDrop) { + moveItemInArray( + this.dashboardViews, + event.previousIndex, + event.currentIndex + ) + this.settingsService .updateDashboardViewsSort(this.dashboardViews) .subscribe({ @@ -77,16 +90,4 @@ export class DashboardComponent extends ComponentWithPermissions { }, }) } - - onDragEnd(event: DragEvent) { - this.settingsService.globalDropzoneEnabled = true - } - - onDrop(event: DndDropEvent) { - if (typeof event.index === 'undefined') { - event.index = this.dashboardViews.length - } - - this.dashboardViews.splice(event.index, 0, event.data) - } } diff --git a/src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.html b/src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.html index ee4fb75d3..637a28a54 100644 --- a/src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.html +++ b/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)" > Show all diff --git a/src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.spec.ts b/src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.spec.ts index c355bdf61..e4a3041fc 100644 --- a/src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.spec.ts +++ b/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() diff --git a/src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.ts b/src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.ts index f6a5d8c49..982aeebaa 100644 --- a/src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.ts +++ b/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 = new EventEmitter() - - @Output() - dndMoved: EventEmitter = new EventEmitter() - - @Output() - dndCanceled: EventEmitter = new EventEmitter() - - @Output() - dndEnd: EventEmitter = new EventEmitter() - documents: PaperlessDocument[] = [] unsubscribeNotifier: Subject = new Subject() diff --git a/src-ui/src/app/components/dashboard/widgets/statistics-widget/statistics-widget.component.spec.ts b/src-ui/src/app/components/dashboard/widgets/statistics-widget/statistics-widget.component.spec.ts index a838e7f52..43ab4d248 100644 --- a/src-ui/src/app/components/dashboard/widgets/statistics-widget/statistics-widget.component.spec.ts +++ b/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() diff --git a/src-ui/src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.spec.ts b/src-ui/src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.spec.ts index 227e9e7f7..b0f600430 100644 --- a/src-ui/src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.spec.ts +++ b/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() diff --git a/src-ui/src/app/components/dashboard/widgets/widget-frame/widget-frame.component.html b/src-ui/src/app/components/dashboard/widgets/widget-frame/widget-frame.component.html index 1fb998073..539ec9bee 100644 --- a/src-ui/src/app/components/dashboard/widgets/widget-frame/widget-frame.component.html +++ b/src-ui/src/app/components/dashboard/widgets/widget-frame/widget-frame.component.html @@ -1,15 +1,8 @@ -
+
-
+
diff --git a/src-ui/src/app/components/dashboard/widgets/widget-frame/widget-frame.component.spec.ts b/src-ui/src/app/components/dashboard/widgets/widget-frame/widget-frame.component.spec.ts index 74665ea01..0fbe6203c 100644 --- a/src-ui/src/app/components/dashboard/widgets/widget-frame/widget-frame.component.spec.ts +++ b/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) diff --git a/src-ui/src/app/components/dashboard/widgets/widget-frame/widget-frame.component.ts b/src-ui/src/app/components/dashboard/widgets/widget-frame/widget-frame.component.ts index e19154dce..a710a6a9d 100644 --- a/src-ui/src/app/components/dashboard/widgets/widget-frame/widget-frame.component.ts +++ b/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 = new EventEmitter() - - @Output() - dndMoved: EventEmitter = new EventEmitter() - - @Output() - dndCanceled: EventEmitter = new EventEmitter() - - @Output() - dndEnd: EventEmitter = new EventEmitter() }