add ng-select for templatable select options

- create select-tags component to replace ngx-chips
- create select-options to factorize option selection in forms
- create select-channel to simplify channel selection
- refactor tags validation

4 files changed, 2 insertions, 24 deletions

diff --git a/client/src/app/+search/search-filters.component.html b/client/src/app/+search/search-filters.component.html
index e20aef8fb..b36b1d2ae 100644
--- a/client/src/app/+search/search-filters.component.html
+++ b/client/src/app/+search/search-filters.component.html
@@ -144,12 +144,7 @@
         <button i18n class="reset-button reset-button-small" (click)="resetField('tagsAllOf')" *ngIf="advancedSearch.tagsAllOf">
           Reset
         </button>
-        <tag-input
-          [(ngModel)]="advancedSearch.tagsAllOf" name="tagsAllOf" id="tagsAllOf"
-          [validators]="tagValidators" [errorMessages]="tagValidatorsMessages"
-          i18n-placeholder placeholder="+ Tag" i18n-secondaryPlaceholder secondaryPlaceholder="Enter a tag"
-          [maxItems]="5" [modelAsStrings]="true"
-        ></tag-input>
+        <my-select-tags labelForId="tagsAllOf" id="tagsAllOf" [(ngModel)]="advancedSearch.tagsAllOf"></my-select-tags>
       </div>
 
       <div class="form-group">
@@ -157,12 +152,7 @@
         <button i18n class="reset-button reset-button-small" (click)="resetField('tagsOneOf')" *ngIf="advancedSearch.tagsOneOf">
           Reset
         </button>
-        <tag-input
-          [(ngModel)]="advancedSearch.tagsOneOf" name="tagsOneOf" id="tagsOneOf"
-          [validators]="tagValidators" [errorMessages]="tagValidatorsMessages"
-          i18n-placeholder placeholder="+ Tag" i18n-secondaryPlaceholder secondaryPlaceholder="Enter a tag"
-          [maxItems]="5" [modelAsStrings]="true"
-        ></tag-input>
+        <my-select-tags labelForId="tagsOneOf" id="tagsOneOf" [(ngModel)]="advancedSearch.tagsOneOf"></my-select-tags>
       </div>
 
       <div class="form-group" *ngIf="isSearchTargetEnabled()">
diff --git a/client/src/app/+search/search-filters.component.scss b/client/src/app/+search/search-filters.component.scss
index a88a1c0b0..68ac6d021 100644
--- a/client/src/app/+search/search-filters.component.scss
+++ b/client/src/app/+search/search-filters.component.scss
@@ -65,5 +65,3 @@ input[type=submit] {
   display: flex;
   white-space: nowrap;
 }
-
-@include ng2-tags;
diff --git a/client/src/app/+search/search-filters.component.ts b/client/src/app/+search/search-filters.component.ts
index fc1db3258..13ad61647 100644
--- a/client/src/app/+search/search-filters.component.ts
+++ b/client/src/app/+search/search-filters.component.ts
@@ -1,5 +1,4 @@
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'
-import { ValidatorFn } from '@angular/forms'
 import { ServerService } from '@app/core'
 import { VideoValidatorsService } from '@app/shared/shared-forms'
 import { AdvancedSearch } from '@app/shared/shared-search'
@@ -20,9 +19,6 @@ export class SearchFiltersComponent implements OnInit {
   videoLicences: VideoConstant<number>[] = []
   videoLanguages: VideoConstant<string>[] = []
 
-  tagValidators: ValidatorFn[]
-  tagValidatorsMessages: { [ name: string ]: string }
-
   publishedDateRanges: { id: string, label: string }[] = []
   sorts: { id: string, label: string }[] = []
   durationRanges: { id: string, label: string }[] = []
@@ -40,8 +36,6 @@ export class SearchFiltersComponent implements OnInit {
     private videoValidatorsService: VideoValidatorsService,
     private serverService: ServerService
   ) {
-    this.tagValidators = this.videoValidatorsService.VIDEO_TAGS.VALIDATORS
-    this.tagValidatorsMessages = this.videoValidatorsService.VIDEO_TAGS.MESSAGES
     this.publishedDateRanges = [
       {
         id: 'any_published_date',
diff --git a/client/src/app/+search/search.module.ts b/client/src/app/+search/search.module.ts
index ee4f07ad1..e85ae07d0 100644
--- a/client/src/app/+search/search.module.ts
+++ b/client/src/app/+search/search.module.ts
@@ -1,4 +1,3 @@
-import { TagInputModule } from 'ngx-chips'
 import { NgModule } from '@angular/core'
 import { SharedFormModule } from '@app/shared/shared-forms'
 import { SharedMainModule } from '@app/shared/shared-main'
@@ -14,8 +13,6 @@ import { VideoLazyLoadResolver } from './video-lazy-load.resolver'
 
 @NgModule({
   imports: [
-    TagInputModule,
-
     SearchRoutingModule,
 
     SharedMainModule,
@@ -31,7 +28,6 @@ import { VideoLazyLoadResolver } from './video-lazy-load.resolver'
   ],
 
   exports: [
-    TagInputModule,
     SearchComponent
   ],