Define role when adding contributor.

src/Squidex/app/features/settings/pages/contributors/contributor-add-form.component.html

@@ -1,12 +1,8 @@
 <div class="table-items-header" style="margin: 0">
-    <sqx-form-alert marginTop="0" marginBottom="2" light="true">
-        Just enter the email address to invite someone with no account to the app.
-    </sqx-form-alert>
-
     <form [formGroup]="assignContributorForm.form" (ngSubmit)="assignContributor()">
         <div class="row no-gutters">
             <div class="col">
-                <sqx-autocomplete [source]="usersDataSource" formControlName="user" [inputName]="'contributor'" placeholder="Find existing user" displayProperty="displayName">
+                <sqx-autocomplete [source]="usersDataSource" formControlName="user" inputName="contributor" placeholder="Find existing user or add by email" displayProperty="displayName">
                     <ng-template let-user="$implicit">
                         <span class="autocomplete-user">
                             <img class="user-picture autocomplete-user-picture" [attr.src]="user | sqxUserDtoPicture" />
@@ -16,6 +12,11 @@
                     </ng-template>
                 </sqx-autocomplete>
             </div>
+            <div class="col-3 pl-1">
+                <select class="form-control" formControlName="role">
+                    <option *ngFor="let role of roles" [ngValue]="role.name">{{role.name}}</option>
+                </select>
+            </div>
             <div class="col-auto pl-1">
                 <button type="submit" class="btn btn-success" [disabled]="assignContributorForm.hasNoUser | async">Add Contributor</button>
             </div>

src/Squidex/app/features/settings/pages/contributors/contributor-add-form.component.ts

@@ -5,7 +5,7 @@
  * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
  */
 
-import { Component, Injectable } from '@angular/core';
+import { Component, Injectable, Input, OnInit } from '@angular/core';
 import { FormBuilder } from '@angular/forms';
 import { Observable } from 'rxjs';
 import { withLatestFrom } from 'rxjs/operators';
@@ -16,6 +16,8 @@ import {
     ContributorsState,
     DialogModel,
     DialogService,
+    ImmutableArray,
+    RoleDto,
     UsersService
 } from '@app/shared';
 
@@ -50,7 +52,12 @@ export class UsersDataSource implements AutocompleteSource {
         UsersDataSource
     ]
 })
-export class ContributorAddFormComponent {
+export class ContributorAddFormComponent implements OnInit {
+    private defaultValue: any;
+
+    @Input()
+    public roles: ImmutableArray<RoleDto>;
+
     public assignContributorForm = new AssignContributorForm(this.formBuilder);
 
     public importDialog = new DialogModel();
@@ -63,13 +70,19 @@ export class ContributorAddFormComponent {
     ) {
     }
 
+    public ngOnInit() {
+        this.defaultValue = { role: this.roles.at(0).name, contributorId: '' };
+
+        this.assignContributorForm.submitCompleted({ newValue: this.defaultValue });
+    }
+
     public assignContributor() {
         const value = this.assignContributorForm.submit();
 
         if (value) {
             this.contributorsState.assign(value)
                 .subscribe(isCreated => {
-                    this.assignContributorForm.submitCompleted();
+                    this.assignContributorForm.submitCompleted({ newValue: this.defaultValue });
 
                     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/contributors/contributor.component.ts

@@ -12,6 +12,7 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 import {
     ContributorDto,
     ContributorsState,
+    ImmutableArray,
     RoleDto
 } from '@app/shared';
 
@@ -44,7 +45,7 @@ import {
 })
 export class ContributorComponent {
     @Input()
-    public roles: RoleDto[];
+    public roles: ImmutableArray<RoleDto>;
 
     @Input()
     public search: string;

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

@@ -29,33 +29,37 @@
             </ng-container>
             
             <ng-container *ngIf="contributorsState.contributorsPaged | async; let contributors">
-                <ng-container *ngIf="contributorsState.canCreate | async">
+                <ng-container *ngIf="rolesState.roles | async; let roles">
-                    <sqx-contributor-add-form></sqx-contributor-add-form>
+                    <ng-container *ngIf="contributorsState.canCreate | async">
-
+                        <sqx-contributor-add-form
-                    <div class="import-hint">
-                        <sqx-form-hint class="text-right">
-                            Big team? <a class="force" (click)="importDialog.show()">Add many contributors at once</a>
-                        </sqx-form-hint>
-                    </div>
-                </ng-container>
-            
-                <ng-container *ngIf="contributors.length > 0; else noContributors">
-                    <table class="table table-items table-fixed" *ngIf="rolesState.roles | async; let roles">
-                        <tbody *ngFor="let contributor of contributors; trackBy: trackByContributor"
-                            [sqxContributor]="contributor"
-                            [search]="contributorsState.snapshot.queryRegex"
                             [roles]="roles">
-                        </tbody>
+                        </sqx-contributor-add-form>
-                    </table>
 
-                    <sqx-pager [pager]="contributorsState.contributorsPager | async" [autoHide]="true" (prevPage)="goPrev()" (nextPage)="goNext()"></sqx-pager>
+                        <div class="import-hint">
-                </ng-container>
+                            <sqx-form-hint class="text-right">
+                                Big team? <a class="force" (click)="importDialog.show()">Add many contributors at once</a>
+                            </sqx-form-hint>
+                        </div>
+                    </ng-container>
+                
+                    <ng-container *ngIf="contributors.length > 0; else noContributors">
+                        <table class="table table-items table-fixed">
+                            <tbody *ngFor="let contributor of contributors; trackBy: trackByContributor"
+                                [sqxContributor]="contributor"
+                                [search]="contributorsState.snapshot.queryRegex"
+                                [roles]="roles">
+                            </tbody>
+                        </table>
+
+                        <sqx-pager [pager]="contributorsState.contributorsPager | async" [autoHide]="true" (prevPage)="goPrev()" (nextPage)="goNext()"></sqx-pager>
+                    </ng-container>
 
-                <ng-template #noContributors>
+                    <ng-template #noContributors>
-                    <div class="table-items-row table-items-row-empty">
+                        <div class="table-items-row table-items-row-empty">
-                        No contributors found.
+                            No contributors found.
-                    </div>
+                        </div>
-                </ng-template>
+                    </ng-template>
+                </ng-container>
             </ng-container>
         </ng-container>
     </ng-container>

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

@@ -6,7 +6,7 @@
  */
 
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
-import { map } from 'rxjs/operators';
+import { debounceTime, map, shareReplay } from 'rxjs/operators';
 
 import {
     Form,
@@ -28,23 +28,28 @@ export class AssignContributorForm extends Form<FormGroup, AssignContributorDto>
                 [
                     Validators.required
                 ]
+            ],
+            role: [null,
+                [
+                    Validators.required
+                ]
             ]
         }));
     }
 
-    protected transformSubmit(value: { user: string | UserDto }) {
+    protected transformSubmit(value: { user: string | UserDto, role: string }) {
         let contributorId = value.user;
 
         if (Types.is(contributorId, UserDto)) {
             contributorId = contributorId.id;
         }
 
-        return { contributorId, role: 'Editor', invite: true };
+        return { contributorId, role: value.string, invite: true };
     }
 }
 
 export class ImportContributorsForm extends Form<FormGroup, AssignContributorDto[]> {
-    public numberOfEmails = value$(this.form.controls['import']).pipe(map(v => extractEmails(v).length));
+    public numberOfEmails = value$(this.form.controls['import']).pipe(debounceTime(100), map(v => extractEmails(v).length), shareReplay(1));
 
     public hasNoUser = this.numberOfEmails.pipe(map(v => v === 0));