Refactor: loading component

src-ui/src/app/components/manage/custom-fields/custom-fields.component.spec.ts

@@ -28,6 +28,7 @@ import {
   CustomFieldQueryLogicalOperator,
   CustomFieldQueryOperator,
 } from 'src/app/data/custom-field-query'
+import { SettingsService } from 'src/app/services/settings.service'
 
 const fields: CustomField[] = [
   {
@@ -49,6 +50,7 @@ describe('CustomFieldsComponent', () => {
   let modalService: NgbModal
   let toastService: ToastService
   let listViewService: DocumentListViewService
+  let settingsService: SettingsService
 
   beforeEach(() => {
     TestBed.configureTestingModule({
@@ -91,6 +93,8 @@ describe('CustomFieldsComponent', () => {
     modalService = TestBed.inject(NgbModal)
     toastService = TestBed.inject(ToastService)
     listViewService = TestBed.inject(DocumentListViewService)
+    settingsService = TestBed.inject(SettingsService)
+    settingsService.currentUser = { id: 0, username: 'test' }
 
     fixture = TestBed.createComponent(CustomFieldsComponent)
     component = fixture.componentInstance

src-ui/src/app/components/manage/custom-fields/custom-fields.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { delay, Subject, takeUntil, tap } from 'rxjs'
+import { delay, takeUntil, tap } from 'rxjs'
 import { DATA_TYPE_LABELS, CustomField } from 'src/app/data/custom-field'
 import { PermissionsService } from 'src/app/services/permissions.service'
 import { CustomFieldsService } from 'src/app/services/rest/custom-fields.service'
@@ -8,7 +8,6 @@ import { ToastService } from 'src/app/services/toast.service'
 import { ConfirmDialogComponent } from '../../common/confirm-dialog/confirm-dialog.component'
 import { CustomFieldEditDialogComponent } from '../../common/edit-dialog/custom-field-edit-dialog/custom-field-edit-dialog.component'
 import { EditDialogMode } from '../../common/edit-dialog/edit-dialog.component'
-import { ComponentWithPermissions } from '../../with-permissions/with-permissions.component'
 import { DocumentListViewService } from 'src/app/services/document-list-view.service'
 import { FILTER_CUSTOM_FIELDS_QUERY } from 'src/app/data/filter-rule-type'
 import {
@@ -16,6 +15,7 @@ import {
   CustomFieldQueryOperator,
 } from 'src/app/data/custom-field-query'
 import { SettingsService } from 'src/app/services/settings.service'
+import { LoadingComponentWithPermissions } from '../../loading-component/loading.component'
 
 @Component({
   selector: 'pngx-custom-fields',
@@ -23,15 +23,11 @@ import { SettingsService } from 'src/app/services/settings.service'
   styleUrls: ['./custom-fields.component.scss'],
 })
 export class CustomFieldsComponent
-  extends ComponentWithPermissions
+  extends LoadingComponentWithPermissions
   implements OnInit
 {
   public fields: CustomField[] = []
 
-  public loading: boolean = true
-  public reveal: boolean = false
-
-  private unsubscribeNotifier: Subject<any> = new Subject()
   constructor(
     private customFieldsService: CustomFieldsService,
     public permissionsService: PermissionsService,

src-ui/src/app/components/manage/management-list/management-list.component.html

@@ -44,7 +44,7 @@
       </tr>
     </thead>
     <tbody>
-      @if (isLoading) {
+      @if (loading) {
         <tr>
           <td colspan="5">
             <div class="spinner-border spinner-border-sm me-2" role="status"></div>
@@ -109,7 +109,7 @@
   </table>
 </div>
 
-@if (!isLoading) {
+@if (!loading) {
   <div class="d-flex mb-2">
     @if (collectionSize > 0) {
       <div>

src-ui/src/app/components/manage/management-list/management-list.component.ts

@@ -39,8 +39,8 @@ import {
 import { ToastService } from 'src/app/services/toast.service'
 import { ConfirmDialogComponent } from '../../common/confirm-dialog/confirm-dialog.component'
 import { EditDialogMode } from '../../common/edit-dialog/edit-dialog.component'
-import { ComponentWithPermissions } from '../../with-permissions/with-permissions.component'
 import { PermissionsDialogComponent } from '../../common/permissions-dialog/permissions-dialog.component'
+import { LoadingComponentWithPermissions } from '../../loading-component/loading.component'
 
 export interface ManagementListColumn {
   key: string
@@ -56,7 +56,7 @@ export interface ManagementListColumn {
 
 @Directive()
 export abstract class ManagementListComponent<T extends ObjectWithId>
-  extends ComponentWithPermissions
+  extends LoadingComponentWithPermissions
   implements OnInit, OnDestroy
 {
   constructor(
@@ -86,8 +86,6 @@ export abstract class ManagementListComponent<T extends ObjectWithId>
   public sortField: string
   public sortReverse: boolean
 
-  public isLoading: boolean = false
-
   private nameFilterDebounce: Subject<string>
   protected unsubscribeNotifier: Subject<any> = new Subject()
   protected _nameFilter: string
@@ -95,8 +93,6 @@ export abstract class ManagementListComponent<T extends ObjectWithId>
   public selectedObjects: Set<number> = new Set()
   public togggleAll: boolean = false
 
-  public reveal: boolean = false
-
   ngOnInit(): void {
     this.reloadData()
 
@@ -115,11 +111,6 @@ export abstract class ManagementListComponent<T extends ObjectWithId>
       })
   }
 
-  ngOnDestroy() {
-    this.unsubscribeNotifier.next(true)
-    this.unsubscribeNotifier.complete()
-  }
-
   getMatching(o: MatchingModel) {
     if (o.matching_algorithm == MATCH_AUTO) {
       return $localize`Automatic`
@@ -141,7 +132,7 @@ export abstract class ManagementListComponent<T extends ObjectWithId>
   }
 
   reloadData(extraParams: { [key: string]: any } = null) {
-    this.isLoading = true
+    this.loading = true
     this.clearSelection()
     this.service
       .listFiltered(
@@ -163,7 +154,7 @@ export abstract class ManagementListComponent<T extends ObjectWithId>
       )
       .subscribe(() => {
         this.reveal = true
-        this.isLoading = false
+        this.loading = false
       })
   }
 

src-ui/src/app/components/manage/saved-views/saved-views.component.ts

@@ -3,11 +3,11 @@ import { FormControl, FormGroup } from '@angular/forms'
 import { SavedView } from 'src/app/data/saved-view'
 import { SavedViewService } from 'src/app/services/rest/saved-view.service'
 import { SettingsService } from 'src/app/services/settings.service'
-import { ComponentWithPermissions } from '../../with-permissions/with-permissions.component'
 import { DisplayMode } from 'src/app/data/document'
-import { BehaviorSubject, Observable, Subject, Subscription } from 'rxjs'
+import { BehaviorSubject, Observable, takeUntil } from 'rxjs'
 import { dirtyCheck } from '@ngneat/dirty-check-forms'
 import { ToastService } from 'src/app/services/toast.service'
+import { LoadingComponentWithPermissions } from '../../loading-component/loading.component'
 
 @Component({
   selector: 'pngx-saved-views',
@@ -15,7 +15,7 @@ import { ToastService } from 'src/app/services/toast.service'
   styleUrl: './saved-views.component.scss',
 })
 export class SavedViewsComponent
-  extends ComponentWithPermissions
+  extends LoadingComponentWithPermissions
   implements OnInit, OnDestroy
 {
   DisplayMode = DisplayMode
@@ -27,11 +27,7 @@ export class SavedViewsComponent
   })
 
   private store: BehaviorSubject<any>
-  private storeSub: Subscription
   public isDirty$: Observable<boolean>
-  private isDirty: boolean = false
-  private unsubscribeNotifier: Subject<any> = new Subject()
-  private savePending: boolean = false
 
   get displayFields() {
     return this.settings.allDisplayFields
@@ -56,9 +52,7 @@ export class SavedViewsComponent
 
   ngOnDestroy(): void {
     this.settings.organizingSidebarSavedViews = false
-    this.unsubscribeNotifier.next(this)
-    this.unsubscribeNotifier.complete()
-    this.storeSub.unsubscribe()
+    super.ngOnDestroy()
   }
 
   private initialize() {
@@ -93,9 +87,12 @@ export class SavedViewsComponent
     }
 
     this.store = new BehaviorSubject(storeData)
-    this.storeSub = this.store.asObservable().subscribe((state) => {
-      this.savedViewsForm.patchValue(state, { emitEvent: false })
-    })
+    this.store
+      .asObservable()
+      .pipe(takeUntil(this.unsubscribeNotifier))
+      .subscribe((state) => {
+        this.savedViewsForm.patchValue(state, { emitEvent: false })
+      })
 
     // Initialize dirtyCheck
     this.isDirty$ = dirtyCheck(this.savedViewsForm, this.store.asObservable())

src-ui/src/app/components/manage/workflows/workflows.component.ts

@@ -1,7 +1,6 @@
 import { Component, OnInit } from '@angular/core'
 import { WorkflowService } from 'src/app/services/rest/workflow.service'
-import { ComponentWithPermissions } from '../../with-permissions/with-permissions.component'
-import { delay, Subject, takeUntil, tap } from 'rxjs'
+import { delay, takeUntil, tap } from 'rxjs'
 import { Workflow } from 'src/app/data/workflow'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import { ToastService } from 'src/app/services/toast.service'
@@ -12,6 +11,7 @@ import {
 } from '../../common/edit-dialog/workflow-edit-dialog/workflow-edit-dialog.component'
 import { ConfirmDialogComponent } from '../../common/confirm-dialog/confirm-dialog.component'
 import { EditDialogMode } from '../../common/edit-dialog/edit-dialog.component'
+import { LoadingComponentWithPermissions } from '../../loading-component/loading.component'
 
 @Component({
   selector: 'pngx-workflows',
@@ -19,16 +19,11 @@ import { EditDialogMode } from '../../common/edit-dialog/edit-dialog.component'
   styleUrls: ['./workflows.component.scss'],
 })
 export class WorkflowsComponent
-  extends ComponentWithPermissions
+  extends LoadingComponentWithPermissions
   implements OnInit
 {
   public workflows: Workflow[] = []
 
-  private unsubscribeNotifier: Subject<any> = new Subject()
-
-  public loading: boolean = false
-  public reveal: boolean = false
-
   constructor(
     private workflowService: WorkflowService,
     public permissionsService: PermissionsService,