From ffb4e8ae3c7c0104e1ee7e5ffbeacdf2490f0753 Mon Sep 17 00:00:00 2001
From: Tobias Klika <cee@live.at>
Date: Mon, 3 Jan 2022 01:20:29 +0100
Subject: [PATCH] country picker

---
 .../fields/editor-field-extensions.d.ts       |  5 ++
 .../countries/editor-countrypicker.vue        | 17 ++++++
 .../app/modules/countries/plugin.ts           | 17 +++++-
 .../modules/countries/ui-countrypicker.vue    | 56 ++++++++++++-------
 4 files changed, 73 insertions(+), 22 deletions(-)
 create mode 100644 zero.Backoffice.UI/app/modules/countries/editor-countrypicker.vue

diff --git a/zero.Backoffice.UI/app/editor/fields/editor-field-extensions.d.ts b/zero.Backoffice.UI/app/editor/fields/editor-field-extensions.d.ts
index cf48efdc..8765e62f 100644
--- a/zero.Backoffice.UI/app/editor/fields/editor-field-extensions.d.ts
+++ b/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;
+  }
 }
\ No newline at end of file
diff --git a/zero.Backoffice.UI/app/modules/countries/editor-countrypicker.vue b/zero.Backoffice.UI/app/modules/countries/editor-countrypicker.vue
new file mode 100644
index 00000000..607dc596
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/zero.Backoffice.UI/app/modules/countries/plugin.ts b/zero.Backoffice.UI/app/modules/countries/plugin.ts
index a253ce50..f40de37b 100644
--- a/zero.Backoffice.UI/app/modules/countries/plugin.ts
+++ b/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;
\ No newline at end of file
+} as ZeroPlugin;
+
+
+declare module 'zero/schemas'
+{
+  export interface ZeroEditorField
+  {
+    /**
+     * Renders a country picker
+     * @param {PickerFieldOptions} [options] - Custom options
+     */
+    countryPicker(options?: PickerFieldOptions): ZeroEditorField;
+  }
+}
\ No newline at end of file
diff --git a/zero.Backoffice.UI/app/modules/countries/ui-countrypicker.vue b/zero.Backoffice.UI/app/modules/countries/ui-countrypicker.vue
index 34356f88..b039b36b 100644
--- a/zero.Backoffice.UI/app/modules/countries/ui-countrypicker.vue
+++ b/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>
\ No newline at end of file