| 1 |
import ApiMixin from '../Api/ApiMixin.js'; |
| 2 |
import eventBus from "../eventBus.js"; |
| 3 |
const template = ` |
| 4 |
<select ref="wooMlSubGroup" class="woo-ml-group-select"> |
| 5 |
<option value="" disabled >{{ placeholder }}</option> |
| 6 |
</select> |
| 7 |
`; |
| 8 |
|
| 9 |
const CustomSelect = { |
| 10 |
props: { |
| 11 |
options: { |
| 12 |
type: Array, |
| 13 |
required: true, |
| 14 |
}, |
| 15 |
placeholder: { |
| 16 |
type: String, |
| 17 |
default: '', |
| 18 |
}, |
| 19 |
modelValue: { |
| 20 |
type: [String, Number, Array], |
| 21 |
default: null, |
| 22 |
}, |
| 23 |
selectedGroup: { |
| 24 |
type: Object, |
| 25 |
default: null, |
| 26 |
}, |
| 27 |
}, |
| 28 |
data() { |
| 29 |
return { |
| 30 |
pagination: 0, |
| 31 |
} |
| 32 |
}, |
| 33 |
template, |
| 34 |
mixins: [ApiMixin], |
| 35 |
mounted() { |
| 36 |
this.initSelect2(this.selectedGroup); |
| 37 |
eventBus.on('trigger-group-created', (group) => { |
| 38 |
this.initSelect2(group); |
| 39 |
}); |
| 40 |
}, |
| 41 |
methods: { |
| 42 |
initSelect2(group = null) { |
| 43 |
// Initialize select2 with the provided options and value |
| 44 |
const vm = this; |
| 45 |
jQuery(this.$el) |
| 46 |
.select2({ |
| 47 |
ajax: { |
| 48 |
url: woo_mailerlite_admin_data.ajaxUrl, |
| 49 |
method: "post", |
| 50 |
data: function (params) { |
| 51 |
return { |
| 52 |
filter: params.term, |
| 53 |
page: params.page || 1, |
| 54 |
action: "woo_mailerlite_get_groups", |
| 55 |
nonce: woo_mailerlite_admin_data.woo_mailerlite_admin_nonce, |
| 56 |
} |
| 57 |
}, |
| 58 |
// delay: 1000, |
| 59 |
dataType: 'json', |
| 60 |
processResults: function (data, params) { |
| 61 |
let groupSelect = []; |
| 62 |
if (data.data) { |
| 63 |
for (let [key, value] of Object.entries(data.data)) { |
| 64 |
groupSelect.push({id : value.id, text: value.name}); |
| 65 |
} |
| 66 |
} |
| 67 |
if (data.pagination?.next === 'classic') { |
| 68 |
data.pagination = !!data.data.length; |
| 69 |
} |
| 70 |
return { |
| 71 |
results: groupSelect, |
| 72 |
pagination: { |
| 73 |
more: data.pagination |
| 74 |
} |
| 75 |
}; |
| 76 |
}, |
| 77 |
// cache: true, |
| 78 |
placeholder: 'Search for a group', |
| 79 |
}, |
| 80 |
theme: 'mailerlite' |
| 81 |
}) |
| 82 |
.val(this.value) // Set initial value |
| 83 |
.trigger('change') |
| 84 |
.on('change', function () { |
| 85 |
vm.$emit('update:modelValue', jQuery(this).val()); |
| 86 |
}); |
| 87 |
if (group) { |
| 88 |
jQuery(this.$el).append(jQuery('<option>', { |
| 89 |
value: group.id, |
| 90 |
text: group.name |
| 91 |
})); |
| 92 |
jQuery(this.$el).val(group.id).trigger('change'); |
| 93 |
// jQuery(this.$el).trigger({ |
| 94 |
// type: 'select2:select', |
| 95 |
// params: {id: group.id, text: group.name} |
| 96 |
// }); |
| 97 |
} |
| 98 |
}, |
| 99 |
}, |
| 100 |
watch: { |
| 101 |
value(newValue) { |
| 102 |
jQuery(this.$el).val(newValue).trigger('change'); |
| 103 |
}, |
| 104 |
options(newOptions) { |
| 105 |
jQuery(this.$el).select2('destroy'); |
| 106 |
this.initSelect2(); |
| 107 |
}, |
| 108 |
}, |
| 109 |
destroyed() { |
| 110 |
jQuery(this.$el).select2('destroy'); |
| 111 |
}, |
| 112 |
}; |
| 113 |
|
| 114 |
export default CustomSelect; |
| 115 |
|
