]> git.immae.eu Git - github/Chocobozzz/PeerTube.git/blob - client/src/app/shared/shared-forms/select/select-channel.component.ts
Use ng select for multiselect
[github/Chocobozzz/PeerTube.git] / client / src / app / shared / shared-forms / select / select-channel.component.ts
1 import { Component, forwardRef, Input } from '@angular/core'
2 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'
3 import { Actor } from '@app/shared/shared-main/account/actor.model'
4
5 export type SelectChannelItem = {
6 id: number
7 label: string
8 support: string
9 avatarPath?: string
10 }
11
12 @Component({
13 selector: 'my-select-channel',
14 styleUrls: [ './select-shared.component.scss' ],
15 templateUrl: './select-channel.component.html',
16 providers: [
17 {
18 provide: NG_VALUE_ACCESSOR,
19 useExisting: forwardRef(() => SelectChannelComponent),
20 multi: true
21 }
22 ]
23 })
24 export class SelectChannelComponent implements ControlValueAccessor {
25 @Input() items: SelectChannelItem[] = []
26
27 selectedId: number
28
29 // ng-select options
30 bindLabel = 'label'
31 bindValue = 'id'
32 clearable = false
33 searchable = false
34
35 get channels () {
36 return this.items.map(c => Object.assign(c, {
37 avatarPath: c.avatarPath ? c.avatarPath : Actor.GET_DEFAULT_AVATAR_URL()
38 }))
39 }
40
41 propagateChange = (_: any) => { /* empty */ }
42
43 writeValue (id: number) {
44 this.selectedId = id
45 }
46
47 registerOnChange (fn: (_: any) => void) {
48 this.propagateChange = fn
49 }
50
51 registerOnTouched () {
52 // Unused
53 }
54
55 onModelChange () {
56 this.propagateChange(this.selectedId)
57 }
58 }