Cut out dropdown component middle man

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

@@ -62,8 +62,22 @@ export class FilterableDropdownSelectionModel {
   }
 
   set items(items: MatchingModel[]) {
-    this._items = items
+    if (items) {
-    this.sortItems()
+      this._items = Array.from(items)
+      this._items.unshift({
+        name: $localize`:Filter drop down element to filter for documents with no correspondent/type/tag assigned:Not assigned`,
+        id:
+          this.intersection === Intersection.Include
+            ? null
+            : NEGATIVE_NULL_FILTER_VALUE,
+      })
+      this.sortItems()
+    }
+  }
+
+  constructor(manyToOne: boolean = false, singleSelect: boolean = false) {
+    this.manyToOne = manyToOne
+    this.singleSelect = singleSelect
   }
 
   private sortItems() {
@@ -249,7 +263,18 @@ export class FilterableDropdownSelectionModel {
     this.temporaryIntersection = intersection
   }
 
+  private checkForNullItem() {
+    console.log('checkForNullItem', this.items)
+
+    if (this.temporaryIntersection === Intersection.Exclude) {
+      this.temporarySelectionStates.delete(null)
+      this.items.shift()
+    }
+  }
+
   toggleIntersection() {
+    console.log('toggleIntersection')
+
     if (this.temporarySelectionStates.size === 0) return
     let newState =
       this.intersection == Intersection.Include
@@ -400,28 +425,13 @@ export class FilterableDropdownComponent
 
   filterText: string
 
-  @Input()
+  _selectionModel: FilterableDropdownSelectionModel
-  set items(items: MatchingModel[]) {
-    if (items) {
-      this._selectionModel.items = Array.from(items)
-      this._selectionModel.items.unshift({
-        name: $localize`:Filter drop down element to filter for documents with no correspondent/type/tag assigned:Not assigned`,
-        id:
-          this.selectionModel.intersection === Intersection.Include
-            ? null
-            : NEGATIVE_NULL_FILTER_VALUE,
-      })
-    }
-  }
 
   get items(): MatchingModel[] {
     return this._selectionModel.items
   }
 
-  _selectionModel: FilterableDropdownSelectionModel =
+  @Input({ required: true })
-    new FilterableDropdownSelectionModel()
-
-  @Input()
   set selectionModel(model: FilterableDropdownSelectionModel) {
     if (this.selectionModel) {
       this.selectionModel.changed.complete()
@@ -442,11 +452,6 @@ export class FilterableDropdownComponent
   @Output()
   selectionModelChange = new EventEmitter<FilterableDropdownSelectionModel>()
 
-  @Input()
-  set manyToOne(manyToOne: boolean) {
-    this.selectionModel.manyToOne = manyToOne
-  }
-
   get manyToOne() {
     return this.selectionModel.manyToOne
   }

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

@@ -35,49 +35,48 @@
   <div class="col-auto">
     <div class="d-flex flex-wrap gap-3">
       <div class="d-flex flex-wrap gap-2">
-        @if (permissionsService.currentUserCan(PermissionAction.View, PermissionType.Tag) && tags.length > 0) {
+        @if (permissionsService.currentUserCan(PermissionAction.View, PermissionType.Tag) && tagSelectionModel.items.length > 0) {
           <pngx-filterable-dropdown class="flex-fill fade" [class.show]="show" title="Tags" icon="tag-fill" i18n-title
           filterPlaceholder="Filter tags" i18n-filterPlaceholder
-          [items]="tags"
-          [manyToOne]="true"
           [(selectionModel)]="tagSelectionModel"
           (selectionModelChange)="updateRules()"
+          [items]="tags"
           (opened)="onTagsDropdownOpen()"
           [documentCounts]="tagDocumentCounts"
           [allowSelectNone]="true"
           [disabled]="disabled"
           shortcutKey="t"></pngx-filterable-dropdown>
         }
-        @if (permissionsService.currentUserCan(PermissionAction.View, PermissionType.Correspondent) && correspondents.length > 0) {
+        @if (permissionsService.currentUserCan(PermissionAction.View, PermissionType.Correspondent) && correspondentSelectionModel.items.length > 0) {
           <pngx-filterable-dropdown class="flex-fill fade" [class.show]="show" title="Correspondent" icon="person-fill" i18n-title
           filterPlaceholder="Filter correspondents" i18n-filterPlaceholder
-          [items]="correspondents"
           [(selectionModel)]="correspondentSelectionModel"
           (selectionModelChange)="updateRules()"
+          [items]="correspondents"
           (opened)="onCorrespondentDropdownOpen()"
           [documentCounts]="correspondentDocumentCounts"
           [allowSelectNone]="true"
           [disabled]="disabled"
           shortcutKey="y"></pngx-filterable-dropdown>
         }
-        @if (permissionsService.currentUserCan(PermissionAction.View, PermissionType.DocumentType) && documentTypes.length > 0) {
+        @if (permissionsService.currentUserCan(PermissionAction.View, PermissionType.DocumentType) && documentTypeSelectionModel.items.length > 0) {
             <pngx-filterable-dropdown class="flex-fill fade" [class.show]="show" title="Document type" icon="file-earmark-fill" i18n-title
             filterPlaceholder="Filter document types" i18n-filterPlaceholder
-            [items]="documentTypes"
             [(selectionModel)]="documentTypeSelectionModel"
             (selectionModelChange)="updateRules()"
+            [items]="documentTypes"
             (opened)="onDocumentTypeDropdownOpen()"
             [documentCounts]="documentTypeDocumentCounts"
             [allowSelectNone]="true"
             [disabled]="disabled"
             shortcutKey="u"></pngx-filterable-dropdown>
         }
-        @if (permissionsService.currentUserCan(PermissionAction.View, PermissionType.StoragePath) && storagePaths.length > 0) {
+        @if (permissionsService.currentUserCan(PermissionAction.View, PermissionType.StoragePath) && storagePathSelectionModel.items.length > 0) {
           <pngx-filterable-dropdown class="flex-fill fade" [class.show]="show" title="Storage path" icon="folder-fill" i18n-title
           filterPlaceholder="Filter storage paths" i18n-filterPlaceholder
-          [items]="storagePaths"
           [(selectionModel)]="storagePathSelectionModel"
           (selectionModelChange)="updateRules()"
+          [items]="storagePaths"
           (opened)="onStoragePathDropdownOpen()"
           [documentCounts]="storagePathDocumentCounts"
           [allowSelectNone]="true"

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

@@ -26,14 +26,12 @@ import {
   switchMap,
   takeUntil,
 } from 'rxjs/operators'
-import { Correspondent } from 'src/app/data/correspondent'
 import { CustomField } from 'src/app/data/custom-field'
 import {
   CustomFieldQueryLogicalOperator,
   CustomFieldQueryOperator,
 } from 'src/app/data/custom-field-query'
 import { Document } from 'src/app/data/document'
-import { DocumentType } from 'src/app/data/document-type'
 import { FilterRule } from 'src/app/data/filter-rule'
 import {
   FILTER_ADDED_AFTER,
@@ -77,8 +75,6 @@ import {
   FILTER_TITLE_CONTENT,
   NEGATIVE_NULL_FILTER_VALUE,
 } from 'src/app/data/filter-rule-type'
-import { StoragePath } from 'src/app/data/storage-path'
-import { Tag } from 'src/app/data/tag'
 import {
   PermissionAction,
   PermissionType,
@@ -252,7 +248,9 @@ export class FilterEditorComponent
         case FILTER_HAS_CORRESPONDENT_ANY:
           if (rule.value) {
             return $localize`Correspondent: ${
-              this.correspondents.find((c) => c.id == +rule.value)?.name
+              this.correspondentSelectionModel.items.find(
+                (c) => c.id == +rule.value
+              )?.name
             }`
           } else {
             return $localize`Without correspondent`
@@ -262,7 +260,9 @@ export class FilterEditorComponent
         case FILTER_HAS_DOCUMENT_TYPE_ANY:
           if (rule.value) {
             return $localize`Document type: ${
-              this.documentTypes.find((dt) => dt.id == +rule.value)?.name
+              this.documentTypeSelectionModel.items.find(
+                (dt) => dt.id == +rule.value
+              )?.name
             }`
           } else {
             return $localize`Without document type`
@@ -272,7 +272,9 @@ export class FilterEditorComponent
         case FILTER_HAS_STORAGE_PATH_ANY:
           if (rule.value) {
             return $localize`Storage path: ${
-              this.storagePaths.find((sp) => sp.id == +rule.value)?.name
+              this.storagePathSelectionModel.items.find(
+                (sp) => sp.id == +rule.value
+              )?.name
             }`
           } else {
             return $localize`Without storage path`
@@ -280,7 +282,7 @@ export class FilterEditorComponent
 
         case FILTER_HAS_TAGS_ALL:
           return $localize`Tag: ${
-            this.tags.find((t) => t.id == +rule.value)?.name
+            this.tagSelectionModel.items.find((t) => t.id == +rule.value)?.name
           }`
 
         case FILTER_HAS_ANY_TAG:
@@ -327,10 +329,6 @@ export class FilterEditorComponent
   @ViewChild('textFilterInput')
   textFilterInput: ElementRef
 
-  tags: Tag[] = []
-  correspondents: Correspondent[] = []
-  documentTypes: DocumentType[] = []
-  storagePaths: StoragePath[] = []
   customFields: CustomField[] = []
 
   tagDocumentCounts: SelectionDataItem[]
@@ -371,7 +369,7 @@ export class FilterEditorComponent
     )
   }
 
-  tagSelectionModel = new FilterableDropdownSelectionModel()
+  tagSelectionModel = new FilterableDropdownSelectionModel(true)
   correspondentSelectionModel = new FilterableDropdownSelectionModel()
   documentTypeSelectionModel = new FilterableDropdownSelectionModel()
   storagePathSelectionModel = new FilterableDropdownSelectionModel()
@@ -1082,7 +1080,7 @@ export class FilterEditorComponent
     ) {
       this.loadingCountTotal++
       this.tagService.listAll().subscribe((result) => {
-        this.tags = result.results
+        this.tagSelectionModel.items = result.results
         this.maybeCompleteLoading()
       })
     }
@@ -1094,7 +1092,7 @@ export class FilterEditorComponent
     ) {
       this.loadingCountTotal++
       this.correspondentService.listAll().subscribe((result) => {
-        this.correspondents = result.results
+        this.correspondentSelectionModel.items = result.results
         this.maybeCompleteLoading()
       })
     }
@@ -1106,7 +1104,7 @@ export class FilterEditorComponent
     ) {
       this.loadingCountTotal++
       this.documentTypeService.listAll().subscribe((result) => {
-        this.documentTypes = result.results
+        this.documentTypeSelectionModel.items = result.results
         this.maybeCompleteLoading()
       })
     }
@@ -1118,7 +1116,7 @@ export class FilterEditorComponent
     ) {
       this.loadingCountTotal++
       this.storagePathService.listAll().subscribe((result) => {
-        this.storagePaths = result.results
+        this.storagePathSelectionModel.items = result.results
         this.maybeCompleteLoading()
       })
     }