Fix tags in search filters

client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-edit.component.html

@@ -68,13 +68,10 @@
 
         <div class="form-group">
           <label i18n>Channel</label>
-          <div class="peertube-select-container">
-            <select formControlName="videoChannelId" class="form-control">
-              <option i18n value="undefined" disabled>Channel to bind the playlist to</option>
-              <option></option>
-              <option *ngFor="let channel of userVideoChannels" [value]="channel.id">{{ channel.label }}</option>
-            </select>
-          </div>
+
+          <my-select-channel
+            labelForId="videoChannelIdl" [items]="userVideoChannels" formControlName="videoChannelId"
+          ></my-select-channel>
 
           <div *ngIf="formErrors['videoChannelId']" class="form-error">
             {{ formErrors['videoChannelId'] }}

client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-edit.ts

@@ -1,11 +1,12 @@
 import { FormReactive } from '@app/shared/shared-forms'
+import { SelectChannelItem } from '@app/shared/shared-forms/select-channel.component'
 import { VideoConstant, VideoPlaylistPrivacy } from '@shared/models'
 import { VideoPlaylist } from '@shared/models/videos/playlist/video-playlist.model'
 
 export abstract class MyAccountVideoPlaylistEdit extends FormReactive {
   // Declare it here to avoid errors in create template
   videoPlaylistToUpdate: VideoPlaylist
-  userVideoChannels: { id: number, label: string }[] = []
+  userVideoChannels: SelectChannelItem[] = []
   videoPlaylistPrivacies: VideoConstant<VideoPlaylistPrivacy>[] = []
 
   abstract isCreation (): boolean

client/src/app/+search/search-filters.component.html

@@ -144,7 +144,7 @@
         <button i18n class="reset-button reset-button-small" (click)="resetField('tagsAllOf')" *ngIf="advancedSearch.tagsAllOf">
           Reset
         </button>
-        <my-select-tags labelForId="tagsAllOf" id="tagsAllOf" [(ngModel)]="advancedSearch.tagsAllOf"></my-select-tags>
+        <my-select-tags name="tagsAllOf" labelForId="tagsAllOf" id="tagsAllOf" [(ngModel)]="advancedSearch.tagsAllOf"></my-select-tags>
       </div>
 
       <div class="form-group">
@@ -152,7 +152,7 @@
         <button i18n class="reset-button reset-button-small" (click)="resetField('tagsOneOf')" *ngIf="advancedSearch.tagsOneOf">
           Reset
         </button>
-        <my-select-tags labelForId="tagsOneOf" id="tagsOneOf" [(ngModel)]="advancedSearch.tagsOneOf"></my-select-tags>
+        <my-select-tags name="tagsOneOf" labelForId="tagsOneOf" id="tagsOneOf" [(ngModel)]="advancedSearch.tagsOneOf"></my-select-tags>
       </div>
 
       <div class="form-group" *ngIf="isSearchTargetEnabled()">

client/src/app/+videos/+video-edit/shared/video-edit.component.ts

@@ -1,16 +1,17 @@
+import { forkJoin } from 'rxjs'
 import { map } from 'rxjs/operators'
 import { Component, Input, NgZone, OnDestroy, OnInit, ViewChild } from '@angular/core'
 import { FormArray, FormControl, FormGroup, ValidatorFn, Validators } from '@angular/forms'
 import { ServerService } from '@app/core'
 import { removeElementFromArray } from '@app/helpers'
 import { FormReactiveValidationMessages, FormValidatorService, VideoValidatorsService } from '@app/shared/shared-forms'
+import { SelectChannelItem } from '@app/shared/shared-forms/select-channel.component'
+import { InstanceService } from '@app/shared/shared-instance'
 import { VideoCaptionEdit, VideoEdit, VideoService } from '@app/shared/shared-main'
+import { I18n } from '@ngx-translate/i18n-polyfill'
 import { ServerConfig, VideoConstant, VideoPrivacy } from '@shared/models'
 import { I18nPrimengCalendarService } from './i18n-primeng-calendar.service'
 import { VideoCaptionAddModalComponent } from './video-caption-add-modal.component'
-import { I18n } from '@ngx-translate/i18n-polyfill'
-import { forkJoin } from 'rxjs'
-import { InstanceService } from '@app/shared/shared-instance'
 
 type VideoLanguages = VideoConstant<string> & { group?: string }
 
@@ -23,7 +24,7 @@ export class VideoEditComponent implements OnInit, OnDestroy {
   @Input() form: FormGroup
   @Input() formErrors: { [ id: string ]: string } = {}
   @Input() validationMessages: FormReactiveValidationMessages = {}
-  @Input() userVideoChannels: { id: number, label: string, support: string }[] = []
+  @Input() userVideoChannels: SelectChannelItem[] = []
   @Input() schedulePublicationPossible = true
   @Input() videoCaptions: (VideoCaptionEdit & { captionPath?: string })[] = []
   @Input() waitTranscodingEnabled = true

client/src/app/+videos/+video-edit/video-add-components/video-send.ts

@@ -3,6 +3,7 @@ import { Directive, EventEmitter, OnInit } from '@angular/core'
 import { AuthService, CanComponentDeactivateResult, Notifier, ServerService } from '@app/core'
 import { populateAsyncUserVideoChannels } from '@app/helpers'
 import { FormReactive } from '@app/shared/shared-forms'
+import { SelectChannelItem } from '@app/shared/shared-forms/select-channel.component'
 import { VideoCaptionEdit, VideoCaptionService, VideoEdit, VideoService } from '@app/shared/shared-main'
 import { LoadingBarService } from '@ngx-loading-bar/core'
 import { ServerConfig, VideoConstant, VideoPrivacy } from '@shared/models'
@@ -10,7 +11,7 @@ import { ServerConfig, VideoConstant, VideoPrivacy } from '@shared/models'
 @Directive()
 // tslint:disable-next-line: directive-class-suffix
 export abstract class VideoSend extends FormReactive implements OnInit {
-  userVideoChannels: { id: number, label: string, support: string, avatarPath?: string }[] = []
+  userVideoChannels: SelectChannelItem[] = []
   videoPrivacies: VideoConstant<VideoPrivacy>[] = []
   videoCaptions: VideoCaptionEdit[] = []
 

client/src/app/+videos/+video-edit/video-update.component.ts

@@ -3,6 +3,7 @@ import { Component, HostListener, OnInit } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
 import { Notifier } from '@app/core'
 import { FormReactive, FormValidatorService } from '@app/shared/shared-forms'
+import { SelectChannelItem } from '@app/shared/shared-forms/select-channel.component'
 import { VideoCaptionEdit, VideoCaptionService, VideoDetails, VideoEdit, VideoService } from '@app/shared/shared-main'
 import { LoadingBarService } from '@ngx-loading-bar/core'
 import { I18n } from '@ngx-translate/i18n-polyfill'
@@ -17,7 +18,7 @@ export class VideoUpdateComponent extends FormReactive implements OnInit {
   video: VideoEdit
 
   isUpdatingVideo = false
-  userVideoChannels: { id: number, label: string, support: string, avatar?: string }[] = []
+  userVideoChannels: SelectChannelItem[] = []
   schedulePublicationPossible = false
   videoCaptions: VideoCaptionEdit[] = []
   waitTranscodingEnabled = true

client/src/app/core/rest/rest.service.ts

@@ -49,7 +49,7 @@ export class RestService {
       const value = object[name]
       if (value === undefined || value === null) continue
 
-      if (Array.isArray(value) && value.length !== 0) {
+      if (Array.isArray(value)) {
         for (const v of value) params = params.append(name, v)
       } else {
         params = params.append(name, value)

client/src/app/helpers/utils.ts

@@ -1,6 +1,7 @@
 import { DatePipe } from '@angular/common'
 import { environment } from '../../environments/environment'
 import { AuthService } from '../core/auth'
+import { SelectChannelItem } from '@app/shared/shared-forms/select-channel.component'
 
 // Thanks: https://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript
 function getParameterByName (name: string, url: string) {
@@ -18,7 +19,7 @@ function getParameterByName (name: string, url: string) {
 
 function populateAsyncUserVideoChannels (
   authService: AuthService,
-  channel: { id: number, label: string, support?: string, avatarPath?: string, recent?: boolean }[]
+  channel: SelectChannelItem[]
 ) {
   return new Promise(res => {
     authService.userInformationLoaded

client/src/app/shared/shared-forms/select-channel.component.ts

@@ -1,7 +1,14 @@
-import { Component, Input, forwardRef, ViewChild } from '@angular/core'
-import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms'
+import { Component, forwardRef, Input } from '@angular/core'
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'
 import { Actor } from '../shared-main'
 
+export type SelectChannelItem = {
+  id: number
+  label: string
+  support: string
+  avatarPath?: string
+}
+
 @Component({
   selector: 'my-select-channel',
   styleUrls: [ './select-shared.component.scss' ],
@@ -15,7 +22,7 @@ import { Actor } from '../shared-main'
   ]
 })
 export class SelectChannelComponent implements ControlValueAccessor {
-  @Input() items: { id: number, label: string, support: string, avatarPath?: string }[] = []
+  @Input() items: SelectChannelItem[] = []
 
   selectedId: number
 

client/src/app/shared/shared-forms/select-tags.component.html

@@ -1,6 +1,6 @@
 <ng-select
-  [items]="items"
-  [(ngModel)]="_items"
+  [items]="availableItems"
+  [(ngModel)]="selectedItems"
   (ngModelChange)="onModelChange()"
   i18n-placeholder placeholder="Enter a new tag"
   [maxSelectedItems]="5"

client/src/app/shared/shared-forms/select-tags.component.ts

@@ -14,14 +14,14 @@ import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms'
   ]
 })
 export class SelectTagsComponent implements ControlValueAccessor {
-  @Input() items: string[] = []
-  @Input() _items: string[] = []
+  @Input() availableItems: string[] = []
+  @Input() selectedItems: string[] = []
 
   propagateChange = (_: any) => { /* empty */ }
 
   writeValue (items: string[]) {
-    this._items = items
-    this.propagateChange(this._items)
+    this.selectedItems = items
+    this.propagateChange(this.selectedItems)
   }
 
   registerOnChange (fn: (_: any) => void) {
@@ -33,6 +33,8 @@ export class SelectTagsComponent implements ControlValueAccessor {
   }
 
   onModelChange () {
-    this.propagateChange(this._items)
+    console.log(this.selectedItems)
+
+    this.propagateChange(this.selectedItems)
   }
 }

client/src/app/shared/shared-search/advanced-search.model.ts

@@ -15,8 +15,8 @@ export class AdvancedSearch {
 
   languageOneOf: string
 
-  tagsOneOf: string
-  tagsAllOf: string
+  tagsOneOf: string[]
+  tagsAllOf: string[]
 
   durationMin: number // seconds
   durationMax: number // seconds
@@ -37,8 +37,10 @@ export class AdvancedSearch {
     categoryOneOf?: string
     licenceOneOf?: string
     languageOneOf?: string
-    tagsOneOf?: string
-    tagsAllOf?: string
+
+    tagsOneOf?: any
+    tagsAllOf?: any
+
     durationMin?: string
     durationMax?: string
     sort?: string
@@ -55,8 +57,8 @@ export class AdvancedSearch {
     this.categoryOneOf = options.categoryOneOf || undefined
     this.licenceOneOf = options.licenceOneOf || undefined
     this.languageOneOf = options.languageOneOf || undefined
-    this.tagsOneOf = options.tagsOneOf || undefined
-    this.tagsAllOf = options.tagsAllOf || undefined
+    this.tagsOneOf = this.intoArray(options.tagsOneOf)
+    this.tagsAllOf = this.intoArray(options.tagsAllOf)
     this.durationMin = parseInt(options.durationMin, 10)
     this.durationMax = parseInt(options.durationMax, 10)
 
@@ -69,13 +71,11 @@ export class AdvancedSearch {
   }
 
   containsValues () {
-    const exceptions = new Set([ 'sort', 'searchTarget' ])
-
     const obj = this.toUrlObject()
     for (const k of Object.keys(obj)) {
       if (this.silentFilters.has(k)) continue
 
-      if (obj[k] !== undefined && obj[k] !== '') return true
+      if (this.isValidValue(obj[k])) return true
     }
 
     return false
@@ -127,8 +127,8 @@ export class AdvancedSearch {
       categoryOneOf: this.intoArray(this.categoryOneOf),
       licenceOneOf: this.intoArray(this.licenceOneOf),
       languageOneOf: this.intoArray(this.languageOneOf),
-      tagsOneOf: this.intoArray(this.tagsOneOf),
-      tagsAllOf: this.intoArray(this.tagsAllOf),
+      tagsOneOf: this.tagsOneOf,
+      tagsAllOf: this.tagsAllOf,
       durationMin: this.durationMin,
       durationMax: this.durationMax,
       sort: this.sort,
@@ -143,12 +143,20 @@ export class AdvancedSearch {
     for (const k of Object.keys(obj)) {
       if (this.silentFilters.has(k)) continue
 
-      if (obj[k] !== undefined && obj[k] !== '') acc++
+      if (this.isValidValue(obj[k])) acc++
     }
 
     return acc
   }
 
+  private isValidValue (val: any) {
+    if (val === undefined) return false
+    if (val === '') return false
+    if (Array.isArray(val) && val.length === 0) return false
+
+    return true
+  }
+
   private intoArray (value: any) {
     if (!value) return undefined
     if (Array.isArray(value)) return value