Contents state finalized.

src/Squidex/app/features/content/pages/content/content-field.component.ts

@@ -5,7 +5,7 @@
  * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
  */
 
-import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, Output } from '@angular/core';
+import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
 import { AbstractControl, FormGroup } from '@angular/forms';
 
 import {
@@ -18,8 +18,7 @@ import {
 @Component({
     selector: 'sqx-content-field',
     styleUrls: ['./content-field.component.scss'],
-    templateUrl: './content-field.component.html',
+    templateUrl: './content-field.component.html'
-    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ContentFieldComponent implements OnChanges {
     @Input()
@@ -42,13 +41,16 @@ export class ContentFieldComponent implements OnChanges {
 
     public selectedFormControl: AbstractControl;
 
-    public ngOnChanges() {
+    public ngOnChanges(changes: SimpleChanges) {
         if (this.field.isLocalizable) {
             this.selectedFormControl = this.fieldForm.controls[this.language.iso2Code];
-            this.selectedFormControl['_clearChangeFns']();
         } else {
             this.selectedFormControl = this.fieldForm.controls[fieldInvariant];
         }
+
+        if (changes['language']) {
+            this.selectedFormControl['_clearChangeFns']();
+        }
     }
 }
 

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

@@ -27,23 +27,27 @@
                 <button type="submit" class="btn btn-primary">
                     Save and Publish
                 </button>
+
+                <sqx-shortcut keys="ctrl+s" (trigger)="saveAndPublish()"></sqx-shortcut>
             </ng-container>
             <ng-template #notNew>
-                <button type="submit" class="btn btn-primary" title="CTRL + S">
+                <ng-container *ngIf="content.status !== 'Archived'">
-                    Save
+                    <button type="submit" class="btn btn-primary" title="CTRL + S">
-                </button>
+                        Save
-            </ng-template>
+                    </button>
 
-            <sqx-shortcut keys="ctrl+s" (trigger)="saveAndPublish()"></sqx-shortcut>
+                    <sqx-shortcut keys="ctrl+s" (trigger)="saveAndPublish()"></sqx-shortcut>
+                </ng-container>
+            </ng-template>
         </ng-container>
 
         <ng-container content>
-            <div class="panel-alert panel-alert-danger" *ngIf="contentVersion">
+            <div class="panel-alert panel-alert-danger" *ngIf="contentVersion; let version">
                 <div class="float-right">
                     <a class="force" (click)="showLatest()">View latest</a>
                 </div>
 
-                Viewing <strong>version {{contentVersion.value</strong>.
+                Viewing <strong>version {{version.value}}</strong>.
             </div>
 
             <div *ngFor="let field of schema.fields">

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

@@ -75,19 +75,19 @@ export class ContentPageComponent implements CanComponentDeactivate, OnDestroy,
                 });
 
         this.selectedSchemaSubscription =
-            this.schemasState.selectedSchema.filter(s => !!s)
+            this.schemasState.selectedSchema.filter(s => !!s).map(s => s!)
                 .subscribe(schema => {
-                    this.schema = schema!;
+                    this.schema = schema;
 
                     this.contentForm = new EditContentForm(this.schema, this.languages);
                 });
 
         this.contentSubscription =
-            this.contentsState.selectedContent.filter(c => !!c)
+            this.contentsState.selectedContent.filter(c => !!c).map(c => c!)
                 .subscribe(content => {
-                    this.content = content!;
+                    this.content = content;
 
-                    this.loadContent(content!.data);
+                    this.loadContent(content.data);
                 });
 
         this.contentVersionSelectedSubscription =
@@ -114,20 +114,24 @@ export class ContentPageComponent implements CanComponentDeactivate, OnDestroy,
     }
 
     private saveContent(publish: boolean) {
+        if (this.content && this.content.status === 'Archived') {
+            return;
+        }
+
         const value = this.contentForm.submit();
 
         if (value) {
-            if (!this.content) {
+            if (this.content) {
-                this.contentsState.create(value, publish)
+                this.contentsState.update(this.content, value)
                     .subscribe(dto => {
-                        this.back();
+                        this.contentForm.submitCompleted();
                     }, error => {
                         this.contentForm.submitFailed(error);
                     });
             } else {
                 this.contentsState.create(value, publish)
                     .subscribe(dto => {
-                        this.contentForm.submitCompleted();
+                        this.back();
                     }, error => {
                         this.contentForm.submitFailed(error);
                     });
@@ -142,7 +146,7 @@ export class ContentPageComponent implements CanComponentDeactivate, OnDestroy,
     }
 
     private loadContent(data: any) {
-        this.contentForm.load(data);
+        this.contentForm.loadData(data, this.content && this.content.status === 'Archived');
     }
 
     private loadVersion(version: Version) {
@@ -155,8 +159,6 @@ export class ContentPageComponent implements CanComponentDeactivate, OnDestroy,
                         this.contentVersion = null;
                     }
 
-                    this.dialogs.notifyInfo('Content version loaded successfully.');
-
                     this.loadContent(dto);
                 });
         }

src/Squidex/app/features/content/pages/contents/contents-page.component.html

@@ -144,7 +144,7 @@
 
         <ng-container footer>
             <button type="button" class="float-left btn btn-secondary" (click)="cancelStatusChange()">Cancel</button>
-            <button type="button" class="float-right btn btn-primary" autofocus [disabled]="dueTimeMode === 'Scheduled' && !dueTime" (click)="confirmStatusChange()">Confirm</button>
+            <button type="button" class="float-right btn btn-primary" [disabled]="dueTimeMode === 'Scheduled' && !dueTime" (click)="confirmStatusChange()" sqxFocusOnInit>Confirm</button>
         </ng-container>
     </sqx-modal-dialog>
 </ng-container>

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

@@ -81,7 +81,7 @@
     </button>
 </td>
 <td class="cell-actions" *ngIf="patchForm.form.dirty" (click)="shouldStop($event)">
-    <button type="button" class="btn btn-link btn-secondary btn-cancel" (click)="save(); $event.stopPropagation()">
+    <button type="button" class="btn btn-link btn-secondary btn-cancel" (click)="cancel(); $event.stopPropagation()">
         <i class="icon-close"></i>
     </button>
 </td>

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

@@ -5,7 +5,7 @@
  * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
  */
 
-import { Component, EventEmitter, Input, OnChanges, Output } from '@angular/core';
+import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
 
 import {
     AppLanguageDto,
@@ -78,10 +78,14 @@ export class ContentItemComponent implements OnChanges {
     ) {
     }
 
-    public ngOnChanges() {
+    public ngOnChanges(changes: SimpleChanges) {
-        this.patchForm = new PatchContentForm(this.schema, this.language);
+        if (changes['schema'] || changes['language']) {
+            this.patchForm = new PatchContentForm(this.schema, this.language);
+        }
 
-        this.updateValues();
+        if (changes['content'] || changes['language']) {
+            this.updateValues();
+        }
     }
 
     public shouldStop(event: Event) {
@@ -104,6 +108,12 @@ export class ContentItemComponent implements OnChanges {
         }
     }
 
+    public cancel() {
+        this.patchForm.submitCompleted();
+
+        this.updateValues();
+    }
+
     private updateValues() {
         this.values = [];
 

src/Squidex/app/features/schemas/pages/schema/forms/field-form-validation.component.html

@@ -3,7 +3,7 @@
         <sqx-number-validation [editForm]="editForm" [properties]="field.properties"></sqx-number-validation>
     </div>
     <div *ngSwitchCase="'String'">
-        <sqx-string-validation [editForm]="editForm" [properties]="field.properties"></sqx-string-validation>
+        <sqx-string-validation [editForm]="editForm" [properties]="field.properties" [patterns]="patterns"></sqx-string-validation>
     </div>
     <div *ngSwitchCase="'Boolean'">
         <sqx-boolean-validation [editForm]="editForm" [properties]="field.properties"></sqx-boolean-validation>

src/Squidex/app/features/schemas/pages/schema/forms/field-form-validation.component.ts

@@ -8,7 +8,11 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 import { FormGroup } from '@angular/forms';
 
-import { AppPatternDto, FieldDto } from '@app/shared';
+import {
+    AppPatternDto,
+    FieldDto,
+    ImmutableArray
+} from '@app/shared';
 
 @Component({
     selector: 'sqx-field-form-validation',
@@ -24,5 +28,5 @@ export class FieldFormValidationComponent {
     public field: FieldDto;
 
     @Input()
-    public patterns: AppPatternDto[];
+    public patterns: ImmutableArray<AppPatternDto>;
 }

src/Squidex/app/features/schemas/pages/schema/schema-page.component.ts

@@ -68,9 +68,9 @@ export class SchemaPageComponent implements OnDestroy, OnInit {
         this.patternsState.load().onErrorResumeNext().subscribe();
 
         this.selectedSchemaSubscription =
-            this.schemasState.selectedSchema
+            this.schemasState.selectedSchema.filter(s => !!s).map(s => s!)
                 .subscribe(schema => {
-                    this.schema = schema!;
+                    this.schema = schema;
 
                     this.export();
                 });

src/Squidex/app/framework/angular/forms/focus-on-init.directive.ts

@@ -21,10 +21,12 @@ export class FocusOnInitDirective implements AfterViewInit {
     }
 
     public ngAfterViewInit() {
-        this.renderer.invokeElementMethod(this.element.nativeElement, 'focus', []);
+        setTimeout(() => {
+            this.renderer.invokeElementMethod(this.element.nativeElement, 'focus', []);
 
-        if (this.select) {
+            if (this.select) {
-            this.renderer.invokeElementMethod(this.element.nativeElement, 'select', []);
+                this.renderer.invokeElementMethod(this.element.nativeElement, 'select', []);
-        }
+            }
+        }, 100);
     }
 }

src/Squidex/app/framework/angular/modals/dialog-renderer.component.html

@@ -11,7 +11,7 @@
 
     <ng-container footer>
         <button type="button" class="float-left btn btn-secondary" (click)="cancel()">No</button>
-        <button type="button" class="float-right btn btn-danger" (click)="confirm()" autofocus sqxFocusOnInit>Yes</button>
+        <button type="button" class="float-right btn btn-danger" (click)="confirm()" sqxFocusOnInit>Yes</button>
     </ng-container>
 </sqx-modal-dialog>
 

src/Squidex/app/framework/state.ts

@@ -57,6 +57,8 @@ export class Form<T extends AbstractControl> {
 
         if (newValue) {
             this.form.reset(newValue);
+        } else {
+            this.form.markAsPristine();
         }
     }
 

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

@@ -72,6 +72,16 @@ export class EditContentForm extends Form<FormGroup> {
         this.enableContentForm();
     }
 
+    public loadData(value: any, isArchive: boolean) {
+        super.load(value);
+
+        if (isArchive) {
+            this.form.disable();
+        } else {
+            this.enableContentForm();
+        }
+    }
+
     private enableContentForm() {
         if (this.schema.fields.length === 0) {
             this.form.enable();
@@ -277,7 +287,7 @@ export abstract class ContentsStateBase extends State<Snapshot> {
             .do(dto => {
                 this.dialogs.notifyInfo('Contents updated successfully.');
 
-                this.replaceContent(updateData(content, request, this.user, dto.version, now));
+                this.replaceContent(updateData(content, dto.payload, this.user, dto.version, now));
             })
             .notify(this.dialogs);
     }
@@ -287,7 +297,7 @@ export abstract class ContentsStateBase extends State<Snapshot> {
             .do(dto => {
                 this.dialogs.notifyInfo('Contents updated successfully.');
 
-                this.replaceContent(updateData(content, request, this.user, dto.version, now));
+                this.replaceContent(updateData(content, dto.payload, this.user, dto.version, now));
             })
             .notify(this.dialogs);
     }