<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'] }}
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
<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">
<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()">
+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 }
@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
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'
@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[] = []
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'
video: VideoEdit
isUpdatingVideo = false
- userVideoChannels: { id: number, label: string, support: string, avatar?: string }[] = []
+ userVideoChannels: SelectChannelItem[] = []
schedulePublicationPossible = false
videoCaptions: VideoCaptionEdit[] = []
waitTranscodingEnabled = true
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)
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) {
function populateAsyncUserVideoChannels (
authService: AuthService,
- channel: { id: number, label: string, support?: string, avatarPath?: string, recent?: boolean }[]
+ channel: SelectChannelItem[]
) {
return new Promise(res => {
authService.userInformationLoaded
-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' ],
]
})
export class SelectChannelComponent implements ControlValueAccessor {
- @Input() items: { id: number, label: string, support: string, avatarPath?: string }[] = []
+ @Input() items: SelectChannelItem[] = []
selectedId: number
<ng-select
- [items]="items"
- [(ngModel)]="_items"
+ [items]="availableItems"
+ [(ngModel)]="selectedItems"
(ngModelChange)="onModelChange()"
i18n-placeholder placeholder="Enter a new tag"
[maxSelectedItems]="5"
]
})
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) {
}
onModelChange () {
- this.propagateChange(this._items)
+ console.log(this.selectedItems)
+
+ this.propagateChange(this.selectedItems)
}
}
languageOneOf: string
- tagsOneOf: string
- tagsAllOf: string
+ tagsOneOf: string[]
+ tagsAllOf: string[]
durationMin: number // seconds
durationMax: number // seconds
categoryOneOf?: string
licenceOneOf?: string
languageOneOf?: string
- tagsOneOf?: string
- tagsAllOf?: string
+
+ tagsOneOf?: any
+ tagsAllOf?: any
+
durationMin?: string
durationMax?: string
sort?: string
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)
}
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
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,
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