les 'interests'/'themes' ne s'affichent plus dans l'input s'ils ont déjà été sélectionnés

This commit is contained in:
MiharyR 2021-12-14 20:55:45 +01:00
parent c1ecb3cb5e
commit f1614c44aa
10 changed files with 184 additions and 59 deletions

View file

@ -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));
} }
} }

View file

@ -38,6 +38,7 @@ export class DragAndDropComponent
return; return;
} }
this.files.splice(index, 1); this.files.splice(index, 1);
this.eventEmitter.emit(this.files);
} }
/** /**

View file

@ -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>

View file

@ -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));
} }
} }

View file

@ -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",

View file

@ -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 -->

View file

@ -31,6 +31,9 @@ h1 {
// ------------------------------------------------------------------------- // -------------------------------------------------------------------------
.titleContainer {
width: 100%;
}
.commentContainer { .commentContainer {
width: 100%; width: 100%;

View file

@ -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 {

View file

@ -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));
} }
} }

View file

@ -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));
} }
} }