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

   1 import { Component, forwardRef, Input, OnInit } from '@angular/core'
   2 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'
   3 import { ServerService } from '@app/core'
   4 import { SelectOptionsItem } from '../../../../types/select-options-item.model'
   5 import { ItemSelectCheckboxValue } from './select-checkbox.component'
   6
   7 @Component({
   8   selector: 'my-select-languages',
   9   styleUrls: [ './select-shared.component.scss' ],
  10   templateUrl: './select-languages.component.html',
  11   providers: [
  12     {
  13       provide: NG_VALUE_ACCESSOR,
  14       useExisting: forwardRef(() => SelectLanguagesComponent),
  15       multi: true
  16     }
  17   ]
  18 })
  19 export class SelectLanguagesComponent implements ControlValueAccessor, OnInit {
  20   @Input() maxLanguages: number
  21
  22   selectedLanguages: ItemSelectCheckboxValue[]
  23   availableLanguages: SelectOptionsItem[] = []
  24
  25   allLanguagesGroup = $localize`All languages`
  26
  27   // Fix a bug on ng-select when we update items after we selected items
  28   private toWrite: any
  29   private loaded = false
  30
  31   constructor (
  32     private server: ServerService
  33   ) {
  34
  35   }
  36
  37   ngOnInit () {
  38     this.server.getVideoLanguages()
  39       .subscribe(
  40         languages => {
  41           this.availableLanguages = [ { label: $localize`Unknown language`, id: '_unknown', group: this.allLanguagesGroup } ]
  42
  43           this.availableLanguages = this.availableLanguages
  44             .concat(languages.map(l => ({ label: l.label, id: l.id, group: this.allLanguagesGroup })))
  45
  46           this.loaded = true
  47           this.writeValue(this.toWrite)
  48         }
  49       )
  50   }
  51
  52   propagateChange = (_: any) => { /* empty */ }
  53
  54   writeValue (languages: ItemSelectCheckboxValue[]) {
  55     if (!this.loaded) {
  56       this.toWrite = languages
  57       return
  58     }
  59
  60     this.selectedLanguages = languages
  61   }
  62
  63   registerOnChange (fn: (_: any) => void) {
  64     this.propagateChange = fn
  65   }
  66
  67   registerOnTouched () {
  68     // Unused
  69   }
  70
  71   onModelChange () {
  72     this.propagateChange(this.selectedLanguages)
  73   }
  74 }