108 lines
3.2 KiB
TypeScript
108 lines
3.2 KiB
TypeScript
import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
|
|
import {CommonModule} from '@angular/common';
|
|
|
|
@Component({
|
|
selector: 'sae-multi-selector',
|
|
imports: [
|
|
CommonModule
|
|
],
|
|
templateUrl: './multi-selector.html',
|
|
styleUrl: './multi-selector.scss'
|
|
})
|
|
export class MultiSelector implements OnInit {
|
|
@Input() disabled: boolean = false;
|
|
@Input() label!: string;
|
|
@Input() availableChoices: any = [{
|
|
label: 'aaaaaa',
|
|
value: 'AAAAA'
|
|
}];
|
|
@Input() selectedChoices: any = [];
|
|
@Input() displayDropdown: boolean = false;
|
|
|
|
@Input() store: any;
|
|
@Input() actionTypes: any;
|
|
|
|
@Output() clickedOnInput = new EventEmitter<any>();
|
|
@Output() selectedChoicesChange = new EventEmitter<any>();
|
|
@Output() availableChoicesChange = new EventEmitter<any>();
|
|
|
|
searchText: string = '';
|
|
|
|
constructor() {
|
|
}
|
|
|
|
ngOnInit() {
|
|
console.log('constructor multi selector', this.label, this.availableChoices, this.selectedChoices);
|
|
|
|
}
|
|
|
|
onSearchInput(event: any) {
|
|
this.searchText = (event?.target?.value || '').toLowerCase();
|
|
}
|
|
|
|
getFilteredSelectedChoices() {
|
|
if (!this.searchText) {
|
|
return this.selectedChoices || [];
|
|
}
|
|
return (this.selectedChoices || []).filter((c: any) =>
|
|
(c?.label || '').toLowerCase().includes(this.searchText)
|
|
);
|
|
}
|
|
|
|
getFilteredAvailableChoices() {
|
|
if (!this.searchText) {
|
|
return this.availableChoices || [];
|
|
}
|
|
return (this.availableChoices || []).filter((c: any) =>
|
|
(c?.label || '').toLowerCase().includes(this.searchText)
|
|
);
|
|
}
|
|
|
|
selectedChoicesChangeToggleItem(choice: any) {
|
|
console.log('toggle selected choice ', choice, 'in filter ', this.label);
|
|
this.selectedChoicesChange.emit(choice);
|
|
console.log(choice);
|
|
}
|
|
|
|
availableChoicesChangeToggleItem(choice: any) {
|
|
this.availableChoicesChange.emit(choice);
|
|
console.log('toggle available choice ', choice, 'in filter ', this.label);
|
|
// Retire immédiatement l'élément cliqué de la liste des disponibles (feedback UI optimiste)
|
|
const clickedValue = typeof choice === 'string' ? choice : choice?.value;
|
|
this.availableChoices = (this.availableChoices || []).filter((c: any) => {
|
|
const value = typeof c === 'string' ? c : c?.value;
|
|
return value !== clickedValue;
|
|
});
|
|
console.log('toggle available choices', this.label, choice);
|
|
}
|
|
|
|
onInputClickedOrFocused(event?: any) {
|
|
console.log('onInputClickedOrFocused', this.disabled, event)
|
|
if (!this.disabled) {
|
|
|
|
// Informe le parent que cet input a été cliqué/focus pour fermer les autres dropdowns
|
|
this.clickedOnInput.emit({label: this.label});
|
|
this.displayDropdown = true;
|
|
} else {
|
|
console.info('disabled input');
|
|
return;
|
|
}
|
|
}
|
|
|
|
onClickInput() {
|
|
console.log('click dropdown:', this.displayDropdown);
|
|
if (this.disabled) {
|
|
console.info('disabled input');
|
|
return;
|
|
}
|
|
// Informe le parent pour fermer les autres puis ouvre celui-ci
|
|
this.clickedOnInput.emit({label: this.label});
|
|
this.displayDropdown = true;
|
|
console.log('Opened dropdown:', this.displayDropdown);
|
|
}
|
|
|
|
resetChoicesLists() {
|
|
this.selectedChoices = [];
|
|
this.availableChoices = [];
|
|
}
|
|
}
|