Enhancement: angular 19 (#8584)

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

@@ -4,15 +4,8 @@ import {
   provideHttpClientTesting,
 } from '@angular/common/http/testing'
 import { ComponentFixture, TestBed } from '@angular/core/testing'
-import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { By } from '@angular/platform-browser'
-import {
-  NgbModal,
-  NgbModalModule,
-  NgbModalRef,
-  NgbModule,
-} from '@ng-bootstrap/ng-bootstrap'
-import { NgSelectModule } from '@ng-select/ng-select'
+import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap'
 import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
 import { of, throwError } from 'rxjs'
 import { Correspondent } from 'src/app/data/correspondent'
@@ -21,10 +14,7 @@ import { DocumentType } from 'src/app/data/document-type'
 import { Results } from 'src/app/data/results'
 import { StoragePath } from 'src/app/data/storage-path'
 import { Tag } from 'src/app/data/tag'
-import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
 import { FilterPipe } from 'src/app/pipes/filter.pipe'
-import { IsNumberPipe } from 'src/app/pipes/is-number.pipe'
-import { SafeHtmlPipe } from 'src/app/pipes/safehtml.pipe'
 import { DocumentListViewService } from 'src/app/services/document-list-view.service'
 import { PermissionsService } from 'src/app/services/permissions.service'
 import { CorrespondentService } from 'src/app/services/rest/correspondent.service'
@@ -41,9 +31,6 @@ import { UserService } from 'src/app/services/rest/user.service'
 import { SettingsService } from 'src/app/services/settings.service'
 import { ToastService } from 'src/app/services/toast.service'
 import { environment } from 'src/environments/environment'
-import { ConfirmDialogComponent } from '../../common/confirm-dialog/confirm-dialog.component'
-import { MergeConfirmDialogComponent } from '../../common/confirm-dialog/merge-confirm-dialog/merge-confirm-dialog.component'
-import { RotateConfirmDialogComponent } from '../../common/confirm-dialog/rotate-confirm-dialog/rotate-confirm-dialog.component'
 import { CorrespondentEditDialogComponent } from '../../common/edit-dialog/correspondent-edit-dialog/correspondent-edit-dialog.component'
 import { CustomFieldEditDialogComponent } from '../../common/edit-dialog/custom-field-edit-dialog/custom-field-edit-dialog.component'
 import { DocumentTypeEditDialogComponent } from '../../common/edit-dialog/document-type-edit-dialog/document-type-edit-dialog.component'
@@ -51,13 +38,6 @@ import { EditDialogMode } from '../../common/edit-dialog/edit-dialog.component'
 import { StoragePathEditDialogComponent } from '../../common/edit-dialog/storage-path-edit-dialog/storage-path-edit-dialog.component'
 import { TagEditDialogComponent } from '../../common/edit-dialog/tag-edit-dialog/tag-edit-dialog.component'
 import { FilterableDropdownComponent } from '../../common/filterable-dropdown/filterable-dropdown.component'
-import { ToggleableDropdownButtonComponent } from '../../common/filterable-dropdown/toggleable-dropdown-button/toggleable-dropdown-button.component'
-import { PermissionsFormComponent } from '../../common/input/permissions/permissions-form/permissions-form.component'
-import { PermissionsGroupComponent } from '../../common/input/permissions/permissions-group/permissions-group.component'
-import { PermissionsUserComponent } from '../../common/input/permissions/permissions-user/permissions-user.component'
-import { SelectComponent } from '../../common/input/select/select.component'
-import { SwitchComponent } from '../../common/input/switch/switch.component'
-import { PermissionsDialogComponent } from '../../common/permissions-dialog/permissions-dialog.component'
 import { BulkEditorComponent } from './bulk-editor.component'
 
 const selectionData: SelectionData = {
@@ -95,32 +75,7 @@ describe('BulkEditorComponent', () => {
 
   beforeEach(async () => {
     TestBed.configureTestingModule({
-      declarations: [
-        BulkEditorComponent,
-        IfPermissionsDirective,
-        FilterableDropdownComponent,
-        ToggleableDropdownButtonComponent,
-        FilterPipe,
-        ConfirmDialogComponent,
-        SafeHtmlPipe,
-        PermissionsDialogComponent,
-        PermissionsFormComponent,
-        SelectComponent,
-        PermissionsGroupComponent,
-        PermissionsUserComponent,
-        SwitchComponent,
-        RotateConfirmDialogComponent,
-        IsNumberPipe,
-        MergeConfirmDialogComponent,
-      ],
-      imports: [
-        FormsModule,
-        ReactiveFormsModule,
-        NgbModule,
-        NgbModalModule,
-        NgSelectModule,
-        NgxBootstrapIconsModule.pick(allIcons),
-      ],
+      imports: [BulkEditorComponent, NgxBootstrapIconsModule.pick(allIcons)],
       providers: [
         PermissionsService,
         {

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

@@ -1,7 +1,17 @@
 import { Component, Input, OnDestroy, OnInit } from '@angular/core'
-import { FormControl, FormGroup } from '@angular/forms'
-import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap'
+import {
+  FormControl,
+  FormGroup,
+  FormsModule,
+  ReactiveFormsModule,
+} from '@angular/forms'
+import {
+  NgbDropdownModule,
+  NgbModal,
+  NgbModalRef,
+} from '@ng-bootstrap/ng-bootstrap'
 import { saveAs } from 'file-saver'
+import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import { first, map, Subject, switchMap, takeUntil } from 'rxjs'
 import { ConfirmDialogComponent } from 'src/app/components/common/confirm-dialog/confirm-dialog.component'
 import { Correspondent } from 'src/app/data/correspondent'
@@ -11,6 +21,7 @@ import { MatchingModel } from 'src/app/data/matching-model'
 import { StoragePath } from 'src/app/data/storage-path'
 import { Tag } from 'src/app/data/tag'
 import { SETTINGS_KEYS } from 'src/app/data/ui-settings'
+import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
 import { DocumentListViewService } from 'src/app/services/document-list-view.service'
 import { OpenDocumentsService } from 'src/app/services/open-documents.service'
 import {
@@ -39,6 +50,7 @@ import { StoragePathEditDialogComponent } from '../../common/edit-dialog/storage
 import { TagEditDialogComponent } from '../../common/edit-dialog/tag-edit-dialog/tag-edit-dialog.component'
 import {
   ChangedItems,
+  FilterableDropdownComponent,
   FilterableDropdownSelectionModel,
 } from '../../common/filterable-dropdown/filterable-dropdown.component'
 import { ToggleableItemState } from '../../common/filterable-dropdown/toggleable-dropdown-button/toggleable-dropdown-button.component'
@@ -50,6 +62,14 @@ import { CustomFieldsBulkEditDialogComponent } from './custom-fields-bulk-edit-d
   selector: 'pngx-bulk-editor',
   templateUrl: './bulk-editor.component.html',
   styleUrls: ['./bulk-editor.component.scss'],
+  imports: [
+    FilterableDropdownComponent,
+    IfPermissionsDirective,
+    FormsModule,
+    ReactiveFormsModule,
+    NgbDropdownModule,
+    NgxBootstrapIconsModule,
+  ],
 })
 export class BulkEditorComponent
   extends ComponentWithPermissions

src-ui/src/app/components/document-list/bulk-editor/custom-fields-bulk-edit-dialog/custom-fields-bulk-edit-dialog.component.spec.ts

@@ -2,11 +2,8 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'
 
 import { provideHttpClient } from '@angular/common/http'
 import { provideHttpClientTesting } from '@angular/common/http/testing'
-import { FormsModule, ReactiveFormsModule } from '@angular/forms'
-import { NgbActiveModal, NgbModule } from '@ng-bootstrap/ng-bootstrap'
-import { NgSelectModule } from '@ng-select/ng-select'
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
 import { of, throwError } from 'rxjs'
-import { SelectComponent } from 'src/app/components/common/input/select/select.component'
 import { CustomFieldDataType } from 'src/app/data/custom-field'
 import { DocumentService } from 'src/app/services/rest/document.service'
 import { CustomFieldsBulkEditDialogComponent } from './custom-fields-bulk-edit-dialog.component'
@@ -19,8 +16,8 @@ describe('CustomFieldsBulkEditDialogComponent', () => {
 
   beforeEach(async () => {
     TestBed.configureTestingModule({
-      declarations: [CustomFieldsBulkEditDialogComponent, SelectComponent],
-      imports: [FormsModule, ReactiveFormsModule, NgbModule, NgSelectModule],
+      declarations: [],
+      imports: [CustomFieldsBulkEditDialogComponent],
       providers: [
         NgbActiveModal,
         provideHttpClient(),

src-ui/src/app/components/document-list/bulk-editor/custom-fields-bulk-edit-dialog/custom-fields-bulk-edit-dialog.component.ts

@@ -1,7 +1,21 @@
 import { Component, EventEmitter, Output } from '@angular/core'
-import { FormControl, FormGroup } from '@angular/forms'
+import {
+  FormControl,
+  FormGroup,
+  FormsModule,
+  ReactiveFormsModule,
+} from '@angular/forms'
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import { first } from 'rxjs'
+import { CheckComponent } from 'src/app/components/common/input/check/check.component'
+import { DateComponent } from 'src/app/components/common/input/date/date.component'
+import { DocumentLinkComponent } from 'src/app/components/common/input/document-link/document-link.component'
+import { MonetaryComponent } from 'src/app/components/common/input/monetary/monetary.component'
+import { NumberComponent } from 'src/app/components/common/input/number/number.component'
+import { SelectComponent } from 'src/app/components/common/input/select/select.component'
+import { TextComponent } from 'src/app/components/common/input/text/text.component'
+import { UrlComponent } from 'src/app/components/common/input/url/url.component'
 import { CustomField, CustomFieldDataType } from 'src/app/data/custom-field'
 import { DocumentService } from 'src/app/services/rest/document.service'
 
@@ -9,6 +23,19 @@ import { DocumentService } from 'src/app/services/rest/document.service'
   selector: 'pngx-custom-fields-bulk-edit-dialog',
   templateUrl: './custom-fields-bulk-edit-dialog.component.html',
   styleUrl: './custom-fields-bulk-edit-dialog.component.scss',
+  imports: [
+    CheckComponent,
+    DateComponent,
+    DocumentLinkComponent,
+    MonetaryComponent,
+    NumberComponent,
+    SelectComponent,
+    TextComponent,
+    UrlComponent,
+    FormsModule,
+    ReactiveFormsModule,
+    NgxBootstrapIconsModule,
+  ],
 })
 export class CustomFieldsBulkEditDialogComponent {
   CustomFieldDataType = CustomFieldDataType

src-ui/src/app/components/document-list/document-card-large/document-card-large.component.spec.ts

@@ -43,7 +43,12 @@ describe('DocumentCardLargeComponent', () => {
 
   beforeEach(async () => {
     TestBed.configureTestingModule({
-      declarations: [
+      imports: [
+        RouterTestingModule,
+        NgbPopoverModule,
+        NgbTooltipModule,
+        NgbProgressbarModule,
+        NgxBootstrapIconsModule.pick(allIcons),
         DocumentCardLargeComponent,
         DocumentTitlePipe,
         CustomDatePipe,
@@ -53,13 +58,6 @@ describe('DocumentCardLargeComponent', () => {
         PreviewPopupComponent,
         CustomFieldDisplayComponent,
       ],
-      imports: [
-        RouterTestingModule,
-        NgbPopoverModule,
-        NgbTooltipModule,
-        NgbProgressbarModule,
-        NgxBootstrapIconsModule.pick(allIcons),
-      ],
       providers: [
         DatePipe,
         provideHttpClient(withInterceptorsFromDi()),

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

@@ -1,3 +1,4 @@
+import { AsyncPipe } from '@angular/common'
 import {
   AfterViewInit,
   Component,
@@ -6,21 +7,49 @@ import {
   Output,
   ViewChild,
 } from '@angular/core'
+import { RouterModule } from '@angular/router'
+import {
+  NgbProgressbarModule,
+  NgbTooltipModule,
+} from '@ng-bootstrap/ng-bootstrap'
+import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import {
   DEFAULT_DISPLAY_FIELDS,
   DisplayField,
   Document,
 } from 'src/app/data/document'
 import { SETTINGS_KEYS } from 'src/app/data/ui-settings'
+import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
+import { CustomDatePipe } from 'src/app/pipes/custom-date.pipe'
+import { DocumentTitlePipe } from 'src/app/pipes/document-title.pipe'
+import { IsNumberPipe } from 'src/app/pipes/is-number.pipe'
+import { UsernamePipe } from 'src/app/pipes/username.pipe'
 import { DocumentService } from 'src/app/services/rest/document.service'
 import { SettingsService } from 'src/app/services/settings.service'
+import { CustomFieldDisplayComponent } from '../../common/custom-field-display/custom-field-display.component'
 import { PreviewPopupComponent } from '../../common/preview-popup/preview-popup.component'
+import { TagComponent } from '../../common/tag/tag.component'
 import { LoadingComponentWithPermissions } from '../../loading-component/loading.component'
 
 @Component({
   selector: 'pngx-document-card-large',
   templateUrl: './document-card-large.component.html',
   styleUrls: ['./document-card-large.component.scss'],
+  imports: [
+    DocumentTitlePipe,
+    IsNumberPipe,
+    PreviewPopupComponent,
+    TagComponent,
+    CustomFieldDisplayComponent,
+    AsyncPipe,
+    UsernamePipe,
+    IfPermissionsDirective,
+    CustomDatePipe,
+    RouterModule,
+    NgbTooltipModule,
+    NgbProgressbarModule,
+    NgxBootstrapIconsModule,
+  ],
 })
 export class DocumentCardLargeComponent
   extends LoadingComponentWithPermissions

src-ui/src/app/components/document-list/document-card-small/document-card-small.component.spec.ts

@@ -4,21 +4,9 @@ import { provideHttpClientTesting } from '@angular/common/http/testing'
 import { ComponentFixture, TestBed } from '@angular/core/testing'
 import { By } from '@angular/platform-browser'
 import { RouterTestingModule } from '@angular/router/testing'
-import {
-  NgbPopoverModule,
-  NgbProgressbarModule,
-  NgbTooltipModule,
-} from '@ng-bootstrap/ng-bootstrap'
 import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
 import { of } from 'rxjs'
 import { Tag } from 'src/app/data/tag'
-import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
-import { CustomDatePipe } from 'src/app/pipes/custom-date.pipe'
-import { DocumentTitlePipe } from 'src/app/pipes/document-title.pipe'
-import { IsNumberPipe } from 'src/app/pipes/is-number.pipe'
-import { SafeUrlPipe } from 'src/app/pipes/safeurl.pipe'
-import { CustomFieldDisplayComponent } from '../../common/custom-field-display/custom-field-display.component'
-import { PreviewPopupComponent } from '../../common/preview-popup/preview-popup.component'
 import { TagComponent } from '../../common/tag/tag.component'
 import { DocumentCardSmallComponent } from './document-card-small.component'
 
@@ -56,23 +44,10 @@ describe('DocumentCardSmallComponent', () => {
 
   beforeEach(async () => {
     TestBed.configureTestingModule({
-      declarations: [
-        DocumentCardSmallComponent,
-        DocumentTitlePipe,
-        CustomDatePipe,
-        IfPermissionsDirective,
-        SafeUrlPipe,
-        TagComponent,
-        IsNumberPipe,
-        PreviewPopupComponent,
-        CustomFieldDisplayComponent,
-      ],
       imports: [
         RouterTestingModule,
-        NgbPopoverModule,
-        NgbTooltipModule,
-        NgbProgressbarModule,
         NgxBootstrapIconsModule.pick(allIcons),
+        DocumentCardSmallComponent,
       ],
       providers: [
         DatePipe,

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

@@ -1,3 +1,4 @@
+import { AsyncPipe } from '@angular/common'
 import {
   AfterViewInit,
   Component,
@@ -6,6 +7,12 @@ import {
   Output,
   ViewChild,
 } from '@angular/core'
+import { RouterModule } from '@angular/router'
+import {
+  NgbProgressbarModule,
+  NgbTooltipModule,
+} from '@ng-bootstrap/ng-bootstrap'
+import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import { map } from 'rxjs/operators'
 import {
   DEFAULT_DISPLAY_FIELDS,
@@ -13,15 +20,37 @@ import {
   Document,
 } from 'src/app/data/document'
 import { SETTINGS_KEYS } from 'src/app/data/ui-settings'
+import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
+import { CustomDatePipe } from 'src/app/pipes/custom-date.pipe'
+import { DocumentTitlePipe } from 'src/app/pipes/document-title.pipe'
+import { IsNumberPipe } from 'src/app/pipes/is-number.pipe'
+import { UsernamePipe } from 'src/app/pipes/username.pipe'
 import { DocumentService } from 'src/app/services/rest/document.service'
 import { SettingsService } from 'src/app/services/settings.service'
+import { CustomFieldDisplayComponent } from '../../common/custom-field-display/custom-field-display.component'
 import { PreviewPopupComponent } from '../../common/preview-popup/preview-popup.component'
+import { TagComponent } from '../../common/tag/tag.component'
 import { LoadingComponentWithPermissions } from '../../loading-component/loading.component'
 
 @Component({
   selector: 'pngx-document-card-small',
   templateUrl: './document-card-small.component.html',
   styleUrls: ['./document-card-small.component.scss'],
+  imports: [
+    DocumentTitlePipe,
+    IsNumberPipe,
+    PreviewPopupComponent,
+    TagComponent,
+    CustomFieldDisplayComponent,
+    AsyncPipe,
+    UsernamePipe,
+    IfPermissionsDirective,
+    CustomDatePipe,
+    RouterModule,
+    NgbTooltipModule,
+    NgbProgressbarModule,
+    NgxBootstrapIconsModule,
+  ],
 })
 export class DocumentCardSmallComponent
   extends LoadingComponentWithPermissions

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

@@ -6,22 +6,15 @@ import {
 } from '@angular/common/http'
 import { provideHttpClientTesting } from '@angular/common/http/testing'
 import { ComponentFixture, TestBed } from '@angular/core/testing'
-import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { By } from '@angular/platform-browser'
 import { ActivatedRoute, Router, convertToParamMap } from '@angular/router'
 import { RouterTestingModule } from '@angular/router/testing'
 import {
-  NgbDatepickerModule,
   NgbDropdown,
   NgbDropdownItem,
-  NgbDropdownModule,
   NgbModal,
   NgbModalRef,
-  NgbPopoverModule,
-  NgbTooltipModule,
-  NgbTypeaheadModule,
 } from '@ng-bootstrap/ng-bootstrap'
-import { NgSelectModule } from '@ng-select/ng-select'
 import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
 import { Subject, of, throwError } from 'rxjs'
 import { routes } from 'src/app/app-routing.module'
@@ -38,13 +31,11 @@ import {
 } from 'src/app/data/filter-rule-type'
 import { SavedView } from 'src/app/data/saved-view'
 import { SETTINGS_KEYS } from 'src/app/data/ui-settings'
-import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
 import { SortableDirective } from 'src/app/directives/sortable.directive'
 import { PermissionsGuard } from 'src/app/guards/permissions.guard'
 import { CustomDatePipe } from 'src/app/pipes/custom-date.pipe'
 import { DocumentTitlePipe } from 'src/app/pipes/document-title.pipe'
 import { FilterPipe } from 'src/app/pipes/filter.pipe'
-import { IsNumberPipe } from 'src/app/pipes/is-number.pipe'
 import { SafeHtmlPipe } from 'src/app/pipes/safehtml.pipe'
 import { UsernamePipe } from 'src/app/pipes/username.pipe'
 import {
@@ -57,22 +48,9 @@ import { DocumentService } from 'src/app/services/rest/document.service'
 import { SavedViewService } from 'src/app/services/rest/saved-view.service'
 import { SettingsService } from 'src/app/services/settings.service'
 import { ToastService } from 'src/app/services/toast.service'
-import { ClearableBadgeComponent } from '../common/clearable-badge/clearable-badge.component'
-import { ConfirmDialogComponent } from '../common/confirm-dialog/confirm-dialog.component'
-import { DatesDropdownComponent } from '../common/dates-dropdown/dates-dropdown.component'
-import { FilterableDropdownComponent } from '../common/filterable-dropdown/filterable-dropdown.component'
-import { ToggleableDropdownButtonComponent } from '../common/filterable-dropdown/toggleable-dropdown-button/toggleable-dropdown-button.component'
-import { CheckComponent } from '../common/input/check/check.component'
-import { TextComponent } from '../common/input/text/text.component'
-import { PageHeaderComponent } from '../common/page-header/page-header.component'
-import { PermissionsFilterDropdownComponent } from '../common/permissions-filter-dropdown/permissions-filter-dropdown.component'
-import { PreviewPopupComponent } from '../common/preview-popup/preview-popup.component'
-import { BulkEditorComponent } from './bulk-editor/bulk-editor.component'
 import { DocumentCardLargeComponent } from './document-card-large/document-card-large.component'
 import { DocumentCardSmallComponent } from './document-card-small/document-card-small.component'
 import { DocumentListComponent } from './document-list.component'
-import { FilterEditorComponent } from './filter-editor/filter-editor.component'
-import { SaveViewConfigDialogComponent } from './save-view-config-dialog/save-view-config-dialog.component'
 
 const docs: Document[] = [
   {
@@ -114,43 +92,10 @@ describe('DocumentListComponent', () => {
 
   beforeEach(async () => {
     TestBed.configureTestingModule({
-      declarations: [
-        DocumentListComponent,
-        PageHeaderComponent,
-        FilterEditorComponent,
-        FilterableDropdownComponent,
-        DatesDropdownComponent,
-        PermissionsFilterDropdownComponent,
-        ToggleableDropdownButtonComponent,
-        BulkEditorComponent,
-        ClearableBadgeComponent,
-        DocumentCardSmallComponent,
-        DocumentCardLargeComponent,
-        ConfirmDialogComponent,
-        SaveViewConfigDialogComponent,
-        TextComponent,
-        CheckComponent,
-        IfPermissionsDirective,
-        FilterPipe,
-        CustomDatePipe,
-        SortableDirective,
-        DocumentTitlePipe,
-        UsernamePipe,
-        SafeHtmlPipe,
-        IsNumberPipe,
-        PreviewPopupComponent,
-      ],
       imports: [
         RouterTestingModule.withRoutes(routes),
-        FormsModule,
-        ReactiveFormsModule,
-        NgbDropdownModule,
-        NgbDatepickerModule,
-        NgbPopoverModule,
-        NgbTooltipModule,
         NgxBootstrapIconsModule.pick(allIcons),
-        NgSelectModule,
-        NgbTypeaheadModule,
+        DocumentListComponent,
       ],
       providers: [
         FilterPipe,

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

@@ -1,3 +1,4 @@
+import { AsyncPipe, NgClass, NgTemplateOutlet } from '@angular/common'
 import {
   Component,
   OnDestroy,
@@ -6,8 +7,16 @@ import {
   ViewChild,
   ViewChildren,
 } from '@angular/core'
-import { ActivatedRoute, convertToParamMap, Router } from '@angular/router'
-import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { FormsModule, ReactiveFormsModule } from '@angular/forms'
+import {
+  ActivatedRoute,
+  convertToParamMap,
+  Router,
+  RouterModule,
+} from '@angular/router'
+import { NgbDropdownModule, NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
+import { TourNgBootstrapModule } from 'ngx-ui-tour-ng-bootstrap'
 import { filter, first, map, Subject, switchMap, takeUntil } from 'rxjs'
 import {
   DEFAULT_DISPLAY_FIELDS,
@@ -19,10 +28,14 @@ import { FilterRule } from 'src/app/data/filter-rule'
 import { FILTER_FULLTEXT_MORELIKE } from 'src/app/data/filter-rule-type'
 import { SavedView } from 'src/app/data/saved-view'
 import { SETTINGS_KEYS } from 'src/app/data/ui-settings'
+import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
 import {
   SortableDirective,
   SortEvent,
 } from 'src/app/directives/sortable.directive'
+import { CustomDatePipe } from 'src/app/pipes/custom-date.pipe'
+import { DocumentTitlePipe } from 'src/app/pipes/document-title.pipe'
+import { UsernamePipe } from 'src/app/pipes/username.pipe'
 import { ConsumerStatusService } from 'src/app/services/consumer-status.service'
 import { DocumentListViewService } from 'src/app/services/document-list-view.service'
 import { HotKeyService } from 'src/app/services/hot-key.service'
@@ -35,7 +48,12 @@ import {
   filterRulesDiffer,
   isFullTextFilterRule,
 } from 'src/app/utils/filter-rules'
+import { PageHeaderComponent } from '../common/page-header/page-header.component'
+import { PreviewPopupComponent } from '../common/preview-popup/preview-popup.component'
 import { ComponentWithPermissions } from '../with-permissions/with-permissions.component'
+import { BulkEditorComponent } from './bulk-editor/bulk-editor.component'
+import { DocumentCardLargeComponent } from './document-card-large/document-card-large.component'
+import { DocumentCardSmallComponent } from './document-card-small/document-card-small.component'
 import { FilterEditorComponent } from './filter-editor/filter-editor.component'
 import { SaveViewConfigDialogComponent } from './save-view-config-dialog/save-view-config-dialog.component'
 
@@ -43,6 +61,28 @@ import { SaveViewConfigDialogComponent } from './save-view-config-dialog/save-vi
   selector: 'pngx-document-list',
   templateUrl: './document-list.component.html',
   styleUrls: ['./document-list.component.scss'],
+  imports: [
+    PageHeaderComponent,
+    BulkEditorComponent,
+    FilterEditorComponent,
+    DocumentCardSmallComponent,
+    DocumentCardLargeComponent,
+    PreviewPopupComponent,
+    CustomDatePipe,
+    DocumentTitlePipe,
+    IfPermissionsDirective,
+    SortableDirective,
+    UsernamePipe,
+    NgxBootstrapIconsModule,
+    AsyncPipe,
+    FormsModule,
+    ReactiveFormsModule,
+    NgTemplateOutlet,
+    NgbDropdownModule,
+    NgClass,
+    RouterModule,
+    TourNgBootstrapModule,
+  ],
 })
 export class DocumentListComponent
   extends ComponentWithPermissions

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

@@ -179,7 +179,15 @@ describe('FilterEditorComponent', () => {
 
   beforeEach(fakeAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [
+      imports: [
+        RouterModule,
+        NgbDropdownModule,
+        FormsModule,
+        ReactiveFormsModule,
+        NgbDatepickerModule,
+        NgxBootstrapIconsModule.pick(allIcons),
+        NgbTypeaheadModule,
+        NgSelectModule,
         FilterEditorComponent,
         FilterableDropdownComponent,
         PermissionsFilterDropdownComponent,
@@ -191,16 +199,6 @@ describe('FilterEditorComponent', () => {
         CustomDatePipe,
         CustomFieldsQueryDropdownComponent,
       ],
-      imports: [
-        RouterModule,
-        NgbDropdownModule,
-        FormsModule,
-        ReactiveFormsModule,
-        NgbDatepickerModule,
-        NgxBootstrapIconsModule.pick(allIcons),
-        NgbTypeaheadModule,
-        NgSelectModule,
-      ],
       providers: [
         FilterPipe,
         CustomDatePipe,

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

@@ -9,6 +9,13 @@ import {
   Output,
   ViewChild,
 } from '@angular/core'
+import { FormsModule, ReactiveFormsModule } from '@angular/forms'
+import {
+  NgbDropdownModule,
+  NgbTypeaheadModule,
+} from '@ng-bootstrap/ng-bootstrap'
+import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
+import { TourNgBootstrapModule } from 'ngx-ui-tour-ng-bootstrap'
 import { Observable, Subject, from } from 'rxjs'
 import {
   catchError,
@@ -87,9 +94,16 @@ import {
   CustomFieldQueryExpression,
 } from 'src/app/utils/custom-field-query-element'
 import { filterRulesDiffer } from 'src/app/utils/filter-rules'
-import { CustomFieldQueriesModel } from '../../common/custom-fields-query-dropdown/custom-fields-query-dropdown.component'
-import { RelativeDate } from '../../common/dates-dropdown/dates-dropdown.component'
 import {
+  CustomFieldQueriesModel,
+  CustomFieldsQueryDropdownComponent,
+} from '../../common/custom-fields-query-dropdown/custom-fields-query-dropdown.component'
+import {
+  DatesDropdownComponent,
+  RelativeDate,
+} from '../../common/dates-dropdown/dates-dropdown.component'
+import {
+  FilterableDropdownComponent,
   FilterableDropdownSelectionModel,
   Intersection,
   LogicalOperator,
@@ -97,6 +111,7 @@ import {
 import { ToggleableItemState } from '../../common/filterable-dropdown/toggleable-dropdown-button/toggleable-dropdown-button.component'
 import {
   OwnerFilterType,
+  PermissionsFilterDropdownComponent,
   PermissionsSelectionModel,
 } from '../../common/permissions-filter-dropdown/permissions-filter-dropdown.component'
 import { LoadingComponentWithPermissions } from '../../loading-component/loading.component'
@@ -184,6 +199,18 @@ const DEFAULT_TEXT_FILTER_MODIFIER_OPTIONS = [
   selector: 'pngx-filter-editor',
   templateUrl: './filter-editor.component.html',
   styleUrls: ['./filter-editor.component.scss'],
+  imports: [
+    FilterableDropdownComponent,
+    CustomFieldsQueryDropdownComponent,
+    DatesDropdownComponent,
+    PermissionsFilterDropdownComponent,
+    NgxBootstrapIconsModule,
+    NgbDropdownModule,
+    NgbTypeaheadModule,
+    FormsModule,
+    ReactiveFormsModule,
+    TourNgBootstrapModule,
+  ],
 })
 export class FilterEditorComponent
   extends LoadingComponentWithPermissions

src-ui/src/app/components/document-list/save-view-config-dialog/save-view-config-dialog.component.spec.ts

@@ -18,13 +18,15 @@ describe('SaveViewConfigDialogComponent', () => {
 
   beforeEach(fakeAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [
+      providers: [NgbActiveModal],
+      imports: [
+        NgbModalModule,
+        FormsModule,
+        ReactiveFormsModule,
         SaveViewConfigDialogComponent,
         TextComponent,
         CheckComponent,
       ],
-      providers: [NgbActiveModal],
-      imports: [NgbModalModule, FormsModule, ReactiveFormsModule],
     }).compileComponents()
 
     modal = TestBed.inject(NgbActiveModal)

src-ui/src/app/components/document-list/save-view-config-dialog/save-view-config-dialog.component.ts

@@ -1,11 +1,19 @@
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'
-import { FormControl, FormGroup } from '@angular/forms'
+import {
+  FormControl,
+  FormGroup,
+  FormsModule,
+  ReactiveFormsModule,
+} from '@angular/forms'
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { CheckComponent } from '../../common/input/check/check.component'
+import { TextComponent } from '../../common/input/text/text.component'
 
 @Component({
   selector: 'pngx-save-view-config-dialog',
   templateUrl: './save-view-config-dialog.component.html',
   styleUrls: ['./save-view-config-dialog.component.scss'],
+  imports: [CheckComponent, TextComponent, FormsModule, ReactiveFormsModule],
 })
 export class SaveViewConfigDialogComponent implements OnInit {
   constructor(private modal: NgbActiveModal) {}