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

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