doc detail use it this way

src-ui/src/app/components/common/confirm-dialog/zone-ocr-confirm-dialog/zone-ocr-confirm-dialog.component.html

@@ -0,0 +1,30 @@
+<div class="modal-header">
+  <h4 class="modal-title" id="modal-basic-title">{{title}}</h4>
+  <button type="button" class="btn-close" aria-label="Close" (click)="cancel()">
+  </button>
+</div>
+<div class="modal-body">
+  @if (messageBold) {
+    <p class="text-break"><b>{{messageBold}}</b></p>
+  }
+  @if (message) {
+    <p class="text-break" [innerHTML]="message"></p>
+  }
+  <pngx-input-select
+    [items]="templates()"
+    [(ngModel)]="template"
+    [allowNull]="true"
+    title="OCR template"
+    i18n-title
+    placeholder="All matching templates"
+    i18n-placeholder
+  ></pngx-input-select>
+</div>
+<div class="modal-footer">
+  <button type="button" class="btn" [class]="cancelBtnClass" (click)="cancel()" [disabled]="!buttonsEnabled()">
+    <span class="d-inline-block" style="padding-bottom: 1px;">{{cancelBtnCaption}}</span>
+  </button>
+  <button type="button" class="btn" [class]="btnClass" (click)="confirm()" [disabled]="!confirmButtonEnabled || !buttonsEnabled()">
+    {{btnCaption}}
+  </button>
+</div>

src-ui/src/app/components/common/confirm-dialog/zone-ocr-confirm-dialog/zone-ocr-confirm-dialog.component.spec.ts

@@ -0,0 +1,52 @@
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
+import { provideHttpClientTesting } from '@angular/common/http/testing'
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { of } from 'rxjs'
+import { MATCH_NONE } from 'src/app/data/matching-model'
+import { OcrTemplate } from 'src/app/data/ocr-template'
+import { OcrTemplateService } from 'src/app/services/rest/ocr-template.service'
+import { ZoneOcrConfirmDialogComponent } from './zone-ocr-confirm-dialog.component'
+
+const templates: OcrTemplate[] = [
+  {
+    id: 1,
+    name: 'Invoices',
+    match: '',
+    matching_algorithm: MATCH_NONE,
+    sample_document: null,
+    source_width: 0,
+    source_height: 0,
+    enabled: true,
+    zones: [],
+  },
+]
+
+describe('ZoneOcrConfirmDialogComponent', () => {
+  let component: ZoneOcrConfirmDialogComponent
+  let fixture: ComponentFixture<ZoneOcrConfirmDialogComponent>
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [
+        NgbActiveModal,
+        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClientTesting(),
+      ],
+      imports: [ZoneOcrConfirmDialogComponent],
+    })
+    jest
+      .spyOn(TestBed.inject(OcrTemplateService), 'listAll')
+      .mockReturnValue(of({ count: 1, all: [1], results: templates }))
+
+    fixture = TestBed.createComponent(ZoneOcrConfirmDialogComponent)
+    component = fixture.componentInstance
+    fixture.detectChanges()
+  })
+
+  it('should offer templates and default to all matching templates', () => {
+    expect(component.templates()).toEqual(templates)
+    expect(component.template).toBeNull()
+    expect(fixture.nativeElement.textContent).toContain('OCR template')
+  })
+})

src-ui/src/app/components/common/confirm-dialog/zone-ocr-confirm-dialog/zone-ocr-confirm-dialog.component.ts

@@ -0,0 +1,31 @@
+import { Component, OnInit, inject, signal } from '@angular/core'
+import { FormsModule } from '@angular/forms'
+import { takeUntil } from 'rxjs'
+import { OcrTemplate } from 'src/app/data/ocr-template'
+import { OcrTemplateService } from 'src/app/services/rest/ocr-template.service'
+import { SelectComponent } from '../../input/select/select.component'
+import { ConfirmDialogComponent } from '../confirm-dialog.component'
+
+@Component({
+  selector: 'pngx-zone-ocr-confirm-dialog',
+  templateUrl: './zone-ocr-confirm-dialog.component.html',
+  imports: [FormsModule, SelectComponent],
+})
+export class ZoneOcrConfirmDialogComponent
+  extends ConfirmDialogComponent
+  implements OnInit
+{
+  private readonly ocrTemplateService = inject(OcrTemplateService)
+
+  public readonly templates = signal<OcrTemplate[]>([])
+
+  /** The template to run, or null for every template that matches. */
+  template: number | null = null
+
+  ngOnInit() {
+    this.ocrTemplateService
+      .listAll()
+      .pipe(takeUntil(this.unsubscribeNotifier))
+      .subscribe((r) => this.templates.set(r.results))
+  }
+}

