From 7dc459058093275fc21fcf6fff216bfecff2032b Mon Sep 17 00:00:00 2001 From: nobohan Date: Fri, 22 Oct 2021 11:27:52 +0200 Subject: [PATCH] location admin: show/ hide fields based on location type --- .../ChillMainBundle/Form/LocationFormType.php | 15 +++-- .../Resources/public/page/location/index.js | 66 +++++++++++++++++++ .../Resources/views/Location/edit.html.twig | 23 ++++++- .../Resources/views/Location/new.html.twig | 20 ++++++ .../ChillMainBundle/chill.webpack.config.js | 1 + 5 files changed, 118 insertions(+), 7 deletions(-) create mode 100644 src/Bundle/ChillMainBundle/Resources/public/page/location/index.js diff --git a/src/Bundle/ChillMainBundle/Form/LocationFormType.php b/src/Bundle/ChillMainBundle/Form/LocationFormType.php index b4811bad1..ba46445f2 100644 --- a/src/Bundle/ChillMainBundle/Form/LocationFormType.php +++ b/src/Bundle/ChillMainBundle/Form/LocationFormType.php @@ -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, diff --git a/src/Bundle/ChillMainBundle/Resources/public/page/location/index.js b/src/Bundle/ChillMainBundle/Resources/public/page/location/index.js new file mode 100644 index 000000000..25bac1af5 --- /dev/null +++ b/src/Bundle/ChillMainBundle/Resources/public/page/location/index.js @@ -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); +}); diff --git a/src/Bundle/ChillMainBundle/Resources/views/Location/edit.html.twig b/src/Bundle/ChillMainBundle/Resources/views/Location/edit.html.twig index 0b6a0f8a1..d34d6968f 100644 --- a/src/Bundle/ChillMainBundle/Resources/views/Location/edit.html.twig +++ b/src/Bundle/ChillMainBundle/Resources/views/Location/edit.html.twig @@ -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) }} + +
+ {{ form_row(form.address) }} +
+ + {{ form_row(form.name) }} + +
+ {{ form_row(form.phonenumber1) }} + {{ form_row(form.phonenumber2) }} + {{ form_row(form.email) }} +
+ + {% 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 %} diff --git a/src/Bundle/ChillMainBundle/Resources/views/Location/new.html.twig b/src/Bundle/ChillMainBundle/Resources/views/Location/new.html.twig index 1177169a1..ba25a05e0 100644 --- a/src/Bundle/ChillMainBundle/Resources/views/Location/new.html.twig +++ b/src/Bundle/ChillMainBundle/Resources/views/Location/new.html.twig @@ -6,12 +6,32 @@ {% block admin_content %} {% embed '@ChillMain/CRUD/_new_content.html.twig' %} + + {% block crud_content_form_rows %} + + {{ form_row(form.locationType) }} + +
+ {{ form_row(form.address) }} +
+ + {{ form_row(form.name) }} + +
+ {{ form_row(form.phonenumber1) }} + {{ form_row(form.phonenumber2) }} + {{ form_row(form.email) }} +
+ + {% 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 %} diff --git a/src/Bundle/ChillMainBundle/chill.webpack.config.js b/src/Bundle/ChillMainBundle/chill.webpack.config.js index 733899c19..68e704d9c 100644 --- a/src/Bundle/ChillMainBundle/chill.webpack.config.js +++ b/src/Bundle/ChillMainBundle/chill.webpack.config.js @@ -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);