Pull out the zone list into a sub-component

src-ui/src/app/components/manage/ocr-templates/ocr-template-editor/ocr-template-editor-zone-list/ocr-template-editor-zone-list.component.html

@@ -0,0 +1,34 @@
+@if (zones.length === 0) {
+  <p class="text-muted" i18n>
+    No zones defined. Load a document preview and draw rectangles to add zones.
+  </p>
+}
+
+<div class="list-group">
+  @for (zone of zones; track $index; let i = $index) {
+    <div
+      class="list-group-item list-group-item-action d-flex justify-content-between align-items-center"
+      [style.box-shadow]="selectedZoneIndex === i ? 'inset 3px 0 0 0 var(--bs-primary)' : null"
+    >
+      <div class="flex-grow-1" role="button" style="cursor: pointer;" (click)="zoneSelected.emit(i)">
+        <div>
+          <strong [class.text-primary]="selectedZoneIndex === i">
+            {{ zone.name }}
+          </strong>
+        </div>
+        <div class="small text-muted">
+          {{ getZoneTargetName(zone) }} - {{ zone.width }}x{{ zone.height }}px
+          <ng-container i18n>p.</ng-container>{{ zonePage(zone) }}
+        </div>
+      </div>
+      <div class="btn-group">
+        <button class="btn btn-sm btn-outline-secondary" type="button" (click)="zoneSelected.emit(i)" title="Edit" i18n-title>
+          <i-bs name="pencil"></i-bs>
+        </button>
+        <button class="btn btn-sm btn-outline-danger" type="button" (click)="zoneRemoved.emit(i)" title="Delete" i18n-title>
+          <i-bs name="trash"></i-bs>
+        </button>
+      </div>
+    </div>
+  }
+</div>

src-ui/src/app/components/manage/ocr-templates/ocr-template-editor/ocr-template-editor-zone-list/ocr-template-editor-zone-list.component.spec.ts

@@ -0,0 +1,72 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
+import { CustomField } from 'src/app/data/custom-field'
+import { OcrTemplateZone } from 'src/app/data/ocr-template'
+import { OcrTemplateEditorZoneListComponent } from './ocr-template-editor-zone-list.component'
+
+function zone(overrides: Partial<OcrTemplateZone> = {}): OcrTemplateZone {
+  return {
+    name: 'Zone 1',
+    target: 'custom_field',
+    custom_field: 7,
+    x: 10,
+    y: 20,
+    width: 30,
+    height: 40,
+    page: 1,
+    ocr_language: 'eng',
+    transform: 'strip',
+    validation_regex: '',
+    order: 0,
+    ...overrides,
+  }
+}
+
+describe('OcrTemplateEditorZoneListComponent', () => {
+  let fixture: ComponentFixture<OcrTemplateEditorZoneListComponent>
+  let component: OcrTemplateEditorZoneListComponent
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [
+        OcrTemplateEditorZoneListComponent,
+        NgxBootstrapIconsModule.pick(allIcons),
+      ],
+    }).compileComponents()
+
+    fixture = TestBed.createComponent(OcrTemplateEditorZoneListComponent)
+    component = fixture.componentInstance
+  })
+
+  it('shows empty state when no zones are defined', () => {
+    fixture.detectChanges()
+
+    expect(fixture.nativeElement.textContent).toContain('No zones defined')
+  })
+
+  it('renders zone target, size, and page', () => {
+    component.zones = [zone()]
+    component.customFields = [{ id: 7, name: 'Invoice Number' } as CustomField]
+    fixture.detectChanges()
+
+    const text = fixture.nativeElement.textContent
+    expect(text).toContain('Zone 1')
+    expect(text).toContain('Invoice Number')
+    expect(text).toContain('30x40px')
+    expect(text).toContain('p.1')
+  })
+
+  it('emits select and remove events', () => {
+    component.zones = [zone()]
+    const selectSpy = jest.spyOn(component.zoneSelected, 'emit')
+    const removeSpy = jest.spyOn(component.zoneRemoved, 'emit')
+    fixture.detectChanges()
+
+    const buttons = fixture.nativeElement.querySelectorAll('button')
+    buttons[0].click()
+    buttons[1].click()
+
+    expect(selectSpy).toHaveBeenCalledWith(0)
+    expect(removeSpy).toHaveBeenCalledWith(0)
+  })
+})

src-ui/src/app/components/manage/ocr-templates/ocr-template-editor/ocr-template-editor-zone-list/ocr-template-editor-zone-list.component.ts

