rename useName to useTilde and allow string and number as input and add dataChange and dataChangeId for string and number

Author: chriskapp

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

@@ -1,4 +1,4 @@
-import {Component, EventEmitter, Input, OnChanges, OnInit, Output} from '@angular/core';
+import {Component, EventEmitter, Input, 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";
@@ -12,10 +12,11 @@ export class FormAutocompleteComponent implements OnInit {
 
   @Input() name!: string;
   @Input() disabled: boolean = false;
-  @Input() data?: string = undefined;
+  @Input() data?: string|number = undefined;
   @Input() service!: Service<any>;
-  @Input() useName: boolean = false;
+  @Input() useTilde: boolean = false;
   @Output() dataChange = new EventEmitter<string>();
+  @Output() dataChangeId = new EventEmitter<number>();
   @Output() enter = new EventEmitter<void>();
 
   focus$ = new Subject<string>();
@@ -53,7 +54,7 @@ export class FormAutocompleteComponent implements OnInit {
 
   async ngOnInit(): Promise<void> {
     if (this.data) {
-      this.selected = await this.service.getWithIdAndName((this.useName ? '~' : '') + this.data);
+      this.selected = await this.service.getWithIdAndName((this.useTilde ? '~' : '') + this.data);
     }
   }
 
@@ -62,12 +63,15 @@ export class FormAutocompleteComponent implements OnInit {
       return;
     }
 
-    const value = this.useName ? this.selected.name : this.selected.id;
-    if (!value) {
-      return;
+    if (this.dataChange.observed) {
+      if (this.selected.name) {
+        this.dataChange.emit(this.selected.name);
+      }
+    } else if (this.dataChangeId.observed) {
+      if (this.selected.id) {
+        this.dataChangeId.emit(parseInt(this.selected.id));
+      }
     }
-
-    this.dataChange.emit(value);
   }
 
 }

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" [useName]="useName" [data]="property.value" (dataChange)="doChange(i, $event)" [disabled]="disabled">
+      <fusio-form-autocomplete id="{{name}}-{{i}}" name="{{name}}-{{i}}" [service]="service" [useTilde]="useTilde" [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>
@@ -23,7 +23,7 @@
       </div>
     </ng-container>
     <ng-container *ngIf="type === 'autocomplete' && service">
-      <fusio-form-autocomplete id="{{name}}-newValue" name="{{name}}-newValue" [service]="service" [useName]="useName" [data]="newValue" (dataChange)="newValue = $event; doAdd()" (enter)="doAdd()" [disabled]="disabled">
+      <fusio-form-autocomplete id="{{name}}-newValue" name="{{name}}-newValue" [service]="service" [useTilde]="useTilde" [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,7 +13,7 @@ export class FormListComponent implements OnInit {
   @Input() type: string = 'text';
   @Input() data: Array<string> = [];
   @Input() service?: Service<any>;
-  @Input() useName: boolean = false;
+  @Input() useTilde: boolean = false;
   @Output() dataChange = new EventEmitter<Array<string>>();
 
   local: Array<any> = [];

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

@@ -8,7 +8,7 @@
       </div>
     </ng-container>
     <ng-container *ngIf="type === 'autocomplete' && service">
-      <fusio-form-autocomplete id="{{name}}-{{property.key}}" name="{{name}}-{{property.key}}" [service]="service" [useName]="useName" [data]="property.value" (dataChange)="doChange(i, $event)">
+      <fusio-form-autocomplete id="{{name}}-{{property.key}}" name="{{name}}-{{property.key}}" [service]="service" [useTilde]="useTilde" [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>
@@ -26,7 +26,7 @@
       </div>
     </ng-container>
     <ng-container *ngIf="type === 'autocomplete' && service">
-      <fusio-form-autocomplete id="{{name}}-newValue" name="{{name}}-newValue" [service]="service" [useName]="useName" [data]="newValue" (dataChange)="newValue = $event" (enter)="doAdd()" [disabled]="disabled">
+      <fusio-form-autocomplete id="{{name}}-newValue" name="{{name}}-newValue" [service]="service" [useTilde]="useTilde" [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,7 +13,7 @@ export class FormMapComponent implements OnInit {
   @Input() type: string = 'text';
   @Input() data: Record<string, string> = {};
   @Input() service?: Service<any>;
-  @Input() useName: boolean = false;
+  @Input() useTilde: boolean = false;
   @Output() dataChange = new EventEmitter<Record<string, string>>();
 
   local: Array<Entry> = [];

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

@@ -20,7 +20,7 @@
       <div class="mb-3 row">
         <label for="event" class="col-sm-2 col-form-label fw-bold">Event</label>
         <div class="col-sm-10">
-          <fusio-form-autocomplete id="event" name="event" [service]="event" [useName]="true" [data]="entity.event" (dataChange)="entity.event = $event" [disabled]="mode === 3">
+          <fusio-form-autocomplete id="event" name="event" [service]="event" [useTilde]="true" [data]="entity.event" (dataChange)="entity.event = $event" [disabled]="mode === 3">
             <button class="btn btn-outline-secondary" type="button" [ngbPopover]="eventHelp"><i class="bi bi-question"></i></button>
             <ng-template #eventHelp>The target event</ng-template>
           </fusio-form-autocomplete>

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

@@ -25,7 +25,7 @@
           <div class="btn-group" role="group">
             <a [routerLink]="getDetailLink(entry.id)" class="btn btn-primary"><i class="bi bi-search"></i></a>
             <a [routerLink]="getEditLink(entry.id)" class="btn btn-secondary"><i class="bi bi-pen"></i></a>
-            <a [routerLink]="getDeleteLink(entry.id)" class="btn btn-secondary"><i class="bi bi-x"></i></a>
+            <a [routerLink]="getDeleteLink(entry.id)" class="btn btn-danger"><i class="bi bi-x"></i></a>
           </div>
         </td>
       </tr>