diff --git a/src/frontend/app/administration/group/indexing/indexing-administration.component.html b/src/frontend/app/administration/group/indexing/indexing-administration.component.html
index ae1a19f23359000d7e01766bbab9e5e3bd5b6e0f..67a04724d0dd86c353a124dcff7708160963a2f2 100644
--- a/src/frontend/app/administration/group/indexing/indexing-administration.component.html
+++ b/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">
diff --git a/src/frontend/app/administration/group/indexing/indexing-administration.component.ts b/src/frontend/app/administration/group/indexing/indexing-administration.component.ts
index 468344640b631d855372ae648a520670eac9ded7..ce734fd2571e9ab7b8b8a126cdb35544ea0cb142 100644
--- a/src/frontend/app/administration/group/indexing/indexing-administration.component.ts
+++ b/src/frontend/app/administration/group/indexing/indexing-administration.component.ts
@@ -1,14 +1,9 @@
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;
- }
- }
}
diff --git a/src/frontend/app/app-common.module.ts b/src/frontend/app/app-common.module.ts
index c4022c7843850c92a9382de6f1a858e6a9f30f36..c75bf65044f546ab03025646d155410879613dc0 100755
--- a/src/frontend/app/app-common.module.ts
+++ b/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,
diff --git a/src/frontend/plugins/autocomplete/autocomplete.component.html b/src/frontend/plugins/autocomplete/autocomplete.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..dba5ab6ffcbf1355715facfadcfffe662f725566
--- /dev/null
+++ b/src/frontend/plugins/autocomplete/autocomplete.component.html
@@ -0,0 +1,15 @@
+<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
diff --git a/src/frontend/plugins/autocomplete/autocomplete.component.scss b/src/frontend/plugins/autocomplete/autocomplete.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/src/frontend/plugins/autocomplete/autocomplete.component.ts b/src/frontend/plugins/autocomplete/autocomplete.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..6fe36de0d4a088687dab4dba9713e011573c1857
--- /dev/null
+++ b/src/frontend/plugins/autocomplete/autocomplete.component.ts
@@ -0,0 +1,54 @@
+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