232 lines
4.7 KiB
JavaScript
232 lines
4.7 KiB
JavaScript
/* eslint-disable no-lonely-if */
|
|
/* global Vue, wu_block_ui, ajaxurl, wu_placeholdersl10n */
|
|
(function($) {
|
|
|
|
$(document).ready(function() {
|
|
|
|
/**
|
|
* Vue
|
|
*/
|
|
if ($('#wu-template-placeholders').length) {
|
|
|
|
window.wu_placeholders = new Vue({
|
|
el: '#wu-template-placeholders',
|
|
data: {
|
|
tax_category: 'default',
|
|
switching: false,
|
|
creating: false,
|
|
create_name: '',
|
|
toggle: false,
|
|
loading: true,
|
|
saving: false,
|
|
initialLoading: true,
|
|
error: false,
|
|
changed: false,
|
|
data: {
|
|
placeholders: [],
|
|
},
|
|
delete: [],
|
|
saveMessage: '',
|
|
errorMessage: '',
|
|
rate_type: 'standard_rate',
|
|
},
|
|
watch: {
|
|
data: {
|
|
deep: true,
|
|
handler() {
|
|
|
|
if (this.initialLoading) {
|
|
|
|
this.initialLoading = false;
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
this.changed = true;
|
|
|
|
},
|
|
},
|
|
loading(new_value) {
|
|
|
|
if (new_value === true) {
|
|
|
|
window.wu_blocked_table = wu_block_ui('table.wp-list-table');
|
|
|
|
} else {
|
|
|
|
if (typeof window.wu_blocked_table !== 'undefined') {
|
|
|
|
window.wu_blocked_table.unblock();
|
|
|
|
} // end if;
|
|
|
|
} // end if;
|
|
|
|
},
|
|
},
|
|
mounted() {
|
|
|
|
this.loading = true;
|
|
|
|
this.pull_data(true);
|
|
|
|
$('.wu-tooltip-vue').tipTip();
|
|
|
|
},
|
|
created() {
|
|
|
|
// Create the event.
|
|
const event = document.createEvent('Event');
|
|
|
|
// Define that the event name is 'build'.
|
|
event.initEvent('vue_loaded', true, true);
|
|
|
|
event.vue = this;
|
|
|
|
// target can be any Element or other EventTarget.
|
|
window.dispatchEvent(event);
|
|
|
|
},
|
|
computed: {
|
|
selected() {
|
|
|
|
return $(this.data.placeholders).filter(function(index, item) {
|
|
|
|
return item.selected;
|
|
|
|
});
|
|
|
|
},
|
|
},
|
|
methods: {
|
|
refresh(e) {
|
|
|
|
e.preventDefault();
|
|
|
|
this.loading = true;
|
|
|
|
this.pull_data();
|
|
|
|
},
|
|
select_all(event) {
|
|
|
|
const toggle = $(event.target).is(':checked');
|
|
|
|
this.data.placeholders = $.map(this.data.placeholders, function(item) {
|
|
|
|
item.selected = toggle;
|
|
|
|
return item;
|
|
|
|
});
|
|
|
|
},
|
|
pull_data() {
|
|
|
|
const that = this;
|
|
|
|
jQuery.getJSON(ajaxurl + '?action=wu_get_placeholders').done(function(response) {
|
|
|
|
that.loading = false;
|
|
|
|
that.data = response.data;
|
|
|
|
})
|
|
.fail(function(error) {
|
|
|
|
that.loading = false;
|
|
|
|
that.error = true;
|
|
|
|
that.errorMessage = error.statusText;
|
|
|
|
});
|
|
|
|
},
|
|
add_row() {
|
|
|
|
Vue.set(this.data, 'placeholders', this.data.placeholders.concat([
|
|
{
|
|
placeholder: '',
|
|
content: '',
|
|
selected: false,
|
|
},
|
|
]));
|
|
|
|
this.$forceUpdate();
|
|
|
|
},
|
|
delete_rows() {
|
|
|
|
this.delete = this.delete.concat(this.selected.get());
|
|
|
|
// eslint-disable-next-line no-alert
|
|
const are_you_sure = confirm(wu_placeholdersl10n.confirm_message);
|
|
|
|
if (are_you_sure) {
|
|
|
|
const cleaned_list = $(this.data.placeholders).filter(function(index, item) {
|
|
|
|
return ! item.selected;
|
|
|
|
});
|
|
|
|
Vue.set(this.data, 'placeholders', cleaned_list.get());
|
|
|
|
this.$forceUpdate();
|
|
|
|
} // end if
|
|
|
|
},
|
|
save() {
|
|
|
|
const that = this;
|
|
|
|
that.saving = true;
|
|
|
|
$.post({
|
|
url: ajaxurl + '?action=wu_save_placeholders&' + $('#nonce_form').serialize(),
|
|
data: JSON.stringify({
|
|
placeholders: that.data.placeholders,
|
|
}),
|
|
dataType: 'json',
|
|
contentType: 'application/json; charset=utf-8',
|
|
}).success(function(data) {
|
|
|
|
that.saving = false;
|
|
|
|
that.changed = false;
|
|
|
|
that.delete = [];
|
|
|
|
that.saveMessage = data.message;
|
|
|
|
if (data.code === 'success') {
|
|
|
|
that.loading = true;
|
|
|
|
that.initialLoading = true;
|
|
|
|
that.pull_data();
|
|
|
|
}
|
|
|
|
setInterval(function() {
|
|
|
|
that.saveMessage = '';
|
|
|
|
}, 6000);
|
|
|
|
});
|
|
|
|
},
|
|
},
|
|
});
|
|
|
|
} // end if;
|
|
|
|
});
|
|
|
|
}(jQuery));
|