Fix for inline editing.

src/Squidex/app/features/administration/pages/users/users-page.component.html

@@ -61,10 +61,10 @@
                             </td>
                             <td class="cell-actions">
                                 <ng-container *ngIf="!userInfo.isCurrentUser; else self">
-                                    <button type="button" class="btn btn-text" (click)="lock(userInfo.user); $event.stopPropagation()" *ngIf="!userInfo.user.isLocked" title="Lock User">
+                                    <button type="button" class="btn btn-text" (click)="lock(userInfo.user)" sqxStopClick *ngIf="!userInfo.user.isLocked" title="Lock User">
                                         <i class="icon icon-unlocked"></i>
                                     </button>
-                                    <button type="button" class="btn btn-text" (click)="unlock(userInfo.user); $event.stopPropagation()" *ngIf="userInfo.user.isLocked" title="Unlock User">
+                                    <button type="button" class="btn btn-text" (click)="unlock(userInfo.user)" sqxStopClick *ngIf="userInfo.user.isLocked" title="Unlock User">
                                         <i class="icon icon-lock"></i>
                                     </button>
                                 </ng-container>

src/Squidex/app/features/apps/pages/apps-page.component.html

@@ -19,13 +19,13 @@
                 <h4 class="card-title">{{app.name}}</h4>
 
                 <div class="card-text">
-                    <a (click)="stop($event)" [routerLink]="['/app', app.name]">Edit</a>
+                    <a [routerLink]="['/app', app.name]" sqxStopClick>Edit</a>
 
                     <span class="deeplinks">
                         &nbsp;|
-                        <a (click)="stop($event)" [routerLink]="['/app', app.name, 'content']">Content</a> &middot;
-                        <a (click)="stop($event)" [routerLink]="['/app', app.name, 'assets']">Assets</a> &middot;
-                        <a (click)="stop($event)" [routerLink]="['/app', app.name, 'settings']">Settings</a>
+                        <a [routerLink]="['/app', app.name, 'content']" sqxStopClick>Content</a> &middot;
+                        <a [routerLink]="['/app', app.name, 'assets']" sqxStopClick>Assets</a> &middot;
+                        <a [routerLink]="['/app', app.name, 'settings']" sqxStopClick>Settings</a>
                     </span>
                 </div>
             </div>
@@ -59,7 +59,7 @@
             <div class="card-text">
                 <div>Start with our ready to use blog.</div>
                 <div>
-                    Sample Code: <a href="https://github.com/Squidex/squidex-samples/tree/master/csharp/Sample.Blog" (click)="$event.stopPropagation()" sqxExternalLink>C#</a>
+                    Sample Code: <a href="https://github.com/Squidex/squidex-samples/tree/master/csharp/Sample.Blog" sqxStopClick sqxExternalLink>C#</a>
                 </div>
             </div>
         </div>
@@ -76,7 +76,7 @@
             <div class="card-text">
                 <div>Create your profile page.</div>
                 <div>
-                    Sample Code: <a href="https://github.com/Squidex/squidex-samples/tree/master/csharp/Sample.Profile" (click)="$event.stopPropagation()" sqxExternalLink>C#</a>
+                    Sample Code: <a href="https://github.com/Squidex/squidex-samples/tree/master/csharp/Sample.Profile" sqxStopClick sqxExternalLink>C#</a>
                 </div>
             </div>
         </div>
@@ -93,7 +93,7 @@
             <div class="card-text">
                 <div>Create app for Squidex Identity.</div>
                 <div>
-                    <a href="https://github.com/Squidex/squidex-identity" (click)="$event.stopPropagation()" sqxExternalLink>Project</a>
+                    <a href="https://github.com/Squidex/squidex-identity" sqxStopClick sqxExternalLink>Project</a>
                 </div>
             </div>
         </div>

src/Squidex/app/features/apps/pages/apps-page.component.ts

@@ -75,10 +75,6 @@ export class AppsPageComponent implements OnInit {
         this.addAppDialog.show();
     }
 
-    public stop(event: Event) {
-        event.stopPropagation();
-    }
-
     public trackByApp(index: number, app: AppDto) {
         return app.id;
     }

