lgcosta/paperless-ngx
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Swap ngx-drag-drop dependency for Angular CDK

Browse Source
This commit is contained in:
shamoon 2023-10-10 23:28:21 -07:00
parent 27772257a8
commit 9170b26354
15 changed files with 85 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src-ui/package-lock.json generated
View File

@ -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"
},

2
src-ui/package.json
View File

@ -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",

4
src-ui/src/app/app.module.ts
View File

@ -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: [
{

15
src-ui/src/app/components/dashboard/dashboard.component.html
View File

@ -5,10 +5,9 @@
<div class="row">
<div class="col-auto col-lg-8 col-xl-9 mb-4">
<div class="row row-cols-1 g-4" tourAnchor="tour.dashboard"
dndDropzone
[dndDisableIf]="settingsService.globalDropzoneActive"
dndEffectAllowed="move"
(dndDrop)="onDrop($event)"
cdkDropList
[cdkDropListDisabled]="settingsService.globalDropzoneActive"
(cdkDropListDropped)="onDrop($event)"
>
<div *ngIf="savedViewService.loading" class="col">
<div class="spinner-border spinner-border-sm me-2" role="status"></div>
@ -23,14 +22,12 @@
<div *ngFor="let v of dashboardViews" class="col">
<pngx-saved-view-widget
[savedView]="v"
(dndStart)="onDragStart($event)"
(dndMoved)="onDragged(v)"
(dndEnd)="onDragEnd($event)"
>
(cdkDragStarted)="onDragStart($event)"
(cdkDragEnded)="onDragEnd($event)"
>
</pngx-saved-view-widget>
</div>
</ng-container>
<div class="p-1" dndPlaceholderRef></div>
</div>
</div>
<div class="col-auto col-lg-4 col-xl-3 col-sidebar">

16
src-ui/src/app/components/dashboard/dashboard.component.scss
View File

@ -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);
}
}

20
src-ui/src/app/components/dashboard/dashboard.component.spec.ts
View File

@ -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()
})
})

35
src-ui/src/app/components/dashboard/dashboard.component.ts
View File

@ -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<PaperlessSavedView[]>) {
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)
}
}

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

@ -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>

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

@ -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()

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

@ -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()

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

@ -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()

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

@ -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()

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

@ -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>

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

@ -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)

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

@ -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()
}