fix: Only show country dropdown without autocomplete (#5652)

Co-authored-by: iamareebjamal <jamal.areeb@gmail.com>
fossasia · Nov 20, 2020 · 70c2285 · 70c2285 · vercel · Nov 20, 2020
1 parent 9c25bec
commit 70c2285
Show file tree

Hide file tree

Showing 11 changed files with 77 additions and 110 deletions.
diff --git a/app/components/country-dropdown.ts b/app/components/country-dropdown.ts
@@ -0,0 +1,14 @@
+import Component from '@glimmer/component';
+import { orderBy, filter } from 'lodash-es';
+import { paymentCountries } from 'open-event-frontend/utils/dictionary/payment';
+import { countries, Country } from 'open-event-frontend/utils/dictionary/demography';
+
+export default class CountryDropdown extends Component {
+  get countries(): Country[] {
+    return orderBy(countries, 'name');
+  }
+
+  get paymentCountries(): Country[] {
+    return orderBy(filter(countries, country => paymentCountries.includes(country.code)), 'name');
+  }
+}
diff --git a/app/templates/components/country-dropdown.hbs b/app/templates/components/country-dropdown.hbs
@@ -0,0 +1,24 @@
+<form class="field">
+    <label class={{if @required 'required'}}>{{@placeholder}}</label>
+    <UiDropdown
+        @class="search selection"
+        @selected={{@val}}
+        @forceSelection={{false}}
+        @fullTextSearch={{true}}>
+    <Input
+        @type="hidden"
+        @autocomplete="no"
+        @value={{@val}}
+        @id={{@id}} />
+    <i class="dropdown icon"></i>
+    <div class="default text">{{t 'Select country'}}</div>
+    <div class="menu">
+        {{#each (if @paymentCountries this.paymentCountries this.countries) as |country|}}
+            <div class="item" data-value="{{country.name}}">
+            <i class="{{lowercase country.code}} flag"></i>
+            {{country.name}}
+            </div>
+        {{/each}}
+    </div>
+    </UiDropdown>
+</form>
diff --git a/app/templates/components/forms/admin/settings/billing.hbs b/app/templates/components/forms/admin/settings/billing.hbs
@@ -45,22 +45,11 @@
     <label class="required" for="adminBillingPaypalEmail">{{t 'Paypal Email'}}</label>
     <Input @type="email" @id="adminBillingPaypalEmail" @value={{this.model.adminBillingPaypalEmail}} />
   </div>
-  <div class="field">
-    <label class="required">{{t 'Country'}}</label>
-    <UiDropdown @class="search selection" @selected={{this.model.adminBillingCountry}} @forceSelection={{false}} @fullTextSearch={{true}}>
-      <Input @type="hidden" @autocomplete="no" @id="adminBillingCountry" @value={{this.model.adminBillingCountry}} />
-      <i class="dropdown icon"></i>
-      <div class="default text">{{t 'Select country'}}</div>
-      <div class="menu">
-        {{#each this.countries as |country|}}
-          <div class="item" data-value="{{country.name}}">
-            <i class="{{lowercase country.code}} flag"></i>
-            {{country.name}}
-          </div>
-        {{/each}}
-      </div>
-    </UiDropdown>
-  </div>
+  <CountryDropdown
+    @required={{true}}
+    @placeholder={{t 'Country'}}
+    @val={{this.model.adminBillingCountry}}
+    @id="adminBillingCountry" />
   <div class="field">
     <label for="adminBillingTaxInfo">{{t 'Tax ID'}}</label>
     <Input @type="text" @id="adminBillingTaxInfo" @value={{this.model.adminBillingTaxInfo}} />

diff --git a/app/templates/components/forms/admin/settings/ticket-fees-form.hbs b/app/templates/components/forms/admin/settings/ticket-fees-form.hbs
@@ -52,27 +52,11 @@
   {{#each this.ticketFees as |ticketFee|}}
     <div class="ui five column very relaxed grid">
       <div class="ui field three wide column">
-        <label class="required">{{t 'Select country'}}</label>
-        <UiDropdown
-          @class="search selection"
-          @selected={{ticketFee.country}}
-          @forceSelection={{false}}
-          @fullTextSearch={{true}}>
-          <Input
-            @type="hidden"
-            @autocomplete="no"
-            @value={{ticketFee.country}} />
-          <i class="dropdown icon"></i>
-          <div class="default text">{{t 'Select country'}}</div>
-          <div class="menu">
-            {{#each this.paymentCountries as |paymentCountry|}}
-              <div class="item" data-value="{{paymentCountry.name}}">
-                <i class="{{lowercase paymentCountry.code}} flag"></i>
-                {{paymentCountry.name}}
-              </div>
-            {{/each}}
-          </div>
-        </UiDropdown>
+        <CountryDropdown
+          @required={{true}}
+          @paymentCountries={{true}}
+          @placeholder={{t 'Select country'}}
+          @val={{ticketFee.country}} />
       </div>
       <div class="ui field four wide column">
         <label class="required">{{t 'Select currency'}}</label>

diff --git a/app/templates/components/forms/orders/order-form.hbs b/app/templates/components/forms/orders/order-form.hbs
@@ -61,7 +61,7 @@
         </div>
         {{#each this.allFields.attendee as |field|}}
           {{#if field.isIncluded}}
-            <div class="field">
+            <form class="field">
               <label class="{{if field.isRequired 'required'}}" for="name">{{field.name}}</label>
               {{#if (is-input-field field.type) }}
                 {{#if field.isLongText}}
@@ -140,7 +140,7 @@
                   </div>
                 </UiDropdown>
               {{/if}}
-            </div>
+            </form>
           {{/if}}
         {{/each}}
       {{/each}}

diff --git a/app/templates/components/forms/session-speaker-form.hbs b/app/templates/components/forms/session-speaker-form.hbs
@@ -138,7 +138,7 @@
     {{#if this.addNewSpeaker}}
       {{#each this.allFields.speaker as |field|}}
         {{#if field.isIncluded}}
-          <div class="field">
+          <form class="field">
             <label class="{{if field.isRequired 'required'}}" for="name">{{field.name}}</label>
             {{#if (is-input-field field.type) }}
               {{#if field.isLongText}}
@@ -242,7 +242,7 @@
                 </UiDropdown>
               {{/if}}
             {{/if}}
-          </div>
+          </form>
         {{/if}}
       {{/each}}
     {{/if}}
@@ -256,7 +256,7 @@
     {{/if}}
     {{#each this.allFields.speaker as |field|}}
       {{#if field.isIncluded}}
-        <div class="field">
+        <form class="field">
           <label class="{{if field.isRequired 'required'}}" for="name">{{field.name}}</label>
           {{#if (is-input-field field.type) }}
             {{#if field.isLongText}}
@@ -364,7 +364,7 @@
               </UiDropdown>
             {{/if}}
           {{/if}}
-        </div>
+        </form>
       {{/if}}
     {{/each}}
   {{/if}}

diff --git a/app/templates/components/forms/user-payment-info-form.hbs b/app/templates/components/forms/user-payment-info-form.hbs
@@ -54,30 +54,10 @@
       @id="state"
       @value={{this.userBillingInfo.billingState}} />
   </div>
-  <div class="field">
-    <label >{{t 'Country'}}</label>
-    <UiDropdown
-      @class="search selection"
-      @selected={{this.userBillingInfo.billingCountry}}
-      @forceSelection={{false}}
-      @fullTextSearch={{true}}>
-      <Input
-        @type="hidden"
-        @autocomplete="no"
-        @id="country"
-        @value={{this.userBillingInfo.billingCountry}} />
-      <i class="dropdown icon"></i>
-      <div class="default text">{{t 'Select country'}}</div>
-      <div class="menu">
-        {{#each this.countries as |country|}}
-          <div class="item" data-value="{{country.name}}">
-            <i class="{{lowercase country.code}} flag"></i>
-            {{country.name}}
-          </div>
-        {{/each}}
-      </div>
-    </UiDropdown>
-  </div>
+  <CountryDropdown
+    @placeholder={{t 'Country'}}
+    @val={{this.userBillingInfo.billingCountry}}
+    @id="country" />
   <div class="field">
     <label for="taxID">{{t 'Tax ID or Business ID'}}</label>
     <Input

diff --git a/app/templates/components/forms/wizard/basic-details-step.hbs b/app/templates/components/forms/wizard/basic-details-step.hbs
@@ -315,30 +315,12 @@
     <div class="field">
       <h4>{{t 'Add Payment Details'}}</h4>
       <div class="two fields">
-        <div class="field">
-          <label class="required">{{t 'Select country'}}</label>
-          <UiDropdown
-            @class="search selection"
-            @selected={{this.data.event.paymentCountry}}
-            @forceSelection={{false}}
-            @fullTextSearch={{true}}>
-            <Input
-              @type="hidden"
-              @autocomplete="no"
-              @id="payment_country"
-              @value={{this.data.event.paymentCountry}} />
-            <i class="dropdown icon"></i>
-            <div class="default text">{{t 'Select country'}}</div>
-            <div class="menu">
-              {{#each this.paymentCountries as |paymentCountry|}}
-                <div class="item" data-value="{{paymentCountry.name}}">
-                  <i class="{{lowercase paymentCountry.code}} flag"></i>
-                  {{paymentCountry.name}}
-                </div>
-              {{/each}}
-            </div>
-          </UiDropdown>
-        </div>
+      <CountryDropdown
+        @required={{true}}
+        @paymentCountries={{true}}
+        @placeholder={{t 'Select country'}}
+        @val={{this.data.event.paymentCountry}}
+        @id={{'payment_country'}} />
         <div class="field">
           <label class="required">{{t 'Select currency'}}</label>
           <UiDropdown

diff --git a/app/templates/components/modals/tax-info-modal.hbs b/app/templates/components/modals/tax-info-modal.hbs
@@ -4,22 +4,11 @@
 </div>
 <div class="y-scrollable scrollable-modal content">
   <form class="ui form" autocomplete="off" {{action 'updateTaxInfo' on='submit' preventDefault=true}}>
-    <div class="field">
-      <label class="required">{{t 'Choose country'}}</label>
-      <UiDropdown @class="search selection" @selected={{this.tax.country}} @forceSelection={{false}} @fullTextSearch={{true}}>
-        <Input @type="hidden" @autocomplete="tax-country" @id="tax_country" @value={{this.tax.country}} />
-        <i class="dropdown icon"></i>
-        <div class="default text">{{t 'Select country'}}</div>
-        <div class="menu">
-          {{#each this.countries as |country|}}
-            <div class="item" data-value="{{country.name}}">
-              <i class="{{lowercase country.code}} flag"></i>
-              {{country.name}}
-            </div>
-          {{/each}}
-        </div>
-      </UiDropdown>
-    </div>
+    <CountryDropdown
+      @required={{true}}
+      @placeholder={{t 'Choose country'}}
+      @val={{this.tax.country}}
+      @id="tax_country" />
     <div class="field">
       <label class="required">{{t 'Tax name'}}</label>
       <Input @type="text" @id="tax_name" @value={{this.tax.name}} />

diff --git a/app/templates/components/widgets/forms/billing-info.hbs b/app/templates/components/widgets/forms/billing-info.hbs
@@ -39,7 +39,7 @@
 @id="zip_code"
 @value={{this.data.zipcode}} />
 </div>
-<div class="field">
+<form class="field">
   <label class="required">{{t 'Select country'}}</label>
   <UiDropdown
 @class="search selection"
@@ -61,4 +61,4 @@
       {{/each}}
     </div>
   </UiDropdown>
-</div>
+</form>
diff --git a/app/utils/dictionary/demography.ts b/app/utils/dictionary/demography.ts
@@ -1,8 +1,13 @@
+export interface Country {
+  name: string;
+  code: string;
+}
+
 /**
  * Using a lean list of countries instead of an external dependency.
  * All the libraries have a lot of extra data which is of no use to us at this point and unnecessarily takes up more space.
  */
-export const countries = [
+export const countries: Country[] = [
   {
     name : 'Andorra',
     code : 'AD'