Enhancement: add processed mails management UI and API

src-ui/src/app/components/manage/mail/mail.component.html

@@ -168,6 +168,13 @@
                   <i-bs width="1em" height="1em" name="files"></i-bs>&nbsp;<ng-container i18n>Copy</ng-container>
                 </button>
               </div>
+              <div class="btn-group">
+                <div *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.ProcessedMail }">
+                  <button class="btn btn-sm btn-outline-secondary" type="button" (click)="viewProcessedMails(rule)">
+                    <i-bs width="1em" height="1em" name="clock-history"></i-bs>&nbsp;<ng-container i18n>Processed Mails</ng-container>
+                  </button>
+                </div>
+              </div>
             </div>
           </div>
         </div>

src-ui/src/app/components/manage/mail/mail.component.ts

@@ -27,6 +27,7 @@ import { MailRuleEditDialogComponent } from '../../common/edit-dialog/mail-rule-
 import { PageHeaderComponent } from '../../common/page-header/page-header.component'
 import { PermissionsDialogComponent } from '../../common/permissions-dialog/permissions-dialog.component'
 import { ComponentWithPermissions } from '../../with-permissions/with-permissions.component'
+import { ProcessedMailsDialogComponent } from './processed-mails-dialog/processed-mails-dialog.component'
 
 @Component({
   selector: 'pngx-mail',
@@ -347,6 +348,14 @@ export class MailComponent
     )
   }
 
