refs #5888 feat: address-autocomplete component

front/core/components/address-autocomplete/index.html

@@ -0,0 +1,21 @@
+<vn-horizontal>
+    <vn-textfield
+        vn-one
+        label="Street"
+        ng-model="$ctrl.addressData.street"
+        rule
+        vn-focus>
+    </vn-textfield>
+</vn-horizontal>
+<tpl-item class="address">
+    <span>
+        {{::street}}, {{::postCode}}, {{::city}}, {{::province.name}}
+    </span>
+</tpl-item>
+<append>
+    <vn-icon-button
+        ui-sref="client.card.address.edit({id: $ctrl.clientId, addressId: $ctrl.addressId})"
+        icon="edit"
+        vn-tooltip="Edit address">
+    </vn-icon-button>
+</append>

front/core/components/address-autocomplete/index.js

@@ -0,0 +1,41 @@
+import ngModule from '../../module';
+// import Autocomplete from '../autocomplete';
+import Component from '../../lib/component';
+
+/**
+ * Input with option selector.
+ *
+ * @property {String} showFiled The data field name that should be shown
+ * @property {String} valueField The data field name that should be used as value
+ * @property {Array} data Static data for the autocomplete
+ * @property {Object} intialData An initial data to avoid the server request used to get the selection
+ * @property {Boolean} multiple Whether to allow multiple selection
+ * @property {Object} selection Current object selected
+ *
+ * @event change Thrown when value is changed
+ */
+export default class AddressAutocomplete extends Component {
+    constructor(...args) {
+        super(...args);
+    }
+
+    get addressData() {
+        return this._addressData;
+    }
+
+    set addressData(value) {
+        console.log(value);
+        this._addressData = value;
+        this.url = 'Postcodes/location';
+        // if (value)
+        //     this.input.value = value.street;
+    }
+}
+
+ngModule.vnComponent('vnAddressAutocomplete', {
+    template: require('./index.html'),
+    controller: AddressAutocomplete,
+    bindings: {
+        addressData: '<?'
+    }
+});

front/core/components/address-autocomplete/index.spec.js

@@ -0,0 +1,54 @@
+describe('Component vnAutocomplete', () => {
+    let $element;
+    let controller;
+    let data = {id: 1, name: 'Bruce Wayne'};
+
+    beforeEach(ngModule('vnCore'));
+
+    beforeEach(inject(($compile, $rootScope) => {
+        $element = $compile(`<vn-autocomplete></vn-autocomplete>`)($rootScope);
+        controller = $element.controller('vnAutocomplete');
+    }));
+
+    afterEach(() => {
+        $element.remove();
+    });
+
+    describe('url() setter', () => {
+        it(`should set the url property`, () => {
+            controller.url = '/TestModels';
+
+            expect(controller.url).toEqual('/TestModels');
+        });
+    });
+
+    describe('field() setter/getter', () => {
+        it(`should set the field property`, () => {
+            controller.field = 'id';
+
+            expect(controller.field).toEqual('id');
+        });
+    });
+
+    describe('selection property', () => {
+        beforeEach(() => {
+            controller.field = data.id;
+        });
+
+        it(`should set selection finding an existing item in the initialData property`, () => {
+            controller.initialData = data;
+
+            expect(controller.selection).toEqual(data);
+        });
+
+        it(`should set selection finding an existing item in the data property`, () => {
+            controller.data = [data];
+
+            expect(controller.selection).toEqual(data);
+        });
+
+        it(`should set selection to null when can't find an existing item in the data property`, () => {
+            expect(controller.selection).toEqual(null);
+        });
+    });
+});

front/core/components/index.js

@@ -55,3 +55,4 @@ import './datalist';
 import './contextmenu';
 import './rating';
 import './smart-table';
+import './address-autocomplete';

modules/supplier/front/fiscal-data/index.html

@@ -190,6 +190,13 @@
                 <tpl-item>{{name}} ({{country.country}})</tpl-item>
             </vn-autocomplete>
         </vn-horizontal>
+        <vn-horizontal>
+            <vn-address-autocomplete
+                label="Address"
+                address-data="$ctrl.supplier"
+                ng-model="$ctrl.supplier.postCode"
+            />
+        </vn-horizontal>
         <vn-horizontal>
             <vn-autocomplete
                 vn-two