diff options
Diffstat (limited to 'client/src/app/shared/shared-forms/select/select-languages.component.ts')
-rw-r--r-- | client/src/app/shared/shared-forms/select/select-languages.component.ts | 74 |
1 files changed, 74 insertions, 0 deletions
diff --git a/client/src/app/shared/shared-forms/select/select-languages.component.ts b/client/src/app/shared/shared-forms/select/select-languages.component.ts new file mode 100644 index 000000000..742163ede --- /dev/null +++ b/client/src/app/shared/shared-forms/select/select-languages.component.ts | |||
@@ -0,0 +1,74 @@ | |||
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 | } | ||