Use ng select for multiselect

15 files changed, 189 insertions, 38 deletions

diff --git a/client/src/app/shared/shared-forms/index.ts b/client/src/app/shared/shared-forms/index.ts
index aa0ee015a..747df65cf 100644
--- a/client/src/app/shared/shared-forms/index.ts
+++ b/client/src/app/shared/shared-forms/index.ts
@@ -1,5 +1,6 @@
 export * from './form-validators'
 export * from './form-reactive'
+export * from './select'
 export * from './input-readonly-copy.component'
 export * from './markdown-textarea.component'
 export * from './peertube-checkbox.component'
diff --git a/client/src/app/shared/shared-forms/select-shared.component.scss b/client/src/app/shared/shared-forms/select-shared.component.scss
deleted file mode 100644
index 4f231d28a..000000000
--- a/client/src/app/shared/shared-forms/select-shared.component.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-$width-size: auto;
-
-ng-select {
-  width: $width-size;
-  @media screen and (max-width: $width-size) {
-    width: 100%;
-  }
-}
-
-// make sure the image is vertically adjusted
-ng-select ::ng-deep .ng-value-label img {
-  position: relative;
-  top: -1px;
-}
-
-ng-select ::ng-deep img {
-  border-radius: 50%;
-  height: 20px;
-  width: 20px;
-}
diff --git a/client/src/app/shared/shared-forms/select/index.ts b/client/src/app/shared/shared-forms/select/index.ts
new file mode 100644
index 000000000..33459b23b
--- /dev/null
+++ b/client/src/app/shared/shared-forms/select/index.ts
@@ -0,0 +1,4 @@
+export * from './select-channel.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-channel.component.html b/client/src/app/shared/shared-forms/select/select-channel.component.html
index 897d13ee7..897d13ee7 100644
--- a/client/src/app/shared/shared-forms/select-channel.component.html
+++ b/client/src/app/shared/shared-forms/select/select-channel.component.html
diff --git a/client/src/app/shared/shared-forms/select-channel.component.ts b/client/src/app/shared/shared-forms/select/select-channel.component.ts
index ef4192095..1b0db9b6f 100644
--- a/client/src/app/shared/shared-forms/select-channel.component.ts
+++ b/client/src/app/shared/shared-forms/select/select-channel.component.ts
@@ -1,6 +1,6 @@
 import { Component, forwardRef, Input } from '@angular/core'
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'
-import { Actor } from '../shared-main'
+import { Actor } from '@app/shared/shared-main/account/actor.model'
 
 export type SelectChannelItem = {
   id: number
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
new file mode 100644
index 000000000..3f81dd152
--- /dev/null
+++ b/client/src/app/shared/shared-forms/select/select-checkbox.component.html
@@ -0,0 +1,41 @@
+<ng-select
+  [items]="availableItems"
+  [(ngModel)]="selectedItems"
+  (ngModelChange)="onModelChange()"
+  i18n-placeholder placeholder="Add a new language"
+  [clearable]="true"
+  [multiple]="true"
+  [searchable]="true"
+  [closeOnSelect]="false"
+
+  bindValue="id"
+  bindLabel="label"
+
+  notFoundText="No items found" i18n-notFoundText
+
+  [selectableGroup]="selectableGroup"
+  [selectableGroupAsModel]="selectableGroupAsModel"
+
+  groupBy="group"
+  [compareWith]="compareFn"
+
+  [maxSelectedItems]="maxSelectedItems"
+>
+
+  <ng-template ng-optgroup-tmp let-item="item" let-item$="item$" let-index="index">
+    <div class="form-group-checkbox">
+      <input id="item-{{index}}" type="checkbox" [ngModel]="item$.selected"/>
+      <span role="checkbox" [attr.aria-checked]="item$.selected"></span>
+      <span>{{ item.group }}</span>
+    </div>
+  </ng-template>
+
+  <ng-template ng-option-tmp let-item="item" let-item$="item$" let-index="index">
+    <div class="form-group-checkbox">
+      <input id="item-{{index}}" type="checkbox" [ngModel]="item$.selected"/>
+      <span role="checkbox" [attr.aria-checked]="item$.selected"></span>
+      <span>{{ item.label }}</span>
+    </div>
+  </ng-template>
+
+</ng-select>
diff --git a/client/src/app/shared/shared-forms/select/select-checkbox.component.scss b/client/src/app/shared/shared-forms/select/select-checkbox.component.scss
new file mode 100644
index 000000000..145f6b26c
--- /dev/null
+++ b/client/src/app/shared/shared-forms/select/select-checkbox.component.scss
@@ -0,0 +1,18 @@
+@import '_variables';
+@import '_mixins';
+
+ng-select ::ng-deep {
+  .ng-option {
+    display: flex;
+    align-items: center;
+  }
+
+  .form-group-checkbox {
+    display: flex;
+    align-items: center;
+
+    input {
+      @include peertube-checkbox(1px);
+    }
+  }
+}
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
new file mode 100644
index 000000000..93653fef1
--- /dev/null
+++ b/client/src/app/shared/shared-forms/select/select-checkbox.component.ts
@@ -0,0 +1,75 @@
+import { Component, Input, forwardRef } from '@angular/core'
+import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms'
+import { SelectOptionsItem } from './select-options.component'
+
+export type ItemSelectCheckboxValue = { id?: string | number, group?: string } | string
+
+@Component({
+  selector: 'my-select-checkbox',
+  styleUrls: [ './select-shared.component.scss', 'select-checkbox.component.scss' ],
+  templateUrl: './select-checkbox.component.html',
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => SelectCheckboxComponent),
+      multi: true
+    }
+  ]
+})
+export class SelectCheckboxComponent implements ControlValueAccessor {
+  @Input() availableItems: SelectOptionsItem[] = []
+  @Input() selectedItems: ItemSelectCheckboxValue[] = []
+  @Input() selectableGroup: boolean
+  @Input() selectableGroupAsModel: boolean
+  @Input() maxSelectedItems: number
+
+  propagateChange = (_: any) => { /* empty */ }
+
+  writeValue (items: ItemSelectCheckboxValue[]) {
+    if (Array.isArray(items)) {
+      this.selectedItems = items.map(i => {
+        if (typeof i === 'string' || typeof i === 'number') {
+          return i + ''
+        }
+
+        if (i.group) {
+          return { group: i.group }
+        }
+
+        return { id: i.id + '' }
+      })
+    } else {
+      this.selectedItems = items
+    }
+
+    this.propagateChange(this.selectedItems)
+  }
+
+  registerOnChange (fn: (_: any) => void) {
+    this.propagateChange = fn
+  }
+
+  registerOnTouched () {
+    // Unused
+  }
+
+  onModelChange () {
+    this.propagateChange(this.selectedItems)
+  }
+
+  compareFn (item: SelectOptionsItem, selected: ItemSelectCheckboxValue) {
+    if (typeof selected === 'string') {
+      return item.id === selected
+    }
+
+    if (this.selectableGroup && item.group && selected.group) {
+      return item.group === selected.group
+    }
+
+    if (selected.id && item.id) {
+      return item.id === selected.id
+    }
+
+    return false
+  }
+}
diff --git a/client/src/app/shared/shared-forms/select-options.component.html b/client/src/app/shared/shared-forms/select/select-options.component.html
index fda0c2c56..48eca1cf5 100644
--- a/client/src/app/shared/shared-forms/select-options.component.html
+++ b/client/src/app/shared/shared-forms/select/select-options.component.html
@@ -3,10 +3,11 @@
   [groupBy]="groupBy"
   [(ngModel)]="selectedId"
   (ngModelChange)="onModelChange()"
