Create client geo auto fill

back/models/province.json

@@ -1,46 +1,53 @@
 {
-  "name": "Province",
-  "description": "Provinces of every country",
-  "base": "VnModel",
-  "options": {
-    "mysql": {
-      "table": "province"
-    }
-  },
-  "properties": {
-    "id": {
-      "type": "Number",
-      "id": true,
-      "description": "Identifier"
+    "name": "Province",
+    "description": "Provinces of every country",
+    "base": "VnModel",
+    "options": {
+        "mysql": {
+            "table": "province"
+        }
     },
-    "name": {
-      "type": "string",
-      "required": true
-    }
-  },
-  "relations": {
-    "country": {
-      "type": "belongsTo",
-      "model": "Country",
-      "foreignKey": "countryFk"
+    "properties": {
+        "id": {
+            "type": "Number",
+            "id": true,
+            "description": "Identifier"
+        },
+        "name": {
+            "type": "string",
+            "required": true
+        }
     },
-    "warehouse": {
-      "type": "belongsTo",
-      "model": "Warehouse",
-      "foreignKey": "warehouseFk"
+    "relations": {
+        "country": {
+            "type": "belongsTo",
+            "model": "Country",
+            "foreignKey": "countryFk"
+        },
+        "warehouse": {
+            "type": "belongsTo",
+            "model": "Warehouse",
+            "foreignKey": "warehouseFk"
+        },
+        "zone": {
+            "type": "belongsTo",
+            "model": "Zone",
+            "foreignKey": "zoneFk"
+        }
     },
-    "zone": {
-      "type": "belongsTo",
-      "model": "Zone",
-      "foreignKey": "zoneFk"
-    }
-  },
-  "acls": [
-    {
-      "accessType": "READ",
-      "principalType": "ROLE",
-      "principalId": "$everyone",
-      "permission": "ALLOW"
-    }
-  ]
+    "scopes": {
+		"location": {
+			"include": {
+                "relation": "country"
+            }
+		}
+	},
+    "acls": [
+        {
+            "accessType": "READ",
+            "principalType": "ROLE",
+            "principalId": "$everyone",
+            "permission": "ALLOW"
+        }
+    ]
 }

front/core/components/datalist/index.js

@@ -52,7 +52,14 @@ export default class Datalist extends Textfield {
 
     validSelection(selection) {
         return this.modelData && this.modelData.find(item => {
-            return item[this.valueField] == selection;
+            let dataValue = item[this.valueField];
+            if (typeof(dataValue) === 'string')
+                dataValue = dataValue.toLowerCase();
+
+            if (typeof(selection) === 'string')
+                selection = selection.toLowerCase();
+
+            return dataValue == selection;
         });
     }
 

modules/client/front/create/index.html

@@ -49,76 +49,57 @@
             </vn-textfield>
         </vn-horizontal>
         <vn-horizontal>
-            <vn-autocomplete
-                vn-id="country"
-                vn-one
+            <vn-autocomplete vn-id="country" vn-one
                 ng-model="$ctrl.client.countryFk"
                 url="Countries"
                 show-field="country"
                 value-field="id"
                 label="Country">
             </vn-autocomplete>
-            <vn-autocomplete
-                vn-id="province"
-                vn-one
-                url="Provinces"
+            <vn-autocomplete vn-id="province" vn-one
+                label="Province"
                 ng-model="$ctrl.client.provinceFk"
+                selection="$ctrl.province"
+                url="Provinces/location"
+                fields="['id', 'name', 'countryFk']"
                 where="{countryFk: country.selection.id}"
                 show-field="name"
                 value-field="id"
-                label="Province">
+                rule>
+                <tpl-item>{{name}} ({{country.country}})</tpl-item>
             </vn-autocomplete>
         </vn-horizontal>
         <vn-horizontal>
-            <vn-textfield
-                vn-one
+            <vn-datalist vn-id="town" vn-one 
                 label="City"
                 ng-model="$ctrl.client.city"
-                rule>
-            </vn-textfield>
-            <!--
-            <vn-autocomplete vn-id="town" vn-one 
-                label="City"
-                url="Towns"
-                fields="['id', 'name']"
+                selection="$ctrl.town"
+                url="Towns/location"
+                fields="['id', 'name', 'provinceFk']"
                 where="{provinceFk: province.selection.id}"
                 show-field="name"
-                value-field="name"
-                ng-model="$ctrl.client.city">
-            </vn-autocomplete>
-            <vn-icon-button
-                vn-auto
-                class="vn-my-md"
-                icon="add_circle"
-                vn-tooltip="New postcode"
-                ng-click="postcode.open()">
-            </vn-icon-button>
-            -->
-            <vn-textfield
-                vn-one
+                value-field="name">
+                <tpl-item>
+                    {{name}}, {{province.name}} 
+                    ({{province.country.country}})
+                </tpl-item>
+            </vn-datalist>
+            <vn-datalist vn-one
                 label="Postcode"
                 ng-model="$ctrl.client.postcode"
-                rule>
-            </vn-textfield>
-            <!--        
-            <vn-autocomplete
-                vn-one
+                selection="$ctrl.postcode"
                 url="Postcodes/location"
-                fields="['code', 'townFk']"
-                ng-model="$ctrl.client.postcode"
-                selection="$ctrl.postcodeSelection"
-                search-function="{code: $search}"
+                fields="['code','townFk']"
                 where="{townFk: town.selection.id}"
                 order="code, townFk"
-                show-field="code"
                 value-field="code"
-                label="Postcode">
+                show-field="code"
+                rule>
                 <tpl-item>
                     {{code}}, {{town.name}} - {{town.province.name}} 
                     ({{town.province.country.country}})
                 </tpl-item>
-            </vn-autocomplete>
-            -->
+            </vn-datalist>
         </vn-horizontal>
         <vn-horizontal>
             <vn-textfield

modules/client/front/create/index.js

@@ -12,12 +12,59 @@ export default class Controller {
         };
     }
 
-    get postcodeSelection() {
-        return this._postcodeSelection;
+    onResponse(response) {
+        this.client.postcode = response.code;
     }
 
-    set postcodeSelection(selection) {
-        this._postcodeSelection = selection;
+    onSubmit() {
+        return this.$.watcher.submit().then(
+            json => this.$state.go('client.card.basicData', {id: json.data.id})
+        );
+    }
+
+    get province() {
+        return this._province;
+    }
+
+    // Province auto complete
+    set province(selection) {
+        this._province = selection;
+
+        if (!selection) return;
+
+        const country = selection.country;
+
+        this.client.countryFk = country.id;
+    }
+
+    get town() {
+        return this._town;
+    }
+
+    // Town auto complete
+    set town(selection) {
+        this._town = selection;
+
+        if (!selection) return;
+
+        const province = selection.province;
+        const country = province.country;
+        const postcodes = selection.postcodes;
+
+        this.client.provinceFk = province.id;
+        this.client.countryFk = country.id;
+
+        if (postcodes.length === 1)
+            this.client.postcode = postcodes[0].code;
+    }
+
+    get postcode() {
+        return this._postcode;
+    }
+
+    // Postcode auto complete
+    set postcode(selection) {
+        this._postcode = selection;
 
         if (!selection) return;
 
@@ -29,17 +76,8 @@ export default class Controller {
         this.client.provinceFk = province.id;
         this.client.countryFk = country.id;
     }
-
-    onResponse(response) {
-        this.client.postcode = response.code;
-    }
-
-    onSubmit() {
-        return this.$.watcher.submit().then(
-            json => this.$state.go('client.card.basicData', {id: json.data.id})
-        );
-    }
 }
+
 Controller.$inject = ['$scope', '$state', '$http', '$translate', 'vnApp'];
 
 ngModule.component('vnClientCreate', {

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

@@ -33,9 +33,7 @@
             </vn-textfield>
         </vn-horizontal>
         <vn-horizontal>
-            <vn-autocomplete
-                vn-one
-                vn-id="country"
+            <vn-autocomplete vn-id="country" vn-one
                 ng-model="$ctrl.client.countryFk"
                 url="Countries"
                 show-field="country"
@@ -43,51 +41,44 @@
                 label="Country"
                 rule>
             </vn-autocomplete>
-            <vn-autocomplete
-                vn-one
-                vn-id="province"
+            <vn-autocomplete vn-id="province" vn-one
+                label="Province"
                 ng-model="$ctrl.client.provinceFk"
-                url="Provinces"
+                selection="$ctrl.province"
+                url="Provinces/location"
+                fields="['id', 'name', 'countryFk']"
                 where="{countryFk: country.selection.id}"
                 show-field="name"
                 value-field="id"
-                label="Province"
                 rule>
+                <tpl-item>{{name}} ({{country.country}})</tpl-item>
             </vn-autocomplete>
         </vn-horizontal>
         <vn-horizontal>
-            <vn-textfield
-                vn-one
+            <vn-datalist vn-id="town" vn-one 
                 label="City"
                 ng-model="$ctrl.client.city"
-                rule>
-            </vn-textfield>
-            <vn-textfield
-                vn-one
-                label="Postcode"
-                ng-model="$ctrl.client.postcode"
-                rule>
-            </vn-textfield>
-            <!-- <vn-autocomplete vn-id="town" vn-one 
-                label="City"
-                url="Towns"
-                fields="['id', 'name']"
+                selection="$ctrl.town"
+                url="Towns/location"
+                fields="['id', 'name', 'provinceFk']"
                 where="{provinceFk: province.selection.id}"
                 show-field="name"
-                value-field="name"
-                ng-model="$ctrl.client.city">
-            </vn-autocomplete>
-            <vn-autocomplete vn-id="postcode" vn-one
-                url="Postcodes/location"
-                fields="['code', 'townFk']"
+                value-field="name">
+                <tpl-item>{{name}} ({{province.name}}, {{province.country.country}})</tpl-item>
+            </vn-datalist>
+            <vn-datalist vn-one
+                label="Postcode"
                 ng-model="$ctrl.client.postcode"
-                search-function="{code: $search}"
+                selection="$ctrl.postcode"
+                url="Postcodes/location"
+                fields="['code','townFk']"
                 where="{townFk: town.selection.id}"
                 order="code, townFk"
-                show-field="code"
                 value-field="code"
-                label="Postcode">         
-            </vn-autocomplete> -->
+                show-field="code"
+                rule>
+                <tpl-item>{{code}} - {{town.name}} ({{town.province.name}}, {{town.province.country.country}})</tpl-item>
+            </vn-datalist>
         </vn-horizontal>
         <vn-horizontal>
             <vn-check

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

@@ -76,6 +76,64 @@ export default class Controller extends Component {
 
         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;
+
+        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;
+
+        this.client.provinceFk = province.id;
+        this.client.countryFk = country.id;
+
+        if (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;
+        console.log(selection);
+        if (!selection || !oldValue) return;
+
+        const town = selection.town;
+        const province = town.province;
+        const country = province.country;
+        console.log(province.id);
+        this.client.city = town.name;
+        this.client.provinceFk = province.id;
+        this.client.countryFk = country.id;
+    }
 }
 
 ngModule.component('vnClientFiscalData', {