Fix select with custom number labels

This commit is contained in:
Chocobozzz 2024-09-26 16:29:26 +02:00
parent 3280e3a480
commit fe62406e50
No known key found for this signature in database
GPG Key ID: 583A612D890159BE
6 changed files with 29 additions and 18 deletions

View File

@ -25,10 +25,11 @@
</ng-container> </ng-container>
<div class="form-group" formGroupName="instance"> <div class="form-group" formGroupName="instance">
<label i18n for="instanceDefaultClientRoute">Landing page</label> <label i18n id="instanceDefaultClientRouteLabel" for="instanceDefaultClientRoute">Landing page</label>
<my-select-custom-value <my-select-custom-value
id="instanceDefaultClientRoute" labelId="instanceDefaultClientRouteLabel"
labelForId="instanceDefaultClientRoute"
[items]="defaultLandingPageOptions" [items]="defaultLandingPageOptions"
formControlName="defaultClientRoute" formControlName="defaultClientRoute"
inputType="text" inputType="text"
@ -219,10 +220,11 @@
<ng-container formGroupName="user"> <ng-container formGroupName="user">
<div class="form-group"> <div class="form-group">
<label i18n for="userVideoQuota">Default video quota per user</label> <label i18n id="userVideoQuotaLabel" for="userVideoQuota">Default video quota per user</label>
<my-select-custom-value <my-select-custom-value
id="userVideoQuota" labelId="userVideoQuotaLabel"
labelForId="userVideoQuota"
[items]="getVideoQuotaOptions()" [items]="getVideoQuotaOptions()"
formControlName="videoQuota" formControlName="videoQuota"
i18n-inputSuffix inputSuffix="bytes" inputType="number" i18n-inputSuffix inputSuffix="bytes" inputType="number"
@ -235,10 +237,11 @@
</div> </div>
<div class="form-group"> <div class="form-group">
<label i18n for="userVideoQuotaDaily">Default daily upload limit per user</label> <label i18n id="userVideoQuotaDaily" for="userVideoQuotaDaily">Default daily upload limit per user</label>
<my-select-custom-value <my-select-custom-value
id="userVideoQuotaDaily" labelId="userVideoQuotaDailyLabel"
labelForId="userVideoQuotaDaily"
[items]="getVideoQuotaDailyOptions()" [items]="getVideoQuotaDailyOptions()"
formControlName="videoQuotaDaily" formControlName="videoQuotaDaily"
i18n-inputSuffix inputSuffix="bytes" inputType="number" i18n-inputSuffix inputSuffix="bytes" inputType="number"
@ -552,12 +555,13 @@
<ng-container ngProjectAs="extra"> <ng-container ngProjectAs="extra">
<div class="form-group" [ngClass]="getDisabledExportUsersClass()"> <div class="form-group" [ngClass]="getDisabledExportUsersClass()">
<label i18n for="exportUsersMaxUserVideoQuota">Max user video quota allowed to generate the export</label> <label i18n id="exportUsersMaxUserVideoQuota" for="exportUsersMaxUserVideoQuota">Max user video quota allowed to generate the export</label>
<span i18n class="ms-2 small muted">If the user decides to include the video files in the archive</span> <span i18n class="ms-2 small muted">If the user decides to include the video files in the archive</span>
<my-select-custom-value <my-select-custom-value
id="exportUsersMaxUserVideoQuota" labelId="exportUsersMaxUserVideoQuota"
labelForId="exportUsersMaxUserVideoQuota"
[items]="exportMaxUserVideoQuotaOptions" [items]="exportMaxUserVideoQuotaOptions"
formControlName="maxUserVideoQuota" formControlName="maxUserVideoQuota"
i18n-inputSuffix inputSuffix="bytes" inputType="number" i18n-inputSuffix inputSuffix="bytes" inputType="number"

View File

@ -164,7 +164,7 @@
</div> </div>
<div class="form-group" [ngClass]="getDisabledLiveLocalTranscodingClass()"> <div class="form-group" [ngClass]="getDisabledLiveLocalTranscodingClass()">
<label i18n for="liveTranscodingThreads">Live transcoding threads</label> <label i18n id="liveTranscodingThreadsLabel" for="liveTranscodingThreads">Live transcoding threads</label>
<span class="small muted ms-1"> <span class="small muted ms-1">
<ng-container *ngIf="getTotalTranscodingThreads().atMost" i18n> <ng-container *ngIf="getTotalTranscodingThreads().atMost" i18n>
@ -177,7 +177,8 @@
</span> </span>
<my-select-custom-value <my-select-custom-value
id="liveTranscodingThreads" labelId="liveTranscodingThreadsLabel"
labelForId="liveTranscodingThreads"
[items]="transcodingThreadOptions" [items]="transcodingThreadOptions"
formControlName="threads" formControlName="threads"
[clearable]="false" [clearable]="false"

