Fix: more signal-backed conversions

src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html

@@ -10,7 +10,7 @@
         [createRef]="createTag.bind(this)"
         (opened)="openTagsDropdown()"
         [(selectionModel)]="tagSelectionModel"
-        [documentCounts]="tagDocumentCounts"
+        [documentCounts]="tagDocumentCounts()"
         (apply)="setTags($event)"
         shortcutKey="t">
       </pngx-filterable-dropdown>
@@ -24,7 +24,7 @@
         [createRef]="createCorrespondent.bind(this)"
         (opened)="openCorrespondentDropdown()"
         [(selectionModel)]="correspondentSelectionModel"
-        [documentCounts]="correspondentDocumentCounts"
+        [documentCounts]="correspondentDocumentCounts()"
         (apply)="setCorrespondents($event)"
         shortcutKey="y">
       </pngx-filterable-dropdown>
@@ -38,7 +38,7 @@
         [createRef]="createDocumentType.bind(this)"
         (opened)="openDocumentTypeDropdown()"
         [(selectionModel)]="documentTypeSelectionModel"
-        [documentCounts]="documentTypeDocumentCounts"
+        [documentCounts]="documentTypeDocumentCounts()"
         (apply)="setDocumentTypes($event)"
         shortcutKey="u">
       </pngx-filterable-dropdown>
@@ -52,7 +52,7 @@
         [createRef]="createStoragePath.bind(this)"
         (opened)="openStoragePathDropdown()"
         [(selectionModel)]="storagePathsSelectionModel"
-        [documentCounts]="storagePathDocumentCounts"
+        [documentCounts]="storagePathDocumentCounts()"
         (apply)="setStoragePaths($event)"
         shortcutKey="i">
       </pngx-filterable-dropdown>
@@ -66,7 +66,7 @@
         [createRef]="createCustomField.bind(this)"
         (opened)="openCustomFieldsDropdown()"
         [(selectionModel)]="customFieldsSelectionModel"
-        [documentCounts]="customFieldDocumentCounts"
+        [documentCounts]="customFieldDocumentCounts()"
         extraButtonTitle="Set values"
         i18n-extraButtonTitle
         (extraButton)="setCustomFieldValues($event)"
@@ -124,11 +124,11 @@
       </div>
     </div>
     <div class="btn-group btn-group-sm">
