refs #5888 remove duplicate code

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

@@ -0,0 +1,36 @@
+<vn-crud-model
+    vn-id="getLocations"
+    auto-load="true"
+    url="Postcodes/location"
+    data="$ctrl.locations"
+    order="code">
+</vn-crud-model>
+<vn-autocomplete
+    vn-two
+    vn-id="location"
+    label="Location"
+    vn-name="location"
+    ng-model="$ctrl.postCode"
+    data="$ctrl.locations"
+    show-field="name"
+    value-field="id">
+    <tpl-item class="address">
+        <span>
+            {{name}}
+        </span>
+    </tpl-item>
+    <append>
+        <vn-icon-button
+            ng-click="$event.preventDefault(); postcode.open()"
+            icon="add_circle"
+            vn-tooltip="New postcode">
+        </vn-icon-button>
+    </append>
+</vn-autocomplete>
+
+<!-- New postcode dialog -->
+<vn-geo-postcode
+    vn-id="postcode"
+    on-response="$ctrl.onResponse($response)">
+</vn-geo-postcode>
+

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

@@ -0,0 +1,81 @@
+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 locations() {
+        return this._locations;
+    }
+
+    set locations(value) {
+        if (!value) return;
+        value = value.map(l => {
+            return {
+                id: l.code,
+                name: l.code + ' ' + l.town.name + ', ' + l.town.province.name + ', ' + l.town.province.country.country,
+                postalCode: l.code,
+                townFk: l.town.id,
+                townName: l.town.name,
+                provinceFk: l.town.province.id,
+                provinceName: l.town.province.name,
+                countryFk: l.town.province.country.id,
+                countryName: l.town.province.country.country,
+            };
+        });
+        this._locations = value;
+    }
+
+    get postCode() {
+        return this._postCode;
+    }
+
+    set postCode(value) {
+        if (!value) return;
+        this._postCode = value;
+        if (!this.locations) return;
+        const selection = this.locations.find(location => location.id == value);
+        this.town = selection.townFk;
+        this.townName = selection.townName;
+        this.province = selection.provinceFk;
+        this.provinceName = selection.provinceName;
+        this.country = selection.countryFk;
+        this.countryName = selection.countryName;
+    }
+
+    async onResponse(response) {
+        await this.$.getLocations.refresh();
+        this.postCode = response.code;
+        // :TODO refesh displayed
+        this.$.location.refreshDisplayed();
+    }
+}
+
+ngModule.vnComponent('vnAddressAutocomplete', {
+    template: require('./index.html'),
+    controller: AddressAutocomplete,
+    bindings: {
+        postCode: '=?',
+        town: '=?',
+        province: '=?',
+        country: '=?',
+        townName: '=?',
+        provinceName: '=?',
+        countryName: '=?',
+    }
+});

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/client/front/fiscal-data/index.html

@@ -137,6 +137,14 @@
                 rule>
             </vn-autocomplete>
         </vn-horizontal>
+        <vn-horizontal>
+            <vn-address-autocomplete
+                label="Address"
+                post-code="$ctrl.client.postcode"
+                town-name="$ctrl.client.city"
+                province="$ctrl.client.provinceFk"
+                country="$ctrl.client.countryFk"/>
+        </vn-horizontal>
         <vn-horizontal>
             <vn-check
                 label="Active"
@@ -216,7 +224,3 @@
     message="Found a client with this data"
     on-accept="$ctrl.onAcceptDuplication()">
 </vn-confirm>
-<vn-geo-postcode
-    vn-id="postcode"
-    on-response="$ctrl.onResponse($response)">
-</vn-geo-postcode>

modules/client/front/fiscal-data/index.js

@@ -103,80 +103,6 @@ export default class Controller extends Section {
 
         this.$.$apply();
     }
