Change: make saved views manage its own component (#8423)

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

@@ -0,0 +1,150 @@
+import { Component, OnDestroy, OnInit } from '@angular/core'
+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 { dirtyCheck } from '@ngneat/dirty-check-forms'
+import { ToastService } from 'src/app/services/toast.service'
+
+@Component({
+  selector: 'pngx-saved-views',
+  templateUrl: './saved-views.component.html',
+  styleUrl: './saved-views.component.scss',
+})
+export class SavedViewsComponent
+  extends ComponentWithPermissions
+  implements OnInit, OnDestroy
+{
+  DisplayMode = DisplayMode
+
+  public savedViews: SavedView[]
+  private savedViewsGroup = new FormGroup({})
+  public savedViewsForm: FormGroup = new FormGroup({
+    savedViews: this.savedViewsGroup,
+  })
+
+  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
+  }
+
+  constructor(
+    private savedViewService: SavedViewService,
+    private settings: SettingsService,
+    private toastService: ToastService
+  ) {
+    super()
+  }
+
+  ngOnInit(): void {
+    this.settings.organizingSidebarSavedViews = true
+
+    this.savedViewService.listAll().subscribe((r) => {
+      this.savedViews = r.results
+      this.initialize()
+    })
+  }
+
+  ngOnDestroy(): void {
+    this.settings.organizingSidebarSavedViews = false
+    this.unsubscribeNotifier.next(this)
+    this.unsubscribeNotifier.complete()
+    this.storeSub.unsubscribe()
+  }
+
+  private initialize() {
+    this.emptyGroup(this.savedViewsGroup)
+
+    let storeData = {
+      savedViews: {},
+    }
+
+    for (let view of this.savedViews) {
+      storeData.savedViews[view.id.toString()] = {
+        id: view.id,
+        name: view.name,
+        show_on_dashboard: view.show_on_dashboard,
+        show_in_sidebar: view.show_in_sidebar,
+        page_size: view.page_size,
+        display_mode: view.display_mode,
+        display_fields: view.display_fields,
+      }
+      this.savedViewsGroup.addControl(
+        view.id.toString(),
+        new FormGroup({
+          id: new FormControl(null),
+          name: new FormControl(null),
+          show_on_dashboard: new FormControl(null),
+          show_in_sidebar: new FormControl(null),
+          page_size: new FormControl(null),
+          display_mode: new FormControl(null),
+          display_fields: new FormControl([]),
+        })
+      )
+    }
+
+    this.store = new BehaviorSubject(storeData)
+    this.storeSub = this.store.asObservable().subscribe((state) => {
+      this.savedViewsForm.patchValue(state, { emitEvent: false })
+    })
+
+    // Initialize dirtyCheck
+    this.isDirty$ = dirtyCheck(this.savedViewsForm, this.store.asObservable())
+  }
+
+  public reset() {
+    this.savedViewsForm.patchValue(this.store.getValue())
+  }
+
+  public deleteSavedView(savedView: SavedView) {
+    this.savedViewService.delete(savedView).subscribe(() => {
+      this.savedViewsGroup.removeControl(savedView.id.toString())
+      this.savedViews.splice(this.savedViews.indexOf(savedView), 1)
+      this.toastService.showInfo(
+        $localize`Saved view "${savedView.name}" deleted.`
+      )
+      this.savedViewService.clearCache()
+      this.savedViewService.listAll().subscribe((r) => {
+        this.savedViews = r.results
+        this.initialize()
+      })
+    })
+  }
+
+  private emptyGroup(group: FormGroup) {
+    Object.keys(group.controls).forEach((key) => group.removeControl(key))
+  }
+
+  public save() {
+    // only patch views that have actually changed
+    const changed: SavedView[] = []
+    Object.values(this.savedViewsGroup.controls)
+      .filter((g: FormGroup) => !g.pristine)
+      .forEach((group: FormGroup) => {
+        changed.push(group.value)
+      })
+    if (changed.length) {
+      this.savedViewService.patchMany(changed).subscribe({
+        next: () => {
+          this.toastService.showInfo($localize`Views saved successfully.`)
+          this.store.next(this.savedViewsForm.value)
+        },
+        error: (error) => {
+          this.toastService.showError(
+            $localize`Error while saving views.`,
+            error
+          )
+        },
+      })
+    }
+  }
+}