Support custom value in ng-select

10 files changed, 119 insertions, 61 deletions

diff --git a/client/src/app/shared/shared-forms/select/index.ts b/client/src/app/shared/shared-forms/select/index.ts
index 33459b23b..e387e1f48 100644
--- a/client/src/app/shared/shared-forms/select/index.ts
+++ b/client/src/app/shared/shared-forms/select/index.ts
@@ -1,4 +1,5 @@
 export * from './select-channel.component'
+export * from './select-checkbox.component'
+export * from './select-custom-value.component'
 export * from './select-options.component'
 export * from './select-tags.component'
-export * from './select-checkbox.component'
diff --git a/client/src/app/shared/shared-forms/select/select-custom-input.component.html b/client/src/app/shared/shared-forms/select/select-custom-input.component.html
deleted file mode 100644
index 84fa15c3d..000000000
--- a/client/src/app/shared/shared-forms/select/select-custom-input.component.html
+++ /dev/null
@@ -1,14 +0,0 @@
-<ng-select
-  [(ngModel)]="selectedId"
-  (ngModelChange)="onModelChange()"
-  [bindLabel]="bindLabel"
-  [bindValue]="bindValue"
-  [clearable]="clearable"
-  [searchable]="searchable"
->
-  <ng-option *ngFor="let item of items" [value]="item.id">
-    {{ channel.label }}
-  </ng-option>
-
-  <ng-content></ng-content>
-</ng-select>
diff --git a/client/src/app/shared/shared-forms/select/select-custom-input.component.scss b/client/src/app/shared/shared-forms/select/select-custom-input.component.scss
deleted file mode 100644
index e69de29bb..000000000
--- a/client/src/app/shared/shared-forms/select/select-custom-input.component.scss
+++ /dev/null
diff --git a/client/src/app/shared/shared-forms/select/select-custom-input.component.ts b/client/src/app/shared/shared-forms/select/select-custom-input.component.ts
deleted file mode 100644
index ba6fef8ad..000000000
--- a/client/src/app/shared/shared-forms/select/select-custom-input.component.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import { Component, forwardRef, Input } from '@angular/core'
-import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'
-
-@Component({
-  selector: 'my-select-custom-input',
-  styleUrls: [ './select-custom-input.component.scss' ],
-  templateUrl: './select-custom-input.component.html',
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => SelectCustomInputComponent),
-      multi: true
-    }
-  ]
-})
-export class SelectCustomInputComponent implements ControlValueAccessor {
-  @Input() items: any[] = []
-
-  selectedId: number
-
-  // ng-select options
-  bindLabel = 'label'
-  bindValue = 'id'
-  clearable = false
-  searchable = false
-
-  propagateChange = (_: any) => { /* empty */ }
-
-  writeValue (id: number) {
-    this.selectedId = id
-  }
-
-  registerOnChange (fn: (_: any) => void) {
-    this.propagateChange = fn
-  }
-
-  registerOnTouched () {
-    // Unused
-  }
-
-  onModelChange () {
-    this.propagateChange(this.selectedId)
-  }
-}
diff --git a/client/src/app/shared/shared-forms/select/select-custom-value.component.html b/client/src/app/shared/shared-forms/select/select-custom-value.component.html
new file mode 100644
index 000000000..5fdf432ff
--- /dev/null
+++ b/client/src/app/shared/shared-forms/select/select-custom-value.component.html
@@ -0,0 +1,14 @@
+<div class="root">
+  <my-select-options
+    [items]="itemsWithCustom"
+    [clearable]="clearable"
+    [searchable]="searchable"
+    [groupBy]="groupBy"
+    [labelForId]="labelForId"
+
+    [(ngModel)]="selectedId"
+    (ngModelChange)="onModelChange()"
+  ></my-select-options>
+
+  <input *ngIf="isCustomValue()" [(ngModel)]="customValue" (ngModelChange)="onModelChange()" type="text" class="form-control" />
+</div>
diff --git a/client/src/app/shared/shared-forms/select/select-custom-value.component.ts b/client/src/app/shared/shared-forms/select/select-custom-value.component.ts
new file mode 100644
index 000000000..a8e5ad0d3
--- /dev/null
+++ b/client/src/app/shared/shared-forms/select/select-custom-value.component.ts
@@ -0,0 +1,76 @@
+import { Component, forwardRef, Input, OnChanges } from '@angular/core'
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'
+import { SelectOptionsItem } from './select-options.component'
+
+@Component({
+  selector: 'my-select-custom-value',
+  styleUrls: [ './select-shared.component.scss' ],
+  templateUrl: './select-custom-value.component.html',
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => SelectCustomValueComponent),
+      multi: true
+    }
+  ]
+})
+export class SelectCustomValueComponent implements ControlValueAccessor, OnChanges {
+  @Input() items: SelectOptionsItem[] = []
+  @Input() clearable = false
+  @Input() searchable = false
+  @Input() groupBy: string
+  @Input() labelForId: string
+
+  customValue: number | string = ''
+  selectedId: number | string
+
+  itemsWithCustom: SelectOptionsItem[] = []
+
+  ngOnChanges () {
+    this.itemsWithCustom = this.getItems()
+  }
+
+  propagateChange = (_: any) => { /* empty */ }
+
+  writeValue (id: number | string) {
+    this.selectedId = id
+
+    if (this.isSelectedIdInItems() !== true) {
+      this.selectedId = 'other'
+      this.customValue = id
+    }
+  }
+
+  registerOnChange (fn: (_: any) => void) {
+    this.propagateChange = fn
+  }
+
+  registerOnTouched () {
+    // Unused
+  }
+
+  onModelChange () {
+    if (this.selectedId === 'other') {
+      return this.propagateChange(this.customValue)
+    }
+
+    return this.propagateChange(this.selectedId)
+  }
+
+  isSelectedIdInItems () {
+    return !!this.items.find(i => i.id === this.selectedId)
+  }
+
+  getItems () {
+    const other: SelectOptionsItem = {
+      id: 'other',
+      label: $localize`Custom value...`
+    }
+
+    return this.items.concat([ other ])
+  }
+
+  isCustomValue () {
+    return this.selectedId === 'other'
+  }
+}
diff --git a/client/src/app/shared/shared-forms/select/select-options.component.html b/client/src/app/shared/shared-forms/select/select-options.component.html
index 6d0d7e925..3b1761255 100644
--- a/client/src/app/shared/shared-forms/select/select-options.component.html
+++ b/client/src/app/shared/shared-forms/select/select-options.component.html
@@ -6,6 +6,7 @@
   [clearable]="clearable"
   [labelForId]="labelForId"
   [searchable]="searchable"
