From fe018fc6797c9315b2ab96172b70bbf46b35e425 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Laur=C3=A9line=20Gu=C3=A9rin?= <zebuline@entrouvert.com>
Date: Thu, 6 Jan 2022 14:58:48 +0100
Subject: [PATCH 2/3] wcs: split content and display_mode in card custom schema
 form (#58800)

---
 .../wcs/manager/card-infos-cell-form.html     | 39 ++++++--
 combo/manager/static/js/combo.manager.js      | 91 ++++++++++++++-----
 2 files changed, 100 insertions(+), 30 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 c353e9ed..441c207a 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
@@ -40,26 +40,51 @@
   <form>
     <p>
       <label>
-        {% trans "Field" %}
-        <select name="card_field_varname">
+        {% trans "Content type" %}
+        <select name="entry_type" data-dynamic-display-parent="true">
+          <option value="@field@">{% trans "Card field" %}</option>
           <option value="@custom@">{% trans "Custom" %}</option>
         </select>
       </label>
     </p>
     <p>
       <label>
-        {% trans "Value template" %}
-        <textarea name="card_field_template" style="resize: vertical;"></textarea>
+        {% trans "Card Fields" %}
+        <select name="field_varname" data-dynamic-display-child-of="entry_type" data-dynamic-display-value="@field@"></select>
       </label>
     </p>
     <p>
       <label>
-        {% trans "Display" %}
-        <select name="display_mode">
-          <option value="label-and-value">{% trans "Label & Value" %}</option>
+        {% trans "Field content" %}
+        <select name="field_content" data-dynamic-display-child-of="entry_type" data-dynamic-display-value="@field@">
           <option value="label">{% trans "Label only" %}</option>
           <option value="value">{% trans "Value only" %}</option>
+          <option value="label-and-value">{% trans "Label & Value" %}</option>
+        </select>
+      </label>
+    </p>
+    <p>
+      <label>
+        {% trans "Display mode" %}
+        <select name="field_display_mode" data-dynamic-display-child-of="entry_type" data-dynamic-display-value="@field@">
+          <option value="title">{% trans "Title" %}</option>
+          <option value="text">{% trans "Text" %}</option>
+        </select>
+      </label>
+    </p>
+    <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>
+      </label>
+    </p>
+    <p>
+      <label>
+        {% trans "Display mode" %}
+        <select name="custom_display_mode" data-dynamic-display-child-of="entry_type" data-dynamic-display-value="@custom@">
           <option value="title">{% trans "Title" %}</option>
+          <option value="label">{% trans "Label" %}</option>
+          <option value="text">{% trans "Text" %}</option>
         </select>
       </label>
     </p>
diff --git a/combo/manager/static/js/combo.manager.js b/combo/manager/static/js/combo.manager.js
index db9cce5a..14241360 100644
--- a/combo/manager/static/js/combo.manager.js
+++ b/combo/manager/static/js/combo.manager.js
@@ -397,6 +397,23 @@ $(function() {
     window.location = $(this).parent('div').find('option:selected').data('add-url');
     return false;
   });
+
+  function prepare_dynamic_fields() {
+    $('[data-dynamic-display-parent]').off('change input').on('change input', 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).trigger('change');
+    });
+    $('[data-dynamic-display-child-of]').addClass('field-hidden').parent().parent().hide();
+    $('select[data-dynamic-display-parent]').trigger('change');
+    $('[data-dynamic-display-parent]:checked').trigger('change');
+  }
+  prepare_dynamic_fields();
+  $(document).on('combo:dialog-loaded', prepare_dynamic_fields);
 });
 
 
