dendi-wang/thingsboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI: Refactoring phone input and add to test sms dialog and contact

Browse Source
This commit is contained in:
fe-dev 2022-06-14 16:14:01 +03:00
parent 8bccd857eb
commit 51e05d1a9a
6 changed files with 35 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
ui-ngx/src/app/modules/home/pages/admin/send-test-sms-dialog.component.html
View File

@ -30,17 +30,11 @@
<div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div> <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
<div mat-dialog-content tb-toast toastTarget="sendTestSmsDialogContent"> <div mat-dialog-content tb-toast toastTarget="sendTestSmsDialogContent">
<fieldset [disabled]="(isLoading$ | async)"> <fieldset [disabled]="(isLoading$ | async)">
<mat-form-field class="mat-block"> <tb-phone-input required
<mat-label translate>admin.number-to</mat-label> formControlName="numberTo"
<input type="tel" required [pattern]="phoneNumberPattern" matInput formControlName="numberTo"> [enableFlagsSelect]="false"
<mat-error *ngIf="sendTestSmsFormGroup.get('numberTo').hasError('required')"> [label]="'admin.number-to'">
{{ 'admin.number-to-required' | translate }} </tb-phone-input>
</mat-error>
<mat-error *ngIf="sendTestSmsFormGroup.get('numberTo').hasError('pattern')">
{{ 'admin.phone-number-pattern' | translate }}
</mat-error>
<mat-hint innerHTML="{{ 'admin.phone-number-hint' | translate }}"></mat-hint>
</mat-form-field>
<mat-form-field class="mat-block"> <mat-form-field class="mat-block">
<mat-label translate>admin.sms-message</mat-label> <mat-label translate>admin.sms-message</mat-label>
<textarea required matInput rows="3" [maxLength]="1600" formControlName="message"></textarea> <textarea required matInput rows="3" [maxLength]="1600" formControlName="message"></textarea>

2
ui-ngx/src/app/modules/home/pages/security/authentication-dialog/sms-auth-dialog.component.html
View File

@ -36,7 +36,7 @@
<ng-template matStepLabel>{{ 'security.2fa.dialog.sms-step-label' | translate }}</ng-template> <ng-template matStepLabel>{{ 'security.2fa.dialog.sms-step-label' | translate }}</ng-template>
<form [formGroup]="smsConfigForm" (ngSubmit)="nextStep()"> <form [formGroup]="smsConfigForm" (ngSubmit)="nextStep()">
<p class="mat-body step-description input" translate>security.2fa.dialog.sms-step-description</p> <p class="mat-body step-description input" translate>security.2fa.dialog.sms-step-description</p>
<div fxLayout="row" fxLayoutAlign="space-between center" fxLayoutGap="8px"> <div fxLayout="row" fxLayoutAlign="space-between center" fxLayoutGap="15px">
<tb-phone-input fxFlex <tb-phone-input fxFlex
formControlName="phone" formControlName="phone"
[floatLabel]="'never'" [floatLabel]="'never'"

12
ui-ngx/src/app/shared/components/contact.component.html
View File

@ -55,13 +55,11 @@
<mat-label translate>contact.address2</mat-label> <mat-label translate>contact.address2</mat-label>
<input matInput formControlName="address2"> <input matInput formControlName="address2">
</mat-form-field> </mat-form-field>
<mat-form-field class="mat-block"> <tb-phone-input [required]="false"
<mat-label translate>contact.phone</mat-label> [label]="'contact.phone'"
<input matInput formControlName="phone"> [enableFlagsSelect]="false"
<mat-error *ngIf="parentForm.get('phone').hasError('maxlength')"> formControlName="phone">
{{ 'contact.phone-max-length' | translate }} </tb-phone-input>
</mat-error>
</mat-form-field>
<mat-form-field class="mat-block"> <mat-form-field class="mat-block">
<mat-label translate>contact.email</mat-label> <mat-label translate>contact.email</mat-label>
<input matInput formControlName="email"> <input matInput formControlName="email">

2
ui-ngx/src/app/shared/components/phone-input.component.html
View File

@ -28,7 +28,7 @@
</mat-select> </mat-select>
</div> </div>
<mat-form-field class="phone-input" [appearance]="appearance" [floatLabel]="floatLabel"> <mat-form-field class="phone-input" [appearance]="appearance" [floatLabel]="floatLabel">
<mat-label>{{ placeholder | translate }}</mat-label> <mat-label>{{ label | translate }}</mat-label>
<input <input
formControlName="phoneNumber" formControlName="phoneNumber"
type="tel" type="tel"

1
ui-ngx/src/app/shared/components/phone-input.component.scss
View File

@ -21,7 +21,6 @@
.phone-input { .phone-input {
width: 100%; width: 100%;
max-width: 290px;
} }
} }

30
ui-ngx/src/app/shared/components/phone-input.component.ts
View File

@ -55,13 +55,29 @@ import { FloatLabelType, MatFormFieldAppearance } from '@angular/material/form-f
}) })
export class PhoneInputComponent implements OnInit, ControlValueAccessor, Validator { export class PhoneInputComponent implements OnInit, ControlValueAccessor, Validator {
@Input() disabled: boolean; @Input()
@Input() defaultCountry: CountryCode = 'US'; disabled: boolean;
@Input() enableFlagsSelect = true;
@Input() required = true; @Input()
@Input() floatLabel: FloatLabelType = 'always'; defaultCountry: CountryCode = 'US';
@Input() appearance: MatFormFieldAppearance = 'legacy';
@Input() placeholder = 'phone-input.phone-input-label'; @Input()
enableFlagsSelect = true;
@Input()
required = true;
@Input()
floatLabel: FloatLabelType = 'auto';
@Input()
appearance: MatFormFieldAppearance = 'legacy';
@Input()
placeholder;
@Input()
label = 'phone-input.phone-input-label';
allCountries: Array<Country> = this.countryCodeData.allCountries; allCountries: Array<Country> = this.countryCodeData.allCountries;
phonePlaceholder: string; phonePlaceholder: string;