Add ability to set a custom quota

2021-02-10 09:05:29 +01:00 · 2021-02-10 09:05:29 +01:00 · 21e493d4d8
parent ead64cdf8d
commit 21e493d4d8
21 changed files with 141 additions and 105 deletions
--- 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
@ -402,25 +402,29 @@
            <ng-container formGroupName="user">
              <div class="form-group">
                <label i18n for="userVideoQuota">Default video quota per user</label>
-                <div class="peertube-select-container">
-                  <select id="userVideoQuota" formControlName="videoQuota" class="form-control">
-                    <option *ngFor="let videoQuotaOption of videoQuotaOptions" [value]="videoQuotaOption.value" [disabled]="videoQuotaOption.disabled">
-                      {{ videoQuotaOption.label }}
-                    </option>
-                  </select>
-                </div>
+
+                <my-select-custom-value
+                  id="userVideoQuota"
+                  [items]="videoQuotaOptions"
+                  formControlName="videoQuota"
+                  i18n-inputSuffix inputSuffix="bytes" inputType="number"
+                  [clearable]="false"
+                ></my-select-custom-value>
+
                <div *ngIf="formErrors.user.videoQuota" class="form-error">{{ formErrors.user.videoQuota }}</div>
              </div>

              <div class="form-group">
                <label i18n for="userVideoQuotaDaily">Default daily upload limit per user</label>
-                <div class="peertube-select-container">
-                  <select id="userVideoQuotaDaily" formControlName="videoQuotaDaily" class="form-control">
-                    <option *ngFor="let videoQuotaDailyOption of videoQuotaDailyOptions" [value]="videoQuotaDailyOption.value" [disabled]="videoQuotaDailyOption.disabled">
-                      {{ videoQuotaDailyOption.label }}
-                    </option>
-                  </select>
-                </div>
+
+                <my-select-custom-value
+                  id="userVideoQuotaDaily"
+                  [items]="videoQuotaDailyOptions"
+                  formControlName="videoQuotaDaily"
+                  i18n-inputSuffix inputSuffix="bytes" inputType="number"
+                  [clearable]="false"
+                ></my-select-custom-value>
+
                <div *ngIf="formErrors.user.videoQuotaDaily" class="form-error">{{ formErrors.user.videoQuotaDaily }}</div>
              </div>
            </ng-container>
--- a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts
+++ b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts
@ -19,9 +19,10 @@ import {
  TRANSCODING_THREADS_VALIDATOR
 } from '@app/shared/form-validators/custom-config-validators'
 import { USER_VIDEO_QUOTA_DAILY_VALIDATOR, USER_VIDEO_QUOTA_VALIDATOR } from '@app/shared/form-validators/user-validators'
-import { FormReactive, FormValidatorService, SelectOptionsItem } from '@app/shared/shared-forms'
+import { FormReactive, FormValidatorService } from '@app/shared/shared-forms'
 import { NgbNav } from '@ng-bootstrap/ng-bootstrap'
 import { CustomConfig, ServerConfig } from '@shared/models'
+import { SelectOptionsItem } from 'src/types/select-options-item.model'

