Enhancement: angular 19 (#8584)

src-ui/src/app/components/dashboard/dashboard.component.html

@@ -1,4 +1,4 @@
-<pngx-page-header title="Dashboard" [subTitle]="subtitle" i18n-title>
+<pngx-page-header title="Dashboard" [subTitle]="subtitle" i18n-title tourAnchor="tour.dashboard">
   <pngx-logo extra_classes="d-none d-md-block mt-n2" height="3.5rem"></pngx-logo>
 </pngx-page-header>
 

src-ui/src/app/components/dashboard/dashboard.component.spec.ts

@@ -72,7 +72,12 @@ describe('DashboardComponent', () => {
 
   beforeEach(async () => {
     TestBed.configureTestingModule({
-      declarations: [
+      imports: [
+        NgbAlertModule,
+        RouterTestingModule,
+        TourNgBootstrapModule,
+        DragDropModule,
+        NgxBootstrapIconsModule.pick(allIcons),
         DashboardComponent,
         StatisticsWidgetComponent,
         PageHeaderComponent,
@@ -82,13 +87,6 @@ describe('DashboardComponent', () => {
         SavedViewWidgetComponent,
         LogoComponent,
       ],
-      imports: [
-        NgbAlertModule,
-        RouterTestingModule,
-        TourNgBootstrapModule,
-        DragDropModule,
-        NgxBootstrapIconsModule.pick(allIcons),
-      ],
       providers: [
         PermissionsGuard,
         {

src-ui/src/app/components/dashboard/dashboard.component.ts

@@ -2,21 +2,39 @@ import {
   CdkDragDrop,
   CdkDragEnd,
   CdkDragStart,
+  DragDropModule,
   moveItemInArray,
 } from '@angular/cdk/drag-drop'
 import { Component } from '@angular/core'
 import { TourService } from 'ngx-ui-tour-ng-bootstrap'
 import { SavedView } from 'src/app/data/saved-view'
+import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
 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 { environment } from 'src/environments/environment'
+import { LogoComponent } from '../common/logo/logo.component'
+import { PageHeaderComponent } from '../common/page-header/page-header.component'
 import { ComponentWithPermissions } from '../with-permissions/with-permissions.component'
+import { SavedViewWidgetComponent } from './widgets/saved-view-widget/saved-view-widget.component'
+import { StatisticsWidgetComponent } from './widgets/statistics-widget/statistics-widget.component'
+import { UploadFileWidgetComponent } from './widgets/upload-file-widget/upload-file-widget.component'
+import { WelcomeWidgetComponent } from './widgets/welcome-widget/welcome-widget.component'
 
 @Component({
   selector: 'pngx-dashboard',
   templateUrl: './dashboard.component.html',
   styleUrls: ['./dashboard.component.scss'],
+  imports: [
+    PageHeaderComponent,
+    UploadFileWidgetComponent,
+    WelcomeWidgetComponent,
+    SavedViewWidgetComponent,
+    StatisticsWidgetComponent,
+    IfPermissionsDirective,
+    DragDropModule,
+    LogoComponent,
+  ],
 })
 export class DashboardComponent extends ComponentWithPermissions {
   public dashboardViews: SavedView[] = []

src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.spec.ts

@@ -117,7 +117,11 @@ describe('SavedViewWidgetComponent', () => {
 
   beforeEach(async () => {
     TestBed.configureTestingModule({
-      declarations: [
+      imports: [
+        NgbModule,
+        RouterTestingModule.withRoutes(routes),
+        DragDropModule,
+        NgxBootstrapIconsModule.pick(allIcons),
         SavedViewWidgetComponent,
         WidgetFrameComponent,
         IfPermissionsDirective,
@@ -127,12 +131,6 @@ describe('SavedViewWidgetComponent', () => {
         PreviewPopupComponent,
         CustomFieldDisplayComponent,
       ],
-      imports: [
-        NgbModule,
-        RouterTestingModule.withRoutes(routes),
-        DragDropModule,
-        NgxBootstrapIconsModule.pick(allIcons),
-      ],
       providers: [
         PermissionsGuard,
         DocumentService,

src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.ts

@@ -1,3 +1,4 @@
+import { AsyncPipe, NgClass, NgStyle } from '@angular/common'
 import {
   Component,
   Input,
@@ -6,9 +7,14 @@ import {
   QueryList,
   ViewChildren,
 } from '@angular/core'
-import { Router } from '@angular/router'
+import { Router, RouterModule } from '@angular/router'
 import { NgbPopover } from '@ng-bootstrap/ng-bootstrap'
+import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import { delay, Subject, takeUntil, tap } from 'rxjs'
+import { PreviewPopupComponent } from 'src/app/components/common/preview-popup/preview-popup.component'
+import { TagComponent } from 'src/app/components/common/tag/tag.component'
+import { DocumentCardLargeComponent } from 'src/app/components/document-list/document-card-large/document-card-large.component'
+import { DocumentCardSmallComponent } from 'src/app/components/document-list/document-card-small/document-card-small.component'
 import { LoadingComponentWithPermissions } from 'src/app/components/loading-component/loading.component'
 import { CustomField, CustomFieldDataType } from 'src/app/data/custom-field'
 import {
@@ -27,6 +33,9 @@ import {
   FILTER_STORAGE_PATH,
 } from 'src/app/data/filter-rule-type'
 import { SavedView } from 'src/app/data/saved-view'
+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 { ConsumerStatusService } from 'src/app/services/consumer-status.service'
 import { DocumentListViewService } from 'src/app/services/document-list-view.service'
 import { OpenDocumentsService } from 'src/app/services/open-documents.service'
@@ -38,11 +47,27 @@ import {
 import { CustomFieldsService } from 'src/app/services/rest/custom-fields.service'
 import { DocumentService } from 'src/app/services/rest/document.service'
 import { SettingsService } from 'src/app/services/settings.service'
+import { WidgetFrameComponent } from '../widget-frame/widget-frame.component'
 
 @Component({
   selector: 'pngx-saved-view-widget',
   templateUrl: './saved-view-widget.component.html',
   styleUrls: ['./saved-view-widget.component.scss'],
+  imports: [
+    DocumentCardSmallComponent,
+    DocumentCardLargeComponent,
+    PreviewPopupComponent,
+    TagComponent,
+    WidgetFrameComponent,
+    IfPermissionsDirective,
+    AsyncPipe,
+    DocumentTitlePipe,
+    CustomDatePipe,
+    NgClass,
+    NgStyle,
+    RouterModule,
+    NgxBootstrapIconsModule,
+  ],
 })
 export class SavedViewWidgetComponent
   extends LoadingComponentWithPermissions

src-ui/src/app/components/dashboard/widgets/statistics-widget/statistics-widget.component.spec.ts

@@ -28,15 +28,13 @@ describe('StatisticsWidgetComponent', () => {
 
   beforeEach(async () => {
     TestBed.configureTestingModule({
-      declarations: [
-        StatisticsWidgetComponent,
-        WidgetFrameComponent,
-        IfPermissionsDirective,
-      ],
       imports: [
         NgbModule,
         RouterTestingModule.withRoutes(routes),
         DragDropModule,
+        StatisticsWidgetComponent,
+        WidgetFrameComponent,
+        IfPermissionsDirective,
       ],
       providers: [
         PermissionsGuard,

src-ui/src/app/components/dashboard/widgets/statistics-widget/statistics-widget.component.ts

@@ -1,12 +1,17 @@
+import { DecimalPipe } from '@angular/common'
 import { HttpClient } from '@angular/common/http'
 import { Component, OnDestroy, OnInit } from '@angular/core'
+import { RouterModule } from '@angular/router'
+import { NgbPopoverModule } from '@ng-bootstrap/ng-bootstrap'
 import * as mimeTypeNames from 'mime-names'
 import { first, Subject, Subscription, takeUntil } from 'rxjs'
 import { ComponentWithPermissions } from 'src/app/components/with-permissions/with-permissions.component'
 import { FILTER_HAS_TAGS_ANY } from 'src/app/data/filter-rule-type'
+import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
 import { ConsumerStatusService } from 'src/app/services/consumer-status.service'
 import { DocumentListViewService } from 'src/app/services/document-list-view.service'
 import { environment } from 'src/environments/environment'
+import { WidgetFrameComponent } from '../widget-frame/widget-frame.component'
 
 export interface Statistics {
   documents_total?: number
@@ -30,6 +35,13 @@ interface DocumentFileType {
   selector: 'pngx-statistics-widget',
   templateUrl: './statistics-widget.component.html',
   styleUrls: ['./statistics-widget.component.scss'],
+  imports: [
+    WidgetFrameComponent,
+    IfPermissionsDirective,
+    NgbPopoverModule,
+    DecimalPipe,
+    RouterModule,
+  ],
 })
 export class StatisticsWidgetComponent
   extends ComponentWithPermissions

src-ui/src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.html

@@ -2,7 +2,7 @@
   <div content tourAnchor="tour.upload-widget">
     <form class="justify-content-center d-flex flex-column align-items-center py-3 px-2">
       <span class="text-muted" i18n>Drop documents anywhere or</span>
-      <button class="btn btn-sm btn-outline-primary mt-3" (click)="fileUpload.click()" i18n>Browse files</button>
+      <button type="button" class="btn btn-sm btn-outline-primary mt-3" (click)="fileUpload.click()" i18n>Browse files</button>
       <input type="file" class="visually-hidden" (change)="onFileSelected($event)" multiple #fileUpload>
     </form>
     @if (getStatus().length > 0) {

src-ui/src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.spec.ts

@@ -1,4 +1,3 @@
-import { DragDropModule } from '@angular/cdk/drag-drop'
 import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
 import { provideHttpClientTesting } from '@angular/common/http/testing'
 import {
@@ -9,15 +8,9 @@ import {
 } from '@angular/core/testing'
 import { By } from '@angular/platform-browser'
 import { RouterTestingModule } from '@angular/router/testing'
-import {
-  NgbAlert,
-  NgbAlertModule,
-  NgbCollapse,
-  NgbModule,
-} from '@ng-bootstrap/ng-bootstrap'
+import { NgbAlert, NgbCollapse } from '@ng-bootstrap/ng-bootstrap'
 import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
 import { routes } from 'src/app/app-routing.module'
-import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
 import { PermissionsGuard } from 'src/app/guards/permissions.guard'
 import {
   ConsumerStatusService,
@@ -26,7 +19,6 @@ import {
 } from 'src/app/services/consumer-status.service'
 import { PermissionsService } from 'src/app/services/permissions.service'
 import { UploadDocumentsService } from 'src/app/services/upload-documents.service'
-import { WidgetFrameComponent } from '../widget-frame/widget-frame.component'
 import { UploadFileWidgetComponent } from './upload-file-widget.component'
 
 const FAILED_STATUSES = [new FileStatus()]
@@ -55,17 +47,10 @@ describe('UploadFileWidgetComponent', () => {
 
   beforeEach(async () => {
     TestBed.configureTestingModule({
-      declarations: [
-        UploadFileWidgetComponent,
-        WidgetFrameComponent,
-        IfPermissionsDirective,
-      ],
       imports: [
-        NgbModule,
         RouterTestingModule.withRoutes(routes),
-        NgbAlertModule,
-        DragDropModule,
         NgxBootstrapIconsModule.pick(allIcons),
+        UploadFileWidgetComponent,
       ],
       providers: [
         PermissionsGuard,

src-ui/src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.ts

@@ -1,7 +1,17 @@
+import { NgClass, NgTemplateOutlet } from '@angular/common'
 import { Component, QueryList, ViewChildren } from '@angular/core'
-import { NgbAlert } from '@ng-bootstrap/ng-bootstrap'
+import { RouterModule } from '@angular/router'
+import {
+  NgbAlert,
+  NgbAlertModule,
+  NgbCollapseModule,
+  NgbProgressbarModule,
+} from '@ng-bootstrap/ng-bootstrap'
+import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
+import { TourNgBootstrapModule } from 'ngx-ui-tour-ng-bootstrap'
 import { ComponentWithPermissions } from 'src/app/components/with-permissions/with-permissions.component'
 import { SETTINGS_KEYS } from 'src/app/data/ui-settings'
+import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
 import {
   ConsumerStatusService,
   FileStatus,
@@ -9,6 +19,7 @@ import {
 } from 'src/app/services/consumer-status.service'
 import { SettingsService } from 'src/app/services/settings.service'
 import { UploadDocumentsService } from 'src/app/services/upload-documents.service'
+import { WidgetFrameComponent } from '../widget-frame/widget-frame.component'
 
 const MAX_ALERTS = 5
 
@@ -16,6 +27,18 @@ const MAX_ALERTS = 5
   selector: 'pngx-upload-file-widget',
   templateUrl: './upload-file-widget.component.html',
   styleUrls: ['./upload-file-widget.component.scss'],
+  imports: [
+    WidgetFrameComponent,
+    IfPermissionsDirective,
+    NgClass,
+    NgTemplateOutlet,
+    RouterModule,
+    NgbAlertModule,
+    NgbCollapseModule,
+    NgbProgressbarModule,
+    NgxBootstrapIconsModule,
+    TourNgBootstrapModule,
+  ],
 })
 export class UploadFileWidgetComponent extends ComponentWithPermissions {
   alertsExpanded = false

src-ui/src/app/components/dashboard/widgets/welcome-widget/welcome-widget.component.spec.ts

@@ -11,9 +11,8 @@ describe('WelcomeWidgetComponent', () => {
 
   beforeEach(async () => {
     TestBed.configureTestingModule({
-      declarations: [WelcomeWidgetComponent, WidgetFrameComponent],
       providers: [PermissionsGuard],
-      imports: [NgbAlertModule],
+      imports: [NgbAlertModule, WelcomeWidgetComponent, WidgetFrameComponent],
     }).compileComponents()
 
     fixture = TestBed.createComponent(WelcomeWidgetComponent)

src-ui/src/app/components/dashboard/widgets/welcome-widget/welcome-widget.component.ts

@@ -1,10 +1,12 @@
 import { Component, EventEmitter, Output } from '@angular/core'
+import { NgbAlertModule } from '@ng-bootstrap/ng-bootstrap'
 import { TourService } from 'ngx-ui-tour-ng-bootstrap'
 
 @Component({
   selector: 'pngx-welcome-widget',
   templateUrl: './welcome-widget.component.html',
   styleUrls: ['./welcome-widget.component.scss'],
+  imports: [NgbAlertModule],
 })
 export class WelcomeWidgetComponent {
   constructor(public readonly tourService: TourService) {}

src-ui/src/app/components/dashboard/widgets/widget-frame/widget-frame.component.spec.ts

@@ -28,9 +28,13 @@ describe('WidgetFrameComponent', () => {
 
   beforeEach(async () => {
     TestBed.configureTestingModule({
-      declarations: [WidgetFrameComponent, WidgetFrameComponent],
       providers: [PermissionsGuard],
-      imports: [NgbAlertModule, DragDropModule],
+      imports: [
+        NgbAlertModule,
+        DragDropModule,
+        WidgetFrameComponent,
+        WidgetFrameComponent,
+      ],
     }).compileComponents()
 
     fixture = TestBed.createComponent(WidgetFrameComponent)

src-ui/src/app/components/dashboard/widgets/widget-frame/widget-frame.component.ts

@@ -1,10 +1,13 @@
+import { DragDropModule } from '@angular/cdk/drag-drop'
 import { AfterViewInit, Component, Input } from '@angular/core'
+import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import { LoadingComponentWithPermissions } from 'src/app/components/loading-component/loading.component'
 
 @Component({
   selector: 'pngx-widget-frame',
   templateUrl: './widget-frame.component.html',
   styleUrls: ['./widget-frame.component.scss'],
+  imports: [DragDropModule, NgxBootstrapIconsModule],
 })
 export class WidgetFrameComponent
   extends LoadingComponentWithPermissions