adapt my-select-checkbox placeholder to its context

5 files changed, 17 insertions, 3 deletions

diff --git a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html
index b82281c6c..227137f48 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html
+++ b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html
@@ -52,6 +52,7 @@
                     id="instanceCategories"
                     formControlName="categories" [availableItems]="categoryItems"
                     [selectableGroup]="false"
+                    i18n-placeholder placeholder="Add a new category"
                   >
                   </my-select-checkbox>
                 </div>
@@ -65,6 +66,7 @@
                     id="instanceLanguages"
                     formControlName="languages" [availableItems]="languageItems"
                     [selectableGroup]="false"
+                    i18n-placeholder placeholder="Add a new language"
                   >
                   </my-select-checkbox>
                 </div>
diff --git a/client/src/app/+admin/users/user-list/user-list.component.html b/client/src/app/+admin/users/user-list/user-list.component.html
index d02f6526f..e289bc097 100644
--- a/client/src/app/+admin/users/user-list/user-list.component.html
+++ b/client/src/app/+admin/users/user-list/user-list.component.html
@@ -61,6 +61,7 @@
                 name="columns"
                 [availableItems]="columns"
                 [selectableGroup]="false" [(ngModel)]="selectedColumns"
+                i18n-placeholder placeholder="Select columns"
               >
               </my-select-checkbox>
             </div>
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>