FEAT #11266 TIME 1 add plugin autocomplete

src/frontend/app/administration/group/indexing/indexing-administration.component.html

@@ -10,21 +10,7 @@
             <div class="formType-title">
                 Action(s) choisie(s)
             </div>
-            <mat-form-field appearance="outline">
-                <input id="addAction" type="text" placeholder="Associer une nouvelle action" aria-label="Number"
-                    matInput [formControl]="myControl" [matAutocomplete]="auto" (focus)="myControl.setValue('')">
-                <mat-autocomplete #auto="matAutocomplete" (optionSelected)="addAction($event)">
-                    <mat-optgroup *ngIf="actionList.length > 0" label="Action(s) disponible(s)">
-                        <mat-option *ngFor="let action of filteredActionList | async | sortBy: 'label_action'"
-                            [value]="action.id">
-                            {{action.label_action}}
-                        </mat-option>
-                    </mat-optgroup>
-                    <mat-option *ngIf="actionList.length === 0" disabled>
-                        Aucune action disponible
-                    </mat-option>
-                </mat-autocomplete>
-            </mat-form-field>
+            <plugin-autocomplete [labelPlaceholder]="'Associer une nouvelle action'" [labelList]="'Action(s) disponible(s)'" [datas]="actionList" [targetSearchKey]="'label_action'" (triggerEvent)="addAction($event)"></plugin-autocomplete>
             <mat-list class="selectedActionList" role="list">
                 <mat-list-item class="selectedAction" role="listitem"
                     *ngFor="let action of indexingInfo.actions;let i=index">

src/frontend/app/administration/group/indexing/indexing-administration.component.ts

 import { Component, OnInit, Input } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
-import { ActivatedRoute, Router } from '@angular/router';
 import { LANG } from '../../../translate.component';
 import { NotificationService } from '../../../notification.service';
 import { tap } from 'rxjs/internal/operators/tap';
-import { exhaustMap, startWith, map } from 'rxjs/operators';
-import { FormControl } from '@angular/forms';
-import { Observable } from 'rxjs';
-import { MatAutocompleteSelectedEvent } from '@angular/material';
-import { LatinisePipe } from 'ngx-pipes';
+import { map } from 'rxjs/operators';
 
 declare function $j(selector: any): any;
 
