Changeset View
Changeset View
Standalone View
Standalone View
src/resources/vue/Widgets/SubscriptionSelect.vue
Show First 20 Lines • Show All 93 Lines • ▼ Show 20 Lines | export default { | ||||
sku.cost = objSku.costs.reduce((sum, current) => sum + current) | sku.cost = objSku.costs.reduce((sum, current) => sum + current) | ||||
sku.value = objSku.count | sku.value = objSku.count | ||||
sku.costs = objSku.costs | sku.costs = objSku.costs | ||||
} else { | } else { | ||||
if ('nextCost' in sku) { | if ('nextCost' in sku) { | ||||
sku.cost = sku.nextCost | sku.cost = sku.nextCost | ||||
} | } | ||||
if (!sku.readonly) { | if (!sku.readonly && this.object.skus) { | ||||
sku.enabled = false | sku.enabled = false | ||||
} | } | ||||
} | } | ||||
return sku | return sku | ||||
}) | }) | ||||
// Update all range inputs (and price) | |||||
this.$nextTick(() => { | this.$nextTick(() => { | ||||
// Update all range inputs (and price) | |||||
$(this.$el).find('input[type=range]').each((idx, elem) => { this.rangeUpdate(elem) }) | $(this.$el).find('input[type=range]').each((idx, elem) => { this.rangeUpdate(elem) }) | ||||
// Mark 'exclusive' SKUs as readonly, they can't be unchecked | |||||
this.skus.forEach(item => { | |||||
if (item.exclusive && item.enabled) { | |||||
$('#s' + item.id).find('input[type=checkbox]')[0].readOnly = true | |||||
} | |||||
}) | |||||
}) | }) | ||||
}) | }) | ||||
.catch(this.$root.errorHandler) | .catch(this.$root.errorHandler) | ||||
}, | }, | ||||
methods: { | methods: { | ||||
findSku(id) { | findSku(id) { | ||||
for (let i = 0; i < this.skus.length; i++) { | for (let i = 0; i < this.skus.length; i++) { | ||||
if (this.skus[i].id == id) { | if (this.skus[i].id == id) { | ||||
Show All 15 Lines | export default { | ||||
return | return | ||||
} | } | ||||
// TODO: Following code might not work if we change definition of forbidden/required | // TODO: Following code might not work if we change definition of forbidden/required | ||||
// or we just need more sophisticated SKU dependency rules | // or we just need more sophisticated SKU dependency rules | ||||
if (input.checked) { | if (input.checked) { | ||||
// Check if a required SKU is selected, alert the user if not | // Check if a required SKU is selected, alert the user if not | ||||
(sku.required || []).forEach(requiredHandler => { | (sku.required || []).forEach(handler => { | ||||
this.skus.forEach(item => { | this.skus.forEach(item => { | ||||
if (item.handler == requiredHandler) { | if (item.handler == handler) { | ||||
if (!$('#s' + item.id).find('input[type=checkbox]:checked').length) { | if (!$('#s' + item.id).find('input[type=checkbox]:checked').length) { | ||||
required.push(item.name) | required.push(item.name) | ||||
} | } | ||||
} | } | ||||
}) | }) | ||||
}) | }) | ||||
if (required.length) { | if (required.length) { | ||||
input.checked = false | input.checked = false | ||||
return alert(this.$t('user.skureq', { sku: sku.name, list: required.join(', ') })) | return alert(this.$t('user.skureq', { sku: sku.name, list: required.join(', ') })) | ||||
} | } | ||||
// Make sure there must be only one of 'exclusive' SKUs | |||||
if (sku.exclusive) { | |||||
input.readOnly = true | |||||
this.skus.forEach(item => { | |||||
if (sku.exclusive.includes(item.handler)) { | |||||
$('#s' + item.id).find('input[type=checkbox]').prop({ | |||||
checked: false, | |||||
readonly: false | |||||
}) | |||||
} | |||||
}) | |||||
} | |||||
} else { | } else { | ||||
// Uncheck all dependent SKUs, e.g. when unchecking Groupware we also uncheck Activesync | // Uncheck all dependent SKUs, e.g. when unchecking Groupware we also uncheck Activesync | ||||
// TODO: Should we display an alert instead? | // TODO: Should we display an alert instead? | ||||
this.skus.forEach(item => { | this.skus.forEach(item => { | ||||
if (item.required && item.required.indexOf(sku.handler) > -1) { | if (item.required && item.required.indexOf(sku.handler) > -1) { | ||||
$('#s' + item.id).find('input[type=checkbox]').prop('checked', false) | $('#s' + item.id).find('input[type=checkbox]').prop('checked', false) | ||||
} | } | ||||
}) | }) | ||||
} | } | ||||
// Uncheck+lock/unlock conflicting SKUs | // Uncheck+lock/unlock conflicting SKUs | ||||
(sku.forbidden || []).forEach(forbiddenHandler => { | (sku.forbidden || []).forEach(handler => { | ||||
this.skus.forEach(item => { | this.skus.forEach(item => { | ||||
let checkbox | let checkbox | ||||
if (item.handler == forbiddenHandler && (checkbox = $('#s' + item.id).find('input[type=checkbox]')[0])) { | if (item.handler == handler && (checkbox = $('#s' + item.id).find('input[type=checkbox]')[0])) { | ||||
if (input.checked) { | if (input.checked) { | ||||
checkbox.checked = false | checkbox.checked = false | ||||
checkbox.readOnly = true | checkbox.readOnly = true | ||||
} else { | } else { | ||||
checkbox.readOnly = false | checkbox.readOnly = false | ||||
} | } | ||||
} | } | ||||
}) | }) | ||||
Show All 22 Lines | export default { | ||||
cost = sku.cost * (value - sku.units_free) | cost = sku.cost * (value - sku.units_free) | ||||
} | } | ||||
// Update the label | // Update the label | ||||
input.prev().text(value + ' ' + sku.range.unit) | input.prev().text(value + ' ' + sku.range.unit) | ||||
// Update the price | // Update the price | ||||
record.find('.price').text(this.$root.priceLabel(cost, this.discount, this.currency)) | record.find('.price').text(this.$root.priceLabel(cost, this.discount, this.currency)) | ||||
}, | |||||
getSkus() { | |||||
let skus = {} | |||||
$(this.$el).find('input[type=checkbox]:checked').each((idx, input) => { | |||||
let id = $(input).val() | |||||
let range = $(input).parents('tr').first().find('input[type=range]').val() | |||||
skus[id] = range || 1 | |||||
}) | |||||
return skus | |||||
} | } | ||||
} | } | ||||
} | } | ||||
</script> | </script> |