@Component({
  selector: 'my-edit-custom-config',
--- a/client/src/app/+admin/config/shared/config.service.ts
+++ b/client/src/app/+admin/config/shared/config.service.ts
@ -3,43 +3,46 @@ import { HttpClient } from '@angular/common/http'
 import { Injectable } from '@angular/core'
 import { RestExtractor } from '@app/core'
 import { CustomConfig } from '@shared/models'
+import { SelectOptionsItem } from '../../../../types/select-options-item.model'
 import { environment } from '../../../../environments/environment'

@Injectable()
 export class ConfigService {
  private static BASE_APPLICATION_URL = environment.apiUrl + '/api/v1/config'

-  videoQuotaOptions: { value: number, label: string, disabled?: boolean }[] = []
-  videoQuotaDailyOptions: { value: number, label: string, disabled?: boolean }[] = []
+  videoQuotaOptions: SelectOptionsItem[] = []
+  videoQuotaDailyOptions: SelectOptionsItem[] = []

  constructor (
    private authHttp: HttpClient,
    private restExtractor: RestExtractor
    ) {
    this.videoQuotaOptions = [
-      { value: undefined, label: 'Default quota', disabled: true },
-      { value: -1, label: $localize`Unlimited` },
-      { value: undefined, label: '─────', disabled: true },
-      { value: 0, label: $localize`None - no upload possible` },
-      { value: 100 * 1024 * 1024, label: $localize`100MB` },
-      { value: 500 * 1024 * 1024, label: $localize`500MB` },
-      { value: 1024 * 1024 * 1024, label: $localize`1GB` },
-      { value: 5 * 1024 * 1024 * 1024, label: $localize`5GB` },
-      { value: 20 * 1024 * 1024 * 1024, label: $localize`20GB` },
-      { value: 50 * 1024 * 1024 * 1024, label: $localize`50GB` }
+      { id: -1, label: $localize`Unlimited` },
+      { id: 0, label: $localize`None - no upload possible` },
+      { id: 100 * 1024 * 1024, label: $localize`100MB` },
+      { id: 500 * 1024 * 1024, label: $localize`500MB` },
+      { id: 1024 * 1024 * 1024, label: $localize`1GB` },
+      { id: 5 * 1024 * 1024 * 1024, label: $localize`5GB` },
+      { id: 20 * 1024 * 1024 * 1024, label: $localize`20GB` },
+      { id: 50 * 1024 * 1024 * 1024, label: $localize`50GB` },
+      { id: 100 * 1024 * 1024 * 1024, label: $localize`100GB` },
+      { id: 200 * 1024 * 1024 * 1024, label: $localize`200GB` },
+      { id: 500 * 1024 * 1024 * 1024, label: $localize`500GB` }
    ]

    this.videoQuotaDailyOptions = [
-      { value: undefined, label: 'Default daily upload limit', disabled: true },
-      { value: -1, label: $localize`Unlimited` },
-      { value: undefined, label: '─────', disabled: true },
-      { value: 0, label: $localize`None - no upload possible` },
-      { value: 10 * 1024 * 1024, label: $localize`10MB` },
-      { value: 50 * 1024 * 1024, label: $localize`50MB` },
-      { value: 100 * 1024 * 1024, label: $localize`100MB` },
-      { value: 500 * 1024 * 1024, label: $localize`500MB` },
-      { value: 2 * 1024 * 1024 * 1024, label: $localize`2GB` },
-      { value: 5 * 1024 * 1024 * 1024, label: $localize`5GB` }
+      { id: -1, label: $localize`Unlimited` },
+      { id: 0, label: $localize`None - no upload possible` },
+      { id: 10 * 1024 * 1024, label: $localize`10MB` },
+      { id: 50 * 1024 * 1024, label: $localize`50MB` },
+      { id: 100 * 1024 * 1024, label: $localize`100MB` },
+      { id: 500 * 1024 * 1024, label: $localize`500MB` },
+      { id: 2 * 1024 * 1024 * 1024, label: $localize`2GB` },
+      { id: 5 * 1024 * 1024 * 1024, label: $localize`5GB` },
+      { id: 10 * 1024 * 1024 * 1024, label: $localize`10GB` },
+      { id: 20 * 1024 * 1024 * 1024, label: $localize`20GB` },
+      { id: 50 * 1024 * 1024 * 1024, label: $localize`50GB` }
    ]
  }

--- a/client/src/app/+admin/users/user-edit/user-create.component.ts
+++ b/client/src/app/+admin/users/user-edit/user-create.component.ts
@ -45,8 +45,8 @@ export class UserCreateComponent extends UserEdit implements OnInit {

    const defaultValues = {
      role: UserRole.USER.toString(),
-      videoQuota: '-1',
-      videoQuotaDaily: '-1'
+      videoQuota: -1,
+      videoQuotaDaily: -1
    }

    this.buildForm({
--- a/client/src/app/+admin/users/user-edit/user-edit.component.html
+++ b/client/src/app/+admin/users/user-edit/user-edit.component.html
@ -149,28 +149,38 @@

      <div class="form-group">
        <label i18n for="videoQuota">Video quota</label>
-        <div class="peertube-select-container">
-          <select id="videoQuota" formControlName="videoQuota" class="form-control">
-            <option *ngFor="let videoQuotaOption of videoQuotaOptions" [value]="videoQuotaOption.value" [disabled]="videoQuotaOption.disabled">
-              {{ videoQuotaOption.label }}
-            </option>
-          </select>
-        </div>
+
+        <my-select-custom-value
+          id="videoQuota"
+          [items]="videoQuotaOptions"
+          formControlName="videoQuota"
+          i18n-inputSuffix inputSuffix="bytes" inputType="number"
+          [clearable]="false"
+        ></my-select-custom-value>

        <div i18n class="transcoding-information" *ngIf="isTranscodingInformationDisplayed()">
          Transcoding is enabled. The video quota only takes into account <strong>original</strong> video size. <br />
          At most, this user could upload ~ {{ computeQuotaWithTranscoding() | bytes: 0 }}.
        </div>
+
+        <div *ngIf="formErrors.videoQuota" class="form-error">
+          {{ formErrors.videoQuota }}
+        </div>
      </div>

      <div class="form-group">
        <label i18n for="videoQuotaDaily">Daily video quota</label>
-        <div class="peertube-select-container">
-          <select id="videoQuotaDaily" formControlName="videoQuotaDaily" class="form-control">
-            <option *ngFor="let videoQuotaDailyOption of videoQuotaDailyOptions" [value]="videoQuotaDailyOption.value" [disabled]="videoQuotaDailyOption.disabled">
-              {{ videoQuotaDailyOption.label }}
-            </option>
-          </select>
+
+        <my-select-custom-value
+          id="videoQuotaDaily"
+          [items]="videoQuotaDailyOptions"
+          formControlName="videoQuotaDaily"
+          i18n-inputSuffix inputSuffix="bytes" inputType="number"
+          [clearable]="false"
+        ></my-select-custom-value>
+
+        <div *ngIf="formErrors.videoQuotaDaily" class="form-error">
+          {{ formErrors.videoQuotaDaily }}
        </div>
      </div>

--- a/client/src/app/+admin/users/user-edit/user-edit.component.scss
+++ b/client/src/app/+admin/users/user-edit/user-edit.component.scss
@ -1,6 +1,8 @@
@import '_variables';
@import '_mixins';

+$form-base-input-width: 340px;
+
 label {
  font-weight: $font-regular;
  font-size: 100%;
@ -15,18 +17,24 @@ label {
 }

 input:not([type=submit]) {
-  @include peertube-input-text(340px);
+  @include peertube-input-text($form-base-input-width);
  display: block;
 }

 my-input-toggle-hidden {
-  @include responsive-width(340px);
+  @include responsive-width($form-base-input-width);

  display: block;
 }

 .peertube-select-container {
-  @include peertube-select-container(340px);
+  @include peertube-select-container($form-base-input-width);
+}
+
+my-select-custom-value {
+  @include responsive-width($form-base-input-width);
+
+  display: block;
 }

 input[type=submit], button {
--- a/client/src/app/+admin/users/user-edit/user-edit.ts
+++ b/client/src/app/+admin/users/user-edit/user-edit.ts
@ -4,12 +4,13 @@ import { AuthService, ScreenService, ServerService, User } from '@app/core'
 import { FormReactive } from '@app/shared/shared-forms'
 import { USER_ROLE_LABELS } from '@shared/core-utils/users'
 import { ServerConfig, UserAdminFlag, UserRole, VideoResolution } from '@shared/models'
+import { SelectOptionsItem } from '../../../../types/select-options-item.model'

@Directive()
 // tslint:disable-next-line: directive-class-suffix
 export abstract class UserEdit extends FormReactive implements OnInit {
-  videoQuotaOptions: { value: string, label: string, disabled?: boolean }[] = []
-  videoQuotaDailyOptions: { value: string, label: string, disabled?: boolean }[] = []
+  videoQuotaOptions: SelectOptionsItem[] = []
+  videoQuotaDailyOptions: SelectOptionsItem[] = []
  username: string
  user: User

@ -97,19 +98,7 @@ export abstract class UserEdit extends FormReactive implements OnInit {
  }

  protected buildQuotaOptions () {
-    // These are used by a HTML select, so convert key into strings
-    this.videoQuotaOptions = this.configService
-                                 .videoQuotaOptions.map(q => ({
-                                   value: q.value?.toString(),
-                                   label: q.label,
-                                   disabled: q.disabled
-                                 }))
-
-    this.videoQuotaDailyOptions = this.configService
-                                      .videoQuotaDailyOptions.map(q => ({
-                                        value: q.value?.toString(),
-                                        label: q.label,
-                                        disabled: q.disabled
-                                      }))
+    this.videoQuotaOptions = this.configService.videoQuotaOptions
+    this.videoQuotaDailyOptions = this.configService.videoQuotaDailyOptions
  }
 }
--- a/client/src/app/+my-library/my-video-playlists/my-video-playlist-edit.ts
+++ b/client/src/app/+my-library/my-video-playlists/my-video-playlist-edit.ts
@ -1,6 +1,7 @@
-import { FormReactive, SelectChannelItem } from '@app/shared/shared-forms'
+import { FormReactive } from '@app/shared/shared-forms'
 import { VideoConstant, VideoPlaylistPrivacy } from '@shared/models'
 import { VideoPlaylist } from '@shared/models/videos/playlist/video-playlist.model'
+import { SelectChannelItem } from '../../../types/select-options-item.model'

 export abstract class MyVideoPlaylistEdit extends FormReactive {
  // Declare it here to avoid errors in create template
--- a/client/src/app/+videos/+video-edit/shared/video-edit.component.ts
+++ b/client/src/app/+videos/+video-edit/shared/video-edit.component.ts
@ -1,5 +1,6 @@
 import { forkJoin } from 'rxjs'
 import { map } from 'rxjs/operators'
+import { SelectChannelItem } from 'src/types/select-options-item.model'
 import { Component, EventEmitter, Input, NgZone, OnDestroy, OnInit, Output, ViewChild } from '@angular/core'
 import { FormArray, FormControl, FormGroup, ValidatorFn, Validators } from '@angular/forms'
 import { HooksService, PluginService, ServerService } from '@app/core'
@ -17,10 +18,10 @@ import {
  VIDEO_SUPPORT_VALIDATOR,
  VIDEO_TAGS_ARRAY_VALIDATOR
 } from '@app/shared/form-validators/video-validators'
-import { FormReactiveValidationMessages, FormValidatorService, SelectChannelItem } from '@app/shared/shared-forms'
+import { FormReactiveValidationMessages, FormValidatorService } from '@app/shared/shared-forms'
 import { InstanceService } from '@app/shared/shared-instance'
 import { VideoCaptionEdit, VideoEdit, VideoService } from '@app/shared/shared-main'
-import { ServerConfig, VideoConstant, LiveVideo, VideoPrivacy } from '@shared/models'
+import { LiveVideo, ServerConfig, VideoConstant, VideoPrivacy } from '@shared/models'
 import { RegisterClientFormFieldOptions, RegisterClientVideoFieldOptions } from '@shared/models/plugins/register-client-form-field.model'
 import { I18nPrimengCalendarService } from './i18n-primeng-calendar.service'
 import { VideoCaptionAddModalComponent } from './video-caption-add-modal.component'
--- a/client/src/app/+videos/+video-edit/video-add-components/video-send.ts
+++ b/client/src/app/+videos/+video-edit/video-add-components/video-send.ts
@ -1,8 +1,9 @@
 import { catchError, switchMap, tap } from 'rxjs/operators'
+import { SelectChannelItem } from 'src/types/select-options-item.model'
 import { Directive, EventEmitter, OnInit } from '@angular/core'
 import { AuthService, CanComponentDeactivateResult, Notifier, ServerService } from '@app/core'
 import { populateAsyncUserVideoChannels } from '@app/helpers'
-import { FormReactive, SelectChannelItem } from '@app/shared/shared-forms'
+import { FormReactive } from '@app/shared/shared-forms'
 import { VideoCaptionEdit, VideoCaptionService, VideoEdit, VideoService } from '@app/shared/shared-main'
 import { LoadingBarService } from '@ngx-loading-bar/core'
 import { ServerConfig, VideoConstant, VideoPrivacy } from '@shared/models'
--- a/client/src/app/+videos/+video-edit/video-update.component.ts
+++ b/client/src/app/+videos/+video-edit/video-update.component.ts
@ -1,9 +1,10 @@
 import { of } from 'rxjs'
 import { map, switchMap } from 'rxjs/operators'
+import { SelectChannelItem } from 'src/types/select-options-item.model'
 import { Component, HostListener, OnInit } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
 import { Notifier } from '@app/core'
-import { FormReactive, FormValidatorService, SelectChannelItem } from '@app/shared/shared-forms'
+import { FormReactive, FormValidatorService } from '@app/shared/shared-forms'
 import { VideoCaptionEdit, VideoCaptionService, VideoDetails, VideoEdit, VideoService } from '@app/shared/shared-main'
 import { LiveVideoService } from '@app/shared/shared-video-live'
 import { LoadingBarService } from '@ngx-loading-bar/core'
--- a/client/src/app/helpers/utils.ts
+++ b/client/src/app/helpers/utils.ts
@ -1,10 +1,10 @@
+import { SelectChannelItem } from 'src/types/select-options-item.model'
 import { DatePipe } from '@angular/common'
 import { HttpErrorResponse } from '@angular/common/http'
 import { Notifier } from '@app/core'
-import { SelectChannelItem } from '@app/shared/shared-forms'
+import { HttpStatusCode } from '@shared/core-utils/miscs/http-error-codes'
 import { environment } from '../../environments/environment'
 import { AuthService } from '../core/auth'
-import { HttpStatusCode } from '@shared/core-utils/miscs/http-error-codes'

 // Thanks: https://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript
 function getParameterByName (name: string, url: string) {
--- a/client/src/app/shared/form-validators/form-validator.model.ts
+++ b/client/src/app/shared/form-validators/form-validator.model.ts
@ -10,5 +10,5 @@ export type BuildFormArgument = {
 }

 export type BuildFormDefaultValues = {
-  [ name: string ]: string | string[] | BuildFormDefaultValues
+  [ name: string ]: number | string | string[] | BuildFormDefaultValues
 }
--- a/client/src/app/shared/shared-forms/select/select-channel.component.ts
+++ b/client/src/app/shared/shared-forms/select/select-channel.component.ts
@ -1,13 +1,7 @@
-import { Component, forwardRef, Input } from '@angular/core'
+import { Component, forwardRef, Input, OnChanges } from '@angular/core'
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'
 import { VideoChannel } from '@app/shared/shared-main'
-
-export type SelectChannelItem = {
-  id: number
-  label: string
-  support: string
-  avatarPath?: string
-}
+import { SelectChannelItem } from '../../../../types/select-options-item.model'

@Component({
  selector: 'my-select-channel',
@ -21,9 +15,10 @@ export type SelectChannelItem = {
    }
  ]
 })
-export class SelectChannelComponent implements ControlValueAccessor {
+export class SelectChannelComponent implements ControlValueAccessor, OnChanges {
  @Input() items: SelectChannelItem[] = []

+  channels: SelectChannelItem[] = []
  selectedId: number

  // ng-select options
@ -32,10 +27,14 @@ export class SelectChannelComponent implements ControlValueAccessor {
  clearable = false
  searchable = false

-  get channels () {
-    return this.items.map(c => Object.assign(c, {
-      avatarPath: c.avatarPath ? c.avatarPath : VideoChannel.GET_DEFAULT_AVATAR_URL()
-    }))
+  ngOnChanges () {
+    this.channels = this.items.map(c => {
+      const avatarPath = c.avatarPath
+        ? c.avatarPath
+        : VideoChannel.GET_DEFAULT_AVATAR_URL()
+
+      return Object.assign({}, c, { avatarPath })
+    })
  }

  propagateChange = (_: any) => { /* empty */ }
--- 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,6 @@
 import { Component, forwardRef, Input, OnInit } from '@angular/core'
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'
-import { SelectOptionsItem } from './select-options.component'
+import { SelectOptionsItem } from '../../../../types/select-options-item.model'

 export type ItemSelectCheckboxValue = { id?: string | number, group?: string } | string

--- 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
@ -10,5 +10,9 @@
    (ngModelChange)="onModelChange()"
  ></my-select-options>

-  <input *ngIf="isCustomValue()" [(ngModel)]="customValue" (ngModelChange)="onModelChange()" type="text" class="form-control" />
+  <ng-container *ngIf="isCustomValue()">
+    <input [(ngModel)]="customValue" (ngModelChange)="onModelChange()" [type]="inputType" class="form-control" />
+
+    <span *ngIf="inputSuffix" class="input-suffix">{{ inputSuffix }}</span>
+  </ng-container>
 </div>
--- 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
@ -1,6 +1,6 @@
 import { Component, forwardRef, Input, OnChanges } from '@angular/core'
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'
-import { SelectOptionsItem } from './select-options.component'
+import { SelectOptionsItem } from '../../../../types/select-options-item.model'

@Component({
  selector: 'my-select-custom-value',
@ -20,6 +20,8 @@ export class SelectCustomValueComponent implements ControlValueAccessor, OnChang
  @Input() searchable = false
  @Input() groupBy: string
  @Input() labelForId: string
+  @Input() inputSuffix: string
+  @Input() inputType = 'text'

  customValue: number | string = ''
  selectedId: number | string
--- a/client/src/app/shared/shared-forms/select/select-options.component.ts
+++ b/client/src/app/shared/shared-forms/select/select-options.component.ts
@ -1,13 +1,6 @@
 import { Component, forwardRef, Input } from '@angular/core'
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'
-
-export type SelectOptionsItem = {
-  id: string | number
-  label: string
-  description?: string
-  group?: string
-  groupLabel?: string
-}
+import { SelectOptionsItem } from '../../../../types/select-options-item.model'

@Component({
  selector: 'my-select-options',
--- a/client/src/app/shared/shared-forms/select/select-shared.component.scss
+++ b/client/src/app/shared/shared-forms/select/select-shared.component.scss
@ -33,15 +33,20 @@ ng-select ::ng-deep {

 .root {
  display:flex;
+  align-items: center;

  > my-select-options {
    flex-grow: 1;
  }
 }

-input[type=text] {
+my-select-options + input {
  margin-left: 5px;

  @include peertube-input-text($form-base-input-width);
  display: block;
 }
+
+.input-suffix {
+  margin-left: 5px;
+}
--- a/client/src/app/shared/shared-user-settings/user-video-settings.component.ts
+++ b/client/src/app/shared/shared-user-settings/user-video-settings.component.ts
@ -3,9 +3,10 @@ import { forkJoin, Subject, Subscription } from 'rxjs'
 import { first } from 'rxjs/operators'
 import { Component, Input, OnDestroy, OnInit } from '@angular/core'
 import { AuthService, Notifier, ServerService, User, UserService } from '@app/core'
-import { FormReactive, FormValidatorService, ItemSelectCheckboxValue, SelectOptionsItem } from '@app/shared/shared-forms'
+import { FormReactive, FormValidatorService, ItemSelectCheckboxValue } from '@app/shared/shared-forms'
 import { UserUpdateMe } from '@shared/models'
 import { NSFWPolicyType } from '@shared/models/videos/nsfw-policy.type'
+import { SelectOptionsItem } from '../../../types/select-options-item.model'

@Component({
  selector: 'my-user-video-settings',
--- a/client/src/types/select-options-item.model.ts
+++ b/client/src/types/select-options-item.model.ts
@ -0,0 +1,13 @@
+export interface SelectOptionsItem {
+  id: string | number
+  label: string
+  description?: string
+  group?: string
+  groupLabel?: string
+}
+
+export interface SelectChannelItem extends SelectOptionsItem {
+  id: number
+  support: string
+  avatarPath?: string
+}