Add ability to set a custom quota

3 files changed, 45 insertions, 37 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 844620ca2..637203b96 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
@@ -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>
diff --git 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
index a9f72d7db..56be97e84 100644
--- 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',
diff --git a/client/src/app/+admin/config/shared/config.service.ts b/client/src/app/+admin/config/shared/config.service.ts
index 5f98aa545..d29b752f7 100644
--- 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` }
     ]
   }