amorfo77/paperless-ngx
1
0
Fork 0
mirror of https://github.com/paperless-ngx/paperless-ngx.git synced 2026-07-08 21:15:09 +00:00
Code Issues Projects Releases Wiki Activity

Tasks and trash to direct signals

Browse Source
This commit is contained in:
shamoon
2026-07-08 13:02:10 -07:00
parent b7836d7cfd
commit 1b0232a4d7
6 changed files with 59 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src-ui/src/app/components/admin/tasks/tasks.component.html
+2 -2
View File
@@ -11,7 +11,7 @@
<button class="btn btn-sm btn-outline-primary me-2" (click)="dismissTasks()" *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.PaperlessTask }" [disabled]="visibleTasks.length === 0">
<i-bs name="check2-all" class="me-1"></i-bs>{{dismissButtonText}}
</button>
<button class="btn btn-sm btn-outline-primary me-2" (click)="dismissAllTasks()" *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.PaperlessTask }" [disabled]="totalTasks === 0">
<button class="btn btn-sm btn-outline-primary me-2" (click)="dismissAllTasks()" *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.PaperlessTask }" [disabled]="totalTasks() === 0">
<i-bs name="check2-all" class="me-1"></i-bs><ng-container i18n>Dismiss all</ng-container>
</button>
<div class="form-check form-switch mb-0 ms-2">
@@ -107,7 +107,7 @@
<ngb-pagination
[pageSize]="pageSize"
[collectionSize]="totalTasks"
[collectionSize]="totalTasks()"
[page]="page"
[maxSize]="5"
[rotate]="true"
src-ui/src/app/components/admin/tasks/tasks.component.spec.ts
+3 -3
View File
@@ -362,7 +362,7 @@ describe('TasksComponent', () => {
)
req.flush({ count: 2, results: [tasks[0], tasks[1]] })
expect(component.totalTasks).toBe(2)
expect(component.totalTasks()).toBe(2)
})
it('should apply task type and trigger source filters to the server-side task query', () => {
@@ -435,8 +435,8 @@ describe('TasksComponent', () => {
.flush(pageTwoTasks)
expect(component.page).toBe(2)
expect(component.totalTasks).toBe(30)
expect(component.pagedTasks).toEqual([tasks[0]])
expect(component.totalTasks()).toBe(30)
expect(component.pagedTasks()).toEqual([tasks[0]])
})
it('should not replace section counts with current-page counts', () => {
src-ui/src/app/components/admin/tasks/tasks.component.ts
+14 -38
View File
@@ -166,42 +166,18 @@ export class TasksComponent
public autoRefreshEnabled: boolean = true
public readonly pageSize = 25
public page: number = 1
private totalTasksSignal = signal(0)
private sectionCountsSignal = signal<Record<TaskSection, number>>({
readonly totalTasks = signal(0)
readonly sectionCounts = signal<Record<TaskSection, number>>({
[TaskSection.All]: 0,
[TaskSection.NeedsAttention]: 0,
[TaskSection.InProgress]: 0,
[TaskSection.Completed]: 0,
})
private pagedTasksSignal = signal<PaperlessTask[]>([])
readonly pagedTasks = signal<PaperlessTask[]>([])
public selectedSection: TaskSection = TaskSection.All
public selectedTaskType: PaperlessTaskType | null = null
public selectedTriggerSource: PaperlessTaskTriggerSource | null = null
public get totalTasks(): number {
return this.totalTasksSignal()
}
public set totalTasks(value: number) {
this.totalTasksSignal.set(value)
}
public get sectionCounts(): Record<TaskSection, number> {
return this.sectionCountsSignal()
}
public set sectionCounts(value: Record<TaskSection, number>) {
this.sectionCountsSignal.set(value)
}
public get pagedTasks(): PaperlessTask[] {
return this.pagedTasksSignal()
}
public set pagedTasks(value: PaperlessTask[]) {
this.pagedTasksSignal.set(value)
}
private _filterText: string = ''
get filterText() {
return this._filterText
@@ -370,7 +346,7 @@ export class TasksComponent
backdrop: 'static',
})
modal.componentInstance.title = $localize`Confirm Dismiss All`
modal.componentInstance.messageBold = $localize`Dismiss all ${this.totalTasks} tasks?`
modal.componentInstance.messageBold = $localize`Dismiss all ${this.totalTasks()} tasks?`
modal.componentInstance.btnClass = 'btn-warning'
modal.componentInstance.btnCaption = $localize`Dismiss`
modal.componentInstance.confirmClicked.pipe(first()).subscribe(() => {
@@ -489,7 +465,7 @@ export class TasksComponent
}
tasksForSection(section: TaskSection): PaperlessTask[] {
let tasks = this.pagedTasks.filter((task) =>
let tasks = this.pagedTasks().filter((task) =>
this.taskBelongsToSection(task, section)
)
@@ -501,11 +477,11 @@ export class TasksComponent
}
sectionCount(section: TaskSection): number {
return this.sectionCounts[section]
return this.sectionCounts()[section]
}
private setSectionCount(section: TaskSection, count: number) {
this.sectionCountsSignal.update((counts) => ({
this.sectionCounts.update((counts) => ({
...counts,
[section]: count,
}))
@@ -683,7 +659,7 @@ export class TasksComponent
? this.sections
: [this.selectedSection]
return this.pagedTasks.filter(
return this.pagedTasks().filter(
(task) =>
sections.some((section) => this.taskBelongsToSection(task, section)) &&
this.taskMatchesFilters(task, { taskType, triggerSource })
@@ -695,12 +671,12 @@ export class TasksComponent
.statusCounts(this.getParamsForSection(TaskSection.All))
.pipe(first(), takeUntil(this.unsubscribeNotifier))
.subscribe((counts) => {
this.sectionCounts = {
this.sectionCounts.set({
[TaskSection.All]: counts.all,
[TaskSection.NeedsAttention]: counts.needs_attention,
[TaskSection.InProgress]: counts.in_progress,
[TaskSection.Completed]: counts.completed,
}
})
})
}
@@ -766,8 +742,8 @@ export class TasksComponent
.pipe(first(), takeUntil(this.unsubscribeNotifier))
.subscribe({
next: (result) => {
this.pagedTasks = result.results
this.totalTasks = result.count
this.pagedTasks.set(result.results)
this.totalTasks.set(result.count)
this.setSectionCount(TaskSection.All, result.count)
if (this.selectedSection !== TaskSection.All) {
this.setSectionCount(this.selectedSection, result.count)
@@ -775,8 +751,8 @@ export class TasksComponent
this.loading = false
if (
this.page > 1 &&
this.pagedTasks.length === 0 &&
this.totalTasks > 0
this.pagedTasks().length === 0 &&
this.totalTasks() > 0
) {
this.page -= 1
this.reloadPage()
src-ui/src/app/components/admin/trash/trash.component.html
+13 -13
View File
@@ -4,22 +4,22 @@
info="Manage trashed documents that are pending deletion."
i18n-info
infoLink="usage/#document-trash">
<button class="btn btn-sm btn-outline-secondary" (click)="clearSelection()" [hidden]="selectedDocuments.size === 0">
<button class="btn btn-sm btn-outline-secondary" (click)="clearSelection()" [hidden]="selectedDocuments().size === 0">
<i-bs name="x" class="me-1"></i-bs><ng-container i18n>Clear selection</ng-container>
</button>
<button type="button" class="btn btn-sm btn-outline-primary" (click)="restoreAll(selectedDocuments)" [disabled]="selectedDocuments.size === 0">
<button type="button" class="btn btn-sm btn-outline-primary" (click)="restoreAll(selectedDocuments())" [disabled]="selectedDocuments().size === 0">
<i-bs name="arrow-counterclockwise" class="me-1"></i-bs><ng-container i18n>Restore selected</ng-container>
</button>
<button type="button" class="btn btn-sm btn-outline-danger" (click)="emptyTrash(selectedDocuments)" [disabled]="selectedDocuments.size === 0">
<button type="button" class="btn btn-sm btn-outline-danger" (click)="emptyTrash(selectedDocuments())" [disabled]="selectedDocuments().size === 0">
<i-bs name="trash" class="me-1"></i-bs><ng-container i18n>Delete selected</ng-container>
</button>
<button type="button" class="btn btn-sm btn-outline-danger" (click)="emptyTrash()" [disabled]="documentsInTrash.length === 0">
<button type="button" class="btn btn-sm btn-outline-danger" (click)="emptyTrash()" [disabled]="documentsInTrash().length === 0">
<i-bs name="trash" class="me-1"></i-bs><ng-container i18n>Empty trash</ng-container>
</button>
</pngx-page-header>
<div class="row mb-3">
<ngb-pagination class="col-auto" [pageSize]="25" [collectionSize]="totalDocuments" [(page)]="page" [maxSize]="5" (pageChange)="reload()" size="sm" aria-label="Pagination"></ngb-pagination>
<ngb-pagination class="col-auto" [pageSize]="25" [collectionSize]="totalDocuments()" [page]="page()" [maxSize]="5" (pageChange)="page.set($event); reload()" size="sm" aria-label="Pagination"></ngb-pagination>
</div>
<div class="card border table-responsive mb-3">
@@ -28,7 +28,7 @@
<tr>
<th scope="col">
<div class="form-check m-0 ms-2 me-n2">
<input type="checkbox" class="form-check-input" id="all-objects" [(ngModel)]="allToggled" [disabled]="documentsInTrash.length === 0" (click)="toggleAll($event); $event.stopPropagation();">
<input type="checkbox" class="form-check-input" id="all-objects" [ngModel]="allToggled()" (ngModelChange)="allToggled.set($event)" [disabled]="documentsInTrash().length === 0" (click)="toggleAll($event); $event.stopPropagation();">
<label class="form-check-label" for="all-objects"></label>
</div>
</th>
@@ -46,11 +46,11 @@
</td>
</tr>
}
@for (document of documentsInTrash; track document.id) {
@for (document of documentsInTrash(); track document.id) {
<tr (click)="toggleSelected(document); $event.stopPropagation();" (mouseleave)="popupPreview.close()" class="data-row fade" [class.show]="show">
<td>
<div class="form-check m-0 ms-2 me-n2">
<input type="checkbox" class="form-check-input" id="{{document.id}}" [checked]="selectedDocuments.has(document.id)" (click)="toggleSelected(document); $event.stopPropagation();">
<input type="checkbox" class="form-check-input" id="{{document.id}}" [checked]="selectedDocuments().has(document.id)" (click)="toggleSelected(document); $event.stopPropagation();">
<label class="form-check-label" for="{{document.id}}"></label>
</div>
</td>
@@ -91,13 +91,13 @@
@if (!loading) {
<div class="d-flex mb-2">
<div>
<ng-container i18n>{totalDocuments, plural, =1 {One document in trash} other {{{totalDocuments || 0}} total documents in trash}}</ng-container>
@if (selectedDocuments.size > 0) {
&nbsp;({{selectedDocuments.size}} selected)
<ng-container i18n>{totalDocuments(), plural, =1 {One document in trash} other {{{totalDocuments() || 0}} total documents in trash}}</ng-container>
@if (selectedDocuments().size > 0) {
&nbsp;({{selectedDocuments().size}} selected)
}
</div>
@if (documentsInTrash.length > 20) {
<ngb-pagination class="ms-auto" [pageSize]="25" [collectionSize]="totalDocuments" [(page)]="page" [maxSize]="5" (pageChange)="reload()" size="sm" aria-label="Pagination"></ngb-pagination>
@if (documentsInTrash().length > 20) {
<ngb-pagination class="ms-auto" [pageSize]="25" [collectionSize]="totalDocuments()" [page]="page()" [maxSize]="5" (pageChange)="page.set($event); reload()" size="sm" aria-label="Pagination"></ngb-pagination>
}
</div>
}
src-ui/src/app/components/admin/trash/trash.component.spec.ts
+9 -9
View File
@@ -77,7 +77,7 @@ describe('TrashComponent', () => {
component.reload()
jest.advanceTimersByTime(100)
expect(trashSpy).toHaveBeenCalled()
expect(component.documentsInTrash).toEqual(documentsInTrash)
expect(component.documentsInTrash()).toEqual(documentsInTrash)
})
it('should support delete document, show error if needed', () => {
@@ -179,8 +179,8 @@ describe('TrashComponent', () => {
})
it('should support toggle all items in view', () => {
component.documentsInTrash = documentsInTrash
expect(component.selectedDocuments.size).toEqual(0)
component.documentsInTrash.set(documentsInTrash)
expect(component.selectedDocuments().size).toEqual(0)
const toggleAllSpy = jest.spyOn(component, 'toggleAll')
const checkButton = fixture.debugElement.queryAll(
By.css('input.form-check-input')
@@ -189,21 +189,21 @@ describe('TrashComponent', () => {
checkButton.nativeElement.checked = true
checkButton.nativeElement.dispatchEvent(new Event('click'))
expect(toggleAllSpy).toHaveBeenCalled()
expect(component.selectedDocuments.size).toEqual(documentsInTrash.length)
expect(component.selectedDocuments().size).toEqual(documentsInTrash.length)
})
it('should support toggle item', () => {
component.selectedDocuments = new Set([1])
component.selectedDocuments.set(new Set([1]))
component.toggleSelected(documentsInTrash[0])
expect(component.selectedDocuments.size).toEqual(0)
expect(component.selectedDocuments().size).toEqual(0)
component.toggleSelected(documentsInTrash[0])
expect(component.selectedDocuments.size).toEqual(1)
expect(component.selectedDocuments().size).toEqual(1)
})
it('should support clear selection', () => {
component.selectedDocuments = new Set([1])
component.selectedDocuments.set(new Set([1]))
component.clearSelection()
expect(component.selectedDocuments.size).toEqual(0)
expect(component.selectedDocuments().size).toEqual(0)
})
it('should correctly display days remaining', () => {
src-ui/src/app/components/admin/trash/trash.component.ts
+18 -56
View File
@@ -42,51 +42,11 @@ export class TrashComponent
private settingsService = inject(SettingsService)
private router = inject(Router)
private documentsInTrashSignal = signal<Document[]>([])
private selectedDocumentsSignal = signal<Set<number>>(new Set())
private allToggledSignal = signal(false)
private pageSignal = signal(1)
private totalDocumentsSignal = signal<number>(undefined)
public get documentsInTrash(): Document[] {
return this.documentsInTrashSignal()
}
public set documentsInTrash(documentsInTrash: Document[]) {
this.documentsInTrashSignal.set(documentsInTrash)
}
public get selectedDocuments(): Set<number> {
return this.selectedDocumentsSignal()
}
public set selectedDocuments(selectedDocuments: Set<number>) {
this.selectedDocumentsSignal.set(selectedDocuments)
}
public get allToggled(): boolean {
return this.allToggledSignal()
}
public set allToggled(allToggled: boolean) {
this.allToggledSignal.set(allToggled)
}
public get page(): number {
return this.pageSignal()
}
public set page(page: number) {
this.pageSignal.set(page)
}
public get totalDocuments(): number {
return this.totalDocumentsSignal()
}
public set totalDocuments(totalDocuments: number) {
this.totalDocumentsSignal.set(totalDocuments)
}
readonly documentsInTrash = signal<Document[]>([])
readonly selectedDocuments = signal<Set<number>>(new Set())
readonly allToggled = signal(false)
readonly page = signal(1)
readonly totalDocuments = signal<number>(undefined)
constructor() {
super()
@@ -96,12 +56,12 @@ export class TrashComponent
reload() {
this.loading = true
this.trashService
.getTrash(this.page)
.getTrash(this.page())
.pipe(
tap((r) => {
this.documentsInTrash = r.results
this.totalDocuments = r.count
this.selectedDocuments = new Set()
this.documentsInTrash.set(r.results)
this.totalDocuments.set(r.count)
this.selectedDocuments.set(new Set())
this.loading = false
})
)
@@ -161,7 +121,7 @@ export class TrashComponent
.subscribe({
next: () => {
this.toastService.showInfo($localize`Document(s) deleted`)
this.allToggled = false
this.allToggled.set(false)
modal.close()
this.reload()
},
@@ -204,7 +164,7 @@ export class TrashComponent
.subscribe({
next: () => {
this.toastService.showInfo($localize`Document(s) restored`)
this.allToggled = false
this.allToggled.set(false)
this.reload()
},
error: (err) => {
@@ -218,23 +178,25 @@ export class TrashComponent
toggleAll(event: PointerEvent) {
if ((event.target as HTMLInputElement).checked) {
this.selectedDocuments = new Set(this.documentsInTrash.map((t) => t.id))
this.selectedDocuments.set(
new Set(this.documentsInTrash().map((t) => t.id))
)
} else {
this.clearSelection()
}
}
toggleSelected(object: Document) {
const selectedDocuments = new Set(this.selectedDocuments)
const selectedDocuments = new Set(this.selectedDocuments())
selectedDocuments.has(object.id)
? selectedDocuments.delete(object.id)
: selectedDocuments.add(object.id)
this.selectedDocuments = selectedDocuments
this.selectedDocuments.set(selectedDocuments)
}
clearSelection() {
this.allToggled = false
this.selectedDocuments = new Set()
this.allToggled.set(false)
this.selectedDocuments.set(new Set())
}
getDaysRemaining(document: Document): number {