improve form handling

Author: chriskapp

projects/fusio-sdk/src/lib/component/form/autocomplete/form-autocomplete.component.html

@@ -12,6 +12,8 @@
     [editable]="false"
     (ngModelChange)="changeValue()"
     [disabled]="disabled"
+    (keydown.enter)="enter.emit()"
+    placeholder="Type to search ..."
     class="form-control"
   />
   <button class="btn btn-outline-secondary" type="button" disabled *ngIf="searching">

projects/fusio-sdk/src/lib/component/form/autocomplete/form-autocomplete.component.ts

@@ -1,4 +1,4 @@
-import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
+import {Component, EventEmitter, Input, OnChanges, OnInit, Output} from '@angular/core';
 import {IdAndName, Service} from "../../../abstract/service";
 import {catchError, debounceTime, distinctUntilChanged, map, merge, Observable, of, OperatorFunction, Subject, switchMap, tap} from "rxjs";
 import {fromPromise} from "rxjs/internal/observable/innerFrom";
@@ -16,6 +16,7 @@ export class FormAutocompleteComponent implements OnInit {
   @Input() service!: Service<any>;
   @Input() useName: boolean = false;
   @Output() dataChange = new EventEmitter<string>();
+  @Output() enter = new EventEmitter<void>();
 
   focus$ = new Subject<string>();
 

projects/fusio-sdk/src/lib/component/form/list/form-list.component.html

@@ -8,7 +8,7 @@
       </div>
     </ng-container>
     <ng-container *ngIf="type === 'autocomplete' && service">
-      <fusio-form-autocomplete id="{{name}}-{{i}}" name="{{name}}-{{i}}" [service]="service" [data]="property.value" (dataChange)="doChange(i, $event)" [disabled]="disabled">
+      <fusio-form-autocomplete id="{{name}}-{{i}}" name="{{name}}-{{i}}" [service]="service" [useName]="useName" [data]="property.value" (dataChange)="doChange(i, $event)" [disabled]="disabled">
         <button class="btn btn-danger" type="button" (click)="doRemove(i)"><i class="bi bi-x"></i></button>
       </fusio-form-autocomplete>
     </ng-container>
@@ -18,12 +18,12 @@
   <div class="col-sm-12">
     <ng-container *ngIf="type !== 'autocomplete'">
       <div class="input-group">
-        <input id="{{name}}-newValue" name="{{name}}-newValue" type="{{type}}" [(ngModel)]="newValue" class="form-control">
+        <input id="{{name}}-newValue" name="{{name}}-newValue" type="{{type}}" [(ngModel)]="newValue" (keydown.enter)="doAdd()" placeholder="Enter value" class="form-control">
         <button class="btn btn-success" type="button" (click)="doAdd()"><i class="bi bi-plus"></i></button>
       </div>
     </ng-container>
     <ng-container *ngIf="type === 'autocomplete' && service">
-      <fusio-form-autocomplete id="{{name}}-newValue" name="{{name}}-newValue" [service]="service" [data]="newValue" (dataChange)="newValue = $event" [disabled]="disabled">
+      <fusio-form-autocomplete id="{{name}}-newValue" name="{{name}}-newValue" [service]="service" [useName]="useName" [data]="newValue" (dataChange)="newValue = $event; doAdd()" (enter)="doAdd()" [disabled]="disabled">
         <button class="btn btn-success" type="button" (click)="doAdd()"><i class="bi bi-plus"></i></button>
       </fusio-form-autocomplete>
     </ng-container>

projects/fusio-sdk/src/lib/component/form/list/form-list.component.ts

@@ -13,6 +13,7 @@ export class FormListComponent implements OnInit {
   @Input() type: string = 'text';
   @Input() data: Array<string> = [];
   @Input() service?: Service<any>;
+  @Input() useName: boolean = false;
   @Output() dataChange = new EventEmitter<Array<string>>();
 
   local: Array<any> = [];

projects/fusio-sdk/src/lib/component/form/map/form-map.component.html

@@ -8,25 +8,25 @@
       </div>
     </ng-container>
     <ng-container *ngIf="type === 'autocomplete' && service">
-      <fusio-form-autocomplete id="{{name}}-{{property.key}}" name="{{name}}-{{property.key}}" [service]="service" [data]="property.value" (dataChange)="doChange(i, $event)">
+      <fusio-form-autocomplete id="{{name}}-{{property.key}}" name="{{name}}-{{property.key}}" [service]="service" [useName]="useName" [data]="property.value" (dataChange)="doChange(i, $event)">
         <button class="btn btn-danger" type="button" (click)="doRemove(i)"><i class="bi bi-x"></i></button>
       </fusio-form-autocomplete>
     </ng-container>
   </div>
 </div>
 <div class="mb-3 row">
   <div class="col-sm-2">
-    <input type="text" id="{{name}}-newKey" name="{{name}}-newKey" [(ngModel)]="newKey" class="form-control">
+    <input type="text" id="{{name}}-newKey" name="{{name}}-newKey" [(ngModel)]="newKey" placeholder="Enter key" class="form-control">
   </div>
   <div class="col-sm-10">
     <ng-container *ngIf="type !== 'autocomplete'">
       <div class="input-group">
-        <input type="{{type}}" id="{{name}}-newValue" name="{{name}}-newValue" [(ngModel)]="newValue" class="form-control">
+        <input type="{{type}}" id="{{name}}-newValue" name="{{name}}-newValue" [(ngModel)]="newValue" (keydown.enter)="doAdd()" placeholder="Enter value" class="form-control">
         <button class="btn btn-success" type="button" (click)="doAdd()"><i class="bi bi-plus"></i></button>
       </div>
     </ng-container>
     <ng-container *ngIf="type === 'autocomplete' && service">
-      <fusio-form-autocomplete id="{{name}}-newValue" name="{{name}}-newValue" [service]="service" [data]="newValue" (dataChange)="newValue = $event">
+      <fusio-form-autocomplete id="{{name}}-newValue" name="{{name}}-newValue" [service]="service" [useName]="useName" [data]="newValue" (dataChange)="newValue = $event" (enter)="doAdd()" [disabled]="disabled">
         <button class="btn btn-success" type="button" (click)="doAdd()"><i class="bi bi-plus"></i></button>
       </fusio-form-autocomplete>
     </ng-container>

projects/fusio-sdk/src/lib/component/form/map/form-map.component.ts

@@ -13,6 +13,7 @@ export class FormMapComponent implements OnInit {
   @Input() type: string = 'text';
   @Input() data: Record<string, string> = {};
   @Input() service?: Service<any>;
+  @Input() useName: boolean = false;
   @Output() dataChange = new EventEmitter<Record<string, string>>();
 
   local: Array<Entry> = [];
@@ -50,6 +51,11 @@ export class FormMapComponent implements OnInit {
     this.newKey = '';
     this.newValue = '';
     this.dataChange.emit(this.fromLocal());
+
+    const elKey = document.getElementById(this.name + '-newKey');
+    if (elKey instanceof HTMLInputElement) {
+      elKey.focus();
+    }
   }
 
   doRemove(index: number) {