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 & { groupOrder: number })[] = []
  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 = [ {
  42             label: $localize`Unknown language`,
  43             id: '_unknown',
  44             group: this.allLanguagesGroup,
  45             groupOrder: 1
  46           } ]
  47
  48           this.availableLanguages = this.availableLanguages
  49             .concat(languages.map(l => {
  50               if (l.id === 'zxx') return { label: l.label, id: l.id, group: $localize`Other`, groupOrder: 0 }
  51               return { label: l.label, id: l.id, group: this.allLanguagesGroup, groupOrder: 1 }
  52             }))
  53
  54           this.availableLanguages.sort((a, b) => a.groupOrder - b.groupOrder)
  55
  56           this.loaded = true
  57           this.writeValue(this.toWrite)
  58         }
  59       )
  60   }
  61
  62   propagateChange = (_: any) => { /* empty */ }
  63
  64   writeValue (languages: ItemSelectCheckboxValue[]) {
  65     if (!this.loaded) {
  66       this.toWrite = languages
  67       return
  68     }
  69
  70     this.selectedLanguages = languages
  71   }
  72
  73   registerOnChange (fn: (_: any) => void) {
  74     this.propagateChange = fn
  75   }
  76
  77   registerOnTouched () {
  78     // Unused
  79   }
  80
  81   onModelChange () {
  82     this.propagateChange(this.selectedLanguages)
  83   }
  84 }