Save content from inspection tab.

frontend/app/features/content/pages/content/content-page.component.html

@@ -98,7 +98,7 @@
                                 </ng-container>
                             </ng-container>
 
-                            <ng-container *ngIf="content?.canUpdate">
+                            <ng-container *ngIf="content?.canUpdate && (!inspection || inspection.mode.value === 'Data')">
                                 <button type="submit" class="btn btn-primary ms-2" shortcut="CTRL + SHIFT + S">
                                     {{ 'common.save' | sqxTranslate }}
                                 </button>
@@ -117,7 +117,7 @@
                     </button>
                 </ng-template>
 
-                <sqx-form-error [bubble]="true" [closeable]="true" [error]="contentForm.error | async"></sqx-form-error>
+                <sqx-form-error [bubble]="true" [closeable]="true" [error]="inspection?.contentError || (contentForm.error | async)"></sqx-form-error>
             </div>
         </ng-container>
 

frontend/app/features/content/pages/content/content-page.component.ts

@@ -10,6 +10,7 @@ import { ActivatedRoute, Router } from '@angular/router';
 import { ApiUrlConfig, AppLanguageDto, AppsState, AuthService, AutoSaveKey, AutoSaveService, CanComponentDeactivate, ContentDto, ContentsState, defined, DialogService, EditContentForm, fadeAnimation, LanguagesState, ModalModel, ResourceOwner, SchemaDto, SchemasState, TempService, Types, Version } from '@app/shared';
 import { Observable, of } from 'rxjs';
 import { filter, map, tap } from 'rxjs/operators';
+import { ContentInspectionComponent } from './inspecting/content-inspection.component';
 import { ContentReferencesComponent } from './references/content-references.component';
 
 @Component({
@@ -26,6 +27,9 @@ export class ContentPageComponent extends ResourceOwner implements CanComponentD
     @ViewChild(ContentReferencesComponent)
     public references: ContentReferencesComponent;
 
+    @ViewChild(ContentInspectionComponent)
+    public inspection: ContentInspectionComponent;
+
     public schema: SchemaDto;
 
     public formContext: any;
@@ -162,6 +166,11 @@ export class ContentPageComponent extends ResourceOwner implements CanComponentD
     }
 
     private saveContent(publish: boolean) {
+        if (this.inspection) {
+            this.inspection.save();
+            return;
+        }
+
         const value = this.contentForm.submit();
 
         if (value) {

frontend/app/features/content/pages/content/inspecting/content-inspection.component.html

@@ -19,5 +19,10 @@
 </div>
 
 <div class="inner-main">
-    <sqx-code-editor [borderless]="true" [ngModel]="actualData | async" valueMode="Json"></sqx-code-editor>
+    <sqx-code-editor
+        [borderless]="true" 
+        [ngModel]="actualData | async"
+        (ngModelChange)="setData($event)"
+        valueMode="Json">
+    </sqx-code-editor>
 </div>

frontend/app/features/content/pages/content/inspecting/content-inspection.component.ts

@@ -5,8 +5,8 @@
  * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
  */
 
-import { ChangeDetectionStrategy, Component, Input, OnChanges, SimpleChanges } from '@angular/core';
+import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
-import { AppLanguageDto, ContentDto, ContentsService } from '@app/shared';
+import { AppLanguageDto, ContentDto, ContentsService, ContentsState, ErrorDto } from '@app/shared';
 import { BehaviorSubject, combineLatest, of } from 'rxjs';
 import { filter, map, switchMap } from 'rxjs/operators';
 
@@ -16,7 +16,6 @@ type Mode = 'Content' | 'Data' | 'FlatData';
     selector: 'sqx-content-inspection[appName][content][language][languages]',
     styleUrls: ['./content-inspection.component.scss'],
     templateUrl: './content-inspection.component.html',
-    changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ContentInspectionComponent implements OnChanges {
     private languageChanges$ = new BehaviorSubject<AppLanguageDto | null>(null);
@@ -35,6 +34,9 @@ export class ContentInspectionComponent implements OnChanges {
 
     public mode = new BehaviorSubject<Mode>('Content');
 
+    public contentError?: ErrorDto | null;
+    public contentData: any;
+
     public actualData =
         combineLatest([
             this.languageChanges$,
@@ -57,6 +59,7 @@ export class ContentInspectionComponent implements OnChanges {
 
     constructor(
         private readonly contentsService: ContentsService,
+        private readonly contentsState: ContentsState,
     ) {
     }
 
@@ -66,7 +69,27 @@ export class ContentInspectionComponent implements OnChanges {
         }
     }
 
+    public setData(data: any) {
+        this.contentData = data;
+    }
+
     public setMode(mode: Mode) {
         this.mode.next(mode);
     }
+
+    public save() {
+        if (!this.contentData || this.mode.value !== 'Data') {
+            return;
+        }
+
+        this.contentsState.update(this.content, this.contentData)
+            .subscribe({
+                next: () => {
+                    this.contentError = null;
+                },
+                error: error => {
+                    this.contentError = error;
+                },
+            });
+    }
 }