81 lines
2.0 KiB
JavaScript
81 lines
2.0 KiB
JavaScript
export default class {
|
|
constructor(rateId, rate = {}) {
|
|
this.rateId = rateId;
|
|
this.rate = rate;
|
|
}
|
|
|
|
html() {
|
|
this.html = this.template({ rateId: this.rateId, rate: this.rate });
|
|
|
|
this.eventListeners();
|
|
|
|
return this.html;
|
|
}
|
|
|
|
updateState() {
|
|
this.html.find('.country select').trigger('change');
|
|
}
|
|
|
|
template(data) {
|
|
let template = _.template($('#tax-rate-template').html());
|
|
|
|
return $(template(data));
|
|
}
|
|
|
|
eventListeners(html) {
|
|
this.html.find('.country select').on('change', (e) => {
|
|
if (e.currentTarget.value) {
|
|
this.changeState(e.currentTarget.value);
|
|
}
|
|
});
|
|
|
|
this.html.on('click', '.delete-row', this.delete);
|
|
}
|
|
|
|
changeState(countryCode) {
|
|
this.getStateField().prop('disabled', true);
|
|
|
|
let oldState = this.getStateField().val();
|
|
|
|
$.getJSON(route('countries.states.index', countryCode), (states) => {
|
|
this.getStateField()
|
|
.replaceWith(this.getStateTemplate(states))
|
|
.prop('disabled', false);
|
|
|
|
if (oldState) {
|
|
this.getStateField().val(oldState);
|
|
}
|
|
});
|
|
}
|
|
|
|
getStateField() {
|
|
let id = $.escapeSelector(`rates.${this.rateId}.state`);
|
|
|
|
return $(`#${id}`);
|
|
}
|
|
|
|
getStateTemplate(states) {
|
|
if ($.isEmptyObject(states)) {
|
|
return this.getInputStateTemplate();
|
|
}
|
|
|
|
return this.getSelectStateTemplate(states);
|
|
}
|
|
|
|
getInputStateTemplate() {
|
|
let template = _.template($('#state-input-template').html());
|
|
|
|
return template({ rateId: this.rateId });
|
|
}
|
|
|
|
getSelectStateTemplate(states) {
|
|
let template = _.template($('#state-select-template').html());
|
|
|
|
return template({ rateId: this.rateId, states });
|
|
}
|
|
|
|
delete(e) {
|
|
$(e.currentTarget).closest('.tax-rate').remove();
|
|
}
|
|
}
|