country picker

zero.Backoffice.UI/app/editor/fields/editor-field-extensions.d.ts

@@ -150,4 +150,9 @@ declare module 'zero/schemas'
     template?: any;
     addLabel?: string;
   }
+
+  export interface PickerFieldOptions
+  {
+    limit?: number;
+  }
 }

zero.Backoffice.UI/app/modules/countries/editor-countrypicker.vue

@@ -0,0 +1,17 @@
+<template>
+  <ui-countrypicker :value="value" @input="$emit('input', $event)" :limit="limit" :disabled="config.disabled" />
+</template>
+
+
+<script>
+  export default {
+    props: {
+      value: String,
+      config: Object,
+      limit: {
+        type: Number,
+        default: 1
+      }
+    }
+  }
+</script>

zero.Backoffice.UI/app/modules/countries/plugin.ts

@@ -8,10 +8,25 @@ export default {
   {
     app.vue.component('ui-countrypicker', defineAsyncComponent(() => import('./ui-countrypicker.vue')));
 
+    app.fieldType('countryPicker', defineAsyncComponent(() => import('./editor-countrypicker.vue')));
+
     app.route({ name: 'countries', path: '/settings/countries', component: () => import('./countries.vue') });
     app.route({ name: 'countries-edit', path: '/settings/countries/edit/:id?', component: () => import('./country.vue'), props: true });
 
     app.schema('countries', () => import('./schemas/list'));
     app.schema('countries:edit', () => import('./schemas/editor'));
   }
-} as ZeroPlugin;
+} as ZeroPlugin;
+
+
+declare module 'zero/schemas'
+{
+  export interface ZeroEditorField
+  {
+    /**
+     * Renders a country picker
+     * @param {PickerFieldOptions} [options] - Custom options
+     */
+    countryPicker(options?: PickerFieldOptions): ZeroEditorField;
+  }
+}

zero.Backoffice.UI/app/modules/countries/ui-countrypicker.vue

@@ -1,19 +1,19 @@
 <template>
   <div class="ui-countrypicker" :class="{'is-disabled': disabled }">
-    country picker
-    <!--<ui-pick :config="pickerConfig" :value="value" @input="onChange" :disabled="disabled" />-->
+    <ui-pick :config="pickerConfig" :value="value" @input="onChange" :disabled="disabled" />
   </div>
 </template>
 
 
 <script>
   import api from './api';
+  import { extendObject } from '../../utils';
 
   export default {
     name: 'uiCountrypicker',
 
     props: {
-      modelValue: {
+      value: {
         type: [String, Array],
         default: null
       },
@@ -36,26 +36,40 @@
       pickerConfig: {}
     }),
 
-    //created()
-    //{
-    //  this.pickerConfig = _extend({
-    //    scope: 'country',
-    //    items: CountriesApi.getForPicker,
-    //    previews: CountriesApi.getPreviews,
-    //    limit: this.limit,
-    //    multiple: this.limit > 1,
-    //    preview: {
+    created()
+    {
+      const mapItem = item => ({
+        id: item.id,
+        name: item.name,
+        icon: 'flag-' + item.code.toLowerCase()
+      });
+
+      this.pickerConfig = extendObject({
+        scope: 'country',
+        items: async search =>
+        {
+          const res = await api.getByQuery({ search });
+          return Promise.resolve(res.data.map(mapItem));
+        },
+        previews: async ids =>
+        {
+          const res = await api.getByQuery({ ids });
+          return Promise.resolve(res.data.map(mapItem));
+        },
+        limit: this.limit,
+        multiple: this.limit > 1,
+        preview: {
           
-    //    }
-    //  }, this.options);
-    //},
+        }
+      }, this.options);
+    },
 
 
-    //methods: {
-    //  onChange(value)
-    //  {
-    //    this.$emit('input', value);
-    //  }
-    //}
+    methods: {
+      onChange(value)
+      {
+        this.$emit('input', value);
+      }
+    }
   }
 </script>