adapt my-select-checkbox placeholder to its context

3 files changed, 14 insertions, 3 deletions

diff --git a/client/src/app/shared/shared-forms/select/select-checkbox.component.html b/client/src/app/shared/shared-forms/select/select-checkbox.component.html
index 3f81dd152..f5af2932e 100644
--- a/client/src/app/shared/shared-forms/select/select-checkbox.component.html
+++ b/client/src/app/shared/shared-forms/select/select-checkbox.component.html
@@ -2,7 +2,7 @@
   [items]="availableItems"
   [(ngModel)]="selectedItems"
   (ngModelChange)="onModelChange()"
-  i18n-placeholder placeholder="Add a new language"
+  [placeholder]="placeholder"
   [clearable]="true"
   [multiple]="true"
   [searchable]="true"
diff --git a/client/src/app/shared/shared-forms/select/select-checkbox.component.ts b/client/src/app/shared/shared-forms/select/select-checkbox.component.ts
index 93653fef1..fd683ae5d 100644
--- a/client/src/app/shared/shared-forms/select/select-checkbox.component.ts
+++ b/client/src/app/shared/shared-forms/select/select-checkbox.component.ts
@@ -1,6 +1,7 @@
-import { Component, Input, forwardRef } from '@angular/core'
+import { Component, Input, forwardRef, OnInit } from '@angular/core'
 import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms'
 import { SelectOptionsItem } from './select-options.component'
+import { I18n } from '@ngx-translate/i18n-polyfill'
 
 export type ItemSelectCheckboxValue = { id?: string | number, group?: string } | string
 
@@ -16,12 +17,21 @@ export type ItemSelectCheckboxValue = { id?: string | number, group?: string } |
     }
   ]
 })
-export class SelectCheckboxComponent implements ControlValueAccessor {
+export class SelectCheckboxComponent implements OnInit, ControlValueAccessor {
   @Input() availableItems: SelectOptionsItem[] = []
   @Input() selectedItems: ItemSelectCheckboxValue[] = []
   @Input() selectableGroup: boolean
   @Input() selectableGroupAsModel: boolean
   @Input() maxSelectedItems: number
+  @Input() placeholder: string
+
+  constructor (
+    private i18n: I18n
+  ) {}
+
+  ngOnInit () {
+    if (!this.placeholder) this.placeholder = this.i18n('Add a new option')
+  }
 
   propagateChange = (_: any) => { /* empty */ }
 
diff --git a/client/src/app/shared/shared-user-settings/user-video-settings.component.html b/client/src/app/shared/shared-user-settings/user-video-settings.component.html
index 655b49e18..aa261fdce 100644
--- a/client/src/app/shared/shared-user-settings/user-video-settings.component.html
+++ b/client/src/app/shared/shared-user-settings/user-video-settings.component.html
@@ -33,6 +33,7 @@
       <my-select-checkbox
         formControlName="videoLanguages" [availableItems]="languageItems"
         [selectableGroup]="true" [selectableGroupAsModel]="true"
+        i18n-placeholder placeholder="Add a new language"
       >
       </my-select-checkbox >
     </div>