-
-    get province() {
-        return this._province;
-    }
-
-    // Province auto complete
-    set province(selection) {
-        const oldValue = this._province;
-        this._province = selection;
-
-        if (!selection || !oldValue) return;
-
-        const country = selection.country;
-
-        if (!this.client.countryFk)
-            this.client.countryFk = country.id;
-    }
-
-    get town() {
-        return this._town;
-    }
-
-    // Town auto complete
-    set town(selection) {
-        const oldValue = this._town;
-        this._town = selection;
-
-        if (!selection || !oldValue) return;
-
-        const province = selection.province;
-        const country = province.country;
-        const postcodes = selection.postcodes;
-
-        if (!this.client.provinceFk)
-            this.client.provinceFk = province.id;
-
-        if (!this.client.countryFk)
-            this.client.countryFk = country.id;
-
-        if (!this.client.postcode && postcodes.length === 1)
-            this.client.postcode = postcodes[0].code;
-    }
-
-    get postcode() {
-        return this._postcode;
-    }
-
-    // Postcode auto complete
-    set postcode(selection) {
-        const oldValue = this._postcode;
-        this._postcode = selection;
-
-        if (!selection || !oldValue) return;
-
-        const town = selection.town;
-        const province = town.province;
-        const country = province.country;
-
-        if (!this.client.city)
-            this.client.city = town.name;
-
-        if (!this.client.provinceFk)
-            this.client.provinceFk = province.id;
-
-        if (!this.client.countryFk)
-            this.client.countryFk = country.id;
-    }
-
-    onResponse(response) {
-        this.client.postcode = response.code;
-        this.client.city = response.city;
-        this.client.provinceFk = response.provinceFk;
-        this.client.countryFk = response.countryFk;
-    }
 }
 
 ngModule.vnComponent('vnClientFiscalData', {

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

@@ -190,6 +190,15 @@
                 <tpl-item>{{name}} ({{country.country}})</tpl-item>
             </vn-autocomplete>
         </vn-horizontal>
+        <vn-horizontal>
+            <vn-address-autocomplete
+                label="Address"
+                post-code="$ctrl.supplier.postCode"
+                town-name="$ctrl.supplier.city"
+                province="$ctrl.supplier.provinceFk"
+                country="$ctrl.supplier.countryFk"
+            />
+        </vn-horizontal>
         <vn-horizontal>
             <vn-autocomplete
                 vn-two
@@ -230,8 +239,4 @@
         </vn-button>
     </vn-button-bar>
 </form>
-<!-- New postcode dialog -->
+
-<vn-geo-postcode
-    vn-id="postcode"
-    on-response="$ctrl.onResponse($response)">
-</vn-geo-postcode>

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

@@ -1,85 +1,9 @@
 import ngModule from '../module';
 import Section from 'salix/components/section';
 
-export default class Controller extends Section {
-    get province() {
-        return this._province;
-    }
-
-    // Province auto complete
-    set province(selection) {
-        const oldValue = this._province;
-        this._province = selection;
-
-        if (!selection || !oldValue) return;
-
-        const country = selection.country;
-
-        if (!this.supplier.countryFk)
-            this.supplier.countryFk = country.id;
-    }
-
-    get town() {
-        return this._town;
-    }
-
-    // Town auto complete
-    set town(selection) {
-        const oldValue = this._town;
-        this._town = selection;
-
-        if (!selection || !oldValue) return;
-
-        const province = selection.province;
-        const country = province.country;
-        const postcodes = selection.postcodes;
-
-        if (!this.supplier.provinceFk)
-            this.supplier.provinceFk = province.id;
-
-        if (!this.supplier.countryFk)
-            this.supplier.countryFk = country.id;
-
-        if (!this.supplier.postCode && postcodes.length === 1)
-            this.supplier.postCode = postcodes[0].code;
-    }
-
-    get postcode() {
-        return this._postcode;
-    }
-
-    // Postcode auto complete
-    set postcode(selection) {
-        const oldValue = this._postcode;
-        this._postcode = selection;
-
-        if (!selection || !oldValue) return;
-
-        const town = selection.town;
-        const province = town.province;
-        const country = province.country;
-
-        if (!this.supplier.city)
-            this.supplier.city = town.name;
-
-        if (!this.supplier.provinceFk)
-            this.supplier.provinceFk = province.id;
-
-        if (!this.supplier.countryFk)
-            this.supplier.countryFk = country.id;
-    }
-
-    onResponse(response) {
-        this.supplier.postCode = response.code;
-        this.supplier.city = response.city;
-        this.supplier.provinceFk = response.provinceFk;
-        this.supplier.countryFk = response.countryFk;
-    }
-}
-
 ngModule.vnComponent('vnSupplierFiscalData', {
     template: require('./index.html'),
-    controller: Controller,
+    controller: Section,
     bindings: {
         supplier: '<'
     }