Enhancement: angular 19 (#8584)

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

@@ -352,7 +352,9 @@
 
 <ng-template #previewContent>
   <div class="thumb-preview position-absolute pe-none" [class.fade]="previewLoaded">
-    <img *ngIf="showThumbnailOverlay" [src]="thumbUrl | safeUrl" class="" width="100%" height="auto" alt="Document loading..." i18n-alt />
+    @if (showThumbnailOverlay) {
+      <img [src]="thumbUrl | safeUrl" class="" width="100%" height="auto" alt="Document loading..." i18n-alt />
+    }
     <div class="position-absolute top-0 start-0 m-2 p-2 d-flex align-items-center justify-content-center">
       <div>
         <div class="spinner-border spinner-border-sm me-2" role="status"></div>

src-ui/src/app/components/document-detail/document-detail.component.scss

@@ -69,17 +69,16 @@ textarea.rtl {
   left: 0;
   width: 100%;
   height: calc(100vh - 160px);
+  overflow: hidden;
+  background-color: gray;
+  padding: 10px 8px; // border
+  z-index: 1000;
 
   @media screen and (min-width: 768px) {
     left: calc(.5 * var(--bs-gutter-x));
     width: calc(100% - var(--bs-gutter-x));
   }
 
-  overflow: hidden;
-  background-color: gray;
-  padding: 10px 8px; // border
-  z-index: 1000;
-
   > div {
     mix-blend-mode: difference;
   }

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

@@ -11,7 +11,6 @@ import {
   fakeAsync,
   tick,
 } from '@angular/core/testing'
-import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { By } from '@angular/platform-browser'
 import {
   ActivatedRoute,
@@ -22,12 +21,8 @@ import {
 import {
   NgbDateStruct,
   NgbModal,
-  NgbModalModule,
   NgbModalRef,
-  NgbModule,
 } from '@ng-bootstrap/ng-bootstrap'
-import { NgSelectModule } from '@ng-select/ng-select'
-import { PdfViewerModule } from 'ng2-pdf-viewer'
 import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
 import { of, throwError } from 'rxjs'
 import { routes } from 'src/app/app-routing.module'
@@ -47,13 +42,9 @@ import {
 } from 'src/app/data/filter-rule-type'
 import { StoragePath } from 'src/app/data/storage-path'
 import { Tag } from 'src/app/data/tag'
-import { IfOwnerDirective } from 'src/app/directives/if-owner.directive'
-import { IfPermissionsDirective } from 'src/app/directives/if-permissions.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 { SafeHtmlPipe } from 'src/app/pipes/safehtml.pipe'
-import { SafeUrlPipe } from 'src/app/pipes/safeurl.pipe'
 import { DocumentListViewService } from 'src/app/services/document-list-view.service'
 import { OpenDocumentsService } from 'src/app/services/open-documents.service'
 import { PermissionsService } from 'src/app/services/permissions.service'
@@ -68,23 +59,7 @@ 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 { DeletePagesConfirmDialogComponent } from '../common/confirm-dialog/delete-pages-confirm-dialog/delete-pages-confirm-dialog.component'
-import { RotateConfirmDialogComponent } from '../common/confirm-dialog/rotate-confirm-dialog/rotate-confirm-dialog.component'
-import { SplitConfirmDialogComponent } from '../common/confirm-dialog/split-confirm-dialog/split-confirm-dialog.component'
 import { CustomFieldsDropdownComponent } from '../common/custom-fields-dropdown/custom-fields-dropdown.component'
-import { CorrespondentEditDialogComponent } from '../common/edit-dialog/correspondent-edit-dialog/correspondent-edit-dialog.component'
-import { DocumentTypeEditDialogComponent } from '../common/edit-dialog/document-type-edit-dialog/document-type-edit-dialog.component'
-import { StoragePathEditDialogComponent } from '../common/edit-dialog/storage-path-edit-dialog/storage-path-edit-dialog.component'
-import { DateComponent } from '../common/input/date/date.component'
-import { NumberComponent } from '../common/input/number/number.component'
-import { PermissionsFormComponent } from '../common/input/permissions/permissions-form/permissions-form.component'
-import { SelectComponent } from '../common/input/select/select.component'
-import { TagsComponent } from '../common/input/tags/tags.component'
-import { TextComponent } from '../common/input/text/text.component'
-import { TextAreaComponent } from '../common/input/textarea/textarea.component'
-import { PageHeaderComponent } from '../common/page-header/page-header.component'
-import { ShareLinksDropdownComponent } from '../common/share-links-dropdown/share-links-dropdown.component'
-import { DocumentNotesComponent } from '../document-notes/document-notes.component'
 import { DocumentDetailComponent } from './document-detail.component'
 
 const doc: Document = {
@@ -159,42 +134,10 @@ describe('DocumentDetailComponent', () => {
 
   beforeEach(async () => {
     TestBed.configureTestingModule({
-      declarations: [
-        DocumentDetailComponent,
-        DocumentTitlePipe,
-        PageHeaderComponent,
-        IfPermissionsDirective,
-        TagsComponent,
-        SelectComponent,
-        TextComponent,
-        NumberComponent,
-        DateComponent,
-        DocumentNotesComponent,
-        CustomDatePipe,
-        DocumentTypeEditDialogComponent,
-        CorrespondentEditDialogComponent,
-        StoragePathEditDialogComponent,
-        IfOwnerDirective,
-        PermissionsFormComponent,
-        SafeHtmlPipe,
-        ConfirmDialogComponent,
-        SafeUrlPipe,
-        ShareLinksDropdownComponent,
-        CustomFieldsDropdownComponent,
-        SplitConfirmDialogComponent,
-        RotateConfirmDialogComponent,
-        DeletePagesConfirmDialogComponent,
-        TextAreaComponent,
-      ],
       imports: [
+        DocumentDetailComponent,
         RouterModule.forRoot(routes),
-        NgbModule,
-        NgSelectModule,
-        FormsModule,
-        ReactiveFormsModule,
-        NgbModalModule,
         NgxBootstrapIconsModule.pick(allIcons),
-        PdfViewerModule,
       ],
       providers: [
         DocumentTitlePipe,

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

@@ -1,15 +1,25 @@
+import { AsyncPipe, NgTemplateOutlet } from '@angular/common'
 import { HttpClient } from '@angular/common/http'
 import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core'
-import { FormArray, FormControl, FormGroup } from '@angular/forms'
+import {
+  FormArray,
+  FormControl,
+  FormGroup,
+  FormsModule,
+  ReactiveFormsModule,
+} from '@angular/forms'
 import { ActivatedRoute, Router } from '@angular/router'
 import {
   NgbDateStruct,
+  NgbDropdownModule,
   NgbModal,
   NgbNav,
   NgbNavChangeEvent,
+  NgbNavModule,
 } from '@ng-bootstrap/ng-bootstrap'
 import { dirtyCheck, DirtyComponent } from '@ngneat/dirty-check-forms'
-import { PDFDocumentProxy } from 'ng2-pdf-viewer'
+import { PDFDocumentProxy, PdfViewerModule } from 'ng2-pdf-viewer'
+import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import { BehaviorSubject, Observable, Subject } from 'rxjs'
 import {
   debounceTime,
@@ -44,7 +54,11 @@ 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 { User } from 'src/app/data/user'
+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 { FileSizePipe } from 'src/app/pipes/file-size.pipe'
+import { SafeUrlPipe } from 'src/app/pipes/safeurl.pipe'
 import { DocumentListViewService } from 'src/app/services/document-list-view.service'
 import { HotKeyService } from 'src/app/services/hot-key.service'
 import { OpenDocumentsService } from 'src/app/services/open-documents.service'
@@ -67,12 +81,27 @@ import { ConfirmDialogComponent } from '../common/confirm-dialog/confirm-dialog.
 import { DeletePagesConfirmDialogComponent } from '../common/confirm-dialog/delete-pages-confirm-dialog/delete-pages-confirm-dialog.component'
 import { RotateConfirmDialogComponent } from '../common/confirm-dialog/rotate-confirm-dialog/rotate-confirm-dialog.component'
 import { SplitConfirmDialogComponent } from '../common/confirm-dialog/split-confirm-dialog/split-confirm-dialog.component'
+import { CustomFieldsDropdownComponent } from '../common/custom-fields-dropdown/custom-fields-dropdown.component'
 import { CorrespondentEditDialogComponent } from '../common/edit-dialog/correspondent-edit-dialog/correspondent-edit-dialog.component'
 import { DocumentTypeEditDialogComponent } from '../common/edit-dialog/document-type-edit-dialog/document-type-edit-dialog.component'
 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 { CheckComponent } from '../common/input/check/check.component'
+import { DateComponent } from '../common/input/date/date.component'
+import { DocumentLinkComponent } from '../common/input/document-link/document-link.component'
+import { MonetaryComponent } from '../common/input/monetary/monetary.component'
+import { NumberComponent } from '../common/input/number/number.component'
+import { PermissionsFormComponent } from '../common/input/permissions/permissions-form/permissions-form.component'
+import { SelectComponent } from '../common/input/select/select.component'
+import { TagsComponent } from '../common/input/tags/tags.component'
 import { TextComponent } from '../common/input/text/text.component'
+import { UrlComponent } from '../common/input/url/url.component'
+import { PageHeaderComponent } from '../common/page-header/page-header.component'
+import { ShareLinksDropdownComponent } from '../common/share-links-dropdown/share-links-dropdown.component'
+import { DocumentHistoryComponent } from '../document-history/document-history.component'
+import { DocumentNotesComponent } from '../document-notes/document-notes.component'
 import { ComponentWithPermissions } from '../with-permissions/with-permissions.component'
+import { MetadataCollapseComponent } from './metadata-collapse/metadata-collapse.component'
 
 enum DocumentDetailNavIDs {
   Details = 1,
@@ -109,6 +138,36 @@ enum ZoomSetting {
   selector: 'pngx-document-detail',
   templateUrl: './document-detail.component.html',
   styleUrls: ['./document-detail.component.scss'],
+  imports: [
+    PageHeaderComponent,
+    CustomFieldsDropdownComponent,
+    DocumentNotesComponent,
+    DocumentHistoryComponent,
+    ShareLinksDropdownComponent,
+    CheckComponent,
+    DateComponent,
+    DocumentLinkComponent,
+    MetadataCollapseComponent,
+    PermissionsFormComponent,
+    SelectComponent,
+    TagsComponent,
+    TextComponent,
+    NumberComponent,
+    MonetaryComponent,
+    UrlComponent,
+    CustomDatePipe,
+    FileSizePipe,
+    IfPermissionsDirective,
+    AsyncPipe,
+    FormsModule,
+    ReactiveFormsModule,
+    NgTemplateOutlet,
+    SafeUrlPipe,
+    NgbNavModule,
+    NgbDropdownModule,
+    NgxBootstrapIconsModule,
+    PdfViewerModule,
+  ],
 })
 export class DocumentDetailComponent
   extends ComponentWithPermissions

src-ui/src/app/components/document-detail/metadata-collapse/metadata-collapse.component.spec.ts

@@ -1,5 +1,4 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing'
-import { NgbCollapseModule } from '@ng-bootstrap/ng-bootstrap'
 import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
 import { MetadataCollapseComponent } from './metadata-collapse.component'
 
@@ -24,9 +23,11 @@ describe('MetadataCollapseComponent', () => {
 
   beforeEach(async () => {
     TestBed.configureTestingModule({
-      declarations: [MetadataCollapseComponent],
       providers: [],
-      imports: [NgbCollapseModule, NgxBootstrapIconsModule.pick(allIcons)],
+      imports: [
+        MetadataCollapseComponent,
+        NgxBootstrapIconsModule.pick(allIcons),
+      ],
     }).compileComponents()
 
     fixture = TestBed.createComponent(MetadataCollapseComponent)

src-ui/src/app/components/document-detail/metadata-collapse/metadata-collapse.component.ts

@@ -1,9 +1,12 @@
 import { Component, Input } from '@angular/core'
+import { NgbCollapseModule } from '@ng-bootstrap/ng-bootstrap'
+import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 
 @Component({
   selector: 'pngx-metadata-collapse',
   templateUrl: './metadata-collapse.component.html',
   styleUrls: ['./metadata-collapse.component.scss'],
+  imports: [NgbCollapseModule, NgxBootstrapIconsModule],
 })
 export class MetadataCollapseComponent {
   constructor() {}