Igor Kulikov
2 years ago
committed by
GitHub
GitHub
11 changed files with 372 additions and 360 deletions
@ -1,291 +0,0 @@ |
|||
///
|
|||
/// Copyright © 2016-2024 The Thingsboard Authors
|
|||
///
|
|||
/// Licensed under the Apache License, Version 2.0 (the "License");
|
|||
/// you may not use this file except in compliance with the License.
|
|||
/// You may obtain a copy of the License at
|
|||
///
|
|||
/// http://www.apache.org/licenses/LICENSE-2.0
|
|||
///
|
|||
/// Unless required by applicable law or agreed to in writing, software
|
|||
/// distributed under the License is distributed on an "AS IS" BASIS,
|
|||
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|||
/// See the License for the specific language governing permissions and
|
|||
/// limitations under the License.
|
|||
///
|
|||
|
|||
export const COUNTRIES = [ |
|||
'Afghanistan', |
|||
'Åland Islands', |
|||
'Albania', |
|||
'Algeria', |
|||
'American Samoa', |
|||
'Andorra', |
|||
'Angola', |
|||
'Anguilla', |
|||
'Antarctica', |
|||
'Antigua and Barbuda', |
|||
'Argentina', |
|||
'Armenia', |
|||
'Aruba', |
|||
'Australia', |
|||
'Austria', |
|||
'Azerbaijan', |
|||
'Bahamas', |
|||
'Bahrain', |
|||
'Bangladesh', |
|||
'Barbados', |
|||
'Belarus', |
|||
'Belgium', |
|||
'Belize', |
|||
'Benin', |
|||
'Bermuda', |
|||
'Bhutan', |
|||
'Bolivia', |
|||
'Bonaire, Sint Eustatius and Saba', |
|||
'Bosnia and Herzegovina', |
|||
'Botswana', |
|||
'Bouvet Island', |
|||
'Brazil', |
|||
'British Indian Ocean Territory', |
|||
'Brunei Darussalam', |
|||
'Bulgaria', |
|||
'Burkina Faso', |
|||
'Burundi', |
|||
'Cambodia', |
|||
'Cameroon', |
|||
'Canada', |
|||
'Cape Verde', |
|||
'Cayman Islands', |
|||
'Central African Republic', |
|||
'Chad', |
|||
'Chile', |
|||
'China', |
|||
'Christmas Island', |
|||
'Cocos (Keeling) Islands', |
|||
'Colombia', |
|||
'Comoros', |
|||
'Congo', |
|||
'Congo, The Democratic Republic of the', |
|||
'Cook Islands', |
|||
'Costa Rica', |
|||
'Côte d\'Ivoire', |
|||
'Croatia', |
|||
'Cuba', |
|||
'Curaçao', |
|||
'Cyprus', |
|||
'Czech Republic', |
|||
'Denmark', |
|||
'Djibouti', |
|||
'Dominica', |
|||
'Dominican Republic', |
|||
'Ecuador', |
|||
'Egypt', |
|||
'El Salvador', |
|||
'Equatorial Guinea', |
|||
'Eritrea', |
|||
'Estonia', |
|||
'Ethiopia', |
|||
'Falkland Islands (Malvinas)', |
|||
'Faroe Islands', |
|||
'Fiji', |
|||
'Finland', |
|||
'France', |
|||
'French Guiana', |
|||
'French Polynesia', |
|||
'French Southern Territories', |
|||
'Gabon', |
|||
'Gambia', |
|||
'Georgia', |
|||
'Germany', |
|||
'Ghana', |
|||
'Gibraltar', |
|||
'Greece', |
|||
'Greenland', |
|||
'Grenada', |
|||
'Guadeloupe', |
|||
'Guam', |
|||
'Guatemala', |
|||
'Guernsey', |
|||
'Guinea', |
|||
'Guinea-Bissau', |
|||
'Guyana', |
|||
'Haiti', |
|||
'Heard Island and McDonald Islands', |
|||
'Holy See (Vatican City State)', |
|||
'Honduras', |
|||
'Hong Kong', |
|||
'Hungary', |
|||
'Iceland', |
|||
'India', |
|||
'Indonesia', |
|||
'Iran, Islamic Republic of', |
|||
'Iraq', |
|||
'Ireland', |
|||
'Isle of Man', |
|||
'Israel', |
|||
'Italy', |
|||
'Jamaica', |
|||
'Japan', |
|||
'Jersey', |
|||
'Jordan', |
|||
'Kazakhstan', |
|||
'Kenya', |
|||
'Kiribati', |
|||
'Korea, Democratic People\'s Republic of', |
|||
'Korea, Republic of', |
|||
'Kuwait', |
|||
'Kyrgyzstan', |
|||
'Lao People\'s Democratic Republic', |
|||
'Latvia', |
|||
'Lebanon', |
|||
'Lesotho', |
|||
'Liberia', |
|||
'Libya', |
|||
'Liechtenstein', |
|||
'Lithuania', |
|||
'Luxembourg', |
|||
'Macao', |
|||
'Macedonia, Republic Of', |
|||
'Madagascar', |
|||
'Malawi', |
|||
'Malaysia', |
|||
'Maldives', |
|||
'Mali', |
|||
'Malta', |
|||
'Marshall Islands', |
|||
'Martinique', |
|||
'Mauritania', |
|||
'Mauritius', |
|||
'Mayotte', |
|||
'Mexico', |
|||
'Micronesia, Federated States of', |
|||
'Moldova, Republic of', |
|||
'Monaco', |
|||
'Mongolia', |
|||
'Montenegro', |
|||
'Montserrat', |
|||
'Morocco', |
|||
'Mozambique', |
|||
'Myanmar', |
|||
'Namibia', |
|||
'Nauru', |
|||
'Nepal', |
|||
'Netherlands', |
|||
'New Caledonia', |
|||
'New Zealand', |
|||
'Nicaragua', |
|||
'Niger', |
|||
'Nigeria', |
|||
'Niue', |
|||
'Norfolk Island', |
|||
'Northern Mariana Islands', |
|||
'Norway', |
|||
'Oman', |
|||
'Pakistan', |
|||
'Palau', |
|||
'Palestinian Territory, Occupied', |
|||
'Panama', |
|||
'Papua New Guinea', |
|||
'Paraguay', |
|||
'Peru', |
|||
'Philippines', |
|||
'Pitcairn', |
|||
'Poland', |
|||
'Portugal', |
|||
'Puerto Rico', |
|||
'Qatar', |
|||
'Reunion', |
|||
'Romania', |
|||
'Russian Federation', |
|||
'Rwanda', |
|||
'Saint Barthélemy', |
|||
'Saint Helena, Ascension and Tristan da Cunha', |
|||
'Saint Kitts and Nevis', |
|||
'Saint Lucia', |
|||
'Saint Martin (French Part)', |
|||
'Saint Pierre and Miquelon', |
|||
'Saint Vincent and the Grenadines', |
|||
'Samoa', |
|||
'San Marino', |
|||
'Sao Tome and Principe', |
|||
'Saudi Arabia', |
|||
'Senegal', |
|||
'Serbia', |
|||
'Seychelles', |
|||
'Sierra Leone', |
|||
'Singapore', |
|||
'Sint Maarten (Dutch Part)', |
|||
'Slovakia', |
|||
'Slovenia', |
|||
'Solomon Islands', |
|||
'Somalia', |
|||
'South Africa', |
|||
'South Georgia and the South Sandwich Islands', |
|||
'South Sudan', |
|||
'Spain', |
|||
'Sri Lanka', |
|||
'Sudan', |
|||
'Suriname', |
|||
'Svalbard and Jan Mayen', |
|||
'Swaziland', |
|||
'Sweden', |
|||
'Switzerland', |
|||
'Syrian Arab Republic', |
|||
'Taiwan', |
|||
'Tajikistan', |
|||
'Tanzania, United Republic of', |
|||
'Thailand', |
|||
'Timor-Leste', |
|||
'Togo', |
|||
'Tokelau', |
|||
'Tonga', |
|||
'Trinidad and Tobago', |
|||
'Tunisia', |
|||
'Turkey', |
|||
'Turkmenistan', |
|||
'Turks and Caicos Islands', |
|||
'Tuvalu', |
|||
'Uganda', |
|||
'Ukraine', |
|||
'United Arab Emirates', |
|||
'United Kingdom', |
|||
'United States', |
|||
'United States Minor Outlying Islands', |
|||
'Uruguay', |
|||
'Uzbekistan', |
|||
'Vanuatu', |
|||
'Venezuela', |
|||
'Viet Nam', |
|||
'Virgin Islands, British', |
|||
'Virgin Islands, U.S.', |
|||
'Wallis and Futuna', |
|||
'Western Sahara', |
|||
'Yemen', |
|||
'Zambia', |
|||
'Zimbabwe' |
|||
]; |
|||
|
|||
/* eslint-disable */ |
|||
export const POSTAL_CODE_PATTERNS = { |
|||
'United States': '(\\d{5}([\\-]\\d{4})?)', |
|||
'Australia': '[0-9]{4}', |
|||
'Austria': '[0-9]{4}', |
|||
'Belgium': '[0-9]{4}', |
|||
'Brazil': '[0-9]{5}[\\-]?[0-9]{3}', |
|||
'Canada': '^(?!.*[DFIOQU])[A-VXY][0-9][A-Z][ -]?[0-9][A-Z][0-9]$', |
|||
'Denmark': '[0-9]{3,4}', |
|||
'Faroe Islands': '[0-9]{3,4}', |
|||
'Netherlands': '[1-9][0-9]{3}\\s?[a-zA-Z]{2}', |
|||
'Germany': '[0-9]{5}', |
|||
'Hungary': '[0-9]{4}', |
|||
'Italy': '[0-9]{5}', |
|||
'Japan': '\\d{3}-\\d{4}', |
|||
'Luxembourg': '(L\\s*(-|—|–))\\s*?[\\d]{4}', |
|||
'Poland': '[0-9]{2}\\-[0-9]{3}', |
|||
'Spain': '((0[1-9]|5[0-2])|[1-4][0-9])[0-9]{3}', |
|||
'Sweden': '\\d{3}\\s?\\d{2}', |
|||
'United Kingdom': '[A-Za-z]{1,2}[0-9Rr][0-9A-Za-z]? [0-9][ABD-HJLNP-UW-Zabd-hjlnp-uw-z]{2}' |
|||
}; |
|||
/* eslint-enable */ |
|||
|
|||
@ -0,0 +1,58 @@ |
|||
<!-- |
|||
|
|||
Copyright © 2016-2024 The Thingsboard Authors |
|||
|
|||
Licensed under the Apache License, Version 2.0 (the "License"); |
|||
you may not use this file except in compliance with the License. |
|||
You may obtain a copy of the License at |
|||
|
|||
http://www.apache.org/licenses/LICENSE-2.0 |
|||
|
|||
Unless required by applicable law or agreed to in writing, software |
|||
distributed under the License is distributed on an "AS IS" BASIS, |
|||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
|||
See the License for the specific language governing permissions and |
|||
limitations under the License. |
|||
|
|||
--> |
|||
<mat-form-field [formGroup]="countryFormGroup" class="mat-block" subscriptSizing="{{subscriptSizing}}"> |
|||
<mat-label>{{ labelText }}</mat-label> |
|||
<input matInput type="text" |
|||
#countryInput |
|||
formControlName="country" |
|||
(focusin)="onFocus()" |
|||
(blur)="onTouched()" |
|||
[required]="required" |
|||
[matAutocomplete]="countryAutocomplete"> |
|||
<button *ngIf="countryFormGroup.get('country').value && !disabled" |
|||
type="button" |
|||
matSuffix mat-icon-button aria-label="Clear" |
|||
(click)="clear()"> |
|||
<mat-icon class="material-icons">close</mat-icon> |
|||
</button> |
|||
<mat-autocomplete class="tb-autocomplete" |
|||
#countryAutocomplete="matAutocomplete" |
|||
[displayWith]="displayCountryFn"> |
|||
<mat-option *ngFor="let country of filteredCountries | async" [value]="country"> |
|||
<span style="font-size: 20px;padding-right: 4px;">{{country.flag}}</span> |
|||
<span [innerHTML]="country.name | highlight:searchText"></span> |
|||
</mat-option> |
|||
<mat-option *ngIf="!(filteredCountries | async)?.length" [value]="null" class="tb-not-found"> |
|||
<div class="tb-not-found-content" (click)="$event.stopPropagation()"> |
|||
<div *ngIf="!textIsNotEmpty(searchText); else searchNotEmpty"> |
|||
<span translate>contact.no-country-found</span> |
|||
</div> |
|||
<ng-template #searchNotEmpty> |
|||
<span> |
|||
{{ 'contact.no-country-matching' | translate: |
|||
{country: (searchText | truncate: true: 6: '...')} }} |
|||
</span> |
|||
</ng-template> |
|||
</div> |
|||
</mat-option> |
|||
</mat-autocomplete> |
|||
<mat-hint *ngIf="autocompleteHint">{{ autocompleteHint }}</mat-hint> |
|||
<mat-error *ngIf="countryFormGroup.get('country').hasError('required')"> |
|||
{{ requiredText }} |
|||
</mat-error> |
|||
</mat-form-field> |
|||
@ -0,0 +1,209 @@ |
|||
///
|
|||
/// Copyright © 2016-2024 The Thingsboard Authors
|
|||
///
|
|||
/// Licensed under the Apache License, Version 2.0 (the "License");
|
|||
/// you may not use this file except in compliance with the License.
|
|||
/// You may obtain a copy of the License at
|
|||
///
|
|||
/// http://www.apache.org/licenses/LICENSE-2.0
|
|||
///
|
|||
/// Unless required by applicable law or agreed to in writing, software
|
|||
/// distributed under the License is distributed on an "AS IS" BASIS,
|
|||
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|||
/// See the License for the specific language governing permissions and
|
|||
/// limitations under the License.
|
|||
///
|
|||
|
|||
import { Component, ElementRef, EventEmitter, forwardRef, Input, OnInit, Output, ViewChild } from '@angular/core'; |
|||
import { Country, CountryData } from '@shared/models/country.models'; |
|||
import { |
|||
ControlValueAccessor, |
|||
FormBuilder, |
|||
FormGroup, |
|||
NG_VALIDATORS, |
|||
NG_VALUE_ACCESSOR, |
|||
ValidationErrors, |
|||
Validator |
|||
} from '@angular/forms'; |
|||
import { isNotEmptyStr } from '@core/utils'; |
|||
import { Observable, of } from 'rxjs'; |
|||
import { debounceTime, distinctUntilChanged, map, share, switchMap, tap } from 'rxjs/operators'; |
|||
import { SubscriptSizing } from '@angular/material/form-field'; |
|||
import { coerceBoolean } from '@shared/decorators/coercion'; |
|||
import { TranslateService } from '@ngx-translate/core'; |
|||
|
|||
interface CountrySearchData extends Country { |
|||
searchText?: string; |
|||
} |
|||
|
|||
@Component({ |
|||
selector: 'tb-country-autocomplete', |
|||
templateUrl: 'country-autocomplete.component.html', |
|||
providers: [ |
|||
CountryData, |
|||
{ |
|||
provide: NG_VALUE_ACCESSOR, |
|||
useExisting: forwardRef(() => CountryAutocompleteComponent), |
|||
multi: true |
|||
}, |
|||
{ |
|||
provide: NG_VALIDATORS, |
|||
useExisting: forwardRef(() => CountryAutocompleteComponent), |
|||
multi: true |
|||
} |
|||
] |
|||
}) |
|||
export class CountryAutocompleteComponent implements OnInit, ControlValueAccessor, Validator { |
|||
|
|||
@Input() |
|||
labelText = this.translate.instant('contact.country'); |
|||
|
|||
@Input() |
|||
requiredText = this.translate.instant('contact.country-required'); |
|||
|
|||
@Input() |
|||
autocompleteHint: string; |
|||
|
|||
@Input() |
|||
disabled: boolean; |
|||
|
|||
@Input() |
|||
@coerceBoolean() |
|||
required = false; |
|||
|
|||
@Input() |
|||
subscriptSizing: SubscriptSizing = 'fixed'; |
|||
|
|||
@ViewChild('countryInput', {static: true}) countryInput: ElementRef; |
|||
|
|||
@Output() |
|||
selectCountryCode = new EventEmitter<string>(); |
|||
|
|||
countryFormGroup: FormGroup; |
|||
|
|||
searchText = ''; |
|||
|
|||
filteredCountries: Observable<Array<Country>>; |
|||
|
|||
onTouched = () => { |
|||
}; |
|||
private propagateChange: (value: any) => void = () => { |
|||
}; |
|||
|
|||
private modelValue: Country; |
|||
|
|||
private allCountries: CountrySearchData[] = this.countryData.allCountries; |
|||
private initSearchData = false; |
|||
private dirty = false; |
|||
|
|||
constructor(private fb: FormBuilder, |
|||
private countryData: CountryData, |
|||
private translate: TranslateService) { |
|||
this.countryFormGroup = this.fb.group({ |
|||
country: [''] |
|||
}); |
|||
} |
|||
|
|||
ngOnInit(): void { |
|||
this.filteredCountries = this.countryFormGroup.get('country').valueChanges.pipe( |
|||
debounceTime(150), |
|||
tap(value => { |
|||
let modelValue: Country; |
|||
if (typeof value === 'string' || !value) { |
|||
modelValue = null; |
|||
} else { |
|||
modelValue = value; |
|||
} |
|||
this.updateView(modelValue); |
|||
if (value === null) { |
|||
this.clear(); |
|||
} |
|||
}), |
|||
map(value => value ? (typeof value === 'string' ? value : value.name) : ''), |
|||
distinctUntilChanged(), |
|||
switchMap(name => of(this.fetchCountries(name))), |
|||
share() |
|||
); |
|||
} |
|||
|
|||
registerOnChange(fn: any): void { |
|||
this.propagateChange = fn; |
|||
} |
|||
|
|||
registerOnTouched(fn: any): void { |
|||
this.onTouched = fn; |
|||
} |
|||
|
|||
setDisabledState(isDisabled: boolean): void { |
|||
this.disabled = isDisabled; |
|||
if (isDisabled) { |
|||
this.countryFormGroup.disable({emitEvent: false}); |
|||
} else { |
|||
this.countryFormGroup.enable({emitEvent: false}); |
|||
} |
|||
} |
|||
|
|||
validate(): ValidationErrors | null { |
|||
return this.countryFormGroup.valid ? null : { |
|||
countryFormGroup: false |
|||
}; |
|||
} |
|||
|
|||
writeValue(country: string) { |
|||
this.dirty = true; |
|||
|
|||
const findCountry = isNotEmptyStr(country) ? this.allCountries.find(item => item.name === country) : null; |
|||
|
|||
this.modelValue = findCountry || null; |
|||
this.countryFormGroup.get('country').patchValue(this.modelValue || '', { emitEvent: false }); |
|||
this.selectCountryCode.emit(this.modelValue ? this.modelValue.iso2 : null); |
|||
} |
|||
|
|||
displayCountryFn(country?: Country): string | undefined { |
|||
return country ? `${country.flag} ${country.name}` : undefined; |
|||
} |
|||
|
|||
onFocus() { |
|||
if (this.dirty) { |
|||
this.countryFormGroup.get('country').updateValueAndValidity({onlySelf: true}); |
|||
this.dirty = false; |
|||
} |
|||
} |
|||
|
|||
textIsNotEmpty(text: string): boolean { |
|||
return (text && text.length > 0); |
|||
} |
|||
|
|||
clear() { |
|||
this.countryFormGroup.get('country').patchValue('', {emitEvent: true}); |
|||
setTimeout(() => { |
|||
this.countryInput.nativeElement.blur(); |
|||
this.countryInput.nativeElement.focus(); |
|||
}, 0); |
|||
} |
|||
|
|||
private fetchCountries(searchText: string): Country[] { |
|||
this.searchText = searchText; |
|||
if (!this.initSearchData) { |
|||
this.allCountries.forEach(country => { |
|||
country.searchText = `${country.name} ${country.iso2}`.toLowerCase(); |
|||
}); |
|||
this.initSearchData = true; |
|||
} |
|||
if (isNotEmptyStr(searchText)) { |
|||
const filterValue = searchText.toLowerCase(); |
|||
return this.allCountries.filter(country => country.searchText.includes(filterValue)); |
|||
} |
|||
return this.allCountries; |
|||
} |
|||
|
|||
private updateView(value: Country | null) { |
|||
if (this.modelValue?.name !== value?.name) { |
|||
this.modelValue = value; |
|||
this.propagateChange(this.modelValue); |
|||
if (value) { |
|||
this.selectCountryCode.emit(value.iso2); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
Loading…
Reference in new issue