src-ui/src/app/components/document-detail/document-detail.component.html

@@ -64,8 +64,8 @@
       <button
         ngbDropdownItem
         (click)="runZoneOcr()"
-        [disabled]="!userCanEdit || !document()?.document_type || networkActive()"
-        *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.OcrTemplate }"
+        [disabled]="!userCanEdit || networkActive()"
+        *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.OcrTemplate }"
       >
         <i-bs width="1em" height="1em" name="file-earmark-ruled" class="me-1"></i-bs><span i18n>Run Zone OCR</span>
       </button>

src-ui/src/app/components/document-detail/document-detail.component.spec.ts

@@ -1916,9 +1916,17 @@ describe('DocumentDetailComponent', () => {
       .mockImplementation(() => {})
     const notifySpy = jest.spyOn(component.docChangeNotifier, 'next')
     const toastSpy = jest.spyOn(toastService, 'showInfo')
+    const modalSpy = jest.spyOn(modalService, 'open')
 
     component.runZoneOcr()
+    const dialog = modalSpy.mock.results[0].value.componentInstance
+    expect(dialog.message).toBe(
+      'Fields filled by the template will be overwritten.'
+    )
+    dialog.template = 3
+    dialog.confirmClicked.emit()
 
+    expect(documentService.runZoneOcr).toHaveBeenCalledWith(doc.id, 3)
     expect(toastSpy).toHaveBeenCalledWith(
       'Filled 1 of 2 fields. No value found for: Due'
     )
@@ -1936,9 +1944,12 @@ describe('DocumentDetailComponent', () => {
     jest.spyOn(component as any, 'loadDocument').mockImplementation(() => {})
     const runSpy = jest.spyOn(documentService, 'runZoneOcr')
     const toastSpy = jest.spyOn(toastService, 'showInfo')
+    const modalSpy = jest.spyOn(modalService, 'open')
 
     runSpy.mockReturnValueOnce(of({ status: 'completed', results: [] }))
     component.runZoneOcr()
+    modalSpy.mock.results[0].value.componentInstance.confirmClicked.emit()
+    expect(runSpy).toHaveBeenCalledWith(doc.id, null)
     expect(toastSpy).toHaveBeenLastCalledWith(
       'Zone OCR found no fields to fill.'
     )
@@ -1953,6 +1964,7 @@ describe('DocumentDetailComponent', () => {
       })
     )
     component.runZoneOcr()
+    modalSpy.mock.results[1].value.componentInstance.confirmClicked.emit()
     expect(toastSpy).toHaveBeenLastCalledWith('Filled 1 of 1 fields.')
   })
 
@@ -1988,13 +2000,14 @@ describe('DocumentDetailComponent', () => {
     component.runZoneOcr()
     modalSpy.mock.results[0].value.componentInstance.confirmClicked.emit()
 
-    expect(runSpy).toHaveBeenCalledWith(doc.id)
+    expect(runSpy).toHaveBeenCalledWith(doc.id, null)
     expect(component.zoneOcrRunning()).toBe(true)
     expect(component.networkActive()).toBe(true)
     const saveSpy = jest.spyOn(documentService, 'patch')
     component.save()
     expect(saveSpy).not.toHaveBeenCalled()
     component.runZoneOcr()
+    expect(modalSpy).toHaveBeenCalledTimes(1)
     expect(runSpy).toHaveBeenCalledTimes(1)
     pending.error(new Error('failed'))
     expect(component.zoneOcrRunning()).toBe(false)
@@ -2008,8 +2021,10 @@ describe('DocumentDetailComponent', () => {
     const pending = new Subject<any>()
     jest.spyOn(documentService, 'runZoneOcr').mockReturnValue(pending)
     const loadSpy = jest.spyOn(component as any, 'loadDocument')
+    const modalSpy = jest.spyOn(modalService, 'open')
 
     component.runZoneOcr()
+    modalSpy.mock.results[0].value.componentInstance.confirmClicked.emit()
     component.documentId.set(99)
     pending.next({ results: [] })
 
@@ -2048,8 +2063,10 @@ describe('DocumentDetailComponent', () => {
       .mockReturnValue(throwError(() => new Error('nope')))
     const loadSpy = jest.spyOn(component as any, 'loadDocument')
     const errorSpy = jest.spyOn(toastService, 'showError')
+    const modalSpy = jest.spyOn(modalService, 'open')
 
     component.runZoneOcr()
+    modalSpy.mock.results[0].value.componentInstance.confirmClicked.emit()
 
     expect(errorSpy).toHaveBeenCalledWith(
       'Error running zone OCR.',

src-ui/src/app/components/document-detail/document-detail.component.ts

@@ -105,6 +105,7 @@ import { DocumentDetailFieldID } from '../admin/settings/settings.component'
 import { ConfirmDialogComponent } from '../common/confirm-dialog/confirm-dialog.component'
 import { PasswordRemovalConfirmDialogComponent } from '../common/confirm-dialog/password-removal-confirm-dialog/password-removal-confirm-dialog.component'
 import { ReprocessConfirmDialogComponent } from '../common/confirm-dialog/reprocess-confirm-dialog/reprocess-confirm-dialog.component'
+import { ZoneOcrConfirmDialogComponent } from '../common/confirm-dialog/zone-ocr-confirm-dialog/zone-ocr-confirm-dialog.component'
 import { CustomFieldsDropdownComponent } from '../common/custom-fields-dropdown/custom-fields-dropdown.component'
 import { CorrespondentEditDialogComponent } from '../common/edit-dialog/correspondent-edit-dialog/correspondent-edit-dialog.component'
 import { DocumentTypeEditDialogComponent } from '../common/edit-dialog/document-type-edit-dialog/document-type-edit-dialog.component'
@@ -1565,34 +1566,34 @@ export class DocumentDetailComponent
   runZoneOcr() {
     if (this.networkActive()) return
     const documentId = this.documentId()
-    if (!this.hasLocalEdits(this.document())) {
-      this.executeZoneOcr(documentId)
-      return
-    }
-
-    const modal = this.modalService.open(ConfirmDialogComponent, {
+    const modal = this.modalService.open(ZoneOcrConfirmDialogComponent, {
       backdrop: 'static',
     })
-    modal.componentInstance.title = $localize`Unsaved Changes`
-    modal.componentInstance.messageBold = $localize`You have unsaved changes.`
-    modal.componentInstance.message = $localize`Running Zone OCR will discard them.`
-    modal.componentInstance.btnClass = 'btn-warning'
-    modal.componentInstance.btnCaption = $localize`Run Zone OCR`
-    modal.componentInstance.confirmClicked
+    const dialog = modal.componentInstance as ZoneOcrConfirmDialogComponent
+    dialog.title = $localize`Run Zone OCR`
+    dialog.btnCaption = $localize`Run Zone OCR`
+    if (this.hasLocalEdits(this.document())) {
+      dialog.messageBold = $localize`You have unsaved changes.`
+      dialog.message = $localize`Running Zone OCR will discard them.`
+      dialog.btnClass = 'btn-warning'
+    } else {
+      dialog.message = $localize`Fields filled by the template will be overwritten.`
+    }
+    dialog.confirmClicked
       .pipe(first(), takeUntil(this.unsubscribeNotifier))
       .subscribe(() => {
         modal.close()
         if (this.documentId() === documentId && !this.networkActive()) {
-          this.executeZoneOcr(documentId)
+          this.executeZoneOcr(documentId, dialog.template)
         }
       })
   }
 
-  private executeZoneOcr(documentId: number) {
+  private executeZoneOcr(documentId: number, templateId: number | null) {
     this.zoneOcrRunning.set(true)
     this.networkActive.set(true)
     this.documentsService
-      .runZoneOcr(documentId)
+      .runZoneOcr(documentId, templateId)
       .pipe(takeUntil(this.unsubscribeNotifier))
       .subscribe({
         next: (response) => {

src-ui/src/app/services/rest/document.service.spec.ts

@@ -563,6 +563,20 @@ describe(`DocumentService`, () => {
 
     req.flush('task-id')
   })
+
+  it('should call appropriate api endpoint for running zone OCR', () => {
+    const url = `${environment.apiBaseUrl}${endpoint}/${documents[0].id}/run-zone-ocr/`
+    subscription = service.runZoneOcr(documents[0].id).subscribe()
+    let req = httpTestingController.expectOne(url)
+    expect(req.request.method).toEqual('POST')
+    expect(req.request.body).toEqual({})
+    req.flush({ status: 'completed', results: [] })
+
+    subscription = service.runZoneOcr(documents[0].id, 3).subscribe()
+    req = httpTestingController.expectOne(url)
+    expect(req.request.body).toEqual({ template: 3 })
+    req.flush({ status: 'completed', results: [] })
+  })
 })
 
 it('should construct sort fields respecting permissions', () => {

src-ui/src/app/services/rest/document.service.ts

@@ -367,10 +367,13 @@ export class DocumentService extends AbstractPaperlessService<Document> {
     })
   }
 
-  runZoneOcr(id: number): Observable<OcrZoneRunResponse> {
+  runZoneOcr(
+    id: number,
+    templateId: number | null = null
+  ): Observable<OcrZoneRunResponse> {
     return this.http.post<OcrZoneRunResponse>(
       this.getResourceUrl(id, 'run-zone-ocr'),
-      {}
+      templateId ? { template: templateId } : {}
     )
   }