cerebrate/templates/MailingLists/add_individual.php

121 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'),
'class' => 'select2-input',
'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>