location admin: show/ hide fields based on location type

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,

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);
+});

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) }}
+
+        <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 %}

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) }}
+
+        <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 %}

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);