From ee25df6b81fe767fbb697b067d43c7669c855065 Mon Sep 17 00:00:00 2001
From: Sebastian Stehle <sebastian@squidex.io>
Date: Tue, 14 May 2019 17:24:42 +0200
Subject: [PATCH] Another fix for inline editing.

---
 .../content/shared/content-item.component.html    | 12 ++++++------
 .../content/shared/content-item.component.ts      | 15 ++++++++++-----
 .../app/framework/angular/forms/forms-helper.ts   | 12 ++----------
 src/Squidex/app/framework/state.ts                |  2 +-
 4 files changed, 19 insertions(+), 22 deletions(-)

diff --git a/src/Squidex/app/features/content/shared/content-item.component.html b/src/Squidex/app/features/content/shared/content-item.component.html
index 94912845c..71754a534 100644
--- a/src/Squidex/app/features/content/shared/content-item.component.html
+++ b/src/Squidex/app/features/content/shared/content-item.component.html
@@ -11,7 +11,7 @@
     </ng-template>
 </td>
 
-<td class="cell-auto" *ngFor="let field of schema.listFields; let i = index; trackBy: trackByField.bind(this)" [sqxStopClick]="isDirty(field)">
+<td class="cell-auto" *ngFor="let field of schema.listFields; let i = index; trackBy: trackByField.bind(this)" [sqxStopClick]="isDirty || field.isInlineEditable">
     <ng-container *ngIf="field.isInlineEditable && !isReadOnly; else displayTemplate">
         <sqx-content-item-editor [form]="patchForm.form" [field]="field"></sqx-content-item-editor>
     </ng-container>
@@ -21,7 +21,7 @@
     </ng-template>
 </td>
 
-<td class="cell-time" *ngIf="!isCompact" [sqxStopClick]="isDirty()">
+<td class="cell-time" *ngIf="!isCompact" [sqxStopClick]="isDirty">
     <sqx-content-status 
         [status]="content.status"
         [scheduledTo]="content.scheduleJob?.status"
@@ -32,11 +32,11 @@
     <small class="item-modified">{{content.lastModified | sqxFromNow}}</small>
 </td>
 
-<td class="cell-user" *ngIf="!isCompact && patchForm.form.pristine" [sqxStopClick]="isDirty()">
+<td class="cell-user" *ngIf="!isCompact && !isDirty" [sqxStopClick]="isDirty">
     <img class="user-picture" title="{{content.lastModifiedBy | sqxUserNameRef}}" [attr.src]="content.lastModifiedBy | sqxUserPictureRef" />
 </td>
 
-<ng-container *ngIf="patchForm.form.dirty">
+<ng-container *ngIf="isDirty">
     <td class="cell-user" >
         <button type="button" class="btn btn-success" (click)="save()" sqxStopClick>
             <i class="icon-checkmark"></i>
@@ -49,7 +49,7 @@
     </td>
 </ng-container>
 
-<td class="cell-actions" *ngIf="!isReadOnly && patchForm.form.pristine" sqxStopClick>
+<td class="cell-actions" *ngIf="!isReadOnly && !isDirty" sqxStopClick>
     <div class="dropdown dropdown-options" *ngIf="content">
         <button type="button" class="btn btn-text-secondary" (click)="dropdown.toggle()" [class.active]="dropdown.isOpen | async" #optionsButton>
             <i class="icon-dots"></i>
@@ -82,7 +82,7 @@
         </div>
     </div>
 </td>
-<td class="cell-actions" *ngIf="isReference" [sqxStopClick]="isDirty()">
+<td class="cell-actions" *ngIf="isReference" [sqxStopClick]="isDirty">
     <div class="reference-edit">
         <button type="button" class="btn btn-text-secondary">
             <i class="icon-dots"></i>
diff --git a/src/Squidex/app/features/content/shared/content-item.component.ts b/src/Squidex/app/features/content/shared/content-item.component.ts
index c03e15be3..295624cc9 100644
--- a/src/Squidex/app/features/content/shared/content-item.component.ts
+++ b/src/Squidex/app/features/content/shared/content-item.component.ts
@@ -5,7 +5,7 @@
  * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
  */
 
-import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
 
 import {
     AppLanguageDto,
@@ -85,7 +85,12 @@ export class ContentItemComponent implements OnChanges {
 
     public values: any[] = [];
 
+    public get isDirty() {
+        return this.patchForm.form.dirty;
+    }
+
     constructor(
+        private readonly changeDetector: ChangeDetectorRef,
         private readonly contentsState: ContentsState
     ) {
     }
@@ -100,10 +105,6 @@ export class ContentItemComponent implements OnChanges {
         }
     }
 
-    public isDirty(field?: FieldDto) {
-        return this.patchForm.form.dirty || (field && field.isInlineEditable);
-    }
-
     public save() {
         const value = this.patchForm.submit();
 
@@ -111,8 +112,12 @@ export class ContentItemComponent implements OnChanges {
             this.contentsState.patch(this.content, value)
                 .subscribe(() => {
                     this.patchForm.submitCompleted({ noReset: true});
+
+                    this.changeDetector.detectChanges();
                 }, error => {
                     this.patchForm.submitFailed(error);
+
+                    this.changeDetector.detectChanges();
                 });
         }
     }
diff --git a/src/Squidex/app/framework/angular/forms/forms-helper.ts b/src/Squidex/app/framework/angular/forms/forms-helper.ts
index abe08ed2a..80127f715 100644
--- a/src/Squidex/app/framework/angular/forms/forms-helper.ts
+++ b/src/Squidex/app/framework/angular/forms/forms-helper.ts
@@ -7,7 +7,7 @@
 
  import { AbstractControl, FormArray, FormGroup } from '@angular/forms';
  import { Observable } from 'rxjs';
- import { map, startWith } from 'rxjs/operators';
+ import { distinctUntilChanged, map, startWith } from 'rxjs/operators';
 
 import { Types } from './../../utils/types';
 
@@ -22,15 +22,7 @@ export function formControls(form: AbstractControl): AbstractControl[] {
 }
 
 export function invalid$(form: AbstractControl): Observable<boolean> {
-    return form.statusChanges.pipe(map(() => form.invalid), startWith(form.invalid));
-}
-
-export function pristine$(form: AbstractControl): Observable<boolean> {
-    return form.statusChanges.pipe(map(() => form.pristine), startWith(form.pristine));
-}
-
-export function dirty$(form: AbstractControl): Observable<boolean> {
-    return form.statusChanges.pipe(map(() => form.dirty), startWith(form.dirty));
+    return form.statusChanges.pipe(map(() => form.invalid), startWith(form.invalid), distinctUntilChanged());
 }
 
 export function value$<T = any>(form: AbstractControl): Observable<T> {
diff --git a/src/Squidex/app/framework/state.ts b/src/Squidex/app/framework/state.ts
index 479a006e1..dbb773df2 100644
--- a/src/Squidex/app/framework/state.ts
+++ b/src/Squidex/app/framework/state.ts
@@ -13,7 +13,7 @@ import { ErrorDto } from './utils/error';
 
 import { Types } from './utils/types';
 
-import { fullValue} from './angular/forms/forms-helper';
+import { fullValue } from './angular/forms/forms-helper';
 
 export interface FormState {
     submitted: boolean;