Feature: Paperless AI (#10319)

src-ui/src/app/components/common/input/text/text.component.html

@@ -15,6 +15,12 @@
         @if (hint) {
           <small class="form-text text-muted" [innerHTML]="hint"></small>
         }
+        @if (getSuggestion()?.length > 0) {
+          <small>
+            <span i18n>Suggestion:</span>&nbsp;
+            <a (click)="applySuggestion(s)" [routerLink]="[]">{{getSuggestion()}}</a>&nbsp;
+          </small>
+        }
         <div class="invalid-feedback position-absolute top-100">
           {{error}}
         </div>

src-ui/src/app/components/common/input/text/text.component.spec.ts

@@ -26,10 +26,20 @@ describe('TextComponent', () => {
 
   it('should support use of input field', () => {
     expect(component.value).toBeUndefined()
-    // TODO: why doesn't this work?
-    // input.value = 'foo'
-    // input.dispatchEvent(new Event('change'))
-    // fixture.detectChanges()
-    // expect(component.value).toEqual('foo')
+    input.value = 'foo'
+    input.dispatchEvent(new Event('input'))
+    fixture.detectChanges()
+    expect(component.value).toBe('foo')
+  })
+
+  it('should support suggestion', () => {
+    component.value = 'foo'
+    component.suggestion = 'foo'
+    expect(component.getSuggestion()).toBe('')
+    component.value = 'bar'
+    expect(component.getSuggestion()).toBe('foo')
+    component.applySuggestion()
+    fixture.detectChanges()
+    expect(component.value).toBe('foo')
   })
 })

src-ui/src/app/components/common/input/text/text.component.ts

@@ -4,6 +4,7 @@ import {
   NG_VALUE_ACCESSOR,
   ReactiveFormsModule,
 } from '@angular/forms'
+import { RouterLink } from '@angular/router'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import { AbstractInputComponent } from '../abstract-input'
 
@@ -18,7 +19,12 @@ import { AbstractInputComponent } from '../abstract-input'
   selector: 'pngx-input-text',
   templateUrl: './text.component.html',
   styleUrls: ['./text.component.scss'],
-  imports: [FormsModule, ReactiveFormsModule, NgxBootstrapIconsModule],
+  imports: [
+    FormsModule,
+    ReactiveFormsModule,
+    NgxBootstrapIconsModule,
+    RouterLink,
+  ],
 })
 export class TextComponent extends AbstractInputComponent<string> {
   @Input()
@@ -27,7 +33,19 @@ export class TextComponent extends AbstractInputComponent<string> {
   @Input()
   placeholder: string = ''
 
+  @Input()
+  suggestion: string = ''
+
   constructor() {
     super()
   }
+
+  getSuggestion() {
+    return this.value !== this.suggestion ? this.suggestion : ''
+  }
+
+  applySuggestion() {
+    this.value = this.suggestion
+    this.onChange(this.value)
+  }
 }