postcode autocompletion fixes
gitea/salix/master This commit looks good
Details
gitea/salix/master This commit looks good
Details
This commit is contained in:
parent
e7511aefdc
commit
2ff374e7ba
|
@ -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'
|
||||||
|
|
|
@ -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);
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
|
@ -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"
|
||||||
|
|
|
@ -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);
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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'];
|
||||||
|
|
Loading…
Reference in New Issue