View File

@ -187,7 +187,7 @@
</div> </div>
<div class="form-group mt-4" [ngClass]="getLocalTranscodingDisabledClass()"> <div class="form-group mt-4" [ngClass]="getLocalTranscodingDisabledClass()">
<label i18n for="transcodingThreads">Transcoding threads</label> <label i18n id="transcodingThreadsLabel" for="transcodingThreads">Transcoding threads</label>
<span class="small muted ms-1"> <span class="small muted ms-1">
<ng-container *ngIf="getTotalTranscodingThreads().atMost" i18n> <ng-container *ngIf="getTotalTranscodingThreads().atMost" i18n>
@ -200,7 +200,8 @@
</span> </span>
<my-select-custom-value <my-select-custom-value
id="transcodingThreads" labelId="transcodingThreadsLabel"
labelForId="transcodingThreads"
[items]="transcodingThreadOptions" [items]="transcodingThreadOptions"
formControlName="threads" formControlName="threads"
[clearable]="false" [clearable]="false"

View File

@ -150,10 +150,11 @@
</div> </div>
<div class="form-group"> <div class="form-group">
<label i18n for="videoQuota">Video quota</label> <label i18n id="videoQuotaLabel" for="videoQuota">Video quota</label>
<my-select-custom-value <my-select-custom-value
id="videoQuota" labelId="videoQuotaLabel"
labelForId="videoQuota"
[items]="videoQuotaOptions" [items]="videoQuotaOptions"
formControlName="videoQuota" formControlName="videoQuota"
i18n-inputSuffix inputSuffix="bytes" inputType="number" i18n-inputSuffix inputSuffix="bytes" inputType="number"
@ -168,10 +169,11 @@
</div> </div>
<div class="form-group"> <div class="form-group">
<label i18n for="videoQuotaDaily">Daily video quota</label> <label i18n id="videoQuotaDailyLabel" for="videoQuotaDaily">Daily video quota</label>
<my-select-custom-value <my-select-custom-value
id="videoQuotaDaily" labelId="videoQuotaDailyLabel"
labelForId="videoQuotaDaily"
[items]="videoQuotaDailyOptions" [items]="videoQuotaDailyOptions"
formControlName="videoQuotaDaily" formControlName="videoQuotaDaily"
i18n-inputSuffix inputSuffix="bytes" inputType="number" i18n-inputSuffix inputSuffix="bytes" inputType="number"

View File

@ -12,7 +12,7 @@
></my-select-options> ></my-select-options>
<ng-container *ngIf="isCustomValue()"> <ng-container *ngIf="isCustomValue()">
<input [(ngModel)]="customValue" (ngModelChange)="onModelChange()" [type]="inputType" class="form-control" /> <input [attr.aria-labelledby]="labelId" [(ngModel)]="customValue" (ngModelChange)="onModelChange()" [type]="inputType" class="form-control" />
<span *ngIf="inputSuffix" class="input-suffix">{{ inputSuffix }}</span> <span *ngIf="inputSuffix" class="input-suffix">{{ inputSuffix }}</span>
</ng-container> </ng-container>

View File

@ -19,11 +19,14 @@ import { SelectOptionsComponent } from './select-options.component'
imports: [ SelectOptionsComponent, FormsModule, NgIf ] imports: [ SelectOptionsComponent, FormsModule, NgIf ]
}) })
export class SelectCustomValueComponent implements ControlValueAccessor, OnChanges { export class SelectCustomValueComponent implements ControlValueAccessor, OnChanges {
@Input({ required: true }) labelForId: string
@Input({ required: true }) labelId: string
@Input() items: SelectOptionsItem[] = [] @Input() items: SelectOptionsItem[] = []
@Input() clearable = false @Input() clearable = false
@Input() searchable = false @Input() searchable = false
@Input() groupBy: string @Input() groupBy: string
@Input() labelForId: string
@Input() inputSuffix: string @Input() inputSuffix: string
@Input() inputType = 'text' @Input() inputType = 'text'