Update: Environment for Heroku Production

src/app/admin/userList/input-interests-admin/input-interests-admin.component.html

@@ -0,0 +1,43 @@
+<mat-form-field class="example-chip-list" appearance="fill">
+
+    <!-- ------------------------------------------------------------------------------------ -->
+
+    <mat-label>Centres d'intérêt</mat-label>
+
+    <!-- ------------------------------------------------------------------------------------ -->
+
+    <mat-chip-list #chipList aria-label="Fruit selection">
+
+        <mat-chip
+                *ngFor="let interest of myInterests"
+                [selectable]="selectable"
+                [removable]="removable"
+                (removed)="remove(interest)">
+            {{interest}}
+            <button matChipRemove *ngIf="removable">
+                <mat-icon>cancel</mat-icon>
+            </button>
+        </mat-chip>
+
+        <input
+                placeholder="Tapez un centre d'intérêt et pressez 'Entrer' pour l'inserer"
+                #tagInput
+                [formControl]="formControl"
+                [matAutocomplete]="auto"
+                [matChipInputFor]="chipList"
+                [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
+                (matChipInputTokenEnd)="add($event)">
+
+    </mat-chip-list>
+
+    <!-- ------------------------------------------------------------------------------------ -->
+
+    <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">
+        <mat-option *ngFor="let interest of filteredInterests | async" [value]="interest">
+            {{interest}}
+        </mat-option>
+    </mat-autocomplete>
+
+    <!-- ------------------------------------------------------------------------------------ -->
+
+</mat-form-field>

src/app/admin/userList/input-interests-admin/input-interests-admin.component.scss

@@ -0,0 +1,3 @@
+mat-form-field {
+  width: 100%;
+}

src/app/admin/userList/input-interests-admin/input-interests-admin.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { InputInterestsAdminComponent } from './input-interests-admin.component';
+
+describe('InputInterestsAdminComponent', () => {
+  let component: InputInterestsAdminComponent;
+  let fixture: ComponentFixture<InputInterestsAdminComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ InputInterestsAdminComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(InputInterestsAdminComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/admin/userList/input-interests-admin/input-interests-admin.component.ts

@@ -0,0 +1,121 @@
+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/message/message.service";
+
+
+
+@Component({
+  selector: 'app-input-interests-admin',
+  templateUrl: './input-interests-admin.component.html',
+  styleUrls: ['./input-interests-admin.component.scss']
+})
+export class InputInterestsAdminComponent 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));
+    }
+
+}