tsai
/
thingsboard
mirror of https://github.com/thingsboard/thingsboard.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Refactor 'Add API key' dialog to display as grid.

pull/14074/head
deaflynx 11 months ago
parent
87a59303e6
commit
05f48f3a03
2 changed files with 75 additions and 68 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 127
      ui-ngx/src/app/modules/home/components/api-key/components/dialog/add-api-key-dialog.component.html
  2. 16
      ui-ngx/src/app/modules/home/components/api-key/components/dialog/add-api-key-dialog.component.scss

127
ui-ngx/src/app/modules/home/components/api-key/components/dialog/add-api-key-dialog.component.html
View File

@ -15,72 +15,69 @@
limitations under the License.
-->
<form (ngSubmit)="add()">
<mat-toolbar color="primary">
<h2>{{ 'api-key.generate-title' | translate }}</h2>
<span class="flex-1"></span>
<div tb-help="apiKeys"></div>
<button mat-icon-button
(click)="close()"
type="button">
<mat-icon class="material-icons">close</mat-icon>
</button>
</mat-toolbar>
@if (isLoading$ | async) {
<mat-progress-bar color="warn" mode="indeterminate"></mat-progress-bar>
} @else {
<div style="height: 4px;"></div>
}
<div mat-dialog-content>
<section class="tb-form-panel no-border no-padding" [formGroup]="apiKeyForm">
<div class="api-key-text">
<span translate>api-key.generate-text</span>
</div>
<mat-form-field class="mat-block" appearance="outline" subscriptSizing="dynamic">
<mat-label translate>api-key.description</mat-label>
<textarea #input cdkTextareaAutosize matInput formControlName="description" rows="2" maxLength="255"></textarea>
<mat-toolbar color="primary">
<h2>{{ 'api-key.generate-title' | translate }}</h2>
<span class="flex-1"></span>
<div tb-help="apiKeys"></div>
<button mat-icon-button
(click)="close()"
type="button">
<mat-icon class="material-icons">close</mat-icon>
</button>
</mat-toolbar>
@if (isLoading$ | async) {
<mat-progress-bar color="warn" mode="indeterminate"></mat-progress-bar>
}
<div mat-dialog-content>
<section class="tb-form-panel no-border no-padding" [formGroup]="apiKeyForm">
<div class="api-key-text">
<span translate>api-key.generate-text</span>
</div>
<mat-form-field class="mat-block" appearance="outline" subscriptSizing="dynamic">
<mat-label translate>api-key.description</mat-label>
<textarea #input cdkTextareaAutosize matInput formControlName="description" rows="2" maxLength="255"></textarea>
</mat-form-field>
<mat-slide-toggle class="mat-slide" formControlName="enabled">
{{ 'api-key.enable' | translate }}
</mat-slide-toggle>
<section class="flex gap-3">
<mat-form-field appearance="outline" subscriptSizing="dynamic" class="flex-1">
<mat-select formControlName="expirationTime" aria-label="Expiration date selector" (selectionChange)="onExpirationDateChange()">
@for (value of expirationTimeOptions; track value) {
<mat-option [value]="value">
{{ value | dateExpiration }}
</mat-option>
}
<mat-option value="never">{{'api-key.expiration-time-never' | translate}}</mat-option>
<mat-option value="custom">{{'api-key.expiration-time-custom' | translate}}</mat-option>
</mat-select>
</mat-form-field>
<mat-slide-toggle class="mat-slide" formControlName="enabled">
{{ 'api-key.enable' | translate }}
</mat-slide-toggle>
<section class="flex gap-3">
<mat-form-field appearance="outline" subscriptSizing="dynamic" class="flex-1">
<mat-select formControlName="expirationTime" aria-label="Expiration date selector" (selectionChange)="onExpirationDateChange()">
@for (value of expirationTimeOptions; track value) {
<mat-option [value]="value">
{{ value | dateExpiration }}
</mat-option>
}
<mat-option value="never">{{'api-key.expiration-time-never' | translate}}</mat-option>
<mat-option value="custom">{{'api-key.expiration-time-custom' | translate}}</mat-option>
</mat-select>
@if (isCustomExpirationTime()) {
<mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
<mat-label translate>api-key.date</mat-label>
<mat-datetimepicker-toggle [for]="datePicker" matSuffix></mat-datetimepicker-toggle>
<mat-datetimepicker #datePicker type="datetime" openOnFocus="true"></mat-datetimepicker>
<input matInput required formControlName="customExpirationTime"
[matDatetimepicker]="datePicker"
[min]="startDate"/>
</mat-form-field>
@if (isCustomExpirationTime()) {
<mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
<mat-label translate>api-key.date</mat-label>
<mat-datetimepicker-toggle [for]="datePicker" matSuffix></mat-datetimepicker-toggle>
<mat-datetimepicker #datePicker type="datetime" openOnFocus="true"></mat-datetimepicker>
<input matInput required formControlName="customExpirationTime"
[matDatetimepicker]="datePicker"
[min]="startDate"/>
</mat-form-field>
}
</section>
}
</section>
</div>
<div mat-dialog-actions class="flex items-center justify-end">
<button mat-button color="primary"
type="button"
cdkFocusInitial
[disabled]="(isLoading$ | async)"
(click)="close()">
{{ 'action.cancel' | translate }}
</button>
<button mat-raised-button color="primary"
type="submit"
[disabled]="(isLoading$ | async) || apiKeyForm?.invalid">
{{ 'api-key.generate' | translate }}
</button>
</div>
</form>
</section>
</div>
<div mat-dialog-actions class="flex items-center justify-end">
<button mat-button color="primary"
type="button"
cdkFocusInitial
[disabled]="(isLoading$ | async)"
(click)="close()">
{{ 'action.cancel' | translate }}
</button>
<button mat-raised-button color="primary"
type="submit"
(click)="add()"
[disabled]="(isLoading$ | async) || apiKeyForm?.invalid">
{{ 'api-key.generate' | translate }}
</button>
</div>

16
ui-ngx/src/app/modules/home/components/api-key/components/dialog/add-api-key-dialog.component.scss
View File

@ -15,9 +15,19 @@
*/
@import '../../src/scss/constants';
:host{
form {
width: 700px;
:host {
display: grid;
width: 700px;
height: 100%;
max-width: 100%;
max-height: 100vh;
grid-template-rows: min-content 4px minmax(auto, 1fr) min-content;
.mat-mdc-dialog-content {
grid-row: 3;
}
.mat-mdc-dialog-actions {
grid-row: 4;
}
.api-key-text {
position: relative;

Write Preview
Loading…
Cancel
Save