From 7b64269bb5dfb5a70152644e7c765a9545f0dadc Mon Sep 17 00:00:00 2001
From: Mathieu Jaumotte <mathieu.jaumotte@champs-libres.coop>
Date: Thu, 7 Jul 2022 15:20:50 +0200
Subject: [PATCH] fix show/hide in exports filter + better styles

---
 .../public/chill/scss/flex_table.scss         |  11 +-
 .../Resources/public/page/export/index.js     |   9 +-
 .../Resources/views/Export/new.html.twig      | 175 ++++++++++--------
 3 files changed, 111 insertions(+), 84 deletions(-)

diff --git a/src/Bundle/ChillMainBundle/Resources/public/chill/scss/flex_table.scss b/src/Bundle/ChillMainBundle/Resources/public/chill/scss/flex_table.scss
index 7ed607535..673d5129a 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/chill/scss/flex_table.scss
+++ b/src/Bundle/ChillMainBundle/Resources/public/chill/scss/flex_table.scss
@@ -99,11 +99,14 @@ div.flex-table {
     div.item-bloc {
         flex-direction: column;
 
-        &:nth-child(even) {
-            background-color: $gray-200;
+        &:not(.no-altern) { // class to avoid even/odd
 
-            .chill-user-quote {
-                background-color: shade-color($gray-200, 5%)
+            &:nth-child(even) {
+                background-color: $gray-200;
+
+                .chill-user-quote {
+                    background-color: shade-color($gray-200, 5%)
+                }
             }
         }
 
diff --git a/src/Bundle/ChillMainBundle/Resources/public/page/export/index.js b/src/Bundle/ChillMainBundle/Resources/public/page/export/index.js
index 30ae5bc34..d540e5ae5 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/page/export/index.js
+++ b/src/Bundle/ChillMainBundle/Resources/public/page/export/index.js
@@ -1,5 +1,6 @@
-import { ShowHide } from 'ShowHide';
-
-console.log('coucou');
-
+// old method to show/hide filters when checking checkbox
+import { chill } from 'ChillMainAssets/chill/js/chill';
+window.addEventListener("DOMContentLoaded", chill.listenerDisplayCheckbox);
 
+// TODO should be replaced by more recent showHide library
+//import { ShowHide } from 'ShowHide';
diff --git a/src/Bundle/ChillMainBundle/Resources/views/Export/new.html.twig b/src/Bundle/ChillMainBundle/Resources/views/Export/new.html.twig
index b5eebac5a..53a73d480 100644
--- a/src/Bundle/ChillMainBundle/Resources/views/Export/new.html.twig
+++ b/src/Bundle/ChillMainBundle/Resources/views/Export/new.html.twig
@@ -16,96 +16,119 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 #}
 
-{% extends "@ChillMain/layoutWithVerticalMenu.html.twig" %}
+{% extends "@ChillMain/layout.html.twig" %}
 
 {% block title %}{{ export.title|trans }}{% endblock %}
 
 {% block js %}
     {{ encore_entry_script_tags('page_export') }}
-    <script type="text/javascript">
-    window.addEventListener("DOMContentLoaded", chill.listenerDisplayCheckbox);   
-    </script>
 {% endblock js %}
 
-{% block layout_wvm_content  %}
-    
-    <h1>{{ export.title|trans }}</h1>
-    
-    <p>{{ export.description|trans }}</p>
+{% block content  %}
 
-    {{ form_start(form) }}
+    <div class="col-md-10">
     
-    {% if form.children.export.children.filters is defined %}
-        {% if form.children.export.children.filters is not empty%}
-        <div style="clear:both; padding-top: 1.5em;">
-            <h2>{{ 'Filters'| trans }}</h2>
-            {% for filter_form in form.children.export.children.filters %}
-                <div>
-                <p>
-                    {{ form_widget(filter_form.enabled, { 'attr' : { 'style' : 'vertical-align: middle;', 'data-display-target': filter_form.vars.id } }) }} 
-                    <span class="force-inline-label">{{ form_label(filter_form) }}</span>
-                </p>
-
-                <div data-display-show-hide="{{ filter_form.vars.id }}">
-                    {{ form_widget(filter_form.form) }}
-                    {{ form_errors(filter_form) }}
+        <h1>{{ export.title|trans }}</h1>
+        
+        <p>{{ export.description|trans }}</p>
+    
+        {{ form_start(form) }}
+        
+        {% if form.children.export.children.filters is defined %}
+            {% if form.children.export.children.filters is not empty%}
+            
+            <section class="filter mb-4">
+                <h2>{{ 'Filters'| trans }}</h2>
+                
+                {{ form_errors(form.children.export.children.filters) }}
+                
+                <div class="flex-table">
+                {% for filter_form in form.children.export.children.filters %}
+                    <div class="item-bloc no-altern">
+                        
+                        {{ form_widget(filter_form.enabled, {
+                            'label': filter_form.vars.label,
+                            'label_attr': { 'class': 'h6' },
+                            'attr': { 'data-display-target': filter_form.vars.id }
+                        }) }}
+                        
+                        <div data-display-show-hide="{{ filter_form.vars.id }}">
+                            {{ form_widget(filter_form.form) }}
+                            {{ form_errors(filter_form) }}
+                        </div>
+                        
+                    </div>
+                {% endfor %}
                 </div>
-                </div>
-            {% endfor %}
-            {{ form_errors(form.children.export.children.filters) }}
-        </div>
-        {% else %}
-            {# render the children, to mark the widget as 'rendered' #}
-            {{ form_widget(form.children.export.children.filters) }}
+            </section>
+            
+            {% else %}
+                {# render the children, to mark the widget as 'rendered' #}
+                {{ form_widget(form.children.export.children.filters) }}
+            {% endif %}
         {% endif %}
-    {% endif %}
+        
+        {% if form.children.export.children.aggregators is defined %}
+            {% if form.children.export.children.aggregators is not empty %}
+            
+            <section class="aggregator">
+                <h2>{{ 'Aggregators'| trans }}</h2>
     
-    {% if form.children.export.children.aggregators is defined %}
-        {% if form.children.export.children.aggregators is not empty %} 
-        <div style="clear:both; padding-top: 1.5em;">
-            <h2>{{ 'Aggregators'| trans }}</h2>
-            {% for aggregator_form in form.children.export.children.aggregators %}
-                <div>
-                <p>
-                    {{ form_widget(aggregator_form.enabled, { 'attr' : { 'style' : 'vertical-align: middle;', 'data-display-target': aggregator_form.vars.id } }) }}
-                    <span class="force-inline-label">{{ form_label(aggregator_form) }}</span>
-                </p>
-
-                <div data-display-show-hide="{{ aggregator_form.vars.id }}">
-                {{ form_widget(aggregator_form.form) }}
-                {{ form_errors(aggregator_form) }}
+                <div class="flex-table">
+                {% for aggregator_form in form.children.export.children.aggregators %}
+                    <div class="item-bloc no-altern">
+                        
+                        {{ form_widget(aggregator_form.enabled, {
+                            'label': aggregator_form.vars.label,
+                            'label_attr': { 'class': 'h6' },
+                            'attr': { 'data-display-target': aggregator_form.vars.id }
+                        }) }}
+                        
+                        <div data-display-show-hide="{{ aggregator_form.vars.id }}">
+                            {{ form_widget(aggregator_form.form) }}
+                            {{ form_errors(aggregator_form) }}
+                        </div>
+                        
+                    </div>
+                {% endfor %}
                 </div>
-                </div>
-            {% endfor %}
-        </div>
+            </section>
+            
+            {% else %}
+                {# render the children, to mark the widget as 'rendered' #}
+                {{ form_widget(form.children.export.children.aggregators) }}
+            {% endif %}
+        {% endif %}
+        
+        
+        {% if form.children.export.children.export.children|length > 0 %}
+        
+            <section class="parameter">
+                <h2>
+                    {{ 'Export parameters'|trans }}
+                </h2>
+                {{ form_widget(form.children.export.children.export) }}
+            </section>
+        
         {% else %}
             {# render the children, to mark the widget as 'rendered' #}
-            {{ form_widget(form.children.export.children.aggregators) }}
-        {% endif %} 
-    {% endif %}
-    
-    
-    {% if form.children.export.children.export.children|length > 0 %}
-    <div style="clear:both; padding-top: 1.5em;">
-        <h2>{{ 'Export parameters'|trans }}</h2>
             {{ form_widget(form.children.export.children.export) }}
-    </div>
-    {% else %}
-        {# render the children, to mark the widget as 'rendered' #}
-        {{ form_widget(form.children.export.children.export) }}
-    {% endif %}
-    
-    {% if form.children.export.children.pick_formatter is defined %}
-        <div style="clear: both; padding-top: 1.5em;">
-            <h2>{{ 'Formatter'| trans }}</h2>
-
-            <p> {{ 'Choose the formatter'|trans }}</p>
-
+        {% endif %}
+        
+        {% if form.children.export.children.pick_formatter is defined %}
+            <section class="formatter">
+                <h2>
+                    {{ 'Formatter'| trans }}
+                </h2>
+                <p>
+                    {{ 'Choose the formatter'|trans }}
+                </p>
                 {{ form_row(form.children.export.children.pick_formatter.children.alias, { 'label' : 'Formatter' }) }}
-        </div>
-    {% endif %}
-    
-    <p>{{ form_widget(form.submit, { 'attr' : { 'class' : 'btn btn-create' }, 'label' : 'Go to formatter options' } ) }}</p>
-    {{ form_end(form) }}
-    
-{% endblock layout_wvm_content  %}
+            </section>
+        {% endif %}
+        
+        <p>{{ form_widget(form.submit, { 'attr' : { 'class' : 'btn btn-create' }, 'label' : 'Go to formatter options' } ) }}</p>
+        {{ form_end(form) }}
+
+    </div>
+{% endblock content  %}