@@ -30,19 +25,15 @@ export class IndexingAdministrationComponent implements OnInit {
     keywordEntities: any[] = [];
     actionList: any[] = [];
 
-    myControl = new FormControl();
-
     indexingInfo: any = {
         canIndex: false,
         actions: [],
         keywords: [],
         entities: []
     };
-    filteredActionList: Observable<any[]>;
 
     constructor(public http: HttpClient,
         private notify: NotificationService,
-        private latinisePipe: LatinisePipe
     ) {
 
         this.keywordEntities = [{
@@ -105,12 +96,6 @@ export class IndexingAdministrationComponent implements OnInit {
     }
 
     ngOnInit(): void {
-        this.filteredActionList = this.myControl.valueChanges
-            .pipe(
-                startWith(''),
-                map(value => this._filter(value))
-            );
-
         this.getIndexingInformations().pipe(
             tap((data: any) => this.indexingInfo.canIndex = data.group.canIndex),
             tap((data: any) => this.getActions(data.actions)),
@@ -119,7 +104,6 @@ export class IndexingAdministrationComponent implements OnInit {
             map((data: any) => this.getSelectedEntities(data)),
             tap((data: any) => this.initEntitiesTree(data))
         ).subscribe();
-
     }
 
     initEntitiesTree(entities: any) {
@@ -165,14 +149,14 @@ export class IndexingAdministrationComponent implements OnInit {
 
     getSelectedEntities(data: any) {
         this.indexingInfo.entities = [...data.group.indexationParameters.entities];
-        data.entities.forEach((entity: any) => {
+        /*data.entities.forEach((entity: any) => {
             if (this.indexingInfo.entities.indexOf(entity.id) > -1 ) {
                 entity.state = { "opened": true, "selected": true };
             } else {
                 entity.state = { "opened": true, "selected": false };
             }
             
-        });
+        });*/
         return data.entities;
     }
 
@@ -217,12 +201,11 @@ export class IndexingAdministrationComponent implements OnInit {
         console.log(this.indexingInfo.keywords);
     }
 
-    addAction(actionOpt: MatAutocompleteSelectedEvent) {
-        const index = this.actionList.findIndex(action => action.id === actionOpt.option.value);
+    addAction(actionOpt: any) {
+        const index = this.actionList.findIndex(action => action.id === actionOpt.id);
         const action = {...this.actionList[index]};
         this.indexingInfo.actions.push(action);
         this.actionList.splice(index, 1);
-        $j('#addAction').blur();
     }
 
     removeAction(index: number) {
@@ -230,13 +213,4 @@ export class IndexingAdministrationComponent implements OnInit {
         this.actionList.push(action);
         this.indexingInfo.actions.splice(index, 1);
     }
-
-    private _filter(value: string): any[] {
-        if (typeof value === 'string') {
-            const filterValue = this.latinisePipe.transform(value.toLowerCase());
-            return this.actionList.filter(option => this.latinisePipe.transform(option.label_action.toLowerCase()).includes(filterValue));
-        } else {
-            return this.actionList;
-        }
-    }
 }

src/frontend/app/app-common.module.ts

@@ -47,6 +47,10 @@ import { BasketHomeComponent }                        from './basket/basket-home
 import { AlertComponent }                        from '../plugins/modal/alert.component';
 import { ConfirmComponent }                        from '../plugins/modal/confirm.component';
 
+/*PLUGIN COMPONENT*/
+import { PluginAutocomplete }                        from '../plugins/autocomplete/autocomplete.component';
+
+
 
 export class MyHammerConfig extends HammerGestureConfig {
     overrides = <any> {
@@ -60,6 +64,7 @@ export class MyHammerConfig extends HammerGestureConfig {
         BrowserModule,
         BrowserAnimationsModule,
         FormsModule,
+        ReactiveFormsModule,
         HttpClientModule,
         RouterModule,
         PdfViewerModule,
@@ -86,7 +91,8 @@ export class MyHammerConfig extends HammerGestureConfig {
         SmdFabSpeedDialTrigger,
         SmdFabSpeedDialActions,
         AlertComponent,
-        ConfirmComponent
+        ConfirmComponent,
+        PluginAutocomplete
     ],
     exports: [
         CommonModule,
@@ -115,7 +121,8 @@ export class MyHammerConfig extends HammerGestureConfig {
         SmdFabSpeedDialComponent,
         SmdFabSpeedDialTrigger,
         SmdFabSpeedDialActions,
-        DragDropModule
+        DragDropModule,
+        PluginAutocomplete
     ],
     providers: [
         LatinisePipe,

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

+<form>
+	<mat-form-field appearance="outline">
+		<input type="text" #autoCompleteInput [placeholder]="placeholder" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto" (focus)="myControl.setValue('')">
+    <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selectOpt($event)">
+      <mat-optgroup  [label]="optGroupLabel" *ngIf="options.length > 0">
+         <mat-option *ngFor="let option of filteredOptions | async | sortBy: key" [value]="option">
+        {{option[key]}}
+      </mat-option>
+      </mat-optgroup>
+       <mat-option *ngIf="options.length === 0" disabled>
+        Aucun élément disponible
+      </mat-option>
+    </mat-autocomplete>
+  </mat-form-field>
+</form>
\ No newline at end of file

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

+import { Component, OnInit } from '@angular/core';
+import { FormControl } from '@angular/forms';
+import { Input, EventEmitter, Output, ViewChild, ElementRef } from '@angular/core';
+import { Observable } from 'rxjs';
+import { map, startWith } from 'rxjs/operators';
+import { LatinisePipe } from 'ngx-pipes';
+
+@Component({
+    selector: 'plugin-autocomplete',
+    templateUrl: 'autocomplete.component.html',
+    styleUrls: ['autocomplete.component.scss'],
+})
+export class PluginAutocomplete implements OnInit {
+    myControl = new FormControl();
+
+    @Input('datas') options: any;
+    @Input('labelPlaceholder') placeholder: string;
+    @Input('labelList') optGroupLabel: string;
+    @Input('targetSearchKey') key: string;
+    @Output('triggerEvent') selectedOpt = new EventEmitter();
+
+    @ViewChild('autoCompleteInput') autoCompleteInput: ElementRef;
+
+    filteredOptions: Observable<string[]>;
+
+    constructor(private latinisePipe: LatinisePipe
+    ) { }
+
+    ngOnInit() {
+        this.optGroupLabel = this.optGroupLabel === undefined ? 'Valeurs disponibles' : this.optGroupLabel;
+        this.placeholder = this.placeholder === undefined ? 'Choisissez une valeur' : this.placeholder;
+
+        this.filteredOptions = this.myControl.valueChanges
+            .pipe(
+                startWith(''),
+                map(value => this._filter(value))
+            );
+    }
+
+    selectOpt(ev: any) {
+        this.myControl.setValue('');
+        this.autoCompleteInput.nativeElement.blur();
+        this.selectedOpt.emit(ev.option.value);
+    }
+
+    private _filter(value: string): string[] {
+        if (typeof value === 'string') {
+            const filterValue = this.latinisePipe.transform(value.toLowerCase());
+            return this.options.filter((option: any) => this.latinisePipe.transform(option.label_action.toLowerCase()).includes(filterValue));
+        } else {
+            return this.options;
+        }
+    }
+}
\ No newline at end of file