Title suggestion ui

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 | safeHtml"></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.value = 'foo'
+    input.dispatchEvent(new Event('input'))
-    // input.dispatchEvent(new Event('change'))
+    fixture.detectChanges()
-    // fixture.detectChanges()
+    expect(component.value).toBe('foo')
-    // expect(component.value).toEqual('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 { SafeHtmlPipe } from 'src/app/pipes/safehtml.pipe'
 import { AbstractInputComponent } from '../abstract-input'
@@ -24,6 +25,7 @@ import { AbstractInputComponent } from '../abstract-input'
     ReactiveFormsModule,
     SafeHtmlPipe,
     NgxBootstrapIconsModule,
+    RouterLink,
   ],
 })
 export class TextComponent extends AbstractInputComponent<string> {
@@ -33,7 +35,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)
+  }
 }

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

@@ -127,7 +127,7 @@
           <a ngbNavLink i18n>Details</a>
           <ng-template ngbNavContent>
             <div>
-              <pngx-input-text #inputTitle i18n-title title="Title" formControlName="title" [horizontal]="true" (keyup)="titleKeyUp($event)" [error]="error?.title"></pngx-input-text>
+              <pngx-input-text #inputTitle i18n-title title="Title" formControlName="title" [horizontal]="true" [suggestion]="suggestions?.title" (keyup)="titleKeyUp($event)" [error]="error?.title"></pngx-input-text>
               <pngx-input-number i18n-title title="Archive serial number" [error]="error?.archive_serial_number" [horizontal]="true" formControlName='archive_serial_number'></pngx-input-number>
               <pngx-input-date i18n-title title="Date created" formControlName="created" [suggestions]="suggestions?.dates" [showFilter]="true" [horizontal]="true" (filterDocuments)="filterDocuments($event)"
               [error]="error?.created"></pngx-input-date>

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

@@ -156,6 +156,16 @@ describe('DocumentDetailComponent', () => {
         {
           provide: TagService,
           useValue: {
+            getCachedMany: (ids: number[]) =>
+              of(
+                ids.map((id) => ({
+                  id,
+                  name: `Tag${id}`,
+                  is_inbox_tag: true,
+                  color: '#ff0000',
+                  text_color: '#000000',
+                }))
+              ),
             listAll: () =>
               of({
                 count: 3,