-      <button class="btn btn-sm btn-outline-primary" [disabled]="awaitingDownload" (click)="downloadSelected()">
-        @if (!awaitingDownload) {
+      <button class="btn btn-sm btn-outline-primary" [disabled]="awaitingDownload()" (click)="downloadSelected()">
+        @if (!awaitingDownload()) {
           <i-bs name="arrow-down"></i-bs>
         }
-        @if (awaitingDownload) {
+        @if (awaitingDownload()) {
           <div class="spinner-border spinner-border-sm" role="status">
             <span class="visually-hidden">Preparing download...</span>
           </div>

src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.spec.ts

@@ -303,7 +303,7 @@ describe('BulkEditorComponent', () => {
     component.openDocumentTypeDropdown()
 
     expect(getSelectionDataSpy).not.toHaveBeenCalled()
-    expect(component.documentTypeDocumentCounts).toEqual(
+    expect(component.documentTypeDocumentCounts()).toEqual(
       selectionData.selected_document_types
     )
   })
@@ -320,7 +320,7 @@ describe('BulkEditorComponent', () => {
     component.openCorrespondentDropdown()
 
     expect(getSelectionDataSpy).not.toHaveBeenCalled()
-    expect(component.correspondentDocumentCounts).toEqual(
+    expect(component.correspondentDocumentCounts()).toEqual(
       selectionData.selected_correspondents
     )
   })
@@ -337,7 +337,7 @@ describe('BulkEditorComponent', () => {
     component.openStoragePathDropdown()
 
     expect(getSelectionDataSpy).not.toHaveBeenCalled()
-    expect(component.storagePathDocumentCounts).toEqual(
+    expect(component.storagePathDocumentCounts()).toEqual(
       selectionData.selected_storage_paths
     )
   })
@@ -354,7 +354,7 @@ describe('BulkEditorComponent', () => {
     component.openCustomFieldsDropdown()
 
     expect(getSelectionDataSpy).not.toHaveBeenCalled()
-    expect(component.customFieldDocumentCounts).toEqual(
+    expect(component.customFieldDocumentCounts()).toEqual(
       selectionData.selected_custom_fields
     )
   })

src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.ts

@@ -1,4 +1,11 @@
-import { Component, inject, Input, OnDestroy, OnInit } from '@angular/core'
+import {
+  Component,
+  inject,
+  Input,
+  OnDestroy,
+  OnInit,
+  signal,
+} from '@angular/core'
 import {
   FormControl,
   FormGroup,
@@ -101,12 +108,12 @@ export class BulkEditorComponent
   documentTypeSelectionModel = new FilterableDropdownSelectionModel()
   storagePathsSelectionModel = new FilterableDropdownSelectionModel()
   customFieldsSelectionModel = new FilterableDropdownSelectionModel(true)
-  tagDocumentCounts: SelectionDataItem[]
-  correspondentDocumentCounts: SelectionDataItem[]
-  documentTypeDocumentCounts: SelectionDataItem[]
-  storagePathDocumentCounts: SelectionDataItem[]
-  customFieldDocumentCounts: SelectionDataItem[]
-  awaitingDownload: boolean
+  readonly tagDocumentCounts = signal<SelectionDataItem[]>(undefined)
+  readonly correspondentDocumentCounts = signal<SelectionDataItem[]>(undefined)
+  readonly documentTypeDocumentCounts = signal<SelectionDataItem[]>(undefined)
+  readonly storagePathDocumentCounts = signal<SelectionDataItem[]>(undefined)
+  readonly customFieldDocumentCounts = signal<SelectionDataItem[]>(undefined)
+  readonly awaitingDownload = signal(false)
 
   unsubscribeNotifier: Subject<any> = new Subject()
 
@@ -365,8 +372,8 @@ export class BulkEditorComponent
   openTagsDropdown() {
     if (this.list.allSelected) {
       const selectionData = this.list.selectionData
-      this.tagDocumentCounts = selectionData?.selected_tags ?? []
-      this.applySelectionData(this.tagDocumentCounts, this.tagSelectionModel)
+      this.tagDocumentCounts.set(selectionData?.selected_tags ?? [])
+      this.applySelectionData(this.tagDocumentCounts(), this.tagSelectionModel)
       return
     }
 
@@ -374,7 +381,7 @@ export class BulkEditorComponent
       .getSelectionData(Array.from(this.list.selected))
       .pipe(first())
       .subscribe((s) => {
-        this.tagDocumentCounts = s.selected_tags
+        this.tagDocumentCounts.set(s.selected_tags)
         this.applySelectionData(s.selected_tags, this.tagSelectionModel)
       })
   }
@@ -382,10 +389,11 @@ export class BulkEditorComponent
   openDocumentTypeDropdown() {
     if (this.list.allSelected) {
       const selectionData = this.list.selectionData
-      this.documentTypeDocumentCounts =
+      this.documentTypeDocumentCounts.set(
         selectionData?.selected_document_types ?? []
+      )
       this.applySelectionData(
-        this.documentTypeDocumentCounts,
+        this.documentTypeDocumentCounts(),
         this.documentTypeSelectionModel
       )
       return
@@ -395,7 +403,7 @@ export class BulkEditorComponent
       .getSelectionData(Array.from(this.list.selected))
       .pipe(first())
       .subscribe((s) => {
-        this.documentTypeDocumentCounts = s.selected_document_types
+        this.documentTypeDocumentCounts.set(s.selected_document_types)
         this.applySelectionData(
           s.selected_document_types,
           this.documentTypeSelectionModel
@@ -406,10 +414,11 @@ export class BulkEditorComponent
   openCorrespondentDropdown() {
     if (this.list.allSelected) {
       const selectionData = this.list.selectionData
-      this.correspondentDocumentCounts =
+      this.correspondentDocumentCounts.set(
         selectionData?.selected_correspondents ?? []
+      )
       this.applySelectionData(
-        this.correspondentDocumentCounts,
+        this.correspondentDocumentCounts(),
         this.correspondentSelectionModel
       )
       return
@@ -419,7 +428,7 @@ export class BulkEditorComponent
       .getSelectionData(Array.from(this.list.selected))
       .pipe(first())
       .subscribe((s) => {
-        this.correspondentDocumentCounts = s.selected_correspondents
+        this.correspondentDocumentCounts.set(s.selected_correspondents)
         this.applySelectionData(
           s.selected_correspondents,
           this.correspondentSelectionModel
@@ -430,10 +439,11 @@ export class BulkEditorComponent
   openStoragePathDropdown() {
     if (this.list.allSelected) {
       const selectionData = this.list.selectionData
-      this.storagePathDocumentCounts =
+      this.storagePathDocumentCounts.set(
         selectionData?.selected_storage_paths ?? []
+      )
       this.applySelectionData(
-        this.storagePathDocumentCounts,
+        this.storagePathDocumentCounts(),
         this.storagePathsSelectionModel
       )
       return
@@ -443,7 +453,7 @@ export class BulkEditorComponent
       .getSelectionData(Array.from(this.list.selected))
       .pipe(first())
       .subscribe((s) => {
-        this.storagePathDocumentCounts = s.selected_storage_paths
+        this.storagePathDocumentCounts.set(s.selected_storage_paths)
         this.applySelectionData(
           s.selected_storage_paths,
           this.storagePathsSelectionModel
@@ -454,10 +464,11 @@ export class BulkEditorComponent
   openCustomFieldsDropdown() {
     if (this.list.allSelected) {
       const selectionData = this.list.selectionData
-      this.customFieldDocumentCounts =
+      this.customFieldDocumentCounts.set(
         selectionData?.selected_custom_fields ?? []
+      )
       this.applySelectionData(
-        this.customFieldDocumentCounts,
+        this.customFieldDocumentCounts(),
         this.customFieldsSelectionModel
       )
       return
@@ -467,7 +478,7 @@ export class BulkEditorComponent
       .getSelectionData(Array.from(this.list.selected))
       .pipe(first())
       .subscribe((s) => {
-        this.customFieldDocumentCounts = s.selected_custom_fields
+        this.customFieldDocumentCounts.set(s.selected_custom_fields)
         this.applySelectionData(
           s.selected_custom_fields,
           this.customFieldsSelectionModel
@@ -876,7 +887,7 @@ export class BulkEditorComponent
   }
 
   downloadSelected() {
-    this.awaitingDownload = true
+    this.awaitingDownload.set(true)
     let downloadFileType: string =
       this.downloadForm.get('downloadFileTypeArchive').value &&
       this.downloadForm.get('downloadFileTypeOriginals').value
@@ -893,7 +904,7 @@ export class BulkEditorComponent
       .pipe(first())
       .subscribe((result: any) => {
         saveAs(result, 'documents.zip')
-        this.awaitingDownload = false
+        this.awaitingDownload.set(false)
       })
   }
 

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

@@ -115,7 +115,7 @@
 </pngx-page-header>
 
 <div class="row sticky-top py-3 mt-n2 mt-md-n3 bg-body">
-  <pngx-filter-editor [hidden]="isBulkEditing" [disabled]="isBulkEditing" [filterRules]="list.filterRules" (filterRulesChange)="onFilterRulesChange($event)" (resetFilterRules)="onFilterRulesReset($event)" [unmodifiedFilterRules]="unmodifiedFilterRules" [selectionData]="list.selectionData" #filterEditor></pngx-filter-editor>
+  <pngx-filter-editor [hidden]="isBulkEditing" [disabled]="isBulkEditing" [filterRules]="list.filterRules" (filterRulesChange)="onFilterRulesChange($event)" (resetFilterRules)="onFilterRulesReset($event)" [unmodifiedFilterRules]="unmodifiedFilterRules()" [selectionData]="list.selectionData" #filterEditor></pngx-filter-editor>
   <pngx-bulk-editor [hidden]="!isBulkEditing" [disabled]="!isBulkEditing"></pngx-bulk-editor>
 </div>
 

src-ui/src/app/components/document-list/document-list.component.ts

@@ -5,6 +5,7 @@ import {
   OnDestroy,
   OnInit,
   QueryList,
+  signal,
   ViewChild,
   ViewChildren,
 } from '@angular/core'
@@ -149,7 +150,7 @@ export class DocumentListComponent
     )
   }
 
-  unmodifiedFilterRules: FilterRule[] = []
+  readonly unmodifiedFilterRules = signal<FilterRule[]>([])
   private unmodifiedSavedView: SavedView
   private activeSavedView: SavedView | null = null
 
@@ -299,7 +300,7 @@ export class DocumentListComponent
           this.savedViewService.setDocumentCount(view, this.list.collectionSize)
         })
         this.updateDisplayCustomFields()
-        this.unmodifiedFilterRules = view.filter_rules
+        this.unmodifiedFilterRules.set(view.filter_rules)
       })
 
     this.route.queryParamMap
@@ -316,7 +317,7 @@ export class DocumentListComponent
           this.activeSavedView = null
           this.list.activateSavedView(null)
           this.list.loadFromQueryParams(queryParams)
-          this.unmodifiedFilterRules = []
+          this.unmodifiedFilterRules.set([])
         }
       })
 
@@ -415,7 +416,7 @@ export class DocumentListComponent
             this.toastService.showInfo(
               $localize`View "${this.list.activeSavedViewTitle}" saved successfully.`
             )
-            this.unmodifiedFilterRules = this.list.filterRules
+            this.unmodifiedFilterRules.set(this.list.filterRules)
           },
           error: (err) => {
             this.toastService.showError(

src-ui/src/app/components/document-list/filter-editor/filter-editor.component.html

@@ -80,7 +80,7 @@
           shortcutKey="i"></pngx-filterable-dropdown>
         }
 
-        @if (permissionsService.currentUserCan(PermissionAction.View, PermissionType.CustomField) && customFields.length > 0) {
+        @if (permissionsService.currentUserCan(PermissionAction.View, PermissionType.CustomField) && customFields().length > 0) {
           <pngx-custom-fields-query-dropdown class="flex-fill fade" [class.show]="show()" title="Custom fields" icon="ui-radios" i18n-title
           [(selectionModel)]="customFieldQueriesModel"
           (selectionModelChange)="updateRules()"

src-ui/src/app/components/document-list/filter-editor/filter-editor.component.ts

@@ -1,5 +1,6 @@
 import {
   AfterViewInit,
+  ChangeDetectorRef,
   Component,
   ElementRef,
   EventEmitter,
@@ -9,6 +10,7 @@ import {
   Output,
   ViewChild,
   inject,
+  signal,
 } from '@angular/core'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import {
@@ -349,7 +351,7 @@ export class FilterEditorComponent
   @ViewChild('textFilterInput')
   textFilterInput: ElementRef
 
-  customFields: CustomField[] = []
+  readonly customFields = signal<CustomField[]>([])
 
   tagDocumentCounts: SelectionDataItem[]
   correspondentDocumentCounts: SelectionDataItem[]
@@ -514,6 +516,7 @@ export class FilterEditorComponent
           this.documentService.get(this._moreLikeId).subscribe((result) => {
             this._moreLikeDoc = result
             this._textFilter = result.title
+            this.changeDetector.markForCheck()
           })
           break
         case FILTER_CREATED_AFTER:
@@ -1162,6 +1165,7 @@ export class FilterEditorComponent
 
   private loadingCountTotal: number = 0
   private loadingCount: number = 0
+  private readonly changeDetector = inject(ChangeDetectorRef)
 
   private maybeCompleteLoading() {
     this.loadingCount++
@@ -1229,7 +1233,7 @@ export class FilterEditorComponent
     ) {
       this.loadingCountTotal++
       this.customFieldService.listAll().subscribe((result) => {
-        this.customFields = result.results
+        this.customFields.set(result.results)
         this.maybeCompleteLoading()
       })
     }