Automatically update the combine string when changing zone name

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

@@ -74,7 +74,7 @@
                 }
               }
 
-              <pngx-input-text [(ngModel)]="zone.name" title="Name" i18n-title></pngx-input-text>
+              <pngx-input-text [ngModel]="zone.name" (ngModelChange)="renameZone(zone, $event)" title="Name" i18n-title></pngx-input-text>
 
               <pngx-input-select
                 [items]="fieldItems()"

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

@@ -306,6 +306,53 @@ describe('OcrTemplateEditorComponent', () => {
     })
   })
 
+  it("updates only exact tokens in the renamed zone's field format", () => {
+    const first = { ...zone(), name: 'First [value]' }
+    component.template.zones = [first, { ...zone(), name: 'Second' }]
+    component.template.combine_formats = {
+      '1': 'First [value]: {First [value]} / { First [value] } / {Second} / {First [value] extra}',
+      '2': '{First [value]}',
+    }
+
+    component.renameZone(first, 'Invoice number')
+
+    expect(first.name).toBe('Invoice number')
+    expect(component.template.combine_formats).toEqual({
+      '1': 'First [value]: {Invoice number} / {Invoice number} / {Second} / {First [value] extra}',
+      '2': '{First [value]}',
+    })
+  })
+
+  it('keeps tokens in sync when a name is cleared and entered again', () => {
+    const first = { ...zone(), name: 'First' }
+    component.template.combine_formats = { '1': '{First} - {Second}' }
+
+    component.renameZone(first, '')
+    component.renameZone(first, 'Renamed')
+
+    expect(component.getCombineFormat(first)).toBe('{Renamed} - {Second}')
+  })
+
+  it('updates built-in field formats and leaves automatic combining implicit', () => {
+    const titleZone = {
+      ...zone(),
+      name: 'First',
+      target: 'title' as const,
+      custom_field: null,
+    }
+    component.template.combine_formats = { title: '{First} / {Second}' }
+
+    component.renameZone(titleZone, 'Renamed')
+    expect(component.template.combine_formats.title).toBe(
+      '{Renamed} / {Second}'
+    )
+
+    const customZone = zone()
+    component.renameZone(customZone, 'New name')
+    expect(component.template.combine_formats['1']).toBeUndefined()
+    expect(customZone.name).toBe('New name')
+  })
+
   it('tracks unsaved changes against the last loaded or saved state', () => {
     fixture.detectChanges()
     expect(component.isDirty$()).toBe(false)

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

@@ -34,8 +34,8 @@ import {
   takeUntil,
   tap,
 } from 'rxjs'
-import { EditDialogMode } from 'src/app/components/common/edit-dialog/edit-dialog.component'
 import { CustomFieldEditDialogComponent } from 'src/app/components/common/edit-dialog/custom-field-edit-dialog/custom-field-edit-dialog.component'
+import { EditDialogMode } from 'src/app/components/common/edit-dialog/edit-dialog.component'
 import { NumberComponent } from 'src/app/components/common/input/number/number.component'
 import { SelectComponent } from 'src/app/components/common/input/select/select.component'
 import { SwitchComponent } from 'src/app/components/common/input/switch/switch.component'
@@ -980,6 +980,20 @@ export class OcrTemplateEditorComponent
     return this.zonesForField(zone).length > 1
   }
 
+  renameZone(zone: OcrTemplateZone, name: string) {
+    const oldName = zone.name.trim()
+    const format = this.getCombineFormat(zone)
+    if (format) {
+      this.setCombineFormat(
+        zone,
+        format.replace(/\{([^{}]*)\}/g, (token, tokenName: string) =>
+          tokenName.trim() === oldName ? `{${name}}` : token
+        )
+      )
+    }
+    zone.name = name
+  }
+
   getCombineFormat(zone: OcrTemplateZone): string {
     return this.template.combine_formats?.[getZoneFieldKey(zone)] ?? ''
   }