Fix: more signal-backed conversions

src-ui/src/app/components/common/input/custom-fields-values/custom-fields-values.component.ts

@@ -5,6 +5,7 @@ import {
   inject,
   Input,
   Output,
+  signal,
 } from '@angular/core'
 import {
   FormsModule,
@@ -63,11 +64,11 @@ export class CustomFieldsValuesComponent extends AbstractInputComponent<Object>
 
     super()
     customFieldsService.listAll().subscribe((items) => {
-      this.fields = items.results
+      this.fields.set(items.results)
     })
   }
 
-  private fields: CustomField[]
+  private readonly fields = signal<CustomField[]>([])
 
   private _selectedFields: number[]
 
@@ -90,6 +91,6 @@ export class CustomFieldsValuesComponent extends AbstractInputComponent<Object>
   public removeSelectedField: EventEmitter<number> = new EventEmitter<number>()
 
   public getCustomField(id: number): CustomField {
-    return this.fields.find((field) => field.id === id)
+    return this.fields().find((field) => field.id === id)
   }
 }

src-ui/src/app/components/common/input/document-link/document-link.component.html

@@ -33,7 +33,7 @@
     [compareWith]="compareDocuments"
     [trackByFn]="trackByFn"
     [minTermLength]="2"
-    [loading]="loading"
+    [loading]="loading()"
     [typeahead]="documentsInput$"
     (mousedown)="$event.stopImmediatePropagation()"
     (change)="onChange(selectedDocumentIDs)">

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

@@ -2,7 +2,11 @@ import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
 import { provideHttpClientTesting } from '@angular/common/http/testing'
 import { ComponentFixture, TestBed } from '@angular/core/testing'
 import { NG_VALUE_ACCESSOR } from '@angular/forms'
-import { of, throwError } from 'rxjs'
+import { By } from '@angular/platform-browser'
+import { provideRouter } from '@angular/router'
+import { NgSelectComponent } from '@ng-select/ng-select'
+import { allIcons, NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
+import { of, Subject, throwError } from 'rxjs'
 import { FILTER_SIMPLE_TITLE } from 'src/app/data/filter-rule-type'
 import { DocumentService } from 'src/app/services/rest/document.service'
 import { DocumentLinkComponent } from './document-link.component'
@@ -33,10 +37,11 @@ describe('DocumentLinkComponent', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [DocumentLinkComponent],
+      imports: [DocumentLinkComponent, NgxBootstrapIconsModule.pick(allIcons)],
       providers: [
         provideHttpClient(withInterceptorsFromDi()),
         provideHttpClientTesting(),
+        provideRouter([]),
       ],
     })
     documentService = TestBed.inject(DocumentService)
@@ -60,6 +65,25 @@ describe('DocumentLinkComponent', () => {
     expect(getSpy).toHaveBeenCalled()
   })
 
+  it('should render loading and selected documents after async updates', async () => {
+    const result$ = new Subject<any>()
+    jest.spyOn(documentService, 'getFew').mockReturnValue(result$)
+
+    component.writeValue([1])
+    await fixture.whenStable()
+
+    const select = fixture.debugElement.query(By.directive(NgSelectComponent))
+      .componentInstance as NgSelectComponent
+    expect(select.loading()).toBe(true)
+
+    result$.next({ count: 1, all: [1], results: [documents[0]] })
+    result$.complete()
+    await fixture.whenStable()
+
+    expect(select.loading()).toBe(false)
+    expect(fixture.nativeElement.textContent).toContain(documents[0].title)
+  })
+
   it('shoud maintain ordering of selected documents', () => {
     const getSpy = jest.spyOn(documentService, 'getFew')
     getSpy.mockImplementation((ids) => {

src-ui/src/app/components/common/input/document-link/document-link.component.ts

@@ -6,6 +6,7 @@ import {
   Input,
   OnDestroy,
   OnInit,
+  signal,
 } from '@angular/core'
 import {
   FormsModule,
@@ -63,7 +64,7 @@ export class DocumentLinkComponent
 
   documentsInput$ = new Subject<string>()
   foundDocuments$: Observable<Document[]>
-  loading = false
+  readonly loading = signal(false)
   selectedDocuments: Document[] = []
 
   private unsubscribeNotifier: Subject<any> = new Subject()
@@ -93,12 +94,12 @@ export class DocumentLinkComponent
       this.selectedDocuments = []
       super.writeValue([])
     } else {
-      this.loading = true
+      this.loading.set(true)
       this.documentsService
         .getFew(documentIDs, { fields: 'id,title' })
         .pipe(takeUntil(this.unsubscribeNotifier))
         .subscribe((documentResults) => {
-          this.loading = false
+          this.loading.set(false)
           this.selectedDocuments = documentIDs.map(
             (id) => documentResults.results.find((d) => d.id === id) ?? {}
           )
@@ -113,7 +114,7 @@ export class DocumentLinkComponent
       this.documentsInput$.pipe(
         distinctUntilChanged(),
         takeUntil(this.unsubscribeNotifier),
-        tap(() => (this.loading = true)),
+        tap(() => this.loading.set(true)),
         switchMap((title) =>
           this.documentsService
             .listFiltered(
@@ -133,7 +134,7 @@ export class DocumentLinkComponent
                 )
               ),
               catchError(() => of([])), // empty on error
-              tap(() => (this.loading = false))
+              tap(() => this.loading.set(false))
             )
         )
       )

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

@@ -37,6 +37,7 @@ export class NumberComponent extends AbstractInputComponent<number> {
     this.documentService.getNextAsn().subscribe((nextAsn) => {
       this.value = nextAsn
       this.onChange(this.value)
+      this.changeDetector.markForCheck()
     })
   }