@@ -0,0 +1,41 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core'
+import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
+import { CustomField } from 'src/app/data/custom-field'
+import { OCR_BUILTIN_TARGETS, OcrTemplateZone } from 'src/app/data/ocr-template'
+import { getZonePage } from '../zone-geometry'
+
+@Component({
+  selector: 'pngx-ocr-template-zone-list',
+  imports: [NgxBootstrapIconsModule],
+  templateUrl: './ocr-template-editor-zone-list.component.html',
+})
+export class OcrTemplateEditorZoneListComponent {
+  @Input() zones: OcrTemplateZone[] = []
+  @Input() selectedZoneIndex: number | null = null
+  @Input() previewPage = 0
+  @Input() previewPageCount: number | null = null
+  @Input() customFields: CustomField[] = []
+
+  @Output() zoneSelected = new EventEmitter<number>()
+  @Output() zoneRemoved = new EventEmitter<number>()
+
+  zonePage(zone: OcrTemplateZone): number {
+    return getZonePage(zone, this.previewPage, this.previewPageCount)
+  }
+
+  getZoneTargetName(zone: OcrTemplateZone): string {
+    const target = zone.target || 'custom_field'
+    if (target === 'custom_field') {
+      return zone.custom_field
+        ? this.getCustomFieldName(zone.custom_field)
+        : $localize`(no field)`
+    }
+    return OCR_BUILTIN_TARGETS.find((t) => t.id === target)?.name ?? target
+  }
+
+  private getCustomFieldName(id: number): string {
+    return (
+      this.customFields.find((field) => field.id === id)?.name ?? `Field #${id}`
+    )
+  }
+}

src-ui/src/app/components/manage/ocr-templates/ocr-template-editor/ocr-template-editor.component.html

@@ -82,34 +82,15 @@
         <li ngbNavItem="zones">
           <a ngbNavLink><ng-container i18n>Zones</ng-container> <span class="badge bg-primary ms-2">{{ template.zones.length }}</span></a>
           <ng-template ngbNavContent>
-            @if (template.zones.length === 0) {
-              <p class="text-muted" i18n>
-                No zones defined. Load a document preview and draw rectangles to add zones.
-              </p>
-            }
-            <div class="list-group">
-              @for (zone of template.zones; track $index; let i = $index) {
-                <div
-                  class="list-group-item list-group-item-action d-flex justify-content-between align-items-center"
-                  [style.box-shadow]="selectedZoneIndex === i ? 'inset 3px 0 0 0 var(--bs-primary)' : null"
-                >
-                  <div class="flex-grow-1" role="button" style="cursor: pointer;" (click)="selectZone(i)">
-                    <div><strong [class.text-primary]="selectedZoneIndex === i">{{ zone.name }}</strong></div>
-                    <div class="small text-muted">
-                      {{ getZoneTargetName(zone) }} - {{ zone.width }}x{{ zone.height }}px  <ng-container i18n>p.</ng-container>{{ zonePage(zone) }}
-                    </div>
-                  </div>
-                  <div class="btn-group">
-                    <button class="btn btn-sm btn-outline-secondary" type="button" (click)="selectZone(i)" title="Edit" i18n-title>
-                      <i-bs name="pencil"></i-bs>
-                    </button>
-                    <button class="btn btn-sm btn-outline-danger" type="button" (click)="removeZone(i)" title="Delete" i18n-title>
-                      <i-bs name="trash"></i-bs>
-                    </button>
-                  </div>
-                </div>
-              }
-            </div>
+            <pngx-ocr-template-zone-list
+              [zones]="template.zones"
+              [selectedZoneIndex]="selectedZoneIndex"
+              [previewPage]="previewPage"
+              [previewPageCount]="previewPageCount"
+              [customFields]="customFields"
+              (zoneSelected)="selectZone($event)"
+              (zoneRemoved)="removeZone($event)"
+            ></pngx-ocr-template-zone-list>
           </ng-template>
         </li>
 

src-ui/src/app/components/manage/ocr-templates/ocr-template-editor/ocr-template-editor.component.ts

@@ -52,6 +52,7 @@ import { DocumentTypeService } from 'src/app/services/rest/document-type.service
 import { DocumentService } from 'src/app/services/rest/document.service'
 import { OcrTemplateService } from 'src/app/services/rest/ocr-template.service'
 import { ToastService } from 'src/app/services/toast.service'
+import { OcrTemplateEditorZoneListComponent } from './ocr-template-editor-zone-list/ocr-template-editor-zone-list.component'
 import {
   DisplayRect,
   DrawingRect,
@@ -86,6 +87,7 @@ type ActiveTab = 'settings' | 'zones' | 'zone'
     NgbTypeaheadModule,
     NgSelectModule,
     NgxBootstrapIconsModule,
+    OcrTemplateEditorZoneListComponent,
   ],
   templateUrl: './ocr-template-editor.component.html',
   styleUrls: ['./ocr-template-editor.component.scss'],