Merge branch 'master' of github.com:Philip2809/thingsboard into improvement/country-autocomplete

2 years ago · 55cb74510d
4 changed files with 75 additions and 263 deletions
--- a/ui-ngx/src/app/modules/home/models/contact.models.ts
+++ b/ui-ngx/src/app/modules/home/models/contact.models.ts
@ -14,258 +14,6 @@
 /// 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})?)',
--- a/ui-ngx/src/app/shared/components/contact.component.html
+++ b/ui-ngx/src/app/shared/components/contact.component.html
@ -18,11 +18,13 @@
 <section [formGroup]="parentForm">
  <mat-form-field class="mat-block">
    <mat-label translate>contact.country</mat-label>
-    <mat-select formControlName="country">
-      <mat-option *ngFor="let country of countries" [value]="country">
-        {{ country }}
+    <input type="text" matInput [formControl]="parentForm.get('country')" [matAutocomplete]="countryAutoComplete">
+    <mat-autocomplete #countryAutoComplete="matAutocomplete" [displayWith]="displayCountryWithFlag" (optionSelected)="onCountryChange($event)">
+      <mat-option *ngFor="let country of countriesFiltered | async" [value]="country.name">
+        <span style="font-size: 20px;">{{country.flag}}</span>
+        <span> {{country.name }}</span>
      </mat-option>
-    </mat-select>
+    </mat-autocomplete>
  </mat-form-field>
  <div fxLayout.gt-sm="row" fxLayoutGap.gt-sm="10px">
    <mat-form-field class="mat-block">
@ -55,7 +57,9 @@
    <mat-label translate>contact.address2</mat-label>
    <input matInput formControlName="address2">
  </mat-form-field>
-  <tb-phone-input [required]="false"
+  <tb-phone-input #phoneInput
+                  [required]="false"
+                  [defaultCountry]="phoneInputDefaultCountry"
                  label="{{ 'contact.phone' | translate }}"
                  [enableFlagsSelect]="true"
                  formControlName="phone">
--- a/ui-ngx/src/app/shared/components/contact.component.ts
+++ b/ui-ngx/src/app/shared/components/contact.component.ts
@ -14,21 +14,66 @@
 /// limitations under the License.
 ///

-import { Component, Input } from '@angular/core';
+import { Component, Input, OnInit, ViewChild } from '@angular/core';
 import { UntypedFormGroup } from '@angular/forms';
-import { COUNTRIES } from '@home/models/contact.models';
-
+import { Country, CountryData } from '../models/country.models';
+import { Observable, map, startWith } from 'rxjs';
+import { PhoneInputComponent } from './phone-input.component';
+import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
@Component({
  selector: 'tb-contact',
-  templateUrl: './contact.component.html'
+  templateUrl: './contact.component.html',
+  providers: [
+    CountryData
+  ]
 })