@@ -472,29 +489,29 @@ Card_cell_custom.prototype = {
   //  Grid cell methods
   grid_cell__init_form: function() {
     const _self = this;
-    this.grid_cell_form.varname = this.grid_cell_form[0];
-    this.grid_cell_form.template = this.grid_cell_form[1];
-    this.grid_cell_form.display_mode = this.grid_cell_form[2];
-    this.grid_cell_form.size = this.grid_cell_form[3];
-    const varname_select = this.grid_cell_form.varname;
-    this.cardSchema.fields.reverse().forEach(function(el, id) {
+    this.grid_cell_form.entry_type = this.grid_cell_form[0];
+    this.grid_cell_form.field_varname= this.grid_cell_form[1];
+    this.grid_cell_form.field_content = this.grid_cell_form[2];
+    this.grid_cell_form.field_display_mode = this.grid_cell_form[3];
+    this.grid_cell_form.custom_template = this.grid_cell_form[4];
+    this.grid_cell_form.custom_display_mode = this.grid_cell_form[5];
+    this.grid_cell_form.size = this.grid_cell_form[6];
+    const varname_select = this.grid_cell_form.field_varname;
+    this.cardSchema.fields.forEach(function(el, id) {
       if (el.varname) {
         $('<option />')
           .attr('value', el.varname)
           .text(el.label)
-          .prependTo(varname_select);
+          .appendTo(varname_select);
       }
     })
 
-    // hide or show template, change mode options, depending on selected field
-    const _label_and_value_option = this.grid_cell_form.display_mode[0];
-    $(varname_select).on('change', function() {
-      if ($(this).val() == '@custom@') {
-        $(_self.grid_cell_form.template).parent().show();
-        $(_label_and_value_option).remove();
+    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.template).parent().hide();
-        $(_label_and_value_option).prependTo($(_self.grid_cell_form.display_mode));
+        $(_self.grid_cell_form.field_display_mode).addClass('field-hidden').parent().parent().show();
       }
     });
   },
@@ -504,7 +521,8 @@ Card_cell_custom.prototype = {
       modal: true,
       width: 'auto',
       open: function( event, ui ) {
-        $(_self.grid_cell_form.varname).change();
+        $(document).trigger('combo:dialog-loaded');
+        $(_self.grid_cell_form.field_content).change();
       },
       buttons: [
         {
@@ -553,7 +571,14 @@ Card_cell_custom.prototype = {
       const cell_content = schema_cell.varname == '@custom@' ? (schema_cell.template || '') + ' (' + gettext('Custom') + ')' : schema_field.label;
       cell_text += $('<span/>').addClass(schema_cell.display_mode).text(cell_content).html();
       cell_text += '<span class="cell-meta">';
-      let cell_display_mode_label = $(this.grid_cell_form).find('select[name="display_mode"] option[value="' + schema_cell.display_mode + '"]').text();
+      let cell_display_mode_label = '';
+      if (schema_cell.varname == '@custom@') {
+        cell_display_mode_label = $(this.grid_cell_form).find('select[name="custom_display_mode"] option[value="' + schema_cell.display_mode + '"]').text();
+      } else {
+        cell_display_mode_label = $(this.grid_cell_form).find('select[name="field_content"] option[value="' + schema_cell.field_content + '"]').text();
+        cell_display_mode_label += ' - ';
+        cell_display_mode_label += $(this.grid_cell_form).find('select[name="field_display_mode"] option[value="' + schema_cell.display_mode + '"]').text();
+      }
       cell_text += '<span class="cell-display-mode-label">' + cell_display_mode_label + '</span>';
       let cell_size_label = $(this.grid_cell_form).find('select[name="cell_size"] option[value="' + schema_cell.cell_size + '"]').text();
       cell_text += '<span class="cell-size-label">' + gettext('Size:') + ' ' + cell_size_label + '</span>';
@@ -581,10 +606,22 @@ Card_cell_custom.prototype = {
   },
   grid_cell__edit: function(grid_cell) {
     const _self = this;
-    this.grid_cell_form.varname.value = grid_cell.dataset.varname;
-    this.grid_cell_form.template.value = grid_cell.dataset.template || '';
+    if (grid_cell.dataset.varname == '@custom@') {
+      this.grid_cell_form.entry_type.value = '@custom@';
+      this.grid_cell_form.field_varname.value = '';
+      this.grid_cell_form.field_content.value = '';
+      this.grid_cell_form.field_display_mode.value = '';
+      this.grid_cell_form.custom_template.value = grid_cell.dataset.template || '';
+      this.grid_cell_form.custom_display_mode.value = grid_cell.dataset.display_mode;
+    } else {
+      this.grid_cell_form.entry_type.value = '@field@';
+      this.grid_cell_form.field_varname.value = grid_cell.dataset.varname;
+      this.grid_cell_form.field_content.value = grid_cell.dataset.field_content;
+      this.grid_cell_form.field_display_mode.value = grid_cell.dataset.display_mode;
+      this.grid_cell_form.custom_template.value = '';
+      this.grid_cell_form.custom_display_mode.value = '';
+    }
     this.grid_cell_form.size.value = grid_cell.dataset.cell_size;
-    this.grid_cell_form.display_mode.value = grid_cell.dataset.display_mode;
     const cell_id = $(grid_cell).index();
     const grid_cell_schema = this.gridSchema.cells[cell_id];
     this.grid_cell__form_dialog(gettext('Edit'), function(form_datas){
@@ -594,10 +631,18 @@ Card_cell_custom.prototype = {
     });
   },
   grid_cell__set_schema: function(form_datas, schema_cell) {
-    schema_cell.varname = form_datas.card_field_varname;
-    schema_cell.template = form_datas.card_field_template;
+    if (form_datas.entry_type == '@custom@') {
+      schema_cell.varname = '@custom@';
+      delete schema_cell.field_content;
+      schema_cell.display_mode = form_datas.custom_display_mode;
+      schema_cell.template = form_datas.custom_template;
+    } else {
+      schema_cell.varname = form_datas.field_varname;
+      schema_cell.field_content = form_datas.field_content;
+      schema_cell.display_mode = form_datas.field_display_mode;
+      delete schema_cell.template;
+    }
     schema_cell.cell_size = form_datas.cell_size;
-    schema_cell.display_mode = form_datas.display_mode;
     return schema_cell
   },
   grid_cell__add_schema: function(form_datas) {
-- 
2.34.1

