Started to remove ngModel

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

@@ -16,7 +16,7 @@
                 </button>
             </div>
             <div class="search-form">
-                <input class="form-control form-control-dark" [(ngModel)]="schemasFilter" [ngModelOptions]="{standalone: true}" placeholder="Search for schemas..." />
+                <input class="form-control form-control-dark" [formControl]="schemasFilter" placeholder="Search for schemas..." />
 
                 <i class="icon-search"></i>
             </div>
@@ -25,7 +25,7 @@
 
     <div class="panel-content">
         <div class="schemas">
-            <div class="schema" *ngFor="let schema of filteredSchemas" [routerLink]="[schema.name]" routerLinkActive="active">
+            <div class="schema" *ngFor="let schema of schemasFiltered | async" [routerLink]="[schema.name]" routerLinkActive="active">
                 <div class="schema-inner">
                     <div class="row">
                         <div class="col-xs-4">

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

@@ -6,7 +6,8 @@
  */
 
 import { Component, OnInit } from '@angular/core';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import { BehaviorSubject, Observable } from 'rxjs';
 
 import {
     AppComponentBase,
@@ -33,29 +34,29 @@ const FALLBACK_NAME = 'my-schema';
 export class SchemasPageComponent extends AppComponentBase {
     public modalDialog = new ModalView();
 
-    public schemasFilter: string;
-    public schemas = ImmutableArray.empty<SchemaDto>();
+    public schemas = new BehaviorSubject(ImmutableArray.empty<SchemaDto>());
+    public schemasFilter = new FormControl();
+    public schemasFiltered =
+        Observable.of(null).merge(this.schemasFilter.valueChanges.debounceTime(100)).combineLatest(this.schemas,
+            (query, schemas) => {
 
-    public get filteredSchemas() {
-        let result = this.schemas;
+            if (query && query.length > 0) {
+                schemas = schemas.filter(t => t.name.indexOf(query) >= 0);
+            }
 
-        if (this.schemasFilter && this.schemasFilter.length > 0) {
-            result = result.filter(t => t.name.indexOf(this.schemasFilter) >= 0);
-        }
+            schemas =
+                schemas.sort((a, b) => {
+                    if (a.name < b.name) {
+                        return -1;
+                    }
+                    if (a.name > b.name) {
+                        return 1;
+                    }
+                    return 0;
+                });
 
-        result =
-            result.sort((a, b) => {
-                if (a.name < b.name) {
-                    return -1;
-                }
-                if (a.name > b.name) {
-                    return 1;
-                }
-                return 0;
-            });
-
-        return result;
-    }
+            return schemas;
+        });
 
     constructor(apps: AppsStoreService, notifications: NotificationService, users: UsersProviderService,
         private readonly formBuilder: FormBuilder,
@@ -72,14 +73,14 @@ export class SchemasPageComponent extends AppComponentBase {
         this.appName()
             .switchMap(app => this.schemasService.getSchemas(app).retry(2))
             .subscribe(dtos => {
-                this.schemas = ImmutableArray.of(dtos);
+                this.schemas.next(ImmutableArray.of(dtos));
             }, error => {
                 this.notifyError(error);
             });
     }
 
     public onSchemaCreationCompleted(dto: SchemaDto) {
-        this.schemas = this.schemas.push(dto);
+        this.schemas.next(this.schemas.getValue().push(dto));
 
         this.modalDialog.hide();
     }

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

@@ -20,16 +20,16 @@
             </div>
 
             <div class="table-items-footer">
-                <form class="form-inline" [formGroup]="createForm" (submit)="attachClient()">
-                    <div class="errors-box" *ngIf="createForm.get('name').invalid && createForm.get('name').dirty">
+                <form class="form-inline" [formGroup]="addClientForm" (submit)="attachClient()">
+                    <div class="errors-box" *ngIf="addClientForm.get('name').invalid && addClientForm.get('name').dirty">
                         <div class="errors">
-                            <span *ngIf="createForm.get('name').hasError('required')">
+                            <span *ngIf="addClientForm.get('name').hasError('required')">
                                 Name is required.
                             </span>
-                            <span *ngIf="createForm.get('name').hasError('maxlength')">
+                            <span *ngIf="addClientForm.get('name').hasError('maxlength')">
                                 Name can not have more than 40 characters.
                             </span>
-                            <span *ngIf="createForm.get('name').hasError('pattern')">
+                            <span *ngIf="addClientForm.get('name').hasError('pattern')">
                                 Name can contain lower case letters (a-z), numbers and dashes (not at the end).
                             </span>
                         </div>
@@ -39,7 +39,7 @@
                         <input type="text" class="form-control" id="app-name" formControlName="name" maxlength="40" placeholder="Enter client name" />
                     </div>
 
-                    <button type="submit" class="btn btn-success" [disabled]="createForm.invalid">Add Client</button>
+                    <button type="submit" class="btn btn-success" [disabled]="addClientForm.invalid">Add Client</button>
                 </form>
             </div>
         </div>

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

@@ -32,7 +32,7 @@ function rename(client: AppClientDto, name: string) {
 export class ClientsPageComponent extends AppComponentBase implements OnInit {
     public appClients: ImmutableArray<AppClientDto>;
 
-    public createForm: FormGroup =
+    public addClientForm: FormGroup =
         this.formBuilder.group({
             name: ['',
                 [
@@ -84,12 +84,12 @@ export class ClientsPageComponent extends AppComponentBase implements OnInit {
     }
 
     public attachClient() {
-        this.createForm.markAsDirty();
+        this.addClientForm.markAsDirty();
 
-        if (this.createForm.valid) {
-            this.createForm.disable();
+        if (this.addClientForm.valid) {
+            this.addClientForm.disable();
 
-            const dto = new CreateAppClientDto(this.createForm.controls['name'].value);
+            const dto = new CreateAppClientDto(this.addClientForm.controls['name'].value);
 
             this.appName()
                 .switchMap(app => this.appClientsService.postClient(app, dto))
@@ -104,8 +104,8 @@ export class ClientsPageComponent extends AppComponentBase implements OnInit {
     }
 
     private reset() {
-        this.createForm.reset();
-        this.createForm.enable();
+        this.addClientForm.reset();
+        this.addClientForm.enable();
     }
 }
 

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

@@ -13,13 +13,30 @@
         <div class="panel-content">
             <table class="table table-items table-fixed">
                 <colgroup>
-                    <col style="width: 50px" />
+                    <col style="width: 70px" />
                     <col style="width: 50%" />
                     <col style="width: 50%" />
                     <col style="width: 150px" />
                     <col style="width: 80px" />
                 </colgroup>
 
+                <thead>
+                    <tr>
+                        <th>
+                            &nbsp;
+                        </th>
+                        <th>
+                            Name
+                        </th>
+                        <th>
+                            Email
+                        </th>
+                        <th>
+                            Options
+                        </th>
+                    </tr>
+                </thead>
+
                 <tbody>
                     <template ngFor let-contributor [ngForOf]="appContributors">
                         <tr>
@@ -49,17 +66,12 @@
             </table>
             
             <div class="table-items-footer">
-                <form class="form-inline" (submit)="assignContributor()" >
+                <form class="form-inline" [formGroup]="addContributorForm" (submit)="assignContributor()" >
                     <div class="form-group">
-                        <sqx-autocomplete [source]="usersDataSource"
-                            (ngModelChange)="selectUser($event.model)"
-                            [ngModel]="selectedUser"
-                            [ngModelOptions]="{standalone: true}"
-                            [inputName]="contributor">
-                        </sqx-autocomplete>
+                        <sqx-autocomplete [source]="usersDataSource" formControlName="user" [inputName]="contributor"></sqx-autocomplete>
                     </div>
 
-                    <button type="submit" class="btn btn-success" [disabled]="!selectedUser">Add Contributor</button>
+                    <button type="submit" class="btn btn-success" [disabled]="!addContributorForm.valid">Add Contributor</button>
                 </form>
             </div>
         </div>

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

@@ -6,6 +6,10 @@
     max-width: 800px;
 }
 
+.panel-content {
+    overflow-y: scroll;
+}
+
 .card {
     max-width: 700px;
 }

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

@@ -6,6 +6,7 @@
  */
 
 import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { Observable } from 'rxjs';
 
 import {
@@ -62,11 +63,6 @@ function changePermission(contributor: AppContributorDto, permission: string): A
 export class ContributorsPageComponent extends AppComponentBase implements OnInit {
     public appContributors = ImmutableArray.empty<AppContributorDto>();
 
-    public currentUserId: string;
-
-    public selectedUserName: string | null = null;
-    public selectedUser: UserDto | null = null;
-
     public usersDataSource: UsersDataSource;
     public usersPermissions = [
         'Owner',
@@ -74,10 +70,19 @@ export class ContributorsPageComponent extends AppComponentBase implements OnIni
         'Editor'
     ];
 
+    public addContributorForm: FormGroup =
+        this.formBuilder.group({
+            user: [null,
+                [
+                    Validators.required
+                ]]
+        });
+
     constructor(apps: AppsStoreService, notifications: NotificationService, users: UsersProviderService,
         private readonly appContributorsService: AppContributorsService,
         private readonly usersService: UsersService,
-        private readonly authService: AuthService
+        private readonly authService: AuthService,
+        private readonly formBuilder: FormBuilder
     ) {
         super(apps, notifications, users);
 
@@ -85,8 +90,6 @@ export class ContributorsPageComponent extends AppComponentBase implements OnIni
     }
 
     public ngOnInit() {
-        this.currentUserId = this.authService.user.id;
-
         this.load();
     }
 
@@ -101,14 +104,7 @@ export class ContributorsPageComponent extends AppComponentBase implements OnIni
     }
 
     public assignContributor() {
-        if (!this.selectedUser) {
-            return;
-        }
-
-        const contributor = new AppContributorDto(this.selectedUser.id, 'Editor');
-
-        this.selectedUser = null;
-        this.selectedUserName = null;
+        const contributor = new AppContributorDto(this.addContributorForm.get('user').value.model.id, 'Editor');
 
         this.appName()
             .switchMap(app => this.appContributorsService.postContributor(app, contributor))
@@ -117,6 +113,8 @@ export class ContributorsPageComponent extends AppComponentBase implements OnIni
             }, error => {
                 this.notifyError(error);
             });
+
+        this.addContributorForm.reset();
     }
 
     public changePermission(contributor: AppContributorDto, permission: string) {
@@ -140,9 +138,5 @@ export class ContributorsPageComponent extends AppComponentBase implements OnIni
                 this.notifyError(error);
             });
     }
-
-    public selectUser(selection: UserDto) {
-        this.selectedUser = selection;
-    }
 }
 

src/Squidex/app/features/settings/pages/languages/languages-page.component.html

@@ -47,8 +47,8 @@
                                 </span>
                             </td>
                             <td>
-                                <label class="language-default">
-                                    <input type="radio" [value]="true" [ngModel]="language.isMasterLanguage" (ngModelChange)="setMasterLanguage(language)"> Master Language
+                                <label class="language-default" (click)="setMasterLanguage(language)">
+                                    <input type="radio" [value]="true" [checked]="language.isMasterLanguage"> Master Language
                                 </label>
                             </td>
                             <td>
@@ -63,14 +63,14 @@
             </table>
 
             <div class="table-items-footer">
-                <form class="form-inline" (submit)="addLanguage()" name="addLanguageForm">
+                <form class="form-inline" [formGroup]="addLanguageForm" (ngSubmit)="createSchema()" (submit)="addLanguage()">
                     <div class="form-group">
-                        <select class="form-control language-select" [(ngModel)]="selectedLanguage" name="newLanguage">
-                            <option *ngFor="let language of allLanguages" [ngValue]="language">{{language.englishName}}</option>
+                        <select class="form-control language-select" formControlName="language">
+                            <option *ngFor="let language of newLanguages" [ngValue]="language">{{language.englishName}}</option>
                         </select>
                     </div>
 
-                    <button type="submit" class="btn btn-success" [disabled]="!selectedLanguage">Add Language</button>
+                    <button type="submit" class="btn btn-success" [disabled]="!addLanguageForm.valid">Add Language</button>
                 </form>
             </div>
         </div>

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

@@ -6,6 +6,7 @@
  */
 
 import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 
 import {
     AddAppLanguageDto,
@@ -30,7 +31,12 @@ export class LanguagesPageComponent extends AppComponentBase implements OnInit {
     public allLanguages: LanguageDto[] = [];
     public appLanguages = ImmutableArray.empty<AppLanguageDto>();
 
-    public selectedLanguage: LanguageDto | null = null;
+    public addLanguageForm: FormGroup =
+        this.formBuilder.group({
+            language: [null,
+                Validators.required
+            ]
+        });
 
     public get newLanguages() {
         return this.allLanguages.filter(x => !this.appLanguages.find(l => l.iso2Code === x.iso2Code));
@@ -38,7 +44,8 @@ export class LanguagesPageComponent extends AppComponentBase implements OnInit {
 
     constructor(apps: AppsStoreService, notifications: NotificationService, users: UsersProviderService,
         private readonly appLanguagesService: AppLanguagesService,
-        private readonly languagesService: LanguageService
+        private readonly languagesService: LanguageService,
+        private readonly formBuilder: FormBuilder
     ) {
         super(apps, notifications, users);
     }
@@ -66,14 +73,14 @@ export class LanguagesPageComponent extends AppComponentBase implements OnInit {
 
     public addLanguage() {
         this.appName()
-            .switchMap(app => this.appLanguagesService.postLanguages(app, new AddAppLanguageDto(this.selectedLanguage.iso2Code)))
+            .switchMap(app => this.appLanguagesService.postLanguages(app, new AddAppLanguageDto(this.addLanguageForm.get('language').value.iso2Code)))
             .subscribe(dto => {
                 this.appLanguages = this.appLanguages.push(dto);
             }, error => {
                 this.notifyError(error);
             });
 
-        this.selectedLanguage = null;
+        this.addLanguageForm.reset();
     }
 
     public removeLanguage(language: AppLanguageDto) {

src/Squidex/app/framework/angular/autocomplete.component.ts

@@ -61,7 +61,7 @@ export class AutocompleteComponent implements ControlValueAccessor, OnDestroy {
     public queryInput = new FormControl();
 
     constructor() {
-        this.queryInput.valueChanges.delay(100).subscribe(query => this.loadItems(query));
+        this.queryInput.valueChanges.debounceTime(100).subscribe(query => this.loadItems(query));
     }
 
     public writeValue(value: any) {

src/Squidex/app/framework/module.ts

@@ -44,8 +44,8 @@ import {
         HttpModule,
         FormsModule,
         CommonModule,
-        ReactiveFormsModule,
-        RouterModule
+        RouterModule,
+        ReactiveFormsModule
     ],
     declarations: [
         AutocompleteComponent,
@@ -103,8 +103,8 @@ import {
         HttpModule,
         FormsModule,
         CommonModule,
-        ReactiveFormsModule,
-        RouterModule
+        RouterModule,
+        ReactiveFormsModule
     ]
 })
 export class SqxFrameworkModule { }