location admin: show/ hide fields based on location type

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