src/Squidex/app/features/content/shared/content-item.component.html

@@ -1,4 +1,4 @@
-<td class="cell-select" (click)="stop($event)">
+<td class="cell-select" sqxStopClick>
     <ng-container *ngIf="!isReference; else referenceTemplate">
         <input type="checkbox" class="form-check"
             [disabled]="!selectable"
@@ -11,7 +11,7 @@
     </ng-template>
 </td>
 
-<td class="cell-auto" *ngFor="let field of schema.listFields; let i = index; trackBy: trackByField.bind(this)" (click)="shouldStop($event, field)">
+<td class="cell-auto" *ngFor="let field of schema.listFields; let i = index; trackBy: trackByField.bind(this)" [sqxStopClick]="isDirty(field)">
     <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" (click)="shouldStop($event)">
+<td class="cell-time" *ngIf="!isCompact" [sqxStopClick]="isDirty()">
     <sqx-content-status 
         [status]="content.status"
         [scheduledTo]="content.scheduleJob?.status"
@@ -32,24 +32,24 @@
     <small class="item-modified">{{content.lastModified | sqxFromNow}}</small>
 </td>
 
-<td class="cell-user" *ngIf="!isCompact && patchForm.form.pristine" (click)="shouldStop($event)">
+<td class="cell-user" *ngIf="!isCompact && patchForm.form.pristine" [sqxStopClick]="isDirty()">
     <img class="user-picture" title="{{content.lastModifiedBy | sqxUserNameRef}}" [attr.src]="content.lastModifiedBy | sqxUserPictureRef" />
 </td>
 
 <ng-container *ngIf="patchForm.form.dirty">
-    <td class="cell-user" (click)="stop($event)">
-        <button type="button" class="btn btn-success" (click)="save()">
+    <td class="cell-user" >
+        <button type="button" class="btn btn-success" (click)="save()" sqxStopClick>
             <i class="icon-checkmark"></i>
         </button>
     </td>
-    <td class="cell-actions" (click)="stop($event)">
-        <button type="button" class="btn btn-text-secondary btn-cancel" (click)="cancel()">
+    <td class="cell-actions" >
+        <button type="button" class="btn btn-text-secondary btn-cancel" (click)="cancel()" sqxStopClick>
             <i class="icon-close"></i>
         </button>
     </td>
 </ng-container>
 
-<td class="cell-actions" *ngIf="!isReadOnly && patchForm.form.pristine" (click)="stop($event)">
+<td class="cell-actions" *ngIf="!isReadOnly && patchForm.form.pristine" 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" (click)="shouldStop($event)">
+<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>

src/Squidex/app/features/content/shared/content-item.component.ts

@@ -100,16 +100,8 @@ export class ContentItemComponent implements OnChanges {
         }
     }
 