+  viewProcessedMails(rule: MailRule) {
+    const modal = this.modalService.open(ProcessedMailsDialogComponent, {
+      backdrop: 'static',
+      size: 'xl',
+    })
+    modal.componentInstance.rule = rule
+  }
+
   userCanEdit(obj: ObjectWithPermissions): boolean {
     return this.permissionsService.currentUserHasObjectPermissions(
       PermissionAction.Change,

src-ui/src/app/components/manage/mail/processed-mails-dialog/processed-mails-dialog.component.html

@@ -0,0 +1,92 @@
+<div class="modal-header">
+  <h6 class="modal-title" id="modal-basic-title" i18n>Processed Mails for <em>{{ rule.name }}</em></h6>
+  <button type="button" class="btn-close" aria-label="Close" (click)="close()"></button>
+</div>
+<div class="modal-body">
+  @if (loading) {
+    <div class="text-center my-5">
+      <div class="spinner-border" role="status">
+        <span class="visually-hidden" i18n>Loading...</span>
+      </div>
+    </div>
+  } @else if (processedMails.length === 0) {
+    <span i18n>No processed mails found.</span>
+  } @else {
+    <div class="table-responsive">
+      <table class="table table-hover table-sm align-middle">
+        <thead>
+          <tr>
+            <th scope="col" style="width: 40px;">
+              <div class="form-check m-0 ms-2 me-n2">
+                <input type="checkbox" class="form-check-input" id="all-objects" [(ngModel)]="toggleAllEnabled" [disabled]="processedMails.length === 0" (click)="toggleAll($event); $event.stopPropagation();">
+                <label class="form-check-label" for="all-objects"></label>
+              </div>
+            </th>
+            <th scope="col" i18n>Subject</th>
+            <th scope="col" i18n>Received</th>
+            <th scope="col" i18n>Processed</th>
+            <th scope="col" i18n>Status</th>
+            <th scope="col" i18n>Error</th>
+          </tr>
+        </thead>
+        <tbody>
+          @for (mail of processedMails; track mail.id) {
+            <tr>
+              <td>
+                <div class="form-check m-0 ms-2 me-n2">
+                  <input type="checkbox" class="form-check-input" [id]="mail.id" [checked]="selectedMailIds.has(mail.id)" (click)="toggleSelected(mail); $event.stopPropagation();">
+                  <label class="form-check-label" [for]="mail.id"></label>
+                </div>
+              </td>
+              <td>{{ mail.subject }}</td>
+              <td>{{ mail.received | customDate:'longDate' }}</td>
+              <td>{{ mail.processed | customDate:'longDate' }}</td>
+              <td>
+                @switch (mail.status) {
+                  @case ('SUCCESS') {
+                    <i-bs name="check-circle" title="SUCCESS" class="text-success" [ngbTooltip]="mail.status"></i-bs>
+                  }
+                  @case ('FAILED') {
+                    <i-bs name="exclamation-triangle" title="FAILED" class="text-danger" [ngbTooltip]="mail.status"></i-bs>
+                  }
+                  @default {
+                    <i-bs name="question-circle" title="{{ mail.status }}" class="text-muted" [ngbTooltip]="mail.status"></i-bs>
+                  }
+                }
+              </td>
+              <td>
+                @if (mail.error) {
+                  <span class="text-danger">{{ mail.error | slice:0:20 }}</span>
+                } @else {
+                  <span class="text-muted" i18n>None</span>
+                }
+              </td>
+            </tr>
+          }
+        </tbody>
+      </table>
+    </div>
+    <div class="btn-toolbar">
+      <button type="button" class="btn btn-outline-secondary me-2" (click)="clearSelection()" [disabled]="selectedMailIds.size === 0" i18n>Clear</button>
+      <pngx-confirm-button
+        label="Delete selected"
+        i18n-label
+        title="Delete selected"
+        i18n-title
+        buttonClasses="btn-outline-danger"
+        iconName="trash"
+        [disabled]="selectedMailIds.size === 0"
+        (confirm)="deleteSelected()">
+      </pngx-confirm-button>
+      <div class="ms-auto">
+        <ngb-pagination
+          [collectionSize]="processedMails.length"
+          [(page)]="page"
+          [pageSize]="50"
+          [maxSize]="5"
+          (pageChange)="loadProcessedMails()">
+        </ngb-pagination>
+      </div>
+    </div>
+  }
+</div>

src-ui/src/app/components/manage/mail/processed-mails-dialog/processed-mails-dialog.component.ts

@@ -0,0 +1,91 @@
+import { SlicePipe } from '@angular/common'
+import { Component, inject, Input } from '@angular/core'
+import {
+  NgbActiveModal,
+  NgbPagination,
+  NgbTooltipModule,
+} from '@ng-bootstrap/ng-bootstrap'
+import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
+import { ConfirmButtonComponent } from 'src/app/components/common/confirm-button/confirm-button.component'
+import { MailRule } from 'src/app/data/mail-rule'
+import { ProcessedMail } from 'src/app/data/processed-mail'
+import { CustomDatePipe } from 'src/app/pipes/custom-date.pipe'
+import { ProcessedMailService } from 'src/app/services/rest/processed-mail.service'
+import { ToastService } from 'src/app/services/toast.service'
+
+@Component({
+  selector: 'pngx-processed-mails-dialog',
+  imports: [
+    ConfirmButtonComponent,
+    CustomDatePipe,
+    NgbPagination,
+    NgbTooltipModule,
+    NgxBootstrapIconsModule,
+    SlicePipe,
+  ],
+  templateUrl: './processed-mails-dialog.component.html',
+  styleUrl: './processed-mails-dialog.component.scss',
+})
+export class ProcessedMailsDialogComponent {
+  private activeModal = inject(NgbActiveModal)
+  private processedMailService = inject(ProcessedMailService)
+  private toastService = inject(ToastService)
+
+  public processedMails: ProcessedMail[] = []
+
+  public loading: boolean = true
+  public toggleAllEnabled: boolean = false
+  public readonly selectedMailIds: Set<number> = new Set<number>()
+
+  public page: number = 1
+
+  @Input() rule: MailRule
+
+  ngOnInit(): void {
+    this.loadProcessedMails()
+  }
+
+  public close() {
+    this.activeModal.close()
+  }
+
+  private loadProcessedMails(): void {
+    this.loading = true
+    this.clearSelection()
+    this.processedMailService
+      .list(this.page, 50, 'processed_at', true, { rule: this.rule.id })
+      .subscribe((result) => {
+        this.processedMails = result.results
+        this.loading = false
+      })
+  }
+
+  public deleteSelected(): void {
+    this.processedMailService
+      .bulk_delete(Array.from(this.selectedMailIds))
+      .subscribe(() => {
+        this.toastService.showInfo($localize`Processed mail(s) deleted`)
+        this.loadProcessedMails()
+      })
+  }
+
+  public toggleAll(event: PointerEvent) {
+    if ((event.target as HTMLInputElement).checked) {
+      this.selectedMailIds.clear()
+      this.processedMails.forEach((mail) => this.selectedMailIds.add(mail.id))
+    } else {
+      this.clearSelection()
+    }
+  }
+
+  public clearSelection() {
+    this.toggleAllEnabled = false
+    this.selectedMailIds.clear()
+  }
+
+  public toggleSelected(mail: ProcessedMail) {
+    this.selectedMailIds.has(mail.id)
+      ? this.selectedMailIds.delete(mail.id)
+      : this.selectedMailIds.add(mail.id)
+  }
+}

src-ui/src/app/data/processed-mail.ts

@@ -0,0 +1,12 @@
+import { ObjectWithId } from './object-with-id'
+
+export interface ProcessedMail extends ObjectWithId {
+  rule: number // MailRule.id
+  folder: string
+  uid: number
+  subject: string
+  received: Date
+  processed: Date
+  status: string
+  error: string
+}

src-ui/src/app/services/permissions.service.ts

@@ -28,6 +28,7 @@ export enum PermissionType {
   ShareLink = '%s_sharelink',
   CustomField = '%s_customfield',
   Workflow = '%s_workflow',
+  ProcessedMail = '%s_processedmail',
 }
 
 @Injectable({

src-ui/src/app/services/rest/processed-mail.service.ts

@@ -0,0 +1,19 @@
+import { Injectable } from '@angular/core'
+import { ProcessedMail } from 'src/app/data/processed-mail'
+import { AbstractPaperlessService } from './abstract-paperless-service'
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ProcessedMailService extends AbstractPaperlessService<ProcessedMail> {
+  constructor() {
+    super()
+    this.resourceName = 'processed_mail'
+  }
+
+  public bulk_delete(mailIds: number[]) {
+    return this.http.post(`${this.getResourceUrl()}bulk_delete/`, {
+      mail_ids: mailIds,
+    })
+  }
+}