feat: Enhance Neo.form.field.Country with flags and DevRank integration (#8941)

Author: tobiu

apps/devrank/view/ControlsContainer.mjs

@@ -1,5 +1,6 @@
 import * as selection from '../../../src/selection/grid/_export.mjs';
 import Container from '../../../src/container/Base.mjs';
+import Country   from '../../../src/form/field/Country.mjs';
 import Radio     from '../../../src/form/field/Radio.mjs';
 import TabContainer from '../../../src/tab/Container.mjs';
 
@@ -48,6 +49,15 @@ class ControlsContainer extends Container {
                     name      : 'search',
                     style     : {marginTop: '.3em'},
                     width     : 200
+                }, {
+                    module    : Country,
+                    clearable : true,
+                    labelText : 'Country',
+                    labelWidth: 65,
+                    pickerWidth: null,
+                    showFlags : true,
+                    style     : {marginTop: '.3em'},
+                    width     : 200
                 }, {
                     ntype    : 'label',
                     reference: 'count-rows-label',

resources/scss/src/list/Country.scss

@@ -0,0 +1,14 @@
+.neo-country-list.neo-list {
+    .neo-country-flag {
+        display       : inline-block;
+        height        : 20px;
+        margin-right  : 10px;
+        vertical-align: middle;
+        width         : 20px;
+    }
+
+    .neo-country-text {
+        text-transform: capitalize;
+        vertical-align: middle;
+    }
+}

src/form/field/Country.mjs

@@ -19,11 +19,36 @@ class Country extends ComboBox {
          * @protected
          */
         ntype: 'countryfield',
+        /**
+         * @member {Number} pickerWidth=200
+         */
+        pickerWidth: 300,
         /**
          * @member {Boolean} showFlags_=false
          * @reactive
          */
         showFlags_: false,
+        /**
+         * @member {Object} store
+         */
+        store: {
+            data       : CountryFlags.countries,
+            keyProperty: 'code',
+            model      : {
+                fields: [
+                    {name: 'name', type: 'String'},
+                    {name: 'code', type: 'String'}
+                ]
+            },
+            sorters: [{
+                property : 'name',
+                direction: 'ASC'
+            }]
+        },
+        /**
+         * @member {String} valueField='name'
+         */
+        valueField: 'name',
         /**
          * You can either pass a field instance or a field reference
          * @member {Neo.form.field.Base|String|null} zipCodeField_=null
@@ -83,11 +108,16 @@ class Country extends ComboBox {
         let me = this;
 
         if (me.showFlags) {
-            let flagIcon = VDomUtil.find(me.vdom, me.getFlagIconId());
+            let flagIcon = VDomUtil.find(me.vdom, me.getFlagIconId()),
+                flagUrl  = CountryFlags.getFlagUrl(value);
 
             if (flagIcon) {
-                if (value) {
-                    flagIcon.vdom.src       = CountryFlags.getFlagUrl(value);
+                if (Neo.isRecord(value)) {
+                    value = value.code
+                }
+
+                if (value && flagUrl) {
+                    flagIcon.vdom.src       = flagUrl;
                     flagIcon.vdom.removeDom = false
                 } else {
                     flagIcon.vdom.src       = '';

src/list/Country.mjs

@@ -16,7 +16,11 @@ class Country extends List {
          * @member {String} ntype='countrylist'
          * @protected
          */
-        ntype: 'countrylist'
+        ntype: 'countrylist',
+        /**
+         * @member {String[]} baseCls=['neo-country-list','neo-list']
+         */
+        baseCls: ['neo-country-list', 'neo-list']
     }
 
     /**
@@ -33,15 +37,9 @@ class Country extends List {
 
         if (flagUrl) {
             flagNode = {
-                tag  : 'img',
-                cls  : ['neo-country-flag'],
-                src  : flagUrl,
-                style: {
-                    height     : '20px',
-                    marginRight: '10px',
-                    verticalAlign: 'middle',
-                    width      : '20px'
-                }
+                tag: 'img',
+                cls: ['neo-country-flag'],
+                src: flagUrl
             }
         }
 
@@ -53,7 +51,7 @@ class Country extends List {
 
         return [
             flagNode,
-            {tag: 'span', html: itemText, style: {verticalAlign: 'middle'}}
+            {tag: 'span', cls: ['neo-country-text'], html: itemText}
         ]
     }
 }