postcode autocompletion fixes
gitea/salix/master This commit looks good Details

This commit is contained in:
Joan Sanchez 2019-08-02 08:27:55 +02:00
parent e7511aefdc
commit 2ff374e7ba
6 changed files with 62 additions and 41 deletions

View File

@ -1,6 +1,7 @@
import ngModule from '../../module'; import ngModule from '../../module';
import Input from '../../lib/input'; import Input from '../../lib/input';
import assignProps from '../../lib/assign-props'; import assignProps from '../../lib/assign-props';
import {mergeWhere} from 'vn-loopback/util/filter';
import './style.scss'; import './style.scss';
/** /**
@ -163,6 +164,8 @@ export default class Autocomplete extends Input {
else else
where[this.valueField] = this._field; where[this.valueField] = this._field;
where = mergeWhere(where, this.fetchFunction);
let filter = { let filter = {
fields: this.$.dropDown.getFields(), fields: this.$.dropDown.getFields(),
where: where where: where
@ -292,6 +295,17 @@ export default class Autocomplete extends Input {
this.assignDropdownProps(); this.assignDropdownProps();
this.$.dropDown.show(this.input, search); this.$.dropDown.show(this.input, search);
} }
get fetchFunction() {
return this._fetchFunction;
}
set fetchFunction(value) {
this._fetchFunction = value;
if (value)
this.refreshSelection();
}
} }
Autocomplete.$inject = ['$element', '$scope', '$http', '$transclude', '$translate', '$interpolate']; Autocomplete.$inject = ['$element', '$scope', '$http', '$transclude', '$translate', '$interpolate'];
@ -317,7 +331,8 @@ ngModule.component('vnAutocomplete', {
order: '@?', order: '@?',
limit: '<?', limit: '<?',
translateFields: '<?', translateFields: '<?',
searchFunction: '&?' searchFunction: '&?',
fetchFunction: '<?'
}, },
transclude: { transclude: {
tplItem: '?tplItem' tplItem: '?tplItem'

View File

@ -71,7 +71,6 @@ describe('Client', () => {
expect(controller.address.city).toEqual('New York'); expect(controller.address.city).toEqual('New York');
expect(controller.address.provinceFk).toEqual(1); expect(controller.address.provinceFk).toEqual(1);
expect(controller.address.countryFk).toEqual(2);
}); });
}); });
}); });

View File

@ -60,9 +60,10 @@
url="/api/Postcodes/location" url="/api/Postcodes/location"
fields="['code', 'townFk']" fields="['code', 'townFk']"
field="$ctrl.address.postalCode" field="$ctrl.address.postalCode"
where="{townFk: town.selection.id}"
selection="$ctrl.postcodeSelection" selection="$ctrl.postcodeSelection"
search-function="{code: $search}" search-function="{code: $search}"
where="{townFk: town.selection.id}" fetch-function="{townFk: town.selection.id}"
order="code, townFk" order="code, townFk"
show-field="code" show-field="code"
value-field="code" value-field="code"

View File

@ -79,7 +79,6 @@ describe('Client', () => {
expect(controller.address.city).toEqual('New York'); expect(controller.address.city).toEqual('New York');
expect(controller.address.provinceFk).toEqual(1); expect(controller.address.provinceFk).toEqual(1);
expect(controller.address.countryFk).toEqual(2);
}); });
}); });
}); });

View File

@ -28,12 +28,39 @@
</vn-textfield> </vn-textfield>
</vn-horizontal> </vn-horizontal>
<vn-horizontal> <vn-horizontal>
<vn-autocomplete vn-id="country" vn-one
field="$ctrl.client.countryFk"
url="/api/Countries"
show-field="country"
value-field="id"
label="Country">
</vn-autocomplete>
<vn-autocomplete vn-id="province" vn-one
field="$ctrl.client.provinceFk"
url="/api/Provinces"
where="{countryFk: country.selection.id}"
show-field="name"
value-field="id"
label="Province">
</vn-autocomplete>
</vn-horizontal>
<vn-horizontal>
<vn-autocomplete vn-id="town" vn-one
label="City"
url="/api/Towns"
fields="['id', 'name']"
where="{provinceFk: province.selection.id}"
show-field="name"
value-field="name"
field="$ctrl.client.city">
</vn-autocomplete>
<vn-autocomplete vn-id="postcode" vn-one <vn-autocomplete vn-id="postcode" vn-one
field="$ctrl.client.postcode"
on-change="$ctrl.setLocation()"
search-function="{code: $search}"
url="/api/Postcodes/location" url="/api/Postcodes/location"
fields="['code', 'townFk']" fields="['code', 'townFk']"
field="$ctrl.client.postcode"
selection="$ctrl.postcodeSelection"
search-function="{code: $search}"
where="{townFk: town.selection.id}"
show-field="code" show-field="code"
value-field="code" value-field="code"
label="Postcode"> label="Postcode">
@ -42,31 +69,6 @@
({{town.province.country.country}}) ({{town.province.country.country}})
</tpl-item> </tpl-item>
</vn-autocomplete> </vn-autocomplete>
<vn-autocomplete vn-one
label="City"
url="/api/Towns"
show-field="name"
value-field="name"
field="$ctrl.client.city">
</vn-autocomplete>
</vn-horizontal>
<vn-horizontal>
<vn-autocomplete vn-one
disabled="true"
field="$ctrl.client.provinceFk"
url="/api/Provinces"
show-field="name"
value-field="id"
label="Province">
</vn-autocomplete>
<vn-autocomplete vn-one
disabled="true"
field="$ctrl.client.countryFk"
url="/api/Countries"
show-field="country"
value-field="id"
label="Country">
</vn-autocomplete>
</vn-horizontal> </vn-horizontal>
<vn-horizontal pad-small-v> <vn-horizontal pad-small-v>
<vn-check <vn-check

View File

@ -57,16 +57,21 @@ export default class Controller {
} }
} }
setLocation() { get postcodeSelection() {
const location = this.$.postcode.selection; return this._postcodeSelection;
if (!location || !location.town) return; }
const town = location.town;
const province = town.province;
const country = province.country;
this.client.city = location.town.name; set postcodeSelection(selection) {
this.client.provinceFk = province.id; const hasValue = this._postcodeSelection;
this.client.countryFk = country.id; this._postcodeSelection = selection;
if (!selection || !hasValue) return;
const town = selection.town;
const province = town.province;
this.address.city = town.name;
this.address.provinceFk = province.id;
} }
} }
Controller.$inject = ['$scope', '$http', 'vnApp', '$translate']; Controller.$inject = ['$scope', '$http', 'vnApp', '$translate'];