Check for live changes on document detail title

jonaswinkler · Feb 16, 2022 · 9bc48fe · 9bc48fe
1 parent 8c853e5
commit 9bc48fe
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 3 deletions.
diff --git a/src-ui/src/app/components/document-detail/document-detail.component.html b/src-ui/src/app/components/document-detail/document-detail.component.html
@@ -56,7 +56,7 @@
                     <a ngbNavLink i18n>Details</a>
                     <ng-template ngbNavContent>
 
-                        <app-input-text #inputTitle i18n-title title="Title" formControlName="title" [error]="error?.title"></app-input-text>
+                        <app-input-text #inputTitle i18n-title title="Title" formControlName="title" (keyup)="titleKeyUp($event)" [error]="error?.title"></app-input-text>
                         <app-input-number i18n-title title="Archive serial number" [error]="error?.archive_serial_number" formControlName='archive_serial_number'></app-input-number>
                         <app-input-date i18n-title title="Date created" formControlName="created" [error]="error?.created"></app-input-date>
                         <app-input-select [items]="correspondents" i18n-title title="Correspondent" formControlName="correspondent" [allowNull]="true"

diff --git a/src-ui/src/app/components/document-detail/document-detail.component.ts b/src-ui/src/app/components/document-detail/document-detail.component.ts
@@ -21,7 +21,7 @@ import { TextComponent } from '../common/input/text/text.component';
 import { SettingsService, SETTINGS_KEYS } from 'src/app/services/settings.service';
 import { dirtyCheck, DirtyComponent } from '@ngneat/dirty-check-forms';
 import { Observable, Subject, BehaviorSubject } from 'rxjs';
-import { first, takeUntil, switchMap, map } from 'rxjs/operators';
+import { first, takeUntil, switchMap, map, debounceTime, distinctUntilChanged } from 'rxjs/operators';
 import { PaperlessDocumentSuggestions } from 'src/app/data/paperless-document-suggestions';
 import { FILTER_FULLTEXT_MORELIKE } from 'src/app/data/filter-rule-type';
 
@@ -48,6 +48,7 @@ export class DocumentDetailComponent implements OnInit, OnDestroy, DirtyComponen
   suggestions: PaperlessDocumentSuggestions
 
   title: string
+  titleSubject: Subject<string> = new Subject()
   previewUrl: string
   downloadUrl: string
   downloadOriginalUrl: string
@@ -91,7 +92,19 @@ export class DocumentDetailComponent implements OnInit, OnDestroy, DirtyComponen
     private documentListViewService: DocumentListViewService,
     private documentTitlePipe: DocumentTitlePipe,
     private toastService: ToastService,
-    private settings: SettingsService) { }
+    private settings: SettingsService) {
+      this.titleSubject.pipe(
+        debounceTime(200),
+        distinctUntilChanged(),
+        takeUntil(this.unsubscribeNotifier)
+      ).subscribe(titleValue => {
+        this.documentForm.patchValue({'title': titleValue})
+      })
+    }
+
+  titleKeyUp(event) {
+    this.titleSubject.next(event.target?.value)
+  }
 
   get useNativePdfViewer(): boolean {
     return this.settings.get(SETTINGS_KEYS.USE_NATIVE_PDF_VIEWER)