121 lines
4.1 KiB
TypeScript
121 lines
4.1 KiB
TypeScript
import {Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild} from '@angular/core';
|
|
import {COMMA, ENTER} from "@angular/cdk/keycodes";
|
|
import {FormControl} from "@angular/forms";
|
|
import {Observable} from "rxjs";
|
|
import {map, startWith} from "rxjs/operators";
|
|
import {MatChipInputEvent} from "@angular/material/chips";
|
|
import {MatAutocompleteSelectedEvent} from "@angular/material/autocomplete";
|
|
import {MessageService} from "../../../utils/services/message/message.service";
|
|
|
|
|
|
|
|
@Component({
|
|
selector: 'app-input-interests-ad',
|
|
templateUrl: './input-interests-ad.component.html',
|
|
styleUrls: ['./input-interests-ad.component.scss']
|
|
})
|
|
export class InputInterestsAdComponent implements OnInit
|
|
{
|
|
selectable = true;
|
|
removable = true;
|
|
separatorKeysCodes: number[] = [ENTER, COMMA];
|
|
formControl = new FormControl();
|
|
filteredInterests: Observable<string[]>;
|
|
@Input() myInterests: string[] = [];
|
|
allInterests: string[] = [];
|
|
@Output() eventEmitter = new EventEmitter<string[]>();
|
|
@ViewChild('tagInput') tagInput: ElementRef<HTMLInputElement>;
|
|
interestsNotSelected: string[] = [];
|
|
|
|
|
|
constructor( private messageService: MessageService ) {}
|
|
|
|
|
|
ngOnInit(): void
|
|
{
|
|
this.filteredInterests = this.formControl.valueChanges.pipe(
|
|
startWith(null),
|
|
map((fruit: string | null) => fruit ? this._filter(fruit) : this.interestsNotSelected.slice()));
|
|
|
|
this.messageService
|
|
.get("misc/getInterests")
|
|
.subscribe( retour => {
|
|
|
|
if(retour.status !== "success") {
|
|
console.log(retour);
|
|
}
|
|
else {
|
|
this.allInterests = [];
|
|
for(let elt of retour.data)
|
|
{
|
|
this.allInterests.push(elt.interest);
|
|
this.interestsNotSelected.push(elt.interest);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
|
|
add(event: MatChipInputEvent): void
|
|
{
|
|
const value = (event.value || '').trim();
|
|
const index = this.interestsNotSelected.indexOf(value);
|
|
if (value && (index !== -1) && (!this.myInterests.includes(value)))
|
|
{
|
|
this.myInterests.push(value);
|
|
event.chipInput!.clear();
|
|
this.formControl.setValue(null);
|
|
this.eventEmitter.emit(this.myInterests);
|
|
this.interestsNotSelected.splice(index, 1);
|
|
}
|
|
}
|
|
|
|
|
|
remove(interest: string): void
|
|
{
|
|
// supprimer 'interest' de 'myInterest'
|
|
const index = this.myInterests.indexOf(interest);
|
|
if (index >= 0) this.myInterests.splice(index, 1);
|
|
this.eventEmitter.emit(this.myInterests);
|
|
|
|
// remmettre 'interest' dans 'interestsNotSelected'
|
|
if(!this.interestsNotSelected.includes(interest))
|
|
{
|
|
const indexOfAutres = this.interestsNotSelected.indexOf("Autres");
|
|
if(indexOfAutres !== -1)
|
|
{
|
|
this.interestsNotSelected.splice(indexOfAutres, 1);
|
|
if(interest !== "Autres") this.interestsNotSelected.push(interest);
|
|
this.interestsNotSelected.sort();
|
|
this.interestsNotSelected.push("Autres");
|
|
}
|
|
else {
|
|
this.interestsNotSelected.push(interest);
|
|
if(interest !== "Autres") this.interestsNotSelected.sort();
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
selected(event: MatAutocompleteSelectedEvent): void
|
|
{
|
|
const value = event.option.viewValue;
|
|
if(!this.myInterests.includes(value))
|
|
{
|
|
this.myInterests.push(value);
|
|
const index = this.interestsNotSelected.indexOf(value);
|
|
this.interestsNotSelected.splice(index, 1);
|
|
}
|
|
this.tagInput.nativeElement.value = '';
|
|
this.formControl.setValue(null);
|
|
this.eventEmitter.emit(this.myInterests);
|
|
}
|
|
|
|
|
|
private _filter(value: string): string[]
|
|
{
|
|
const filterValue = value.toLowerCase();
|
|
return this.interestsNotSelected.filter(fruit => fruit.toLowerCase().includes(filterValue));
|
|
}
|
|
|
|
}
|