From c74f159ad2dc3248f882fe42832c8f1b1210d759 Mon Sep 17 00:00:00 2001
From: Thomas JUND <tjund@entrouvert.com>
Date: Mon, 24 Jan 2022 16:57:54 +0100
Subject: [PATCH] card-cell: use data-dynamic attr directly on fields
 group/parent (#61022)

---
 .../wcs/manager/card-infos-cell-form.html     | 37 +++++++++++++------
 combo/manager/static/js/combo.manager.js      | 25 ++-----------
 2 files changed, 29 insertions(+), 33 deletions(-)

diff --git a/combo/apps/wcs/templates/combo/wcs/manager/card-infos-cell-form.html b/combo/apps/wcs/templates/combo/wcs/manager/card-infos-cell-form.html
index 9044cdcf..5c2650ff 100644
--- a/combo/apps/wcs/templates/combo/wcs/manager/card-infos-cell-form.html
+++ b/combo/apps/wcs/templates/combo/wcs/manager/card-infos-cell-form.html
@@ -48,26 +48,29 @@
         </select>
       </label>
     </p>
+
+    {# fields group for "content type == @field@ " #}
+    <div data-dynamic-display-child-of="entry_type" data-dynamic-display-value="@field@">
       <p>
         <label>
           {% trans "Card Fields" %}
-        <select name="field_varname" data-dynamic-display-child-of="entry_type" data-dynamic-display-value="@field@"></select>
+          <select name="field_varname"></select>
         </label>
       </p>
       <p>
         <label>
           {% trans "Field content" %}
-        <select name="field_content" data-dynamic-display-child-of="entry_type" data-dynamic-display-value="@field@">
+          <select name="field_content" data-dynamic-display-parent="true">
             <option value="label-and-value">{% trans "Label & Value" %}</option>
             <option value="label">{% trans "Label only" %}</option>
             <option value="value">{% trans "Value only" %}</option>
           </select>
         </label>
       </p>
-    <p>
+      <p data-dynamic-display-child-of="field_content" data-dynamic-display-value-in="label value">
         <label>
           {% trans "Display mode" %}
-        <select name="field_display_mode" data-dynamic-display-child-of="entry_type" data-dynamic-display-value="@field@">
+          <select name="field_display_mode">
             <option value="text">{% trans "Text" %}</option>
             <option value="title">{% trans "Title" %}</option>
             <option value="subtitle">{% trans "Subtitle" %}</option>
@@ -77,29 +80,33 @@
       <p>
         <label>
           {% trans "Empty value display mode" %}
-        <select name="field_empty_display_mode" data-dynamic-display-child-of="entry_type" data-dynamic-display-value="@field@">
+          <select name="field_empty_display_mode" data-dynamic-display-parent="true">
             <option value="@empty@">{% trans "Display as empty" %}</option>
             <option value="@skip@">{% trans "Hide" %}</option>
             <option value="@custom@">{% trans "Display a custom text" %}</option>
           </select>
         </label>
       </p>
-    <p>
+      <p data-dynamic-display-child-of="field_empty_display_mode" data-dynamic-display-value="@custom@">
         <label>
           {% trans "Empty value custom text" %}
-        <input name="field_empty_text" data-dynamic-display-child-of="entry_type" data-dynamic-display-value="@field@" />
+          <input name="field_empty_text" />
         </label>
       </p>
+    </div>
+
+    {# fields group for "content type == @custom@" #}
+    <div data-dynamic-display-child-of="entry_type" data-dynamic-display-value="@custom@">
       <p>
         <label>
           {% trans "Value template" %}
-        <textarea name="custom_template" data-dynamic-display-child-of="entry_type" data-dynamic-display-value="@custom@" style="resize: vertical;"></textarea>
+          <textarea name="custom_template" style="resize: vertical;"></textarea>
         </label>
       </p>
       <p>
         <label>
           {% trans "Display mode" %}
-        <select name="custom_display_mode" data-dynamic-display-child-of="entry_type" data-dynamic-display-value="@custom@">
+          <select name="custom_display_mode">
             <option value="label">{% trans "Label" %}</option>
             <option value="text">{% trans "Text" %}</option>
             <option value="title">{% trans "Title" %}</option>
@@ -107,27 +114,33 @@
           </select>
         </label>
       </p>
+    </div>
+
+    {# fields group for "content type == @link@" #}
+    <div data-dynamic-display-child-of="entry_type" data-dynamic-display-value="@link@">
       <p>
         <label>
           {% trans "Label template" %}
-        <textarea name="link_label_template" data-dynamic-display-child-of="entry_type" data-dynamic-display-value="@link@" style="resize: vertical;"></textarea>
+          <textarea name="link_label_template" style="resize: vertical;"></textarea>
         </label>
       </p>
       <p>
         <label>
           {% trans "URL template" %}
-        <textarea name="link_url_template" data-dynamic-display-child-of="entry_type" data-dynamic-display-value="@link@" style="resize: vertical;"></textarea>
+          <textarea name="link_url_template" style="resize: vertical;"></textarea>
         </label>
       </p>
       <p>
         <label>
           {% trans "Display mode" %}
-        <select name="link_display_mode" data-dynamic-display-child-of="entry_type" data-dynamic-display-value="@link@">
+          <select name="link_display_mode">
             <option value="link">{% trans "Link" %}</option>
             <option value="button">{% trans "Button" %}</option>
           </select>
         </label>
       </p>
+    </div>
+
     <p>
       <label>
         {% trans "Size" %}
diff --git a/combo/manager/static/js/combo.manager.js b/combo/manager/static/js/combo.manager.js
index 8399ffd7..7db54dfd 100644
--- a/combo/manager/static/js/combo.manager.js
+++ b/combo/manager/static/js/combo.manager.js
@@ -403,12 +403,12 @@ $(function() {
       var sel1 = '[data-dynamic-display-child-of="' + $(this).attr('name') + '"]';
       var sel2 = '[data-dynamic-display-value="' + $(this).val() + '"]';
       var sel3 = '[data-dynamic-display-value-in*="' + $(this).val() + '"]';
-      $(sel1).addClass('field-hidden').parent().parent().hide();
-      $(sel1 + sel2).removeClass('field-hidden').parent().parent().show();
-      $(sel1 + sel3).removeClass('field-hidden').parent().parent().show();
+      $(sel1).addClass('field-hidden').hide();
+      $(sel1 + sel2).removeClass('field-hidden').show();
+      $(sel1 + sel3).removeClass('field-hidden').show();
       $(sel1).trigger('change');
     });
-    $('[data-dynamic-display-child-of]').addClass('field-hidden').parent().parent().hide();
+    $('[data-dynamic-display-child-of]').addClass('field-hidden').hide();
     $('select[data-dynamic-display-parent]').trigger('change');
     $('[data-dynamic-display-parent]:checked').trigger('change');
   }
@@ -509,23 +509,6 @@ Card_cell_custom.prototype = {
           .text(el.label)
           .appendTo(varname_select);
       }
-    })
-
-    const field_content_select = this.grid_cell_form.field_content;
-    $(field_content_select).on('change', function() {
-      if ($(this).hasClass('field-hidden') || $(this).val() == 'label-and-value') {
-        $(_self.grid_cell_form.field_display_mode).removeClass('field-hidden').parent().parent().hide();
-      } else {
-        $(_self.grid_cell_form.field_display_mode).addClass('field-hidden').parent().parent().show();
-      }
-    });
-    const field_empty_display_mode_select = this.grid_cell_form.field_empty_display_mode;
-    $(field_empty_display_mode_select).on('change', function() {
-      if ($(this).hasClass('field-hidden') || $(this).val() != '@custom@') {
-        $(_self.grid_cell_form.field_empty_text).removeClass('field-hidden').parent().parent().hide();
-      } else {
-        $(_self.grid_cell_form.field_empty_text).addClass('field-hidden').parent().parent().show();
-      }
     });
   },
   grid_cell__form_dialog: function(button_label, callback){
-- 
2.30.2