+  [searchFn]="searchFn"
 
   bindLabel="label"
   bindValue="id"
diff --git a/client/src/app/shared/shared-forms/select/select-options.component.ts b/client/src/app/shared/shared-forms/select/select-options.component.ts
index f0abd1a68..51a3f515d 100644
--- a/client/src/app/shared/shared-forms/select/select-options.component.ts
+++ b/client/src/app/shared/shared-forms/select/select-options.component.ts
@@ -27,6 +27,7 @@ export class SelectOptionsComponent implements ControlValueAccessor {
   @Input() searchable = false
   @Input() groupBy: string
   @Input() labelForId: string
+  @Input() searchFn: any
 
   selectedId: number | string
 
diff --git a/client/src/app/shared/shared-forms/select/select-shared.component.scss b/client/src/app/shared/shared-forms/select/select-shared.component.scss
index 0b4c6b784..1a4192b55 100644
--- a/client/src/app/shared/shared-forms/select/select-shared.component.scss
+++ b/client/src/app/shared/shared-forms/select/select-shared.component.scss
@@ -30,3 +30,18 @@ ng-select ::ng-deep {
     width: 20px;
   }
 }
+
+.root {
+  display:flex;
+
+  > my-select-options {
+    flex-grow: 1;
+  }
+}
+
+input[type=text] {
+  margin-left: 5px;
+
+  @include peertube-input-text($form-base-input-width);
+  display: block;
+}
diff --git a/client/src/app/shared/shared-forms/shared-form.module.ts b/client/src/app/shared/shared-forms/shared-form.module.ts
index 22e8dd05a..9bdd138a1 100644
--- a/client/src/app/shared/shared-forms/shared-form.module.ts
+++ b/client/src/app/shared/shared-forms/shared-form.module.ts
@@ -7,13 +7,19 @@ import { SharedGlobalIconModule } from '../shared-icons'
 import { SharedMainModule } from '../shared-main/shared-main.module'
 import { DynamicFormFieldComponent } from './dynamic-form-field.component'
 import { FormValidatorService } from './form-validator.service'
-import { InputToggleHiddenComponent } from './input-toggle-hidden.component'
 import { InputSwitchComponent } from './input-switch.component'
+import { InputToggleHiddenComponent } from './input-toggle-hidden.component'
 import { MarkdownTextareaComponent } from './markdown-textarea.component'
 import { PeertubeCheckboxComponent } from './peertube-checkbox.component'
 import { PreviewUploadComponent } from './preview-upload.component'
 import { ReactiveFileComponent } from './reactive-file.component'
-import { SelectChannelComponent, SelectCheckboxComponent, SelectOptionsComponent, SelectTagsComponent } from './select'
+import {
+  SelectChannelComponent,
+  SelectCheckboxComponent,
+  SelectCustomValueComponent,
+  SelectOptionsComponent,
+  SelectTagsComponent
+} from './select'
 import { TextareaAutoResizeDirective } from './textarea-autoresize.directive'
 import { TimestampInputComponent } from './timestamp-input.component'
 
@@ -44,6 +50,7 @@ import { TimestampInputComponent } from './timestamp-input.component'
     SelectOptionsComponent,
     SelectTagsComponent,
     SelectCheckboxComponent,
+    SelectCustomValueComponent,
 
     DynamicFormFieldComponent
   ],
@@ -69,6 +76,7 @@ import { TimestampInputComponent } from './timestamp-input.component'
     SelectOptionsComponent,
     SelectTagsComponent,
     SelectCheckboxComponent,
+    SelectCustomValueComponent,
 
     DynamicFormFieldComponent
   ],