Merge pull request #5307 from GabrielInTheWorld/no-found-button

Adds a 'not found'-button to search-value-selector

client/src/app/core/repositories/users/user-repository.service.ts

@@ -389,7 +389,7 @@ export class UserRepositoryService extends BaseRepository<ViewUser, User, UserTi
      * @param schema optional hint on how to handle the strings.
      * @returns A User object (note: is only a local object, not uploaded to the server)
      */
-    public parseUserString(inputUser: string, schema?: StringNamingSchema): User {
+    public parseUserString(inputUser: string, schema: StringNamingSchema = 'firstSpaceLast'): User {
         const newUser: Partial<User> = {};
         if (schema === 'lastCommaFirst') {
             const commaSeparated = inputUser.split(',');
@@ -404,7 +404,7 @@ export class UserRepositoryService extends BaseRepository<ViewUser, User, UserTi
                 default:
                     newUser.first_name = inputUser;
             }
-        } else if (!schema || schema === 'firstSpaceLast') {
+        } else if (schema === 'firstSpaceLast') {
             const splitUser = inputUser.split(' ');
             switch (splitUser.length) {
                 case 1:

client/src/app/shared/components/search-value-selector/search-value-selector.component.html

@@ -1,4 +1,9 @@
-<mat-select [formControl]="contentForm" [multiple]="multiple" [panelClass]="{ 'os-search-value-selector': multiple }" [errorStateMatcher]="errorStateMatcher">
+<mat-select
+    [formControl]="contentForm"
+    [multiple]="multiple"
+    [panelClass]="{ 'os-search-value-selector': multiple }"
+    [errorStateMatcher]="errorStateMatcher"
+>
     <ngx-mat-select-search [formControl]="searchValue"></ngx-mat-select-search>
     <ng-container *ngIf="multiple && showChips">
         <div #chipPlaceholder>
@@ -18,6 +23,11 @@
             <div class="os-search-value-selector-chip-placeholder"></div>
         </div>
     </ng-container>
+    <ng-container *ngIf="showNotFoundButton && !getFilteredItems().length">
+        <button class="os-not-found-button" mat-button (click)="onNotFoundClick()">
+            <ng-content select="[notFoundDescription]"></ng-content>
+        </button>
+    </ng-container>
     <ng-container *ngIf="!multiple && includeNone">
         <mat-option>
             {{ noneTitle | translate }}

client/src/app/shared/components/search-value-selector/search-value-selector.component.scss

@@ -19,3 +19,12 @@
     background: white;
     min-height: 39px;
 }
+
+.os-not-found-button {
+    font-size: 16px;
+    min-height: 48px;
+    font-weight: 400;
+    width: 100%;
+    display: block;
+    text-align: left;
+}

client/src/app/shared/components/search-value-selector/search-value-selector.component.ts

@@ -3,8 +3,10 @@ import {
     ChangeDetectionStrategy,
     Component,
     ElementRef,
+    EventEmitter,
     Input,
     Optional,
+    Output,
     Self,
     ViewChild,
     ViewEncapsulation
@@ -73,6 +75,12 @@ export class SearchValueSelectorComponent extends BaseFormControlComponent<Selec
     @Input()
     public errorStateMatcher: ParentErrorStateMatcher;
 
+    /**
+     * Whether to show a button, if there is no matching option.
+     */
+    @Input()
+    public showNotFoundButton = false;
+
     /**
      * The inputlist subject. Subscribes to it and updates the selector, if the subject
      * changes its values.
@@ -96,6 +104,12 @@ export class SearchValueSelectorComponent extends BaseFormControlComponent<Selec
         }
     }
 
+    /**
+     * Emits the currently searched string.
+     */
+    @Output()
+    public clickNotFound = new EventEmitter<string>();
+
     public searchValue: FormControl;
 
     public get empty(): boolean {
@@ -147,6 +161,8 @@ export class SearchValueSelectorComponent extends BaseFormControlComponent<Selec
 
                 return item.toString().toLowerCase().indexOf(searchValue) > -1;
             });
+        } else {
+            return [];
         }
     }
 
@@ -165,6 +181,14 @@ export class SearchValueSelectorComponent extends BaseFormControlComponent<Selec
         }
     }
 
+    /**
+     * Emits the click on 'notFound' and resets the search-value.
+     */
+    public onNotFoundClick(): void {
+        this.clickNotFound.emit(this.searchValue.value);
+        this.searchValue.setValue('');
+    }
+
     protected initializeForm(): void {
         this.contentForm = this.fb.control([]);
         this.searchValue = this.fb.control('');

client/src/app/site/agenda/components/list-of-speakers/list-of-speakers.component.html

@@ -139,7 +139,14 @@
                     formControlName="user_id"
                     placeholder="{{ 'Select or search new speaker ...' | translate }}"
                     [inputListValues]="filteredUsers"
-                ></os-search-value-selector>
+                    [showNotFoundButton]="true"
+                    (clickNotFound)="onCreateUser($event)"
+                >
+                    <ng-container notFoundDescription>
+                        <mat-icon>add</mat-icon>
+                        {{ 'Create user' | translate }}
+                    </ng-container>
+                </os-search-value-selector>
             </mat-form-field>
         </form>
     </div>

client/src/app/site/agenda/components/list-of-speakers/list-of-speakers.component.ts

@@ -470,6 +470,16 @@ export class ListOfSpeakersComponent extends BaseViewComponent implements OnInit
         return `${this.durationService.durationToString(duration, 'm')}`;
     }
 
+    /**
+     * Imports a new user by the given username.
+     *
+     * @param username The name of the new user.
+     */
+    public onCreateUser(username: string): void {
+        this.userRepository.createFromString(username).then(result => {
+            this.addNewSpeaker(result.id);
+        });
+    }
     /**
      * Triggers an update of the filter for the list of available potential speakers
      * (triggered on an update of users or config)