120 lines
5.0 KiB
PHP
120 lines
5.0 KiB
PHP
<?php
|
|
echo $this->element('genericElements/Form/genericForm', [
|
|
'data' => [
|
|
'title' => __('Add members to `{0}` [{1}]', h($mailingList->name), h($mailingList->id)),
|
|
'model' => 'MailingLists',
|
|
'fields' => [
|
|
[
|
|
'field' => 'individuals',
|
|
'type' => 'dropdown',
|
|
'multiple' => true,
|
|
'select2' => true,
|
|
'label' => __('Members'),
|
|
'options' => $dropdownData['individuals']
|
|
],
|
|
[
|
|
'field' => 'chosen_emails',
|
|
'type' => 'text',
|
|
'templates' => ['inputContainer' => '<div class="row mb-3 d-none">{{content}}</div>'],
|
|
],
|
|
'<div class="alternate-emails-container panel d-none"></div>'
|
|
],
|
|
'submit' => [
|
|
'action' => $this->request->getParam('action')
|
|
],
|
|
],
|
|
]);
|
|
?>
|
|
</div>
|
|
|
|
<script>
|
|
(function() {
|
|
let individuals = {}
|
|
$('#individuals-field').on('select2:select select2:unselect', function(e) {
|
|
const selected = e.params.data;
|
|
fetchIndividual(selected.id).then(() => {
|
|
udpateAvailableEmails($(e.target).select2('data'));
|
|
})
|
|
});
|
|
|
|
function udpateAvailableEmails(selected) {
|
|
const $container = $('.alternate-emails-container')
|
|
$container.empty()
|
|
$container.toggleClass('d-none', selected.length == 0)
|
|
selected.forEach(selectData => {
|
|
const individual = individuals[selectData.id]
|
|
let formContainers = [genForContainer(`primary-${individual.id}`, individual.email, '<?= __('primary email') ?>', true, true)]
|
|
if (individual.alternate_emails !== undefined) {
|
|
individual.alternate_emails.forEach(alternateEmail => {
|
|
formContainers.push(
|
|
genForContainer(alternateEmail.id, alternateEmail.value, `${alternateEmail.meta_template_field.meta_template.namespace} :: ${alternateEmail.field}`, false)
|
|
)
|
|
})
|
|
}
|
|
const $individualFullName = $('<div/>').addClass('fw-light fs-5 mt-2').text(individual.full_name)
|
|
const $individualContainer = $('<div/>').addClass('individual-container').data('individualid', individual.id)
|
|
.append($individualFullName).append(formContainers)
|
|
$container.append($individualContainer)
|
|
registerChangeListener()
|
|
injectSelectedEmailsIntoForm()
|
|
});
|
|
}
|
|
|
|
function genForContainer(id, email, email_source, is_primary = true, checked = false) {
|
|
const $formContainer = $('<div/>').addClass('form-check ms-2')
|
|
$formContainer.append(
|
|
$('<input/>').addClass('form-check-input').attr('type', 'checkbox').attr('id', `individual-${id}`)
|
|
.attr('value', is_primary ? 'primary' : id).prop('checked', checked),
|
|
$('<label/>').addClass('form-check-label').attr('for', `individual-${id}`).append(
|
|
$('<span/>').text(email),
|
|
$('<span/>').addClass('fw-light fs-8 align-middle ms-2').text(`${email_source}`)
|
|
)
|
|
)
|
|
return $formContainer
|
|
}
|
|
|
|
function registerChangeListener() {
|
|
$('.alternate-emails-container .individual-container input')
|
|
.off('change.udpate')
|
|
.on('change.udpate', injectSelectedEmailsIntoForm)
|
|
}
|
|
|
|
function injectSelectedEmailsIntoForm() {
|
|
const selectedEmails = getSelectedEmails()
|
|
$('#chosen_emails-field').val(JSON.stringify(selectedEmails))
|
|
}
|
|
|
|
function getSelectedEmails() {
|
|
selectedEmails = {}
|
|
$('.alternate-emails-container .individual-container').each(function() {
|
|
const $individualContainer = $(this)
|
|
const individualId = $individualContainer.data('individualid')
|
|
selectedEmails[individualId] = []
|
|
const $inputs = $individualContainer.find('input:checked').each(function() {
|
|
selectedEmails[individualId].push($(this).val())
|
|
})
|
|
})
|
|
return selectedEmails
|
|
}
|
|
|
|
function fetchIndividual(id) {
|
|
const urlGet = `/individuals/view/${id}?full=1`
|
|
const options = {
|
|
statusNode: $('.alternate-emails-container')
|
|
}
|
|
if (individuals[id] !== undefined) {
|
|
return Promise.resolve(individuals[id])
|
|
}
|
|
return AJAXApi.quickFetchJSON(urlGet, options)
|
|
.then(individual => {
|
|
individuals[individual.id] = individual
|
|
})
|
|
.catch((e) => {
|
|
UI.toast({
|
|
variant: 'danger',
|
|
text: '<?= __('Could not fetch individual') ?>'
|
|
})
|
|
})
|
|
}
|
|
})()
|
|
</script>
|