-export class ContactComponent {
+export class ContactComponent implements OnInit {

  @Input()
  parentForm: UntypedFormGroup;

  @Input() isEdit: boolean;
+  @Input() phoneInputDefaultCountry = 'US';
+
+  @ViewChild('phoneInput') phoneInput: PhoneInputComponent | undefined;
+
+  countries = this.countryData.allCountries;
+  countriesFiltered: Observable<Country[]>;
+
+  constructor(private countryData: CountryData) {
+    this.displayCountryWithFlag = this.displayCountryWithFlag.bind(this);
+  }
+
+  ngOnInit() {
+    this.countriesFiltered = this.parentForm.get('country').valueChanges
+      .pipe(
+        startWith(''),
+        map((countryName: string) => this._filterCountries(countryName))
+      );
+  }
+
+  private _filterCountries(countryName: string): Country[] {
+    const filterValue = countryName.toLowerCase();
+    return this.countries.filter(country => this.displayCountryWithFlag(country.name).toLowerCase().includes(filterValue));
+  }

-  countries = COUNTRIES;
+  displayCountryWithFlag(countryName: string): string {
+    const country = this.countries.find(c => c.name === countryName);
+    if (!country) {
+      return '';
+    }
+    return country ? `${country.flag} ${country.name}` : '';
+  }

+  onCountryChange(select: MatAutocompleteSelectedEvent) {
+    // Get the selected country and check if the phone number is empty
+    // If it is, set the country code to the selected country
+    const countryName = select.option.value;
+    const country = this.countries.find(c => c.name === countryName);
+    if (country && this.phoneInput) {
+      if (!this.phoneInput.phoneFormGroup.get('phoneNumber').value) {
+        this.phoneInput.phoneFormGroup.get('country').setValue(country.iso2);
+      }
+    }
+  }
 }
--- a/ui-ngx/src/app/shared/models/country.models.ts
+++ b/ui-ngx/src/app/shared/models/country.models.ts
@ -32,6 +32,7 @@ export enum CountryISO {
  Andorra = 'AD',
  Angola = 'AO',
  Anguilla = 'AI',
+  Antarctica = 'AQ',
  AntiguaAndBarbuda = 'AG',
  Argentina = 'AR',
  Armenia = 'AM',
@ -50,6 +51,8 @@ export enum CountryISO {
  Bermuda = 'BM',
  Bhutan = 'BT',
  Bolivia = 'BO',
+  BonaireAndSintEustatiusAndSaba = 'BQ',
+  BouvetIsland = 'BV',
  BosniaAndHerzegovina = 'BA',
  Botswana = 'BW',
  Brazil = 'BR',
@ -101,6 +104,7 @@ export enum CountryISO {
  France = 'FR',
  FrenchGuiana = 'GF',
  FrenchPolynesia = 'PF',
+  FrenchSouthernTerritories = 'TF',
  Gabon = 'GA',
  Gambia = 'GM',
  Georgia = 'GE',
@ -118,6 +122,7 @@ export enum CountryISO {
  GuineaBissau = 'GW',
  Guyana = 'GY',
  Haiti = 'HT',
+  HeardIslandandMcDonaldIslands = 'HM',
  Honduras = 'HN',
  HongKong = 'HK',
  Hungary = 'HU',
@ -195,6 +200,7 @@ export enum CountryISO {
  Paraguay = 'PY',
  Peru = 'PE',
  Philippines = 'PH',
+  PitcairnIslands = 'PN',
  Poland = 'PL',
  Portugal = 'PT',
  PuertoRico = 'PR',
@ -225,6 +231,7 @@ export enum CountryISO {
  SolomonIslands = 'SB',
  Somalia = 'SO',
  SouthAfrica = 'ZA',
+  SouthGeorgiaAndTheSouthSandwichIslands = 'GS',
  SouthKorea = 'KR',
  SouthSudan = 'SS',
  Spain = 'ES',
@ -280,6 +287,7 @@ export class CountryData {
    {name: 'Andorra', iso2: CountryISO.Andorra, dialCode: '376', flag: '🇦🇩'},
    {name: 'Angola', iso2: CountryISO.Angola, dialCode: '244', flag: '🇦🇴'},
    {name: 'Anguilla', iso2: CountryISO.Anguilla, dialCode: '1', flag: '🇦🇮'},
+    {name: 'Antarctica', iso2: CountryISO.Antarctica, dialCode: '672', flag: '🇦🇶'},
    {name: 'Antigua and Barbuda', iso2: CountryISO.AntiguaAndBarbuda, dialCode: '1', flag: '🇦🇬'},
    {name: 'Argentina', iso2: CountryISO.Argentina, dialCode: '54', flag: '🇦🇷'},
    {name: 'Armenia', iso2: CountryISO.Armenia, dialCode: '374', flag: '🇦🇲'},
@ -298,6 +306,8 @@ export class CountryData {
    {name: 'Bermuda', iso2: CountryISO.Bermuda, dialCode: '1', flag: '🇧🇲'},
    {name: 'Bhutan', iso2: CountryISO.Bhutan, dialCode: '975', flag: '🇧🇹'},
    {name: 'Bolivia', iso2: CountryISO.Bolivia, dialCode: '591', flag: '🇧🇴'},
+    {name: 'Bonaire, Sint Eustatius and Saba', iso2: CountryISO.BonaireAndSintEustatiusAndSaba, dialCode: '599', flag: '🇧🇶'},
+    {name: 'Bouvet Island', iso2: CountryISO.BouvetIsland, dialCode: '47', flag: '🇧🇻'},
    {name: 'Bosnia and Herzegovina', iso2: CountryISO.BosniaAndHerzegovina, dialCode: '387', flag: '🇧🇦'},
    {name: 'Botswana', iso2: CountryISO.Botswana, dialCode: '267', flag: '🇧🇼'},
    {name: 'Brazil', iso2: CountryISO.Brazil, dialCode: '55', flag: '🇧🇷'},
@ -349,6 +359,7 @@ export class CountryData {
    {name: 'France', iso2: CountryISO.France, dialCode: '33', flag: '🇫🇷'},
    {name: 'French Guiana', iso2: CountryISO.FrenchGuiana, dialCode: '594', flag: '🇬🇫'},
    {name: 'French Polynesia', iso2: CountryISO.FrenchPolynesia, dialCode: '689', flag: '🇵🇫'},
+    {name: 'French Southern Territories', iso2: CountryISO.FrenchSouthernTerritories, dialCode: '262', flag: '🇹🇫'},
    {name: 'Gabon', iso2: CountryISO.Gabon, dialCode: '241', flag: '🇬🇦'},
    {name: 'Gambia', iso2: CountryISO.Gambia, dialCode: '220', flag: '🇬🇲'},
    {name: 'Georgia', iso2: CountryISO.Georgia, dialCode: '995', flag: '🇬🇪'},
@ -366,6 +377,7 @@ export class CountryData {
    {name: 'Guinea-Bissau', iso2: CountryISO.GuineaBissau, dialCode: '245', flag: '🇬🇼'},
    {name: 'Guyana', iso2: CountryISO.Guyana, dialCode: '592', flag: '🇬🇾'},
    {name: 'Haiti', iso2: CountryISO.Haiti, dialCode: '509', flag: '🇭🇹'},
+    {name: 'Heard Island and McDonald Islands', iso2: CountryISO.HeardIslandandMcDonaldIslands, dialCode: '672', flag: '🇭🇲'},
    {name: 'Honduras', iso2: CountryISO.Honduras, dialCode: '504', flag: '🇭🇳'},
    {name: 'Hong Kong', iso2: CountryISO.HongKong, dialCode: '852', flag: '🇭🇰'},
    {name: 'Hungary', iso2: CountryISO.Hungary, dialCode: '36', flag: '🇭🇺'},
@ -443,6 +455,7 @@ export class CountryData {
    {name: 'Paraguay', iso2: CountryISO.Paraguay, dialCode: '595', flag: '🇵🇾'},
    {name: 'Peru', iso2: CountryISO.Peru, dialCode: '51', flag: '🇵🇪'},
    {name: 'Philippines', iso2: CountryISO.Philippines, dialCode: '63', flag: '🇵🇭'},
+    {name: 'Pitcairn Islands', iso2: CountryISO.PitcairnIslands, dialCode: '649', flag: '🇵🇳'},
    {name: 'Poland', iso2: CountryISO.Poland, dialCode: '48', flag: '🇵🇱'},
    {name: 'Portugal', iso2: CountryISO.Portugal, dialCode: '351', flag: '🇵🇹'},
    {name: 'Puerto Rico', iso2: CountryISO.PuertoRico, dialCode: '1', flag: '🇵🇷'},
@ -473,6 +486,8 @@ export class CountryData {
    {name: 'Solomon Islands', iso2: CountryISO.SolomonIslands, dialCode: '677', flag: '🇸🇧'},
    {name: 'Somalia', iso2: CountryISO.Somalia, dialCode: '252', flag: '🇸🇴'},
    {name: 'South Africa', iso2: CountryISO.SouthAfrica, dialCode: '27', flag: '🇿🇦'},
+    {name: 'South Georgia and the South Sandwich Islands',
+      iso2: CountryISO.SouthGeorgiaAndTheSouthSandwichIslands, dialCode: '500', flag: '🇬🇸'},
    {name: 'South Korea', iso2: CountryISO.SouthKorea, dialCode: '82', flag: '🇰🇷'},
    {name: 'South Sudan', iso2: CountryISO.SouthSudan, dialCode: '211', flag: '🇸🇸'},
    {name: 'Spain', iso2: CountryISO.Spain, dialCode: '34', flag: '🇪🇸'},