Fix/chore: refactor some signal-backed conversion technical debt (#13902)

src-ui/src/app/components/common/edit-dialog/workflow-edit-dialog/workflow-edit-dialog.component.spec.ts

@@ -196,6 +196,16 @@ describe('WorkflowEditDialogComponent', () => {
     fixture.detectChanges()
   })
 
+  function setActionSettings({
+    email = true,
+    remoteOcr = true,
+    ai = true,
+  } = {}) {
+    settingsService.set(SETTINGS_KEYS.EMAIL_ENABLED, email)
+    settingsService.set(SETTINGS_KEYS.REMOTE_OCR_CONFIGURED, remoteOcr)
+    settingsService.set(SETTINGS_KEYS.AI_ENABLED, ai)
+  }
+
   it('should support create and edit modes, support adding triggers and actions on new workflow', () => {
     component.dialogMode.set(EditDialogMode.CREATE)
     const createTitleSpy = jest.spyOn(component, 'getCreateTitle')
@@ -218,7 +228,7 @@ describe('WorkflowEditDialogComponent', () => {
   })
 
   it('should return source options, type options, type name, schedule date field options', () => {
-    jest.spyOn(settingsService, 'get').mockReturnValue(true)
+    setActionSettings()
     component.ngOnInit()
     expect(component.sourceOptions).toEqual(DOCUMENT_SOURCE_OPTIONS)
     expect(component.triggerTypeOptions).toEqual(WORKFLOW_TYPE_OPTIONS)
@@ -242,7 +252,7 @@ describe('WorkflowEditDialogComponent', () => {
     )
 
     // Email, remote OCR and AI all disabled
-    jest.spyOn(settingsService, 'get').mockReturnValue(false)
+    setActionSettings({ email: false, remoteOcr: false, ai: false })
     component.ngOnInit()
     expect(component.actionTypeOptions).toEqual(
       WORKFLOW_ACTION_OPTIONS.filter(
@@ -255,7 +265,7 @@ describe('WorkflowEditDialogComponent', () => {
   })
 
   it('should offer remote OCR only for consumption workflows', () => {
-    jest.spyOn(settingsService, 'get').mockReturnValue(true)
+    setActionSettings()
 
     // A consumption trigger makes the action reachable
     component.object = {
@@ -285,7 +295,7 @@ describe('WorkflowEditDialogComponent', () => {
   })
 
   it('should offer remote OCR on a trigger added to a new workflow', () => {
-    jest.spyOn(settingsService, 'get').mockReturnValue(true)
+    setActionSettings()
     component.ngOnInit()
 
     // Nothing for the action to apply to yet
@@ -311,7 +321,7 @@ describe('WorkflowEditDialogComponent', () => {
   })
 
   it('should keep remote OCR listed when an action already uses it', () => {
-    jest.spyOn(settingsService, 'get').mockReturnValue(true)
+    setActionSettings()
 
     // Otherwise changing the trigger would silently blank the selection
     component.object = {
@@ -329,9 +339,7 @@ describe('WorkflowEditDialogComponent', () => {
   })
 
   it('should not offer remote OCR when no engine is configured', () => {
-    jest
-      .spyOn(settingsService, 'get')
-      .mockImplementation((key) => key !== SETTINGS_KEYS.REMOTE_OCR_CONFIGURED)
+    setActionSettings({ remoteOcr: false })
 
     component.object = {
       name: 'Workflow 1',
@@ -348,7 +356,7 @@ describe('WorkflowEditDialogComponent', () => {
   })
 
   it('should offer apply AI suggestions unless every trigger is consumption', () => {
-    jest.spyOn(settingsService, 'get').mockReturnValue(true)
+    setActionSettings()
 
     // Consumption runs before the document has been parsed, so there would be
     // no content to make suggestions from
@@ -382,7 +390,7 @@ describe('WorkflowEditDialogComponent', () => {
   })
 
   it('should keep apply AI suggestions listed when an action already uses it', () => {
-    jest.spyOn(settingsService, 'get').mockReturnValue(true)
+    setActionSettings()
 
     // Otherwise changing the trigger would silently blank the selection
     component.object = {
@@ -400,9 +408,7 @@ describe('WorkflowEditDialogComponent', () => {
   })
 
   it('should not offer apply AI suggestions when AI is disabled', () => {
-    jest
-      .spyOn(settingsService, 'get')
-      .mockImplementation((key) => key !== SETTINGS_KEYS.AI_ENABLED)
+    setActionSettings({ ai: false })
 
     component.object = {
       name: 'Workflow 1',

src-ui/src/app/components/common/edit-dialog/workflow-edit-dialog/workflow-edit-dialog.component.ts

@@ -537,6 +537,13 @@ export class WorkflowEditDialogComponent
   readonly dateCustomFields = computed(() =>
     this.customFields()?.filter((f) => f.data_type === CustomFieldDataType.Date)
   )
+  private readonly emailEnabledSetting =
+    this.settingsService.getSignal<boolean>(SETTINGS_KEYS.EMAIL_ENABLED)
+  private readonly remoteOcrConfiguredSetting =
+    this.settingsService.getSignal<boolean>(SETTINGS_KEYS.REMOTE_OCR_CONFIGURED)
+  private readonly aiEnabledSetting = this.settingsService.getSignal<boolean>(
+    SETTINGS_KEYS.AI_ENABLED
+  )
 
   expandedItem: number = null
 
@@ -589,7 +596,7 @@ export class WorkflowEditDialogComponent
   private getAllowedActionTypes() {
     let allowed = WORKFLOW_ACTION_OPTIONS
 
-    if (!this.settingsService.get(SETTINGS_KEYS.EMAIL_ENABLED)) {
+    if (!this.emailEnabledSetting()) {
       allowed = allowed.filter((a) => a.id !== WorkflowActionType.Email)
     }
 
@@ -597,7 +604,7 @@ export class WorkflowEditDialogComponent
     // offered for workflows that run at consumption.
     const formWorkflow: Workflow = this.objectForm?.value
     const remoteOcrUsable =
-      this.settingsService.get(SETTINGS_KEYS.REMOTE_OCR_CONFIGURED) &&
+      this.remoteOcrConfiguredSetting() &&
       (formWorkflow?.triggers?.some(
         (trigger) => trigger.type === WorkflowTriggerType.Consumption
       ) ||
@@ -612,7 +619,7 @@ export class WorkflowEditDialogComponent
     // once every trigger is consumption, so it stays offered on a workflow
     // that has no triggers yet.
     const aiSuggestionsUsable =
-      this.settingsService.get(SETTINGS_KEYS.AI_ENABLED) &&
+      this.aiEnabledSetting() &&
       (!formWorkflow?.triggers?.length ||
         formWorkflow.triggers.some(
           (trigger) => trigger.type !== WorkflowTriggerType.Consumption
@@ -1362,7 +1369,6 @@ export class WorkflowEditDialogComponent
   }
 
   get actionTypeOptions() {
-    this.settingsService.trackChanges()
     // Computed on read rather than cached
     return this.getAllowedActionTypes()
   }

src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.spec.ts

@@ -839,7 +839,9 @@ describe('FilterableDropdownComponent & FilterableDropdownSelectionModel', () =>
     selectionModel.items = [memoRoot]
     selectionModel.documentCounts = [{ id: memoRoot.id, document_count: 9 }]
 
-    const getRootDocCount = (selectionModel as any).createRootDocCounter()
+    const getRootDocCount = (selectionModel as any).createRootDocCounter(
+      selectionModel.items
+    )
 
     expect(getRootDocCount(memoRoot.id)).toEqual(9)
     selectionModel.documentCounts = []
@@ -855,7 +857,9 @@ describe('FilterableDropdownComponent & FilterableDropdownSelectionModel', () =>
     selectionModel.items = [rootWithoutSelection]
     selectionModel.documentCounts = []
 
-    const getRootDocCount = (selectionModel as any).createRootDocCounter()
+    const getRootDocCount = (selectionModel as any).createRootDocCounter(
+      selectionModel.items
+    )
 
     expect(getRootDocCount(rootWithoutSelection.id)).toEqual(4)
   })
@@ -865,7 +869,9 @@ describe('FilterableDropdownComponent & FilterableDropdownSelectionModel', () =>
     selectionModel.items = [rootWithoutCounts]
     selectionModel.documentCounts = []
 
-    const getRootDocCount = (selectionModel as any).createRootDocCounter()
+    const getRootDocCount = (selectionModel as any).createRootDocCounter(
+      selectionModel.items
+    )
 
     expect(getRootDocCount(rootWithoutCounts.id)).toEqual(0)
   })
@@ -966,7 +972,7 @@ describe('FilterableDropdownComponent & FilterableDropdownSelectionModel', () =>
     component.selectionModel['temporarySelectionStates'].set(id, state)
     const changedSpy = jest.spyOn(component.selectionModel.changed, 'next')
     component.selectionModel.exclude(id)
-    expect(component.selectionModel.temporaryLogicalOperator).toBe(
+    expect(component.selectionModel.temporaryLogicalOperator()).toBe(
       LogicalOperator.And
     )
     expect(component.selectionModel['temporarySelectionStates'].get(id)).toBe(

src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.ts

@@ -64,43 +64,56 @@ export class FilterableDropdownSelectionModel {
 
   manyToOne = false
   singleSelect = false
-  private _logicalOperator: LogicalOperator = LogicalOperator.And
-  temporaryLogicalOperator: LogicalOperator = this._logicalOperator
-  private _intersection: Intersection = Intersection.Include
-  temporaryIntersection: Intersection = this._intersection
 
-  private _documentCounts: SelectionDataItem[] = []
+  private readonly _logicalOperator = signal(LogicalOperator.And)
+  readonly temporaryLogicalOperator = signal(LogicalOperator.And)
+  private readonly _intersection = signal(Intersection.Include)
+  readonly temporaryIntersection = signal(Intersection.Include)
+  private readonly _documentCounts = signal<SelectionDataItem[]>([])
+  private readonly _items = signal<MatchingModel[]>([])
+  private readonly _selectionStates = signal(
+    new Map<number, ToggleableItemState>()
+  )
+  private readonly _temporarySelectionStates = signal(
+    new Map<number, ToggleableItemState>()
+  )
+
   public documentCountSortingEnabled = false
 
+  private get selectionStates(): ReadonlyMap<number, ToggleableItemState> {
+    return this._selectionStates()
+  }
+
+  private get temporarySelectionStates(): ReadonlyMap<
+    number,
+    ToggleableItemState
+  > {
+    return this._temporarySelectionStates()
+  }
+
   public set documentCounts(counts: SelectionDataItem[]) {
-    this._documentCounts = counts
+    this._documentCounts.set(counts)
     if (this.documentCountSortingEnabled) {
-      this.sortItems()
+      this._items.set(this.sortItems(this.items))
     }
   }
 
-  private _items: MatchingModel[] = []
   get items(): MatchingModel[] {
-    return this._items
+    return this._items()
   }
 
   set items(items: MatchingModel[]) {
     if (items) {
-      this._items = Array.from(items)
-      this.sortItems()
-      this.setNullItem()
+      this._items.set(this.withNullItem(this.sortItems(Array.from(items))))
     }
   }
 
-  private setNullItem() {
+  private withNullItem(items: MatchingModel[]): MatchingModel[] {
     if (this.manyToOne && this.logicalOperator === LogicalOperator.Or) {
-      if (this._items[0]?.id === null) {
-        this._items.shift()
-      }
-      return
+      return items[0]?.id === null ? items.slice(1) : items
     }
 
-    const item = {
+    const nullItem = {
       name: $localize`:Filter drop down element to filter for documents with no correspondent/type/tag assigned:Not assigned`,
       id:
         this.manyToOne || this.intersection === Intersection.Include
@@ -108,22 +121,17 @@ export class FilterableDropdownSelectionModel {
           : NEGATIVE_NULL_FILTER_VALUE,
     }
 
-    if (
-      this._items[0]?.id === null ||
-      this._items[0]?.id === NEGATIVE_NULL_FILTER_VALUE
-    ) {
-      this._items[0] = item
-    } else if (this._items) {
-      this._items.unshift(item)
-    }
+    return items[0]?.id === null || items[0]?.id === NEGATIVE_NULL_FILTER_VALUE
+      ? [nullItem, ...items.slice(1)]
+      : [nullItem, ...items]
   }
 
   constructor(manyToOne: boolean = false) {
     this.manyToOne = manyToOne
   }
 
-  private sortItems() {
-    this._items.sort((a, b) => {
+  private sortItems(items: MatchingModel[]): MatchingModel[] {
+    const sorted = [...items].sort((a, b) => {
       if (
         (a.id == null && b.id != null) ||
         (a.id == NEGATIVE_NULL_FILTER_VALUE &&
@@ -154,13 +162,13 @@ export class FilterableDropdownSelectionModel {
       ) {
         return -1
       } else if (
-        this._documentCounts.length &&
+        this._documentCounts().length &&
         this.getDocumentCount(b.id) === 0 &&
         this.getDocumentCount(a.id) > this.getDocumentCount(b.id)
       ) {
         return -1
       } else if (
-        this._documentCounts.length &&
+        this._documentCounts().length &&
         this.getDocumentCount(a.id) === 0 &&
         this.getDocumentCount(a.id) < this.getDocumentCount(b.id)
       ) {
@@ -170,15 +178,11 @@ export class FilterableDropdownSelectionModel {
       }
     })
 
-    if (this._documentCounts.length) {
-      this.promoteBranchesWithDocumentCounts()
-    }
+    return this._documentCounts().length
+      ? this.promoteBranchesWithDocumentCounts(sorted)
+      : sorted
   }
 
-  private selectionStates = new Map<number, ToggleableItemState>()
-
-  private temporarySelectionStates = new Map<number, ToggleableItemState>()
-
   getSelectedItems() {
     return this.items.filter(
       (i) =>
@@ -194,30 +198,33 @@ export class FilterableDropdownSelectionModel {
   }
 
   set(id: number, state: ToggleableItemState, fireEvent = true) {
+    const states = new Map(this.temporarySelectionStates)
     if (state == ToggleableItemState.NotSelected) {
-      this.temporarySelectionStates.delete(id)
+      states.delete(id)
     } else {
-      this.temporarySelectionStates.set(id, state)
+      states.set(id, state)
     }
+    this._temporarySelectionStates.set(states)
     if (fireEvent) {
       this.changed.next(this)
     }
   }
 
   toggle(id: number, fireEvent = true) {
-    let state = this.temporarySelectionStates.get(id)
+    const states = new Map(this.temporarySelectionStates)
+    let state = states.get(id)
     if (
       state == undefined ||
       (state != ToggleableItemState.Selected &&
         state != ToggleableItemState.Excluded)
     ) {
       if (this.manyToOne || this.singleSelect) {
-        this.temporarySelectionStates.set(id, ToggleableItemState.Selected)
+        states.set(id, ToggleableItemState.Selected)
 
         if (this.singleSelect) {
-          for (let key of this.temporarySelectionStates.keys()) {
+          for (let key of states.keys()) {
             if (key != id) {
-              this.temporarySelectionStates.delete(key)
+              states.delete(key)
             }
           }
         }
@@ -233,25 +240,26 @@ export class FilterableDropdownSelectionModel {
         ) {
           newState = ToggleableItemState.NotSelected
         }
-        this.temporarySelectionStates.set(id, newState)
+        states.set(id, newState)
       }
     } else if (
       state == ToggleableItemState.Selected ||
       state == ToggleableItemState.Excluded
     ) {
-      this.temporarySelectionStates.delete(id)
-      this.clearDescendantSelections(id)
+      states.delete(id)
+      this.clearDescendantSelections(states, id)
     }
 
     if (!id) {
-      for (let key of this.temporarySelectionStates.keys()) {
+      for (let key of states.keys()) {
         if (key) {
-          this.temporarySelectionStates.delete(key)
+          states.delete(key)
         }
       }
     } else {
-      this.temporarySelectionStates.delete(null)
+      states.delete(null)
     }
+    this._temporarySelectionStates.set(states)
 
     if (fireEvent) {
       this.changed.next(this)
@@ -259,20 +267,21 @@ export class FilterableDropdownSelectionModel {
   }
 
   exclude(id: number, fireEvent: boolean = true) {
-    let state = this.temporarySelectionStates.get(id)
+    const states = new Map(this.temporarySelectionStates)
+    let state = states.get(id)
     if (id && (state == null || state != ToggleableItemState.Excluded)) {
-      this.temporaryLogicalOperator = this._logicalOperator = this.manyToOne
-        ? LogicalOperator.And
-        : LogicalOperator.Or
+      const operator = this.manyToOne ? LogicalOperator.And : LogicalOperator.Or
+      this.temporaryLogicalOperator.set(operator)
+      this._logicalOperator.set(operator)
 
       if (this.manyToOne || this.singleSelect) {
-        this.temporarySelectionStates.set(id, ToggleableItemState.Excluded)
-        this.clearDescendantSelections(id)
+        states.set(id, ToggleableItemState.Excluded)
+        this.clearDescendantSelections(states, id)
 
         if (this.singleSelect) {
-          for (let key of this.temporarySelectionStates.keys()) {
+          for (let key of states.keys()) {
             if (key != id) {
-              this.temporarySelectionStates.delete(key)
+              states.delete(key)
             }
           }
         }
@@ -287,17 +296,18 @@ export class FilterableDropdownSelectionModel {
         ) {
           newState = ToggleableItemState.NotSelected
         }
-        this.temporarySelectionStates.set(id, newState)
+        states.set(id, newState)
         if (newState == ToggleableItemState.Excluded) {
-          this.clearDescendantSelections(id)
+          this.clearDescendantSelections(states, id)
         }
       }
     } else if (!id || state == ToggleableItemState.Excluded) {
-      this.temporarySelectionStates.delete(id)
+      states.delete(id)
       if (id) {
-        this.clearDescendantSelections(id)
+        this.clearDescendantSelections(states, id)
       }
     }
+    this._temporarySelectionStates.set(states)
 
     if (fireEvent) {
       this.changed.next(this)
@@ -308,9 +318,12 @@ export class FilterableDropdownSelectionModel {
     return this.selectionStates.get(id) || ToggleableItemState.NotSelected
   }
 
-  private clearDescendantSelections(id: number) {
+  private clearDescendantSelections(
+    states: Map<number, ToggleableItemState>,
+    id: number
+  ) {
     for (const descendantID of this.getDescendantIDs(id)) {
-      this.temporarySelectionStates.delete(descendantID)
+      states.delete(descendantID)
     }
   }
 
@@ -320,7 +333,7 @@ export class FilterableDropdownSelectionModel {
 
     while (queue.length) {
       const parentID = queue.shift()
-      for (const item of this._items) {
+      for (const item of this.items) {
         if (
           typeof item?.id === 'number' &&
           typeof (item as any)['parent'] === 'number' &&
@@ -336,12 +349,12 @@ export class FilterableDropdownSelectionModel {
   }
 
   get logicalOperator(): LogicalOperator {
-    return this.temporaryLogicalOperator
+    return this.temporaryLogicalOperator()
   }
 
   set logicalOperator(operator: LogicalOperator) {
-    this.temporaryLogicalOperator = operator
-    this.setNullItem()
+    this.temporaryLogicalOperator.set(operator)
+    this._items.set(this.withNullItem(this.items))
   }
 
   toggleOperator() {
@@ -349,12 +362,12 @@ export class FilterableDropdownSelectionModel {
   }
 
   get intersection(): Intersection {
-    return this.temporaryIntersection
+    return this.temporaryIntersection()
   }
 
   set intersection(intersection: Intersection) {
-    this.temporaryIntersection = intersection
-    this.setNullItem()
+    this.temporaryIntersection.set(intersection)
+    this._items.set(this.withNullItem(this.items))
   }
 
   toggleIntersection() {
@@ -364,18 +377,20 @@ export class FilterableDropdownSelectionModel {
         ? ToggleableItemState.Selected
         : ToggleableItemState.Excluded
 
-    this.temporarySelectionStates.forEach((state, key) => {
+    const states = new Map(this.temporarySelectionStates)
+    states.forEach((state, key) => {
       if (key === null && this.intersection === Intersection.Exclude) {
-        this.temporarySelectionStates.set(NEGATIVE_NULL_FILTER_VALUE, newState)
+        states.set(NEGATIVE_NULL_FILTER_VALUE, newState)
       } else if (
         key === NEGATIVE_NULL_FILTER_VALUE &&
         this.intersection === Intersection.Include
       ) {
-        this.temporarySelectionStates.set(null, newState)
+        states.set(null, newState)
       } else {
-        this.temporarySelectionStates.set(key, newState)
+        states.set(key, newState)
       }
     })
+    this._temporarySelectionStates.set(states)
 
     this.changed.next(this)
   }
@@ -395,10 +410,12 @@ export class FilterableDropdownSelectionModel {
   }
 
   clear(fireEvent = true) {
-    this.temporarySelectionStates.clear()
-    this.temporaryLogicalOperator = this._logicalOperator = LogicalOperator.And
-    this.temporaryIntersection = this._intersection = Intersection.Include
-    this.setNullItem()
+    this._temporarySelectionStates.set(new Map())
+    this.temporaryLogicalOperator.set(LogicalOperator.And)
+    this._logicalOperator.set(LogicalOperator.And)
+    this.temporaryIntersection.set(Intersection.Include)
+    this._intersection.set(Intersection.Include)
+    this._items.set(this.withNullItem(this.items))
     if (fireEvent) {
       this.changed.next(this)
     }
@@ -419,9 +436,9 @@ export class FilterableDropdownSelectionModel {
       )
     ) {
       return true
-    } else if (this.temporaryLogicalOperator !== this._logicalOperator) {
+    } else if (this.temporaryLogicalOperator() !== this._logicalOperator()) {
       return true
-    } else if (this.temporaryIntersection !== this._intersection) {
+    } else if (this.temporaryIntersection() !== this._intersection()) {
       return true
     } else {
       return false
@@ -438,23 +455,29 @@ export class FilterableDropdownSelectionModel {
   }
 
   getDocumentCount(id: number) {
-    return this._documentCounts.find((c) => c.id === id)?.document_count
+    return this._documentCounts().find((c) => c.id === id)?.document_count
   }
 
-  private promoteBranchesWithDocumentCounts() {
-    const parentById = this.buildParentById()
+  private promoteBranchesWithDocumentCounts(
+    items: MatchingModel[]
+  ): MatchingModel[] {
+    const parentById = this.buildParentById(items)
     const findRootId = this.createRootFinder(parentById)
-    const getRootDocCount = this.createRootDocCounter()
-    const summaries = this.buildBranchSummaries(findRootId, getRootDocCount)
+    const getRootDocCount = this.createRootDocCounter(items)
+    const summaries = this.buildBranchSummaries(
+      items,
+      findRootId,
+      getRootDocCount
+    )
     const orderedBranches = this.orderBranchesByPriority(summaries)
 
-    this._items = orderedBranches.flatMap((summary) => summary.items)
+    return orderedBranches.flatMap((summary) => summary.items)
   }
 
-  private buildParentById(): Map<number, number | null> {
+  private buildParentById(items: MatchingModel[]): Map<number, number | null> {
     const parentById = new Map<number, number | null>()
 
-    for (const item of this._items) {
+    for (const item of items) {
       if (typeof item?.id === 'number') {
         const parentValue = (item as any)['parent']
         parentById.set(
@@ -492,7 +515,9 @@ export class FilterableDropdownSelectionModel {
     return findRootId
   }
 
-  private createRootDocCounter(): (rootId: number) => number {
+  private createRootDocCounter(
+    items: MatchingModel[]
+  ): (rootId: number) => number {
     const docCountMemo = new Map<number, number>()
 
     return (rootId: number): number => {
@@ -507,7 +532,7 @@ export class FilterableDropdownSelectionModel {
         return explicit
       }
 
-      const rootItem = this._items.find((i) => i.id === rootId)
+      const rootItem = items.find((i) => i.id === rootId)
       const fallback =
         typeof (rootItem as any)?.['document_count'] === 'number'
           ? (rootItem as any)['document_count']
@@ -519,12 +544,13 @@ export class FilterableDropdownSelectionModel {
   }
 
   private buildBranchSummaries(
+    items: MatchingModel[],
     findRootId: (id: number) => number,
     getRootDocCount: (rootId: number) => number
   ): Map<string, BranchSummary> {
     const summaries = new Map<string, BranchSummary>()
 
-    for (const [index, item] of this._items.entries()) {
+    for (const [index, item] of items.entries()) {
       const { key, special, rootId } = this.describeBranchItem(
         item,
         index,
@@ -616,28 +642,23 @@ export class FilterableDropdownSelectionModel {
   }
 
   init(map: Map<number, ToggleableItemState>) {
-    this.temporarySelectionStates = map
+    this._temporarySelectionStates.set(new Map(map))
     this.apply()
   }
 
   apply() {
-    this.selectionStates.clear()
-    this.temporarySelectionStates.forEach((value, key) => {
-      this.selectionStates.set(key, value)
-    })
-    this._logicalOperator = this.temporaryLogicalOperator
-    this._intersection = this.temporaryIntersection
-    this.sortItems()
+    this._selectionStates.set(new Map(this.temporarySelectionStates))
+    this._logicalOperator.set(this.temporaryLogicalOperator())
+    this._intersection.set(this.temporaryIntersection())
+    this._items.set(this.sortItems(this.items))
   }
 
   reset(complete: boolean = false) {
-    this.temporarySelectionStates.clear()
     if (complete) {
-      this.selectionStates.clear()
+      this._selectionStates.set(new Map())
+      this._temporarySelectionStates.set(new Map())
     } else {
-      this.selectionStates.forEach((value, key) => {
-        this.temporarySelectionStates.set(key, value)
-      })
+      this._temporarySelectionStates.set(new Map(this.selectionStates))
     }
   }
 

src-ui/src/app/components/common/permissions-filter-dropdown/permissions-filter-dropdown.component.html

@@ -7,7 +7,7 @@
     <div class="list-group list-group-flush">
       <button class="list-group-item list-group-item-action d-flex align-items-center p-2 border-top-0 border-start-0 border-end-0 border-bottom" role="menuitem" (click)="setFilter(OwnerFilterType.NONE)" [disabled]="disabled">
         <div class="selected-icon me-1">
-          @if (selectionModel.ownerFilter === OwnerFilterType.NONE) {
+          @if (selectionModel.ownerFilter() === OwnerFilterType.NONE) {
             <i-bs width="1em" height="1em" name="check"></i-bs>
           }
         </div>
@@ -17,7 +17,7 @@
       </button>
       <button class="list-group-item list-group-item-action d-flex align-items-center p-2 border-top-0 border-start-0 border-end-0 border-bottom" role="menuitem" (click)="setFilter(OwnerFilterType.SELF)" [disabled]="disabled">
         <div class="selected-icon me-1">
-          @if (selectionModel.ownerFilter === OwnerFilterType.SELF) {
+          @if (selectionModel.ownerFilter() === OwnerFilterType.SELF) {
             <i-bs width="1em" height="1em" name="check"></i-bs>
           }
         </div>
@@ -27,7 +27,7 @@
       </button>
       <button class="list-group-item list-group-item-action d-flex align-items-center p-2 border-top-0 border-start-0 border-end-0 border-bottom" role="menuitem" (click)="setFilter(OwnerFilterType.NOT_SELF)" [disabled]="disabled">
         <div class="selected-icon me-1">
-          @if (selectionModel.ownerFilter === OwnerFilterType.NOT_SELF) {
+          @if (selectionModel.ownerFilter() === OwnerFilterType.NOT_SELF) {
             <i-bs width="1em" height="1em" name="check"></i-bs>
           }
         </div>
@@ -37,7 +37,7 @@
       </button>
       <button class="list-group-item list-group-item-action d-flex align-items-center p-2 border-top-0 border-start-0 border-end-0 border-bottom" role="menuitem" (click)="setFilter(OwnerFilterType.SHARED_BY_ME)" [disabled]="disabled">
         <div class="selected-icon me-1">
-          @if (selectionModel.ownerFilter === OwnerFilterType.SHARED_BY_ME) {
+          @if (selectionModel.ownerFilter() === OwnerFilterType.SHARED_BY_ME) {
             <i-bs width="1em" height="1em" name="check"></i-bs>
           }
         </div>
@@ -47,7 +47,7 @@
       </button>
       <button class="list-group-item list-group-item-action d-flex align-items-center p-2 border-top-0 border-start-0 border-end-0 border-bottom" role="menuitem" (click)="setFilter(OwnerFilterType.UNOWNED)" [disabled]="disabled">
         <div class="selected-icon me-1">
-          @if (selectionModel.ownerFilter === OwnerFilterType.UNOWNED) {
+          @if (selectionModel.ownerFilter() === OwnerFilterType.UNOWNED) {
             <i-bs width="1em" height="1em" name="check"></i-bs>
           }
         </div>
@@ -57,7 +57,7 @@
       </button>
       <button *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.User }" class="list-group-item list-group-item-action d-flex align-items-center p-2 border-top-0 border-start-0 border-end-0 border-bottom" role="menuitem" [disabled]="disabled">
         <div class="selected-icon me-1">
-          @if (selectionModel.ownerFilter === OwnerFilterType.OTHERS) {
+          @if (selectionModel.ownerFilter() === OwnerFilterType.OTHERS) {
             <i-bs width="1em" height="1em" name="check"></i-bs>
           }
         </div>
@@ -65,7 +65,8 @@
           <ng-select
             name="user"
             class="user-select small"
-            [(ngModel)]="selectionModel.includeUsers"
+            [ngModel]="selectionModel.includeUsers()"
+            (ngModelChange)="selectionModel.includeUsers.set($event)"
             [disabled]="disabled"
             [clearable]="false"
             [items]="users()"
@@ -78,10 +79,10 @@
           </ng-select>
         </div>
       </button>
-      @if (selectionModel.ownerFilter === OwnerFilterType.NONE || selectionModel.ownerFilter === OwnerFilterType.NOT_SELF) {
+      @if (selectionModel.ownerFilter() === OwnerFilterType.NONE || selectionModel.ownerFilter() === OwnerFilterType.NOT_SELF) {
         <div class="list-group-item list-group-item-action d-flex align-items-center p-2 ps-3 border-bottom-0 border-start-0 border-end-0">
           <div class="form-check form-switch w-100">
-            <input type="checkbox" class="form-check-input" id="hideUnowned" [(ngModel)]="this.selectionModel.hideUnowned" (change)="onChange()" [disabled]="disabled">
+            <input type="checkbox" class="form-check-input" id="hideUnowned" [ngModel]="selectionModel.hideUnowned()" (ngModelChange)="selectionModel.hideUnowned.set($event)" (change)="onChange()" [disabled]="disabled">
             <label class="form-check-label w-100" for="hideUnowned"><small i18n>Hide unowned</small></label>
           </div>
         </div>

src-ui/src/app/components/common/permissions-filter-dropdown/permissions-filter-dropdown.component.spec.ts

@@ -90,56 +90,56 @@ describe('PermissionsFilterDropdownComponent', () => {
     component.setFilter(OwnerFilterType.OTHERS)
     expect(component.isActive).toBeTruthy()
     component.setFilter(OwnerFilterType.NONE)
-    component.selectionModel.hideUnowned = true
+    component.selectionModel.hideUnowned.set(true)
     expect(component.isActive).toBeTruthy()
   })
 
   it('should describe concrete user filters honestly', () => {
-    component.selectionModel.ownerFilter = OwnerFilterType.SELF
-    component.selectionModel.userID = 1
+    component.selectionModel.ownerFilter.set(OwnerFilterType.SELF)
+    component.selectionModel.userID.set(1)
     expect(component.ownerFilterLabel).toEqual('Owned by user1')
 
-    component.selectionModel.ownerFilter = OwnerFilterType.NOT_SELF
-    component.selectionModel.excludeUsers = [1]
+    component.selectionModel.ownerFilter.set(OwnerFilterType.NOT_SELF)
+    component.selectionModel.excludeUsers.set([1])
     expect(component.ownerExclusionFilterLabel).toEqual('Not owned by user1')
 
-    component.selectionModel.ownerFilter = OwnerFilterType.SHARED_BY_ME
-    component.selectionModel.userID = 1
+    component.selectionModel.ownerFilter.set(OwnerFilterType.SHARED_BY_ME)
+    component.selectionModel.userID.set(1)
     expect(component.sharedByFilterLabel).toEqual('Shared by user1')
   })
 
   it('should describe concrete filters when usernames are unavailable', () => {
-    component.selectionModel.ownerFilter = OwnerFilterType.SELF
-    component.selectionModel.userID = 99
+    component.selectionModel.ownerFilter.set(OwnerFilterType.SELF)
+    component.selectionModel.userID.set(99)
     expect(component.ownerFilterLabel).toEqual('Owned by another user')
 
-    component.selectionModel.ownerFilter = OwnerFilterType.NOT_SELF
-    component.selectionModel.excludeUsers = [99]
+    component.selectionModel.ownerFilter.set(OwnerFilterType.NOT_SELF)
+    component.selectionModel.excludeUsers.set([99])
     expect(component.ownerExclusionFilterLabel).toEqual(
       'Not owned by another user'
     )
 
-    component.selectionModel.excludeUsers = [98, 99]
+    component.selectionModel.excludeUsers.set([98, 99])
     expect(component.ownerExclusionFilterLabel).toEqual(
       'Not owned by selected users'
     )
 
-    component.selectionModel.ownerFilter = OwnerFilterType.SHARED_BY_ME
-    component.selectionModel.userID = 99
+    component.selectionModel.ownerFilter.set(OwnerFilterType.SHARED_BY_ME)
+    component.selectionModel.userID.set(99)
     expect(component.sharedByFilterLabel).toEqual('Shared by another user')
   })
 
   it('should retain relative labels for filters bound to the current user', () => {
-    component.selectionModel.userID = currentUserID
+    component.selectionModel.userID.set(currentUserID)
     expect(component.ownerFilterLabel).toEqual('My documents')
     expect(component.sharedByFilterLabel).toEqual('Shared by me')
 
-    component.selectionModel.excludeUsers = [currentUserID]
+    component.selectionModel.excludeUsers.set([currentUserID])
     expect(component.ownerExclusionFilterLabel).toEqual('Shared with me')
   })
 
   it('should retain relative labels for inactive filter choices', () => {
-    component.selectionModel.ownerFilter = OwnerFilterType.NONE
+    component.selectionModel.ownerFilter.set(OwnerFilterType.NONE)
 
     expect(component.ownerFilterLabel).toEqual('My documents')
     expect(component.ownerExclusionFilterLabel).toEqual('Shared with me')
@@ -148,32 +148,41 @@ describe('PermissionsFilterDropdownComponent', () => {
 
   it('should support reset', () => {
     component.setFilter(OwnerFilterType.OTHERS)
-    expect(component.selectionModel.ownerFilter).not.toEqual(
+    expect(component.selectionModel.ownerFilter()).not.toEqual(
       OwnerFilterType.NONE
     )
     component.reset()
-    expect(component.selectionModel.ownerFilter).toEqual(OwnerFilterType.NONE)
+    expect(component.selectionModel.ownerFilter()).toEqual(OwnerFilterType.NONE)
   })
 
   it('should toggle owner filter type when users selected', () => {
-    component.selectionModel.ownerFilter = OwnerFilterType.NONE
+    component.selectionModel.ownerFilter.set(OwnerFilterType.NONE)
 
     // this would normally be done by select component
-    component.selectionModel.includeUsers = [12]
+    component.selectionModel.includeUsers.set([12])
     component.onUserSelect()
-    expect(component.selectionModel.ownerFilter).toEqual(OwnerFilterType.OTHERS)
+    expect(component.selectionModel.ownerFilter()).toEqual(
+      OwnerFilterType.OTHERS
+    )
 
     // this would normally be done by select component
-    component.selectionModel.includeUsers = null
+    component.selectionModel.includeUsers.set(null)
     component.onUserSelect()
 
-    expect(component.selectionModel.ownerFilter).toEqual(OwnerFilterType.NONE)
+    expect(component.selectionModel.ownerFilter()).toEqual(OwnerFilterType.NONE)
   })
   it('should emit a selection model depending on the type of owner filter set', () => {
-    component.selectionModel.ownerFilter = OwnerFilterType.NONE
+    const emitted = () => ({
+      excludeUsers: ownerFilterSetResult.excludeUsers(),
+      hideUnowned: ownerFilterSetResult.hideUnowned(),
+      includeUsers: ownerFilterSetResult.includeUsers(),
+      ownerFilter: ownerFilterSetResult.ownerFilter(),
+      userID: ownerFilterSetResult.userID(),
+    })
+    component.selectionModel.ownerFilter.set(OwnerFilterType.NONE)
 
     component.setFilter(OwnerFilterType.SELF)
-    expect(ownerFilterSetResult).toEqual({
+    expect(emitted()).toEqual({
       excludeUsers: [],
       hideUnowned: false,
       includeUsers: [],
@@ -182,7 +191,7 @@ describe('PermissionsFilterDropdownComponent', () => {
     })
 
     component.setFilter(OwnerFilterType.NOT_SELF)
-    expect(ownerFilterSetResult).toEqual({
+    expect(emitted()).toEqual({
       excludeUsers: [currentUserID],
       hideUnowned: false,
       includeUsers: [],
@@ -191,7 +200,7 @@ describe('PermissionsFilterDropdownComponent', () => {
     })
 
     component.setFilter(OwnerFilterType.NONE)
-    expect(ownerFilterSetResult).toEqual({
+    expect(emitted()).toEqual({
       excludeUsers: [],
       hideUnowned: false,
       includeUsers: [],
@@ -200,7 +209,7 @@ describe('PermissionsFilterDropdownComponent', () => {
     })
 
     component.setFilter(OwnerFilterType.SHARED_BY_ME)
-    expect(ownerFilterSetResult).toEqual({
+    expect(emitted()).toEqual({
       excludeUsers: [],
       hideUnowned: false,
       includeUsers: [],
@@ -209,7 +218,7 @@ describe('PermissionsFilterDropdownComponent', () => {
     })
 
     component.setFilter(OwnerFilterType.UNOWNED)
-    expect(ownerFilterSetResult).toEqual({
+    expect(emitted()).toEqual({
       excludeUsers: [],
       hideUnowned: false,
       includeUsers: [],

src-ui/src/app/components/common/permissions-filter-dropdown/permissions-filter-dropdown.component.ts

@@ -25,18 +25,18 @@ import { ComponentWithPermissions } from '../../with-permissions/with-permission
 import { ClearableBadgeComponent } from '../clearable-badge/clearable-badge.component'
 
 export class PermissionsSelectionModel {
-  ownerFilter: OwnerFilterType
-  hideUnowned: boolean
-  userID: number
-  includeUsers: number[]
-  excludeUsers: number[]
+  readonly ownerFilter = signal(OwnerFilterType.NONE)
+  readonly hideUnowned = signal(false)
+  readonly userID = signal<number>(null)
+  readonly includeUsers = signal<number[]>([])
+  readonly excludeUsers = signal<number[]>([])
 
   clear() {
-    this.ownerFilter = OwnerFilterType.NONE
-    this.userID = null
-    this.hideUnowned = false
-    this.includeUsers = []
-    this.excludeUsers = []
+    this.ownerFilter.set(OwnerFilterType.NONE)
+    this.userID.set(null)
+    this.hideUnowned.set(false)
+    this.includeUsers.set([])
+    this.excludeUsers.set([])
   }
 }
 
@@ -84,33 +84,31 @@ export class PermissionsFilterDropdownComponent extends ComponentWithPermissions
 
   readonly users = signal<User[]>([])
 
-  hideUnowned: boolean
-
   get isActive(): boolean {
     return (
-      this.selectionModel.ownerFilter !== OwnerFilterType.NONE ||
-      this.selectionModel.hideUnowned
+      this.selectionModel.ownerFilter() !== OwnerFilterType.NONE ||
+      this.selectionModel.hideUnowned()
     )
   }
 
   get ownerFilterLabel(): string {
     if (
-      this.selectionModel?.ownerFilter !== OwnerFilterType.SELF ||
-      this.selectionModel?.userID === this.settingsService.currentUser()?.id
+      this.selectionModel?.ownerFilter() !== OwnerFilterType.SELF ||
+      this.selectionModel?.userID() === this.settingsService.currentUser()?.id
     ) {
       return $localize`My documents`
     }
 
-    const username = this.getUsername(this.selectionModel?.userID)
+    const username = this.getUsername(this.selectionModel?.userID())
     return username
       ? $localize`Owned by ${username}`
       : $localize`Owned by another user`
   }
 
   get ownerExclusionFilterLabel(): string {
-    const excludedUsers = this.selectionModel?.excludeUsers ?? []
+    const excludedUsers = this.selectionModel?.excludeUsers() ?? []
     if (
-      this.selectionModel?.ownerFilter !== OwnerFilterType.NOT_SELF ||
+      this.selectionModel?.ownerFilter() !== OwnerFilterType.NOT_SELF ||
       (excludedUsers.length === 1 &&
         excludedUsers[0] === this.settingsService.currentUser()?.id)
     ) {
@@ -130,13 +128,13 @@ export class PermissionsFilterDropdownComponent extends ComponentWithPermissions
 
   get sharedByFilterLabel(): string {
     if (
-      this.selectionModel?.ownerFilter !== OwnerFilterType.SHARED_BY_ME ||
-      this.selectionModel?.userID === this.settingsService.currentUser()?.id
+      this.selectionModel?.ownerFilter() !== OwnerFilterType.SHARED_BY_ME ||
+      this.selectionModel?.userID() === this.settingsService.currentUser()?.id
     ) {
       return $localize`Shared by me`
     }
 
-    const username = this.getUsername(this.selectionModel?.userID)
+    const username = this.getUsername(this.selectionModel?.userID())
     return username
       ? $localize`Shared by ${username}`
       : $localize`Shared by another user`
@@ -169,34 +167,36 @@ export class PermissionsFilterDropdownComponent extends ComponentWithPermissions
   }
 
   setFilter(type: OwnerFilterType) {
-    this.selectionModel.ownerFilter = type
-    if (this.selectionModel.ownerFilter === OwnerFilterType.SELF) {
-      this.selectionModel.includeUsers = []
-      this.selectionModel.excludeUsers = []
-      this.selectionModel.userID = this.settingsService.currentUser().id
-      this.selectionModel.hideUnowned = false
-    } else if (this.selectionModel.ownerFilter === OwnerFilterType.NOT_SELF) {
-      this.selectionModel.userID = null
-      this.selectionModel.includeUsers = []
-      this.selectionModel.excludeUsers = [this.settingsService.currentUser().id]
-      this.selectionModel.hideUnowned = false
-    } else if (this.selectionModel.ownerFilter === OwnerFilterType.NONE) {
-      this.selectionModel.userID = null
-      this.selectionModel.includeUsers = []
-      this.selectionModel.excludeUsers = []
-      this.selectionModel.hideUnowned = false
+    this.selectionModel.ownerFilter.set(type)
+    if (this.selectionModel.ownerFilter() === OwnerFilterType.SELF) {
+      this.selectionModel.includeUsers.set([])
+      this.selectionModel.excludeUsers.set([])
+      this.selectionModel.userID.set(this.settingsService.currentUser().id)
+      this.selectionModel.hideUnowned.set(false)
+    } else if (this.selectionModel.ownerFilter() === OwnerFilterType.NOT_SELF) {
+      this.selectionModel.userID.set(null)
+      this.selectionModel.includeUsers.set([])
+      this.selectionModel.excludeUsers.set([
+        this.settingsService.currentUser().id,
+      ])
+      this.selectionModel.hideUnowned.set(false)
+    } else if (this.selectionModel.ownerFilter() === OwnerFilterType.NONE) {
+      this.selectionModel.userID.set(null)
+      this.selectionModel.includeUsers.set([])
+      this.selectionModel.excludeUsers.set([])
+      this.selectionModel.hideUnowned.set(false)
     } else if (
-      this.selectionModel.ownerFilter === OwnerFilterType.SHARED_BY_ME
+      this.selectionModel.ownerFilter() === OwnerFilterType.SHARED_BY_ME
     ) {
-      this.selectionModel.userID = this.settingsService.currentUser()?.id
-      this.selectionModel.includeUsers = []
-      this.selectionModel.excludeUsers = []
-      this.selectionModel.hideUnowned = false
-    } else if (this.selectionModel.ownerFilter === OwnerFilterType.UNOWNED) {
-      this.selectionModel.userID = null
-      this.selectionModel.includeUsers = []
-      this.selectionModel.excludeUsers = []
-      this.selectionModel.hideUnowned = false
+      this.selectionModel.userID.set(this.settingsService.currentUser()?.id)
+      this.selectionModel.includeUsers.set([])
+      this.selectionModel.excludeUsers.set([])
+      this.selectionModel.hideUnowned.set(false)
+    } else if (this.selectionModel.ownerFilter() === OwnerFilterType.UNOWNED) {
+      this.selectionModel.userID.set(null)
+      this.selectionModel.includeUsers.set([])
+      this.selectionModel.excludeUsers.set([])
+      this.selectionModel.hideUnowned.set(false)
     }
     this.onChange()
   }
@@ -206,11 +206,11 @@ export class PermissionsFilterDropdownComponent extends ComponentWithPermissions
   }
 
   onUserSelect() {
-    if (this.selectionModel.includeUsers?.length) {
-      this.selectionModel.ownerFilter = OwnerFilterType.OTHERS
-    } else {
-      this.selectionModel.ownerFilter = OwnerFilterType.NONE
-    }
+    this.selectionModel.ownerFilter.set(
+      this.selectionModel.includeUsers()?.length
+        ? OwnerFilterType.OTHERS
+        : OwnerFilterType.NONE
+    )
     this.onChange()
   }