location admin: show/ hide fields based on location type

This commit is contained in:
nobohan 2021-10-22 11:27:52 +02:00
parent e24fd8aff0
commit 7dc4590580
5 changed files with 118 additions and 7 deletions

View File

@ -28,18 +28,25 @@ final class LocationFormType extends AbstractType
{
$builder
->add('name', TextType::class)
->add('phonenumber1', TextType::class, ['required' => false])
->add('phonenumber2', TextType::class, ['required' => false])
->add('email', TextType::class, ['required' => false])
->add('locationType', EntityType::class, [
'class' => EntityLocationType::class,
'choice_attr' => function (EntityLocationType $entity) {
return [
'data-address' => $entity->getAddressRequired(),
'data-contact' => $entity->getContactData(),
];
},
'choice_label' => function (EntityLocationType $entity) {
//return $this->translatableStringHelper->localize($entity->getTitle()); //TODO not working. Cannot pass smthg in the constructor
return $entity->getTitle()['fr'];
},
])
->add('name', TextType::class)
->add('phonenumber1', TextType::class, ['required' => false])
->add('phonenumber2', TextType::class, ['required' => false])
->add('email', TextType::class, ['required' => false])
->add('address', PickAddressType::class, [
'required' => false,
'label' => 'Address',
'use_valid_from' => false,
'use_valid_to' => false,

View File

@ -0,0 +1,66 @@
const contactDataBlock = document.querySelector('div.location-form-contact');
const addressBlock = document.querySelector('div.location-form-address');
const locationType = document.getElementById('chill_mainbundle_location_locationType');
const getSelectedAttributes =
(select, attr) => select.selectedOptions[0].getAttribute(attr)
const removeRequired = (formBlock) => {
formBlock.querySelectorAll('label').forEach(
l => l.classList.remove('required')
);
formBlock.querySelectorAll('input').forEach(
i => i.removeAttribute('required')
);
}
const addRequired = (formBlock) => {
formBlock.querySelectorAll('label').forEach(
l => l.classList.add('required')
);
formBlock.querySelectorAll('input').forEach(
i => i.setAttribute('required', '')
);
}
const onLocationTypeChange = () => {
console.log(getSelectedAttributes(locationType, 'data-address'))
console.log(getSelectedAttributes(locationType, 'data-contact'))
switch (getSelectedAttributes(locationType, 'data-address')) {
case 'optional':
default:
removeRequired(addressBlock);
addressBlock.classList.remove('d-none');
break;
case 'required':
addRequired(addressBlock);
addressBlock.classList.remove('d-none');
break;
case 'never':
removeRequired(addressBlock);
addressBlock.classList.add('d-none');
break;
}
switch (getSelectedAttributes(locationType, 'data-contact')) {
case 'optional':
default:
removeRequired(contactDataBlock);
contactDataBlock.classList.remove('d-none');
break;
case 'required':
addRequired(contactDataBlock);
contactDataBlock.classList.remove('d-none');
break;
case 'never':
removeRequired(contactDataBlock);
contactDataBlock.classList.add('d-none');
break;
}
};
document.addEventListener('DOMContentLoaded', _e => {
onLocationTypeChange();
locationType.addEventListener('change', onLocationTypeChange);
});

View File

@ -5,16 +5,33 @@
{% endblock %}
{% block admin_content %}
{# {% as we are in the admin layout, we override the admin content with the CRUD content %} #}
{% embed '@ChillMain/CRUD/_edit_content.html.twig' %}
{# we do not have "view" page. We empty the corresponding block #}
{% block content_form_actions_view %}{% endblock %}
{% block crud_content_form_rows %}
{{ form_row(form.locationType) }}
<div class="location-form-address">
{{ form_row(form.address) }}
</div>
{{ form_row(form.name) }}
<div class="location-form-contact">
{{ form_row(form.phonenumber1) }}
{{ form_row(form.phonenumber2) }}
{{ form_row(form.email) }}
</div>
{% endblock crud_content_form_rows %}
{% block content_form_actions_save_and_show %}{% endblock %}
{% endembed %}
{% endblock %}
{% block js %}
{{ encore_entry_script_tags('mod_input_address') }}
{{ encore_entry_script_tags('page_location') }}
{% endblock %}
{% block css %}

View File

@ -6,12 +6,32 @@
{% block admin_content %}
{% embed '@ChillMain/CRUD/_new_content.html.twig' %}
{% block crud_content_form_rows %}
{{ form_row(form.locationType) }}
<div class="location-form-address">
{{ form_row(form.address) }}
</div>
{{ form_row(form.name) }}
<div class="location-form-contact">
{{ form_row(form.phonenumber1) }}
{{ form_row(form.phonenumber2) }}
{{ form_row(form.email) }}
</div>
{% endblock crud_content_form_rows %}
{% block content_form_actions_save_and_show %}{% endblock %}
{% endembed %}
{% endblock %}
{% block js %}
{{ encore_entry_script_tags('mod_input_address') }}
{{ encore_entry_script_tags('page_location') }}
{% endblock %}
{% block css %}

View File

@ -51,6 +51,7 @@ module.exports = function(encore, entries)
// Page entrypoints
encore.addEntry('page_login', __dirname + '/Resources/public/page/login/index.js');
encore.addEntry('page_location', __dirname + '/Resources/public/page/location/index.js');
buildCKEditor(encore);