FIX #16956 TIME 2:30 integrate the button create an external user in autocompletion

src/frontend/app/visa/externalVisaWorkflow/external-visa-workflow.component.html

 <mat-list *ngIf="!loading">
-    <button *ngIf="adminMode && otpConfig > 0" mat-raised-button mat-button color="primary" [title]="'lang.addOtpUser' | translate" 
-        style="margin: 10px; display: flex;" (click)="openCreateUserOtp()">
-        <mat-icon class="fas fa-user-plus" style="width: auto;height: auto;"></mat-icon>
-        {{'lang.addOtp' | translate}}
-    </button>
     <app-plugin-autocomplete *ngIf="adminMode" [labelPlaceholder]="'lang.addPerson' | translate"
         [routeDatas]="['/rest/autocomplete/maarchParapheurUsers']" [targetSearchKey]="'idToDisplay'"
-        [subInfoKey]="'email'" (triggerEvent)="addItemToWorkflow($event)" appearance="outline">
+        [subInfoKey]="'email'" (triggerEvent)="addItemToWorkflow($event)" appearance="outline"
+        [fromExternalWorkflow]="true" [connectorLength]="otpConfig" [resId]="resId" (updateVisaWorkflow)="updateVisaWorkflow($event)">
     </app-plugin-autocomplete>
     <div cdkDropList #dataAvailableList="cdkDropList" [cdkDropListData]="visaWorkflow.items" class="cdk-list"
         (cdkDropListDropped)="drop($event)" [cdkDropListDisabled]="!adminMode">

src/frontend/app/visa/externalVisaWorkflow/external-visa-workflow.component.ts

@@ -409,4 +409,8 @@ export class ExternalVisaWorkflowComponent implements OnInit {
             ).subscribe();
         });
     }
+
+    updateVisaWorkflow(user: any) {
+        this.visaWorkflow.items.push(user);
+    }
 }

src/frontend/plugins/autocomplete/autocomplete.component.html

@@ -23,6 +23,12 @@
             <mat-option class="autoCompleteInfoResult smallInputInfo" *ngIf="datas.length === 0 && !loading" disabled
                 [innerHTML]="listInfo">
             </mat-option>
+            <div *ngIf="fromExternalWorkflow && connectorLength > 0" class="autoCompleteInfoResult create-contact" style="font-size: 11px;">
+                <a style="cursor: pointer;" (click)="$event.stopPropagation(); createExternalUser()" [title]="'lang.addOtp' | translate">
+                    <mat-icon matSuffix class="fas fa-user-plus" style="padding-top: 5px"></mat-icon>
+                    {{'lang.addOtp' | translate}}
+                </a>
+            </div>
             <mat-option *ngIf="loading" disabled>
                 <mat-spinner diameter="20"></mat-spinner>
             </mat-option>

src/frontend/plugins/autocomplete/autocomplete.component.ts

@@ -9,6 +9,8 @@ import { HttpClient } from '@angular/common/http';
 import { ConfirmComponent } from '../modal/confirm.component';
 import { MatDialog, MatDialogRef } from '@angular/material/dialog';
 import { NotificationService } from '@service/notification/notification.service';
+import { CreateExternalUserComponent } from '@appRoot/visa/externalVisaWorkflow/createExternalUser/create-external-user.component';
+import { ActionsService } from '@appRoot/actions/actions.service';
 
 @Component({
     selector: 'app-plugin-autocomplete',
@@ -85,6 +87,12 @@ export class PluginAutocompleteComponent implements OnInit {
      */
     @Input() styles: any = [];
 
+    @Input() fromExternalWorkflow: boolean = false;
+    @Input() connectorLength: number = 0;
+    @Input() resId: any;
+
+    @Output() updateVisaWorkflow = new EventEmitter<any>();
+
     /**
      * Catch external event after select an element in autocomplete
      */
@@ -112,7 +120,8 @@ export class PluginAutocompleteComponent implements OnInit {
         public http: HttpClient,
         private notify: NotificationService,
         public dialog: MatDialog,
-        private latinisePipe: LatinisePipe
+        private latinisePipe: LatinisePipe,
+        public actionService: ActionsService
     ) { }
 
     ngOnInit() {
@@ -293,6 +302,37 @@ export class PluginAutocompleteComponent implements OnInit {
         return (offer: any) => this.displayFn(offer);
     }
 
+    createExternalUser() {
+        const dialogRef = this.dialog.open(CreateExternalUserComponent, {
+            panelClass: 'maarch-modal',
+            disableClose: true,
+            width: '500px',
+            data: { otpInfo : null, resId : this.resId}
+        });
+        dialogRef.afterClosed().pipe(
+            tap(async (data: any) => {
+                if (data) {
+                    const user = {
+                        item_id: null,
+                        item_type: 'userOtp',
+                        labelToDisplay: `${data.otp.firstname} ${data.otp.lastname}`,
+                        picture: await this.actionService.getUserOtpIcon(data.otp.type),
+                        hasPrivilege: true,
+                        isValid: true,
+                        externalId: {
+                            maarchParapheur: null
+                        },
+                        externalInformations: data.otp,
+                        role: data.otp.role,
+                        availableRoles: data.otp.availableRoles
+                    };
+                    this.updateVisaWorkflow.emit(user);
+                }
+            })
+        ).subscribe();
+    }
+
+
     private _filter(value: string): string[] {
         if (typeof value === 'string') {
             const filterValue = this.latinisePipe.transform(value.toLowerCase());