Document detail dirty checking

src-ui/src/app/app-routing.module.ts

@@ -20,7 +20,7 @@ const routes: Routes = [
     {path: 'documents', component: DocumentListComponent },
     {path: 'view/:id', component: DocumentListComponent },
     {path: 'search', component: SearchComponent },
-    {path: 'documents/:id', component: DocumentDetailComponent },
+    {path: 'documents/:id', component: DocumentDetailComponent, canDeactivate: [FormDirtyGuard] },
 
     {path: 'tags', component: TagListComponent },
     {path: 'documenttypes', component: DocumentTypeListComponent },

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

@@ -128,8 +128,8 @@
             <div [ngbNavOutlet]="nav" class="mt-2"></div>
 
             <button type="button" class="btn btn-outline-secondary" (click)="discard()" i18n [disabled]="networkActive">Discard</button>&nbsp;
-            <button type="button" class="btn btn-outline-primary" (click)="saveEditNext()" *ngIf="hasNext()" i18n [disabled]="networkActive">Save & next</button>&nbsp;
-            <button type="submit" class="btn btn-primary" i18n [disabled]="networkActive">Save</button>&nbsp;
+            <button type="button" class="btn btn-outline-primary" (click)="saveEditNext()" *ngIf="hasNext()" i18n [disabled]="networkActive || !(isDirty$ | async)">Save & next</button>&nbsp;
+            <button type="submit" class="btn btn-primary" i18n [disabled]="networkActive || !(isDirty$ | async)">Save</button>&nbsp;
         </form>
     </div>
 
@@ -145,6 +145,6 @@
         <ng-container *ngIf="getContentType() == 'text/plain'">
             <object [data]="previewUrl | safe" type="text/plain" class="preview-sticky" width="100%"></object>
         </ng-container>
-          
+
     </div>
 </div>

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

@@ -19,13 +19,15 @@ import { PDFDocumentProxy } from 'ng2-pdf-viewer';
 import { ToastService } from 'src/app/services/toast.service';
 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, Subscription, BehaviorSubject } from 'rxjs';
 
 @Component({
   selector: 'app-document-detail',
   templateUrl: './document-detail.component.html',
   styleUrls: ['./document-detail.component.scss']
 })
-export class DocumentDetailComponent implements OnInit {
+export class DocumentDetailComponent implements OnInit, DirtyComponent {
 
   @ViewChild("inputTitle")
   titleInput: TextComponent
@@ -61,6 +63,10 @@ export class DocumentDetailComponent implements OnInit {
   previewCurrentPage: number = 1
   previewNumPages: number = 1
 
+  store: BehaviorSubject<any>
+  storeSub: Subscription
+  isDirty$: Observable<boolean>
+
   constructor(
     private documentsService: DocumentService,
     private route: ActivatedRoute,
@@ -113,7 +119,23 @@ export class DocumentDetailComponent implements OnInit {
       this.metadata = result
     })
     this.title = this.documentTitlePipe.transform(doc.title)
-    this.documentForm.patchValue(doc)
+
+    this.store = new BehaviorSubject({
+      title: doc.title,
+      content: doc.content,
+      created: doc.created,
+      correspondent: doc.correspondent,
+      document_type: doc.document_type,
+      archive_serial_number: doc.archive_serial_number,
+      tags: doc.tags
+    })
+
+    this.storeSub = this.store.asObservable().subscribe(state => {
+      this.documentForm.patchValue(state, { emitEvent: false })
+    })
+
+    // Initialize dirtyCheck
+    this.isDirty$ = dirtyCheck(this.documentForm, this.store.asObservable())
   }
 
   createDocumentType() {