-  [bindLabel]="bindLabel"
-  [bindValue]="bindValue"
   [clearable]="clearable"
   [searchable]="searchable"
+
+  bindLabel="label"
+  bindValue="id"
 >
   <ng-template ng-option-tmp let-item="item" let-index="index">
     {{ item.label }}
diff --git a/client/src/app/shared/shared-forms/select-options.component.ts b/client/src/app/shared/shared-forms/select/select-options.component.ts
index 09f7df53b..3ba24c732 100644
--- a/client/src/app/shared/shared-forms/select-options.component.ts
+++ b/client/src/app/shared/shared-forms/select/select-options.component.ts
@@ -1,7 +1,13 @@
 import { Component, Input, forwardRef } from '@angular/core'
 import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms'
 
-export type SelectOptionsItem = { id: number | string, label: string, description?: string }
+export type SelectOptionsItem = {
+  id: string | number
+  label: string
+  description?: string
+  group?: string
+  groupLabel?: string
+}
 
 @Component({
   selector: 'my-select-options',
@@ -19,14 +25,10 @@ export class SelectOptionsComponent implements ControlValueAccessor {
   @Input() items: SelectOptionsItem[] = []
   @Input() clearable = false
   @Input() searchable = false
-  @Input() bindValue = 'id'
   @Input() groupBy: string
 
   selectedId: number | string
 
-  // ng-select options
-  bindLabel = 'label'
-
   propagateChange = (_: any) => { /* empty */ }
 
   writeValue (id: 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
new file mode 100644
index 000000000..0b4c6b784
--- /dev/null
+++ b/client/src/app/shared/shared-forms/select/select-shared.component.scss
@@ -0,0 +1,32 @@
+@import '_variables';
+@import '_mixins';
+
+$form-base-input-width: auto;
+
+ng-select {
+  width: $form-base-input-width;
+
+  @media screen and (max-width: $form-base-input-width) {
+    width: 100%;
+  }
+}
+
+ng-select ::ng-deep {
+  .ng-value-container {
+    max-height: 100px;
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
+
+  // make sure the image is vertically adjusted
+  .ng-value-label img {
+    position: relative;
+    top: -1px;
+  }
+
+  img {
+    border-radius: 50%;
+    height: 20px;
+    width: 20px;
+  }
+}
diff --git a/client/src/app/shared/shared-forms/select-tags.component.html b/client/src/app/shared/shared-forms/select/select-tags.component.html
index e1cd50882..e1cd50882 100644
--- a/client/src/app/shared/shared-forms/select-tags.component.html
+++ b/client/src/app/shared/shared-forms/select/select-tags.component.html
diff --git a/client/src/app/shared/shared-forms/select-tags.component.scss b/client/src/app/shared/shared-forms/select/select-tags.component.scss
index ad76bc7ee..ad76bc7ee 100644
--- a/client/src/app/shared/shared-forms/select-tags.component.scss
+++ b/client/src/app/shared/shared-forms/select/select-tags.component.scss
diff --git a/client/src/app/shared/shared-forms/select-tags.component.ts b/client/src/app/shared/shared-forms/select/select-tags.component.ts
index a8a19d788..93d199037 100644
--- a/client/src/app/shared/shared-forms/select-tags.component.ts
+++ b/client/src/app/shared/shared-forms/select/select-tags.component.ts
@@ -33,8 +33,6 @@ export class SelectTagsComponent implements ControlValueAccessor {
   }
 
   onModelChange () {
-    console.log(this.selectedItems)
-
     this.propagateChange(this.selectedItems)
   }
 }
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 ea6270083..0e0ed5bab 100644
--- a/client/src/app/shared/shared-forms/shared-form.module.ts
+++ b/client/src/app/shared/shared-forms/shared-form.module.ts
@@ -3,7 +3,6 @@ import { NgModule } from '@angular/core'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { InputMaskModule } from 'primeng/inputmask'
 import { InputSwitchModule } from 'primeng/inputswitch'
-import { MultiSelectModule } from 'primeng/multiselect'
 import { NgSelectModule } from '@ng-select/ng-select'
 import { BatchDomainsValidatorsService } from '@app/shared/shared-forms/form-validators/batch-domains-validators.service'
 import { SharedGlobalIconModule } from '../shared-icons'
@@ -32,9 +31,7 @@ import { PreviewUploadComponent } from './preview-upload.component'
 import { ReactiveFileComponent } from './reactive-file.component'
 import { TextareaAutoResizeDirective } from './textarea-autoresize.directive'
 import { TimestampInputComponent } from './timestamp-input.component'
-import { SelectChannelComponent } from './select-channel.component'
-import { SelectOptionsComponent } from './select-options.component'
-import { SelectTagsComponent } from './select-tags.component'
+import { SelectChannelComponent, SelectCheckboxComponent, SelectOptionsComponent, SelectTagsComponent } from './select'
 
 @NgModule({
   imports: [
@@ -43,7 +40,6 @@ import { SelectTagsComponent } from './select-tags.component'
 
     InputMaskModule,
     InputSwitchModule,
-    MultiSelectModule,
     NgSelectModule,
 
     SharedMainModule,
@@ -58,9 +54,11 @@ import { SelectTagsComponent } from './select-tags.component'
     ReactiveFileComponent,
     TextareaAutoResizeDirective,
     TimestampInputComponent,
+
     SelectChannelComponent,
     SelectOptionsComponent,
-    SelectTagsComponent
+    SelectTagsComponent,
+    SelectCheckboxComponent
   ],
 
   exports: [
@@ -69,7 +67,6 @@ import { SelectTagsComponent } from './select-tags.component'
 
     InputMaskModule,
     InputSwitchModule,
-    MultiSelectModule,
     NgSelectModule,
 
     InputReadonlyCopyComponent,
@@ -79,9 +76,11 @@ import { SelectTagsComponent } from './select-tags.component'
     ReactiveFileComponent,
     TextareaAutoResizeDirective,
     TimestampInputComponent,
+
     SelectChannelComponent,
     SelectOptionsComponent,
-    SelectTagsComponent
+    SelectTagsComponent,
+    SelectCheckboxComponent
   ],
 
   providers: [