More typed forms.

src/Squidex/app/features/administration/pages/restore/restore-page.component.ts

@@ -51,7 +51,7 @@ export class RestorePageComponent extends ResourceOwner implements OnInit {
         const value = this.restoreForm.submit();
 
         if (value) {
-            this.restoreForm.submitCompleted({});
+            this.restoreForm.submitCompleted({ url: '' });
 
             this.backupsService.postRestore(value)
                 .subscribe(() => {

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

@@ -12,6 +12,7 @@ import { ActivatedRoute, Router } from '@angular/router';
 import { ResourceOwner } from '@app/shared';
 
 import {
+    CreateUserDto,
     UserDto,
     UserForm,
     UsersState
@@ -61,7 +62,7 @@ export class UserPageComponent extends ResourceOwner implements OnInit {
                         this.userForm.submitFailed(error);
                     });
             } else {
-                this.usersState.create(value)
+                this.usersState.create(<CreateUserDto>value)
                     .subscribe(() => {
                         this.back();
                     }, error => {

src/Squidex/app/features/administration/state/users.forms.ts

@@ -2,9 +2,9 @@ import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 
 import { Form, ValidatorsEx } from '@app/shared';
 
-import { UserDto } from './../services/users.service';
+import { UpdateUserDto } from './../services/users.service';
 
-export class UserForm extends Form<FormGroup> {
+export class UserForm extends Form<FormGroup, UpdateUserDto> {
     constructor(
         formBuilder: FormBuilder
     ) {
@@ -36,25 +36,11 @@ export class UserForm extends Form<FormGroup> {
         }));
     }
 
-    public load(user?: UserDto) {
+    protected transformLoad(user: UpdateUserDto) {
-        if (user) {
+        return { ...user, permissions: user.permissions.join('\n') };
-            this.form.controls['password'].setValidators(null);
-
-            super.load({ ...user, permissions: user.permissions.join('\n') });
-        } else {
-            this.form.controls['password'].setValidators(Validators.required);
-
-            super.load(undefined);
-        }
     }
 
-    public submit() {
+    protected transformSubmit(value: any): UpdateUserDto {
-        const result = super.submit();
+        return { ...value, permissions: value['permissions'].split('\n').filter((x: any) => !!x) };
-
-        if (result) {
-            result['permissions'] = result['permissions'].split('\n').filter((x: any) => !!x);
-        }
-
-        return result;
     }
 }

src/Squidex/app/features/rules/pages/rules/rule-wizard.component.ts

@@ -27,11 +27,11 @@ export const MODE_EDIT_ACTION  = 'EditAction';
     templateUrl: './rule-wizard.component.html'
 })
 export class RuleWizardComponent implements OnInit {
-    public actionForm = new Form<FormGroup>(new FormGroup({}));
+    public actionForm = new Form<FormGroup, any>(new FormGroup({}));
     public actionType: string;
     public action: any = {};
 
-    public triggerForm = new Form<FormGroup>(new FormGroup({}));
+    public triggerForm = new Form<FormGroup, any>(new FormGroup({}));
     public triggerType: string;
     public trigger: any = {};
 

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

@@ -21,6 +21,8 @@ import {
     Types
 } from '@app/shared';
 
+const DEFAULT_FIELD = { name: '', partitioning: 'invariant', properties: createProperties('String') };
+
 @Component({
     selector: 'sqx-field-wizard',
     styleUrls: ['./field-wizard.component.scss'],
@@ -73,7 +75,7 @@ export class FieldWizardComponent implements OnInit {
                 .subscribe(dto => {
                     this.field = dto;
 
-                    this.addFieldForm.submitCompleted({ type: fieldTypes[0].type });
+                    this.addFieldForm.submitCompleted({ ...DEFAULT_FIELD });
 
                     if (addNew) {
                         if (Types.isFunction(this.nameInput.nativeElement.focus)) {

src/Squidex/app/features/schemas/pages/schema/schema-preview-urls-form.component.ts

@@ -46,7 +46,7 @@ export class SchemaPreviewUrlsFormComponent implements OnInit {
     }
 
     public cancelAdd() {
-        this.addForm.submitCompleted({});
+        this.addForm.submitCompleted({ name: '', url: '' });
     }
 
     public add() {
@@ -55,7 +55,7 @@ export class SchemaPreviewUrlsFormComponent implements OnInit {
         if (value) {
             this.editForm.add(value);
 
-            this.addForm.submitCompleted({});
+            this.cancelAdd();
         }
     }
 

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

@@ -44,7 +44,7 @@ export class SchemaFormComponent implements OnInit {
     }
 
     public ngOnInit() {
-        this.createForm.load({ import: this.import });
+        this.createForm.load({ name: '', import: this.import });
 
         this.showImport = !!this.import;
     }

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

@@ -77,7 +77,7 @@ export class SchemasPageComponent extends ResourceOwner implements OnInit {
             try {
                this.schemasState.addCategory(value.name);
             } finally {
-                this.addCategoryForm.submitCompleted({});
+                this.addCategoryForm.submitCompleted({ name: '' });
             }
         }
     }

src/Squidex/app/features/settings/pages/clients/clients-page.component.ts

@@ -47,7 +47,7 @@ export class ClientsPageComponent implements OnInit {
         const value = this.addClientForm.submit();
 
         if (value) {
-            this.clientsState.attach(value)
+            this.clientsState.attach({ id: value.name })
                 .subscribe(() => {
                     this.addClientForm.submitCompleted();
                 }, error => {

src/Squidex/app/features/settings/pages/contributors/contributors-page.component.ts

@@ -99,7 +99,7 @@ export class ContributorsPageComponent implements OnInit {
 
             this.contributorsState.assign(requestDto)
                 .subscribe(isCreated => {
-                    this.assignContributorForm.submitCompleted({});
+                    this.assignContributorForm.submitCompleted({ user: '' });
 
                     if (isCreated) {
                         this.dialogs.notifyInfo('A new user with the entered email address has been created and assigned as contributor.');

src/Squidex/app/features/settings/pages/patterns/pattern.component.ts

@@ -58,7 +58,7 @@ export class PatternComponent implements OnInit {
             } else {
                 this.patternsState.create(value)
                     .subscribe(() => {
-                        this.editForm.submitCompleted({});
+                        this.editForm.submitCompleted({ pattern: '', name: '' });
                     }, error => {
                         this.editForm.submitFailed(error);
                     });

src/Squidex/app/features/settings/pages/roles/role.component.ts

@@ -85,7 +85,7 @@ export class RoleComponent implements OnChanges {
         if (value) {
             this.editForm.add(value.permission);
 
-            this.addPermissionForm.submitCompleted({});
+            this.addPermissionForm.submitCompleted({ permission: '' });
             this.addPermissionInput.focus();
         }
     }

src/Squidex/app/features/settings/pages/roles/roles-page.component.ts

@@ -67,7 +67,7 @@ export class RolesPageComponent implements OnInit {
         if (value) {
             this.rolesState.add(value)
                 .subscribe(() => {
-                    this.addRoleForm.submitCompleted({});
+                    this.addRoleForm.submitCompleted({ name: '' });
                 }, error => {
                     this.addRoleForm.submitFailed(error);
                 });

src/Squidex/app/framework/state.ts

@@ -20,7 +20,7 @@ export interface FormState {
     error?: string | null;
 }
 
-export class Form<T extends AbstractControl, V = any> {
+export class Form<T extends AbstractControl, V> {
     private readonly state = new State<FormState>({ submitted: false });
 
     public submitted =
@@ -42,12 +42,20 @@ export class Form<T extends AbstractControl, V = any> {
         this.form.enable();
     }
 
-    protected reset(value: V | undefined) {
+    protected setValue(value?: V) {
-        this.form.reset(value);
+        if (value) {
+            this.form.reset(this.transformLoad(value));
+        } else {
+            this.form.reset();
+        }
+    }
+
+    protected transformLoad(value: V): any {
+        return value;
     }
 
-    protected setValue(value: V | undefined) {
+    protected transformSubmit(value: any): V {
-        this.form.reset(value, { emitEvent: true });
+        return value;
     }
 
     public load(value: V | undefined) {
@@ -60,7 +68,7 @@ export class Form<T extends AbstractControl, V = any> {
         this.state.next(_ => ({ submitted: true }));
 
         if (this.form.valid) {
-            const value = fullValue(this.form);
+            const value = this.transformSubmit(fullValue(this.form));
 
             this.disable();
 
@@ -76,7 +84,7 @@ export class Form<T extends AbstractControl, V = any> {
         this.enable();
 
         if (newValue) {
-            this.reset(newValue);
+            this.setValue(newValue);
         } else {
             this.form.markAsPristine();
         }

src/Squidex/app/shared/components/comments.component.ts

@@ -69,7 +69,7 @@ export class CommentsComponent extends ResourceOwner implements OnInit {
         if (value) {
             this.state.create(value.text).pipe(onErrorResumeNext()).subscribe();
 
-            this.commentForm.submitCompleted({});
+            this.commentForm.submitCompleted({ text: '' });
         }
     }
 

src/Squidex/app/shared/services/schemas.service.spec.ts

@@ -419,7 +419,7 @@ describe('SchemasService', () => {
 
         const dto = new AddFieldDto('name', 'invariant', createProperties('Number'));
 
-        let field: FieldDto<any>;
+        let field: FieldDto;
 
         schemasService.postField('my-app', 'my-schema', dto, undefined, version).subscribe(result => {
             field = result.payload;
@@ -466,7 +466,7 @@ describe('SchemasService', () => {
 
         const dto = new AddFieldDto('name', 'invariant', createProperties('Number'));
 
-        let field: FieldDto<any>;
+        let field: FieldDto;
 
         schemasService.postField('my-app', 'my-schema', dto, 13, version).subscribe(result => {
             field = result.payload;

src/Squidex/app/shared/state/apps.forms.ts

@@ -16,7 +16,7 @@ import {
 
 const FALLBACK_NAME = 'my-app';
 
-export class CreateAppForm extends Form<FormGroup> {
+export class CreateAppForm extends Form<FormGroup, { name: string }> {
     public appName = value$(this.form.controls['name']).pipe(map(v => v || FALLBACK_NAME));
 
     constructor(formBuilder: FormBuilder) {

src/Squidex/app/shared/state/assets.forms.ts

@@ -13,7 +13,7 @@ import { Form, Types } from '@app/framework';
 
 import { AssetDto } from './../services/assets.service';
 
-export class AnnotateAssetForm extends Form<FormGroup> {
+export class AnnotateAssetForm extends Form<FormGroup, { fileName?: string, slug?: string, tags?: string[] }> {
     constructor(formBuilder: FormBuilder) {
         super(formBuilder.group({
             fileName: ['',
@@ -37,7 +37,7 @@ export class AnnotateAssetForm extends Form<FormGroup> {
     public submit(asset?: AssetDto) {
         const result = super.submit();
 
-        if (asset) {
+        if (asset && result) {
             let index = asset.fileName.lastIndexOf('.');
 
             if (index > 0) {

src/Squidex/app/shared/state/backups.forms.ts

@@ -13,18 +13,18 @@ import {
     ValidatorsEx
 } from '@app/framework';
 
-export class RestoreForm extends Form<FormGroup> {
+export class RestoreForm extends Form<FormGroup, { name?: string, url: string }> {
     public hasNoUrl = hasNoValue$(this.form.controls['url']);
 
     constructor(formBuilder: FormBuilder) {
         super(formBuilder.group({
-            name: [null,
+            name: ['',
                 [
                     Validators.maxLength(40),
                     ValidatorsEx.pattern('[a-z0-9]+(\-[a-z0-9]+)*', 'Name can contain lower case letters (a-z), numbers and dashes (not at the end).')
                 ]
             ],
-            url: [null,
+            url: ['',
                 [
                     Validators.required
                 ]

src/Squidex/app/shared/state/clients.forms.ts

@@ -13,7 +13,7 @@ import {
     ValidatorsEx
 } from '@app/framework';
 
-export class RenameClientForm extends Form<FormGroup> {
+export class RenameClientForm extends Form<FormGroup, { name: string }> {
     constructor(formBuilder: FormBuilder) {
         super(formBuilder.group({
             name: ['',
@@ -25,7 +25,7 @@ export class RenameClientForm extends Form<FormGroup> {
     }
 }
 
-export class AttachClientForm extends Form<FormGroup> {
+export class AttachClientForm extends Form<FormGroup, { name: string}> {
     public hasNoName = hasNoValue$(this.form.controls['name']);
 
     constructor(formBuilder: FormBuilder) {

src/Squidex/app/shared/state/comments.form.ts

@@ -9,7 +9,7 @@ import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 
 import { Form } from '@app/framework';
 
-export class UpsertCommentForm extends Form<FormGroup> {
+export class UpsertCommentForm extends Form<FormGroup, { text: string }> {
     constructor(formBuilder: FormBuilder) {
         super(formBuilder.group({
             text: ['',

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

@@ -35,7 +35,7 @@ import {
     TagsFieldPropertiesDto
 } from './../services/schemas.types';
 
-export class SaveQueryForm extends Form<FormGroup> {
+export class SaveQueryForm extends Form<FormGroup, any> {
     constructor(formBuilder: FormBuilder) {
         super(formBuilder.group({
             name: ['',
@@ -298,7 +298,7 @@ export class FieldDefaultValue implements FieldPropertiesVisitor<any> {
     }
 }
 
-export class EditContentForm extends Form<FormGroup> {
+export class EditContentForm extends Form<FormGroup, any> {
     constructor(
         private readonly schema: SchemaDetailsDto,
         private readonly languages: ImmutableArray<AppLanguageDto>
@@ -466,7 +466,7 @@ export class EditContentForm extends Form<FormGroup> {
     }
 }
 
-export class PatchContentForm extends Form<FormGroup> {
+export class PatchContentForm extends Form<FormGroup, any> {
     constructor(
         private readonly schema: SchemaDetailsDto,
         private readonly language: AppLanguageDto

src/Squidex/app/shared/state/contributors.forms.ts

@@ -9,7 +9,9 @@ import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 
 import { Form, hasNoValue$ } from '@app/framework';
 
-export class AssignContributorForm extends Form<FormGroup> {
+import { UserDto } from './../services/users.service';
+
+export class AssignContributorForm extends Form<FormGroup, { user: string | UserDto }> {
     public hasNoUser = hasNoValue$(this.form.controls['user']);
 
     constructor(formBuilder: FormBuilder) {

src/Squidex/app/shared/state/languages.forms.ts

@@ -9,7 +9,9 @@ import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 
 import { Form } from '@app/framework';
 
-export class EditLanguageForm extends Form<FormGroup> {
+import { LanguageDto } from '../services/languages.service';
+
+export class EditLanguageForm extends Form<FormGroup, { isMaster: boolean, isOptional: boolean }> {
     constructor(formBuilder: FormBuilder) {
         super(formBuilder.group({
             isMaster: false,
@@ -32,7 +34,7 @@ export class EditLanguageForm extends Form<FormGroup> {
     }
 }
 
-export class AddLanguageForm extends Form<FormGroup> {
+export class AddLanguageForm extends Form<FormGroup, { language: LanguageDto }> {
     constructor(formBuilder: FormBuilder) {
         super(formBuilder.group({
             language: [null,

src/Squidex/app/shared/state/patterns.forms.ts

@@ -9,7 +9,7 @@ import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 
 import { Form, ValidatorsEx } from '@app/framework';
 
-export class EditPatternForm extends Form<FormGroup> {
+export class EditPatternForm extends Form<FormGroup, { name: string, pattern: string, message?: string }> {
     constructor(formBuilder: FormBuilder) {
         super(formBuilder.group({
             name: ['',

src/Squidex/app/shared/state/roles.forms.ts

@@ -13,7 +13,7 @@ import {
     hasValue$
 } from '@app/framework';
 
-export class EditPermissionsForm extends Form<FormArray> {
+export class EditPermissionsForm extends Form<FormArray, string[]> {
     constructor() {
         super(new FormArray([]));
     }
@@ -39,12 +39,12 @@ export class EditPermissionsForm extends Form<FormArray> {
     }
 }
 
-export class AddPermissionForm extends Form<FormGroup> {
+export class AddPermissionForm extends Form<FormGroup, { permission: string }> {
     public hasPermission = hasValue$(this.form.controls['permission']);
 
     constructor(formBuilder: FormBuilder) {
         super(formBuilder.group({
-            permission: [null,
+            permission: ['',
                 [
                     Validators.required
                 ]
@@ -53,12 +53,12 @@ export class AddPermissionForm extends Form<FormGroup> {
     }
 }
 
-export class AddRoleForm extends Form<FormGroup> {
+export class AddRoleForm extends Form<FormGroup, { name: string }> {
     public hasNoName = hasNoValue$(this.form.controls['name']);
 
     constructor(formBuilder: FormBuilder) {
         super(formBuilder.group({
-            name: [null,
+            name: ['',
                 [
                     Validators.required
                 ]

src/Squidex/app/shared/state/schemas.forms.ts

@@ -14,11 +14,13 @@ import {
     value$
 } from '@app/framework';
 
+import { AddFieldDto } from '../services/schemas.service';
+
 import { createProperties } from './../services/schemas.types';
 
 const FALLBACK_NAME = 'my-schema';
 
-export class CreateCategoryForm extends Form<FormGroup> {
+export class CreateCategoryForm extends Form<FormGroup, { name: string }> {
     constructor(formBuilder: FormBuilder) {
         super(formBuilder.group({
             name: ['']
@@ -26,7 +28,7 @@ export class CreateCategoryForm extends Form<FormGroup> {
     }
 }
 
-export class CreateSchemaForm extends Form<FormGroup> {
+export class CreateSchemaForm extends Form<FormGroup, { name: string, isSingleton?: boolean, import: any }> {
     public schemaName =
         value$(this.form.controls['name']).pipe(n => n || FALLBACK_NAME);
 
@@ -45,7 +47,7 @@ export class CreateSchemaForm extends Form<FormGroup> {
     }
 }
 
-export class AddPreviewUrlForm extends Form<FormGroup> {
+export class AddPreviewUrlForm extends Form<FormGroup, { name: string, url: string }> {
     constructor(formBuilder: FormBuilder) {
         super(formBuilder.group({
             name: ['',
@@ -62,7 +64,7 @@ export class AddPreviewUrlForm extends Form<FormGroup> {
     }
 }
 
-export class ConfigurePreviewUrlsForm extends Form<FormArray> {
+export class ConfigurePreviewUrlsForm extends Form<FormArray, { [name: string]: string }> {
     constructor(
         private readonly formBuilder: FormBuilder
     ) {
@@ -89,7 +91,9 @@ export class ConfigurePreviewUrlsForm extends Form<FormArray> {
         this.form.removeAt(index);
     }
 
-    public load(value?: any) {
+    public transformLoad(value: { [name: string]: string }) {
+        const result: { name: string, url: string }[] = [];
+
         if (Types.isObject(value)) {
             const length = Object.keys(value).length;
 
@@ -101,38 +105,28 @@ export class ConfigurePreviewUrlsForm extends Form<FormArray> {
                 this.remove(this.form.controls.length - 1);
             }
 
-            const array: any[] = [];
-
             for (let key in value) {
                 if (value.hasOwnProperty(key)) {
-                    array.push({ name: key, url: value[key] });
+                    result.push({ name: key, url: value[key] });
                 }
             }
-
-            value = array;
         }
 
-        super.load(value);
+        return result;
     }
 
-    public submit() {
+    public transformSubmit(value: { name: string, url: string }[]): { [name: string]: string } {
-        let result = super.submit();
+        const result: { [name: string]: string } = {};
 
-        if (result) {
+        for (let item of value) {
-            const hash: { [name: string]: string } = {};
+            result[item.name] = item.url;
-
-            for (let item of result) {
-                hash[item.name] = item.url;
-            }
-
-            result = hash;
         }
 
         return result;
     }
 }
 
-export class EditScriptsForm extends Form<FormGroup> {
+export class EditScriptsForm extends Form<FormGroup, { query?: string, create?: string, change?: string, delete?: string, update?: string }> {
     constructor(formBuilder: FormBuilder) {
         super(formBuilder.group({
             query: '',
@@ -144,7 +138,7 @@ export class EditScriptsForm extends Form<FormGroup> {
     }
 }
 
-export class EditFieldForm extends Form<FormGroup> {
+export class EditFieldForm extends Form<FormGroup, { label?: string, hints?: string, placeholder?: string, editorUrl?: string, isRequired: boolean, isListField: boolean }> {
     constructor(formBuilder: FormBuilder) {
         super(formBuilder.group({
             label: ['',
@@ -169,7 +163,7 @@ export class EditFieldForm extends Form<FormGroup> {
     }
 }
 
-export class EditSchemaForm extends Form<FormGroup> {
+export class EditSchemaForm extends Form<FormGroup, { label?: string, hints?: string }> {
     constructor(formBuilder: FormBuilder) {
         super(formBuilder.group({
             label: ['',
@@ -186,7 +180,7 @@ export class EditSchemaForm extends Form<FormGroup> {
     }
 }
 
-export class AddFieldForm extends Form<FormGroup> {
+export class AddFieldForm extends Form<FormGroup, AddFieldDto> {
     constructor(formBuilder: FormBuilder) {
         super(formBuilder.group({
             type: ['String',
@@ -205,16 +199,16 @@ export class AddFieldForm extends Form<FormGroup> {
         }));
     }
 
-    public submit() {
+    public transformLoad(value: AddFieldDto) {
-        const value = super.submit();
+        const isLocalizable = value.partitioning === 'language';
 
-        if (value) {
+        return { name: value.name, isLocalizable, type: value.properties.fieldType };
-            const properties = createProperties(value.type);
+    }
-            const partitioning = value.isLocalizable ? 'language' : 'invariant';
 
-            return { name: value.name, partitioning, properties };
+    public transformSubmit(value: any): AddFieldDto {
-        }
+        const properties = createProperties(value.type);
+        const partitioning = value.isLocalizable ? 'language' : 'invariant';
 
-        return null;
+        return { name: value.name, partitioning, properties };
     }
 }