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
|
|
@ -25,6 +25,7 @@ export class InputInterestsAdminComponent implements OnInit
|
||||||
allInterests: string[] = [];
|
allInterests: string[] = [];
|
||||||
@Output() eventEmitter = new EventEmitter<string[]>();
|
@Output() eventEmitter = new EventEmitter<string[]>();
|
||||||
@ViewChild('tagInput') tagInput: ElementRef<HTMLInputElement>;
|
@ViewChild('tagInput') tagInput: ElementRef<HTMLInputElement>;
|
||||||
|
interestsNotSelected: string[] = [];
|
||||||
|
|
||||||
|
|
||||||
constructor( private messageService: MessageService ) {}
|
constructor( private messageService: MessageService ) {}
|
||||||
|
|
@ -34,7 +35,7 @@ export class InputInterestsAdminComponent implements OnInit
|
||||||
{
|
{
|
||||||
this.filteredInterests = this.formControl.valueChanges.pipe(
|
this.filteredInterests = this.formControl.valueChanges.pipe(
|
||||||
startWith(null),
|
startWith(null),
|
||||||
map((fruit: string | null) => fruit ? this._filter(fruit) : this.allInterests.slice()));
|
map((fruit: string | null) => fruit ? this._filter(fruit) : this.interestsNotSelected.slice()));
|
||||||
|
|
||||||
this.messageService
|
this.messageService
|
||||||
.get("misc/getInterests")
|
.get("misc/getInterests")
|
||||||
|
|
@ -45,8 +46,11 @@ export class InputInterestsAdminComponent implements OnInit
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
this.allInterests = [];
|
this.allInterests = [];
|
||||||
for(let elt of retour.data) this.allInterests.push(elt.interest);
|
for(let elt of retour.data)
|
||||||
this.allInterests.sort();
|
{
|
||||||
|
this.allInterests.push(elt.interest);
|
||||||
|
this.interestsNotSelected.push(elt.interest);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
@ -55,28 +59,53 @@ export class InputInterestsAdminComponent implements OnInit
|
||||||
add(event: MatChipInputEvent): void
|
add(event: MatChipInputEvent): void
|
||||||
{
|
{
|
||||||
const value = (event.value || '').trim();
|
const value = (event.value || '').trim();
|
||||||
if (value && (this.allInterests.indexOf(value) !== -1) && (!this.myInterests.includes(value)))
|
const index = this.interestsNotSelected.indexOf(value);
|
||||||
|
if (value && (index !== -1) && (!this.myInterests.includes(value)))
|
||||||
{
|
{
|
||||||
this.myInterests.push(value);
|
this.myInterests.push(value);
|
||||||
event.chipInput!.clear();
|
event.chipInput!.clear();
|
||||||
this.formControl.setValue(null);
|
this.formControl.setValue(null);
|
||||||
this.eventEmitter.emit(this.myInterests);
|
this.eventEmitter.emit(this.myInterests);
|
||||||
|
this.interestsNotSelected.splice(index, 1);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
remove(tag: string): void
|
remove(interest: string): void
|
||||||
{
|
{
|
||||||
const index = this.myInterests.indexOf(tag);
|
// supprimer 'interest' de 'myInterest'
|
||||||
|
const index = this.myInterests.indexOf(interest);
|
||||||
if (index >= 0) this.myInterests.splice(index, 1);
|
if (index >= 0) this.myInterests.splice(index, 1);
|
||||||
this.eventEmitter.emit(this.myInterests);
|
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
|
selected(event: MatAutocompleteSelectedEvent): void
|
||||||
{
|
{
|
||||||
const value = event.option.viewValue;
|
const value = event.option.viewValue;
|
||||||
if(!this.myInterests.includes(value))this.myInterests.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.tagInput.nativeElement.value = '';
|
||||||
this.formControl.setValue(null);
|
this.formControl.setValue(null);
|
||||||
this.eventEmitter.emit(this.myInterests);
|
this.eventEmitter.emit(this.myInterests);
|
||||||
|
|
@ -86,7 +115,7 @@ export class InputInterestsAdminComponent implements OnInit
|
||||||
private _filter(value: string): string[]
|
private _filter(value: string): string[]
|
||||||
{
|
{
|
||||||
const filterValue = value.toLowerCase();
|
const filterValue = value.toLowerCase();
|
||||||
return this.allInterests.filter(fruit => fruit.toLowerCase().includes(filterValue));
|
return this.interestsNotSelected.filter(fruit => fruit.toLowerCase().includes(filterValue));
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -38,6 +38,7 @@ export class DragAndDropComponent
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
this.files.splice(index, 1);
|
this.files.splice(index, 1);
|
||||||
|
this.eventEmitter.emit(this.files);
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
|
||||||
|
|
@ -9,18 +9,18 @@
|
||||||
<mat-chip-list #chipList aria-label="Fruit selection">
|
<mat-chip-list #chipList aria-label="Fruit selection">
|
||||||
|
|
||||||
<mat-chip
|
<mat-chip
|
||||||
*ngFor="let tag of myTags"
|
*ngFor="let interest of myInterests"
|
||||||
[selectable]="selectable"
|
[selectable]="selectable"
|
||||||
[removable]="removable"
|
[removable]="removable"
|
||||||
(removed)="remove(tag)">
|
(removed)="remove(interest)">
|
||||||
{{tag}}
|
{{interest}}
|
||||||
<button matChipRemove *ngIf="removable">
|
<button matChipRemove *ngIf="removable">
|
||||||
<mat-icon>cancel</mat-icon>
|
<mat-icon>cancel</mat-icon>
|
||||||
</button>
|
</button>
|
||||||
</mat-chip>
|
</mat-chip>
|
||||||
|
|
||||||
<input
|
<input
|
||||||
placeholder="Tapez un sujet et pressez 'Entré' pour l'inserer"
|
placeholder="Tapez un centre d'intérêt et pressez 'Entrer' pour l'inserer"
|
||||||
#tagInput
|
#tagInput
|
||||||
[formControl]="formControl"
|
[formControl]="formControl"
|
||||||
[matAutocomplete]="auto"
|
[matAutocomplete]="auto"
|
||||||
|
|
@ -33,8 +33,8 @@
|
||||||
<!-- ------------------------------------------------------------------------------------ -->
|
<!-- ------------------------------------------------------------------------------------ -->
|
||||||
|
|
||||||
<mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">
|
<mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">
|
||||||
<mat-option *ngFor="let tag of filteredTags | async" [value]="tag">
|
<mat-option *ngFor="let interest of filteredInterests | async" [value]="interest">
|
||||||
{{tag}}
|
{{interest}}
|
||||||
</mat-option>
|
</mat-option>
|
||||||
</mat-autocomplete>
|
</mat-autocomplete>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -20,11 +20,12 @@ export class InputInterestsAdComponent implements OnInit
|
||||||
removable = true;
|
removable = true;
|
||||||
separatorKeysCodes: number[] = [ENTER, COMMA];
|
separatorKeysCodes: number[] = [ENTER, COMMA];
|
||||||
formControl = new FormControl();
|
formControl = new FormControl();
|
||||||
filteredTags: Observable<string[]>;
|
filteredInterests: Observable<string[]>;
|
||||||
@Input() myTags: string[] = [];
|
@Input() myInterests: string[] = [];
|
||||||
allTags: string[] = [];
|
allInterests: string[] = [];
|
||||||
@Output() eventEmitter = new EventEmitter<string[]>();
|
@Output() eventEmitter = new EventEmitter<string[]>();
|
||||||
@ViewChild('tagInput') tagInput: ElementRef<HTMLInputElement>;
|
@ViewChild('tagInput') tagInput: ElementRef<HTMLInputElement>;
|
||||||
|
interestsNotSelected: string[] = [];
|
||||||
|
|
||||||
|
|
||||||
constructor( private messageService: MessageService ) {}
|
constructor( private messageService: MessageService ) {}
|
||||||
|
|
@ -32,9 +33,9 @@ export class InputInterestsAdComponent implements OnInit
|
||||||
|
|
||||||
ngOnInit(): void
|
ngOnInit(): void
|
||||||
{
|
{
|
||||||
this.filteredTags = this.formControl.valueChanges.pipe(
|
this.filteredInterests = this.formControl.valueChanges.pipe(
|
||||||
startWith(null),
|
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
|
this.messageService
|
||||||
.get("misc/getInterests")
|
.get("misc/getInterests")
|
||||||
|
|
@ -44,8 +45,12 @@ export class InputInterestsAdComponent implements OnInit
|
||||||
console.log(retour);
|
console.log(retour);
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
this.allTags = retour.data.map(x => x.interest)
|
this.allInterests = [];
|
||||||
this.allTags.sort();
|
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
|
add(event: MatChipInputEvent): void
|
||||||
{
|
{
|
||||||
const value = (event.value || '').trim();
|
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();
|
event.chipInput!.clear();
|
||||||
this.formControl.setValue(null);
|
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);
|
// supprimer 'interest' de 'myInterest'
|
||||||
if (index >= 0) this.myTags.splice(index, 1);
|
const index = this.myInterests.indexOf(interest);
|
||||||
this.eventEmitter.emit(this.myTags);
|
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
|
selected(event: MatAutocompleteSelectedEvent): void
|
||||||
{
|
{
|
||||||
const value = event.option.viewValue;
|
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.tagInput.nativeElement.value = '';
|
||||||
this.formControl.setValue(null);
|
this.formControl.setValue(null);
|
||||||
this.eventEmitter.emit(this.myTags);
|
this.eventEmitter.emit(this.myInterests);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
private _filter(value: string): string[]
|
private _filter(value: string): string[]
|
||||||
{
|
{
|
||||||
const filterValue = value.toLowerCase();
|
const filterValue = value.toLowerCase();
|
||||||
return this.allTags.filter(fruit => fruit.toLowerCase().includes(filterValue));
|
return this.interestsNotSelected.filter(fruit => fruit.toLowerCase().includes(filterValue));
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -124,7 +124,7 @@ export class PageAdListAdvertiserComponent implements AfterViewInit
|
||||||
{
|
{
|
||||||
const config = {
|
const config = {
|
||||||
width: '75%',
|
width: '75%',
|
||||||
height: '80%',
|
//height: '80%',
|
||||||
panelClass: 'custom-dialog-container',
|
panelClass: 'custom-dialog-container',
|
||||||
data: {
|
data: {
|
||||||
action: "add",
|
action: "add",
|
||||||
|
|
@ -146,7 +146,7 @@ export class PageAdListAdvertiserComponent implements AfterViewInit
|
||||||
else {
|
else {
|
||||||
this.tabAdvertWithCountViews.push(this.advertToAdvertWithCountViews(advertAdded));
|
this.tabAdvertWithCountViews.push(this.advertToAdvertWithCountViews(advertAdded));
|
||||||
this.onFilter();
|
this.onFilter();
|
||||||
message = "L'annoonce a bien été ajoutée ✔" ;
|
message = "L'annonce a bien été ajoutée ✔" ;
|
||||||
}
|
}
|
||||||
this.snackBar.open( message, "", config);
|
this.snackBar.open( message, "", config);
|
||||||
});
|
});
|
||||||
|
|
@ -157,7 +157,7 @@ export class PageAdListAdvertiserComponent implements AfterViewInit
|
||||||
{
|
{
|
||||||
const config = {
|
const config = {
|
||||||
width: '75%',
|
width: '75%',
|
||||||
height: '80%',
|
//height: '80%',
|
||||||
panelClass: 'custom-dialog-container',
|
panelClass: 'custom-dialog-container',
|
||||||
data: {
|
data: {
|
||||||
action: "update",
|
action: "update",
|
||||||
|
|
|
||||||
|
|
@ -15,24 +15,24 @@
|
||||||
<div class="col-6">
|
<div class="col-6">
|
||||||
|
|
||||||
<!-- Title -->
|
<!-- Title -->
|
||||||
<mat-form-field appearance="fill">
|
<mat-form-field class="titleContainer" appearance="fill">
|
||||||
<mat-label> Titre annonce </mat-label>
|
<mat-label> Titre annonce </mat-label>
|
||||||
<input matInput type="text" [(ngModel)]="advert.title">
|
<input matInput type="text" [(ngModel)]="advert.title" required>
|
||||||
</mat-form-field>
|
</mat-form-field>
|
||||||
|
|
||||||
<!-- Interests -->
|
<!-- Interests -->
|
||||||
<app-input-interests-ad [myTags]="advert.interests" (eventEmitter)="onEventInputTags($event)"></app-input-interests-ad>
|
<app-input-interests-ad [myInterests]="advert.interests" (eventEmitter)="onEventInputTags($event)"></app-input-interests-ad>
|
||||||
|
|
||||||
<!-- Comments -->
|
<!-- Comments -->
|
||||||
<mat-form-field class="commentContainer" appearance="fill">
|
<mat-form-field class="commentContainer" appearance="fill">
|
||||||
<mat-label> Commentaire </mat-label>
|
<mat-label> Commentaire </mat-label>
|
||||||
<textarea matInput [(ngModel)]="advert.comment"></textarea>
|
<textarea matInput [(ngModel)]="advert.comment" rows="5" style="resize: none;"></textarea>
|
||||||
</mat-form-field><br>
|
</mat-form-field><br>
|
||||||
|
|
||||||
<!-- url -->
|
<!-- url -->
|
||||||
<mat-form-field class="commentContainer" appearance="fill">
|
<mat-form-field class="commentContainer" appearance="fill">
|
||||||
<mat-label> URL </mat-label>
|
<mat-label> URL </mat-label>
|
||||||
<textarea matInput [(ngModel)]="advert.url"></textarea>
|
<input matInput [(ngModel)]="advert.url">
|
||||||
</mat-form-field><br>
|
</mat-form-field><br>
|
||||||
|
|
||||||
<!-- IsVisible -->
|
<!-- IsVisible -->
|
||||||
|
|
|
||||||
|
|
@ -31,6 +31,9 @@ h1 {
|
||||||
|
|
||||||
// -------------------------------------------------------------------------
|
// -------------------------------------------------------------------------
|
||||||
|
|
||||||
|
.titleContainer {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
.commentContainer {
|
.commentContainer {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
|
||||||
|
|
@ -56,6 +56,7 @@ export class PopupAddOrUpdateAdComponent implements OnInit
|
||||||
if(this.data.action === "add")
|
if(this.data.action === "add")
|
||||||
{
|
{
|
||||||
this.advert = Object.assign({}, ADVERT_VIDE);
|
this.advert = Object.assign({}, ADVERT_VIDE);
|
||||||
|
this.advert.images = [];
|
||||||
this.advert.interests = [];
|
this.advert.interests = [];
|
||||||
this.title = "Ajouter annonce" ;
|
this.title = "Ajouter annonce" ;
|
||||||
}
|
}
|
||||||
|
|
@ -103,12 +104,15 @@ export class PopupAddOrUpdateAdComponent implements OnInit
|
||||||
checkField()
|
checkField()
|
||||||
{
|
{
|
||||||
if(this.advert.title.length === 0) {
|
if(this.advert.title.length === 0) {
|
||||||
this.errorMessage = "Veuillez remplir le champ 'titre'" ;
|
this.errorMessage = "Veuillez remplir le champ 'titre'." ;
|
||||||
this.hasError = true;
|
this.hasError = true;
|
||||||
}
|
}
|
||||||
else if(this.allTitle.includes(this.advert.title))
|
else if(this.allTitle.includes(this.advert.title)) {
|
||||||
{
|
this.errorMessage = "Ce titre est déjà pris." ;
|
||||||
this.errorMessage = "Ce titre est déjà pris" ;
|
this.hasError = true;
|
||||||
|
}
|
||||||
|
else if((this.advert.images.length === 0) && (this.tabOfNewImagesName.length === 0)) {
|
||||||
|
this.errorMessage = "Veuillez uploader au moins une image." ;
|
||||||
this.hasError = true;
|
this.hasError = true;
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
|
|
|
||||||
|
|
@ -25,6 +25,7 @@ export class InputInterestsRegisterComponent implements OnInit
|
||||||
allInterests: string[] = [];
|
allInterests: string[] = [];
|
||||||
@Output() eventEmitter = new EventEmitter<string[]>();
|
@Output() eventEmitter = new EventEmitter<string[]>();
|
||||||
@ViewChild('tagInput') tagInput: ElementRef<HTMLInputElement>;
|
@ViewChild('tagInput') tagInput: ElementRef<HTMLInputElement>;
|
||||||
|
interestsNotSelected: string[] = [];
|
||||||
|
|
||||||
|
|
||||||
constructor( private messageService: MessageService ) {}
|
constructor( private messageService: MessageService ) {}
|
||||||
|
|
@ -34,7 +35,7 @@ export class InputInterestsRegisterComponent implements OnInit
|
||||||
{
|
{
|
||||||
this.filteredInterests = this.formControl.valueChanges.pipe(
|
this.filteredInterests = this.formControl.valueChanges.pipe(
|
||||||
startWith(null),
|
startWith(null),
|
||||||
map((fruit: string | null) => fruit ? this._filter(fruit) : this.allInterests.slice()));
|
map((fruit: string | null) => fruit ? this._filter(fruit) : this.interestsNotSelected.slice()));
|
||||||
|
|
||||||
this.messageService
|
this.messageService
|
||||||
.get("misc/getInterests")
|
.get("misc/getInterests")
|
||||||
|
|
@ -45,8 +46,11 @@ export class InputInterestsRegisterComponent implements OnInit
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
this.allInterests = [];
|
this.allInterests = [];
|
||||||
for(let elt of retour.data) this.allInterests.push(elt.interest);
|
for(let elt of retour.data)
|
||||||
this.allInterests.sort();
|
{
|
||||||
|
this.allInterests.push(elt.interest);
|
||||||
|
this.interestsNotSelected.push(elt.interest);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
@ -55,28 +59,53 @@ export class InputInterestsRegisterComponent implements OnInit
|
||||||
add(event: MatChipInputEvent): void
|
add(event: MatChipInputEvent): void
|
||||||
{
|
{
|
||||||
const value = (event.value || '').trim();
|
const value = (event.value || '').trim();
|
||||||
if (value && (this.allInterests.indexOf(value) !== -1) && (!this.myInterests.includes(value)))
|
const index = this.interestsNotSelected.indexOf(value);
|
||||||
|
if (value && (index !== -1) && (!this.myInterests.includes(value)))
|
||||||
{
|
{
|
||||||
this.myInterests.push(value);
|
this.myInterests.push(value);
|
||||||
event.chipInput!.clear();
|
event.chipInput!.clear();
|
||||||
this.formControl.setValue(null);
|
this.formControl.setValue(null);
|
||||||
this.eventEmitter.emit(this.myInterests);
|
this.eventEmitter.emit(this.myInterests);
|
||||||
|
this.interestsNotSelected.splice(index, 1);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
remove(tag: string): void
|
remove(interest: string): void
|
||||||
{
|
{
|
||||||
const index = this.myInterests.indexOf(tag);
|
// supprimer 'interest' de 'myInterest'
|
||||||
|
const index = this.myInterests.indexOf(interest);
|
||||||
if (index >= 0) this.myInterests.splice(index, 1);
|
if (index >= 0) this.myInterests.splice(index, 1);
|
||||||
this.eventEmitter.emit(this.myInterests);
|
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
|
selected(event: MatAutocompleteSelectedEvent): void
|
||||||
{
|
{
|
||||||
const value = event.option.viewValue;
|
const value = event.option.viewValue;
|
||||||
if(!this.myInterests.includes(value))this.myInterests.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.tagInput.nativeElement.value = '';
|
||||||
this.formControl.setValue(null);
|
this.formControl.setValue(null);
|
||||||
this.eventEmitter.emit(this.myInterests);
|
this.eventEmitter.emit(this.myInterests);
|
||||||
|
|
@ -86,7 +115,7 @@ export class InputInterestsRegisterComponent implements OnInit
|
||||||
private _filter(value: string): string[]
|
private _filter(value: string): string[]
|
||||||
{
|
{
|
||||||
const filterValue = value.toLowerCase();
|
const filterValue = value.toLowerCase();
|
||||||
return this.allInterests.filter(fruit => fruit.toLowerCase().includes(filterValue));
|
return this.interestsNotSelected.filter(fruit => fruit.toLowerCase().includes(filterValue));
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -25,6 +25,7 @@ export class InputInterestsProfilComponent implements OnInit
|
||||||
allInterests: string[] = [];
|
allInterests: string[] = [];
|
||||||
@Output() eventEmitter = new EventEmitter<string[]>();
|
@Output() eventEmitter = new EventEmitter<string[]>();
|
||||||
@ViewChild('tagInput') tagInput: ElementRef<HTMLInputElement>;
|
@ViewChild('tagInput') tagInput: ElementRef<HTMLInputElement>;
|
||||||
|
interestsNotSelected: string[] = [];
|
||||||
|
|
||||||
|
|
||||||
constructor( private messageService: MessageService ) {}
|
constructor( private messageService: MessageService ) {}
|
||||||
|
|
@ -34,7 +35,7 @@ export class InputInterestsProfilComponent implements OnInit
|
||||||
{
|
{
|
||||||
this.filteredInterests = this.formControl.valueChanges.pipe(
|
this.filteredInterests = this.formControl.valueChanges.pipe(
|
||||||
startWith(null),
|
startWith(null),
|
||||||
map((fruit: string | null) => fruit ? this._filter(fruit) : this.allInterests.slice()));
|
map((fruit: string | null) => fruit ? this._filter(fruit) : this.interestsNotSelected.slice()));
|
||||||
|
|
||||||
this.messageService
|
this.messageService
|
||||||
.get("misc/getInterests")
|
.get("misc/getInterests")
|
||||||
|
|
@ -45,8 +46,11 @@ export class InputInterestsProfilComponent implements OnInit
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
this.allInterests = [];
|
this.allInterests = [];
|
||||||
for(let elt of retour.data) this.allInterests.push(elt.interest);
|
for(let elt of retour.data)
|
||||||
this.allInterests.sort();
|
{
|
||||||
|
this.allInterests.push(elt.interest);
|
||||||
|
this.interestsNotSelected.push(elt.interest);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
@ -55,28 +59,53 @@ export class InputInterestsProfilComponent implements OnInit
|
||||||
add(event: MatChipInputEvent): void
|
add(event: MatChipInputEvent): void
|
||||||
{
|
{
|
||||||
const value = (event.value || '').trim();
|
const value = (event.value || '').trim();
|
||||||
if (value && (this.allInterests.indexOf(value) !== -1) && (!this.myInterests.includes(value)))
|
const index = this.interestsNotSelected.indexOf(value);
|
||||||
|
if (value && (index !== -1) && (!this.myInterests.includes(value)))
|
||||||
{
|
{
|
||||||
this.myInterests.push(value);
|
this.myInterests.push(value);
|
||||||
event.chipInput!.clear();
|
event.chipInput!.clear();
|
||||||
this.formControl.setValue(null);
|
this.formControl.setValue(null);
|
||||||
this.eventEmitter.emit(this.myInterests);
|
this.eventEmitter.emit(this.myInterests);
|
||||||
|
this.interestsNotSelected.splice(index, 1);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
remove(tag: string): void
|
remove(interest: string): void
|
||||||
{
|
{
|
||||||
const index = this.myInterests.indexOf(tag);
|
// supprimer 'interest' de 'myInterest'
|
||||||
|
const index = this.myInterests.indexOf(interest);
|
||||||
if (index >= 0) this.myInterests.splice(index, 1);
|
if (index >= 0) this.myInterests.splice(index, 1);
|
||||||
this.eventEmitter.emit(this.myInterests);
|
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
|
selected(event: MatAutocompleteSelectedEvent): void
|
||||||
{
|
{
|
||||||
const value = event.option.viewValue;
|
const value = event.option.viewValue;
|
||||||
if(!this.myInterests.includes(value))this.myInterests.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.tagInput.nativeElement.value = '';
|
||||||
this.formControl.setValue(null);
|
this.formControl.setValue(null);
|
||||||
this.eventEmitter.emit(this.myInterests);
|
this.eventEmitter.emit(this.myInterests);
|
||||||
|
|
@ -86,7 +115,7 @@ export class InputInterestsProfilComponent implements OnInit
|
||||||
private _filter(value: string): string[]
|
private _filter(value: string): string[]
|
||||||
{
|
{
|
||||||
const filterValue = value.toLowerCase();
|
const filterValue = value.toLowerCase();
|
||||||
return this.allInterests.filter(fruit => fruit.toLowerCase().includes(filterValue));
|
return this.interestsNotSelected.filter(fruit => fruit.toLowerCase().includes(filterValue));
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Reference in a new issue