-    public shouldStop(event: Event, field?: FieldDto) {
-        if (this.patchForm.form.dirty || (field && field.isInlineEditable)) {
-            event.stopPropagation();
-            event.stopImmediatePropagation();
-        }
-    }
-
-    public stop(event: Event) {
-        event.stopPropagation();
-        event.stopImmediatePropagation();
+    public isDirty(field?: FieldDto) {
+        return this.patchForm.form.dirty || (field && field.isInlineEditable);
     }
 
     public save() {
@@ -118,7 +110,7 @@ export class ContentItemComponent implements OnChanges {
         if (value) {
             this.contentsState.patch(this.content, value)
                 .subscribe(() => {
-                    this.patchForm.submitCompleted();
+                    this.patchForm.submitCompleted({ noReset: true});
                 }, error => {
                     this.patchForm.submitFailed(error);
                 });

src/Squidex/app/features/rules/pages/rules/rule-element.component.html

@@ -32,7 +32,7 @@
             </div>
 
             <div class="large-link" *ngIf="element.readMore">
-                <a [href]="element.readMore" (click)="$event.stopPropagation()" sqxExternalLink>Read More</a>
+                <a [href]="element.readMore" sqxStopClick sqxExternalLink>Read More</a>
             </div>
         </div>
     </div>

src/Squidex/app/framework/angular/forms/forms-helper.ts

@@ -25,6 +25,14 @@ 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));
+}
+
 export function value$<T = any>(form: AbstractControl): Observable<T> {
     return form.valueChanges.pipe(startWith(form.value));
 }

src/Squidex/app/framework/angular/stop-click.directive.ts

@@ -0,0 +1,26 @@
+/*
+ * Squidex Headless CMS
+ *
+ * @license
+ * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
+ */
+
+import { Directive, HostListener, Input } from '@angular/core';
+
+@Directive({
+    selector: '[sqxStopClick]'
+})
+export class StopClickDirective {
+    @Input('sqxStopClick')
+    public shouldStop = true;
+
+    @HostListener('click', ['$event'])
+    public onClick(event: Event) {
+        const shouldStop: any = this.shouldStop;
+
+        if (shouldStop || shouldStop === '') {
+            event.stopPropagation();
+            event.stopImmediatePropagation();
+        }
+    }
+}

src/Squidex/app/framework/declarations.ts

@@ -62,6 +62,7 @@ export * from './angular/safe-html.pipe';
 export * from './angular/scroll-active.directive';
 export * from './angular/shortcut.component';
 export * from './angular/sorted.directive';
+export * from './angular/stop-click.directive';
 export * from './angular/template-wrapper.directive';
 export * from './angular/title.component';
 

src/Squidex/app/framework/module.ts

@@ -77,6 +77,7 @@ import {
     ShortTimePipe,
     SortedDirective,
     StarsComponent,
+    StopClickDirective,
     TagEditorComponent,
     TemplateWrapperDirective,
     TitleComponent,
@@ -147,6 +148,7 @@ import {
         ShortTimePipe,
         SortedDirective,
         StarsComponent,
+        StopClickDirective,
         TagEditorComponent,
         TemplateWrapperDirective,
         TitleComponent,
@@ -211,6 +213,7 @@ import {
         ShortTimePipe,
         SortedDirective,
         StarsComponent,
+        StopClickDirective,
         TagEditorComponent,
         TemplateWrapperDirective,
         TitleComponent,

src/Squidex/app/shared/components/asset.component.html

@@ -20,7 +20,7 @@
                         <a class="file-edit ml-2" (click)="edit()" *ngIf="!isDisabled">
                             <i class="icon-pencil"></i>
                         </a>
-                        <a class="file-download ml-2" [href]="asset | sqxAssetUrl" sqxExternalLink="noicon" (click)="$event.stopPropagation()">
+                        <a class="file-download ml-2" [href]="asset | sqxAssetUrl" sqxStopClick sqxExternalLink="noicon">
                             <i class="icon-download"></i>
                         </a>
                         <a class="file-delete ml-2" (click)="emitDelete()" *ngIf="!isDisabled && !removeMode">
@@ -98,7 +98,7 @@
                     <img class="user-picture" title="{{asset.lastModifiedBy | sqxUserNameRef}}" [attr.src]="asset.lastModifiedBy | sqxUserPictureRef" />
                 </td>
                 <td class="col-actions text-right" *ngIf="!isCompact">
-                    <a class="btn btn-text-secondary" [href]="asset | sqxAssetUrl" sqxExternalLink="noicon" (click)="$event.stopPropagation()">
+                    <a class="btn btn-text-secondary" [href]="asset | sqxAssetUrl" sqxStopClick sqxExternalLink="noicon">
                         <i class="icon-download"></i>
                     </a>
                 </td>

src/Squidex/app/shared/state/contents.state.ts

@@ -288,7 +288,7 @@ export abstract class ContentsStateBase extends State<Snapshot> {
     }
 
     private replaceContent(content: ContentDto, oldVersion?: Version) {
-        if (!oldVersion || oldVersion.eq(content.version)) {
+        if (!oldVersion || !oldVersion.eq(content.version)) {
             return this.next(s => {
                 const contents = s.contents.replaceBy('id', content);
                 const selectedContent = s.selectedContent && s.selectedContent.id === content.id ? content : s.selectedContent;