les 'interests'/'themes' ne s'affichent plus dans l'input s'ils ont déjà été sélectionnés
This commit is contained in:
parent
c1ecb3cb5e
commit
f1614c44aa
10 changed files with 184 additions and 59 deletions
|
|
@ -20,11 +20,12 @@ export class InputInterestsAdComponent implements OnInit
|
|||
removable = true;
|
||||
separatorKeysCodes: number[] = [ENTER, COMMA];
|
||||
formControl = new FormControl();
|
||||
filteredTags: Observable<string[]>;
|
||||
@Input() myTags: string[] = [];
|
||||
allTags: string[] = [];
|
||||
filteredInterests: Observable<string[]>;
|
||||
@Input() myInterests: string[] = [];
|
||||
allInterests: string[] = [];
|
||||
@Output() eventEmitter = new EventEmitter<string[]>();
|
||||
@ViewChild('tagInput') tagInput: ElementRef<HTMLInputElement>;
|
||||
interestsNotSelected: string[] = [];
|
||||
|
||||
|
||||
constructor( private messageService: MessageService ) {}
|
||||
|
|
@ -32,9 +33,9 @@ export class InputInterestsAdComponent implements OnInit
|
|||
|
||||
ngOnInit(): void
|
||||
{
|
||||
this.filteredTags = this.formControl.valueChanges.pipe(
|
||||
this.filteredInterests = this.formControl.valueChanges.pipe(
|
||||
startWith(null),
|
||||
map((fruit: string | null) => fruit ? this._filter(fruit) : this.allTags.slice()));
|
||||
map((fruit: string | null) => fruit ? this._filter(fruit) : this.interestsNotSelected.slice()));
|
||||
|
||||
this.messageService
|
||||
.get("misc/getInterests")
|
||||
|
|
@ -44,8 +45,12 @@ export class InputInterestsAdComponent implements OnInit
|
|||
console.log(retour);
|
||||
}
|
||||
else {
|
||||
this.allTags = retour.data.map(x => x.interest)
|
||||
this.allTags.sort();
|
||||
this.allInterests = [];
|
||||
for(let elt of retour.data)
|
||||
{
|
||||
this.allInterests.push(elt.interest);
|
||||
this.interestsNotSelected.push(elt.interest);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
@ -54,38 +59,63 @@ export class InputInterestsAdComponent implements OnInit
|
|||
add(event: MatChipInputEvent): void
|
||||
{
|
||||
const value = (event.value || '').trim();
|
||||
if (value && (this.allTags.indexOf(value) !== -1) && (!this.myTags.includes(value)))
|
||||
const index = this.interestsNotSelected.indexOf(value);
|
||||
if (value && (index !== -1) && (!this.myInterests.includes(value)))
|
||||
{
|
||||
this.myTags.push(value);
|
||||
this.myInterests.push(value);
|
||||
event.chipInput!.clear();
|
||||
this.formControl.setValue(null);
|
||||
this.eventEmitter.emit(this.myTags);
|
||||
this.eventEmitter.emit(this.myInterests);
|
||||
this.interestsNotSelected.splice(index, 1);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
remove(tag: string): void
|
||||
remove(interest: string): void
|
||||
{
|
||||
const index = this.myTags.indexOf(tag);
|
||||
if (index >= 0) this.myTags.splice(index, 1);
|
||||
this.eventEmitter.emit(this.myTags);
|
||||
// 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.myTags.includes(value))this.myTags.push(value);
|
||||
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.myTags);
|
||||
this.eventEmitter.emit(this.myInterests);
|
||||
}
|
||||
|
||||
|
||||
private _filter(value: string): string[]
|
||||
{
|
||||
const filterValue = value.toLowerCase();
|
||||
return this.allTags.filter(fruit => fruit.toLowerCase().includes(filterValue));
|
||||
return this.interestsNotSelected.filter(fruit => fruit.toLowerCase().includes(filterValue));
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
Reference in a new issue