Added datalist auto completion

front/core/components/datalist/index.js

@@ -27,7 +27,7 @@ export default class Datalist extends Textfield {
         value = value == '' || value == null ? null : value;
         oldValue = oldValue == '' || oldValue == null ? null : oldValue;
 
-        this.refreshSelection();
+        if (oldValue === undefined) this.refreshSelection();
 
         if (!value || value === oldValue && this.modelData != null) return;
 

modules/client/front/address/create/index.html

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

modules/client/front/address/create/index.js

@@ -11,26 +11,6 @@ export default class Controller extends Component {
         };
     }
 
-    get postcodeSelection() {
-        return this._postcodeSelection;
-    }
-
-    set postcodeSelection(selection) {
-        this._postcodeSelection = selection;
-
-        if (!selection) return;
-
-        const town = selection.town;
-        const province = town.province;
-
-        this.address.city = town.name;
-        this.address.provinceFk = province.id;
-    }
-
-    onResponse(response) {
-        this.address.postalCode = response.code;
-    }
-
     onSubmit() {
         this.$.watcher.submit().then(res => {
             if (this.address.isDefaultAddress)
@@ -51,6 +31,46 @@ export default class Controller extends Component {
         return this.$http.post(`CustomsAgents`, this.newCustomsAgent)
             .then(res => this.address.customsAgentFk = res.data.id);
     }
+
+    get town() {
+        return this._town;
+    }
+
+    // Town auto complete
+    set town(selection) {
+        this._town = selection;
+
+        if (!selection) return;
+
+        const province = selection.province;
+        const postcodes = selection.postcodes;
+
+        this.address.provinceId = province.id;
+
+        if (postcodes.length === 1)
+            this.address.postalCode = postcodes[0].code;
+    }
+
+    get postcode() {
+        return this._postcode;
+    }
+
+    // Postcode auto complete
+    set postcode(selection) {
+        this._postcode = selection;
+
+        if (!selection) return;
+
+        const town = selection.town;
+        const province = town.province;
+
+        this.address.city = town.name;
+        this.address.provinceId = province.id;
+    }
+
+    onResponse(response) {
+        this.address.postalCode = response.code;
+    }
 }
 
 Controller.$inject = ['$element', '$scope'];

modules/client/front/address/edit/index.html

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

modules/client/front/address/edit/index.js

@@ -15,10 +15,6 @@ export default class Controller extends Component {
         this.$state.go('client.card.address.index');
     }
 
-    onResponse(response) {
-        this.address.postalCode = response.code;
-    }
-
     onSubmit() {
         this.$.watcher.submit()
             .then(() => this.$.model.save(true))
@@ -39,6 +35,50 @@ export default class Controller extends Component {
         return this.$http.post(`CustomsAgents`, this.newCustomsAgent)
             .then(res => this.address.customsAgentFk = res.data.id);
     }
+
+    get town() {
+        return this._town;
+    }
+
+    // Town auto complete
+    set town(selection) {
+        const oldValue = this._town;
+        this._town = selection;
+
+        if (!selection || oldValue === null || oldValue === undefined)
+            return;
+
+        const province = selection.province;
+        const postcodes = selection.postcodes;
+
+        this.address.provinceFk = province.id;
+
+        if (postcodes.length === 1)
+            this.address.postalCode = postcodes[0].code;
+    }
+
+    get postcode() {
+        return this._postcode;
+    }
+
+    // Postcode auto complete
+    set postcode(selection) {
+        const oldValue = this._postcode;
+        this._postcode = selection;
+
+        if (!selection || oldValue === null || oldValue === undefined)
+            return;
+
+        const town = selection.town;
+        const province = town.province;
+
+        this.address.city = town.name;
+        this.address.provinceFk = province.id;
+    }
+
+    onResponse(response) {
+        this.address.postalCode = response.code;
+    }
 }
 
 ngModule.component('vnClientAddressEdit', {

modules/client/front/create/index.html

@@ -96,9 +96,16 @@
                 show-field="code"
                 rule>
                 <tpl-item>
-                    {{code}}, {{town.name}} - {{town.province.name}} 
+                    {{code}} - {{town.name}} ({{town.province.name}}, 
-                    ({{town.province.country.country}})
+                    {{town.province.country.country}})
                 </tpl-item>
+                <append>
+                    <vn-icon-button
+                        icon="add_circle"
+                        vn-tooltip="New postcode"
+                        ng-click="postcode.open()">
+                    </vn-icon-button>
+                </append>
             </vn-datalist>
         </vn-horizontal>
         <vn-horizontal>

modules/client/front/create/index.js

@@ -12,10 +12,6 @@ export default class Controller {
         };
     }
 
-    onResponse(response) {
-        this.client.postcode = response.code;
-    }
-
     onSubmit() {
         return this.$.watcher.submit().then(
             json => this.$state.go('client.card.basicData', {id: json.data.id})
@@ -76,6 +72,10 @@ export default class Controller {
         this.client.provinceFk = province.id;
         this.client.countryFk = country.id;
     }
+
+    onResponse(response) {
+        this.client.postcode = response.code;
+    }
 }
 
 Controller.$inject = ['$scope', '$state', '$http', '$translate', 'vnApp'];

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

@@ -64,7 +64,10 @@
                 where="{provinceFk: province.selection.id}"
                 show-field="name"
                 value-field="name">
-                <tpl-item>{{name}} ({{province.name}}, {{province.country.country}})</tpl-item>
+                <tpl-item>
+                    {{name}}, {{province.name}}
+                    ({{province.country.country}})
+                </tpl-item>
             </vn-datalist>
             <vn-datalist vn-one
                 label="Postcode"
@@ -77,7 +80,17 @@
                 value-field="code"
                 show-field="code"
                 rule>
-                <tpl-item>{{code}} - {{town.name}} ({{town.province.name}}, {{town.province.country.country}})</tpl-item>
+                <tpl-item>
+                    {{code}} - {{town.name}} ({{town.province.name}}, 
+                    {{town.province.country.country}})
+                </tpl-item>
+                <append>
+                    <vn-icon-button
+                        icon="add_circle"
+                        vn-tooltip="New postcode"
+                        ng-click="postcode.open()">
+                    </vn-icon-button>
+                </append>
             </vn-datalist>
         </vn-horizontal>
         <vn-horizontal>
@@ -148,3 +161,8 @@
     message="Found a client with this data"
     on-accept="$ctrl.onAcceptDuplication()">
 </vn-confirm>
+<!-- New postcode dialog -->
+<vn-client-postcode
+    vn-id="postcode"
+    on-response="$ctrl.onResponse($response)">
+</vn-client-postcode>

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

@@ -86,7 +86,8 @@ export default class Controller extends Component {
         const oldValue = this._province;
         this._province = selection;
 
-        if (!selection || !oldValue) return;
+        if (!selection || oldValue === undefined)
+            return;
 
         const country = selection.country;
 
@@ -102,7 +103,8 @@ export default class Controller extends Component {
         const oldValue = this._town;
         this._town = selection;
 
-        if (!selection || !oldValue) return;
+        if (!selection || oldValue === undefined)
+            return;
 
         const province = selection.province;
         const country = province.country;
@@ -123,17 +125,24 @@ export default class Controller extends Component {
     set postcode(selection) {
         const oldValue = this._postcode;
         this._postcode = selection;
-        console.log(selection);
+        console.log(oldValue);
-        if (!selection || !oldValue) return;
+        if (!selection || oldValue === undefined)
+            return;
+
+        console.log('setter');
 
         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;
     }
+
+    onResponse(response) {
+        this.client.postcode = response.code;
+    }
 }
 
 ngModule.component('vnClientFiscalData', {

modules/client/front/postcode/index.html

@@ -1,7 +1,7 @@
 <vn-dialog class="edit"
     vn-id="postcodeDialog"
     on-open="$ctrl.onOpen()"
-    on-response="$ctrl.onResponse($response)">
+    on-accept="$ctrl.onAccept()">
     <tpl-body>
         <h5 class="vn-py-sm" translate>New postcode</h5>
         <p translate>Please, ensure you put the correct data!</p>

modules/client/front/postcode/index.js

@@ -35,26 +35,21 @@ class Controller extends Component {
         this.$.postcode.focus();
     }
 
-    onResponse(response) {
+    onAccept() {
-        if (response == 'accept') {
         try {
             if (!this.data.code)
                 throw new Error(`The postcode can't be empty`);
             if (!this.data.townFk)
                 throw new Error(`The town can't be empty`);
 
-                this.$http.patch(`postcodes`, this.data).then(response => {
+            this.$http.patch(`postcodes`, this.data).then(res => {
-                    if (response.data) {
                 this.vnApp.showMessage(this.$translate.instant('The postcode has been saved'));
-
+                this.emit('response', {$response: res.data});
-                        this.emit('response', {response: response.data});
-                    }
             });
         } catch (e) {
             this.vnApp.showError(this.$translate.instant(e.message));
             return false;
         }
-        }
         return true;
     }
 }