Projet

Général

Profil

0002-wcs-split-content-and-display_mode-in-card-custom-sc.patch

Lauréline Guérin, 06 janvier 2022 16:46

Télécharger (10,7 ko)

Voir les différences: 

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(-)
combo/apps/wcs/templates/combo/wcs/manager/card-infos-cell-form.html
40 40 
  <form>
41 41 
    <p>
42 42 
      <label>
43 
        {% trans "Field" %}
44 
        <select name="card_field_varname">
43 
        {% trans "Content type" %}
44 
        <select name="entry_type" data-dynamic-display-parent="true">
45 
          <option value="@field@">{% trans "Card field" %}</option>
45 46 
          <option value="@custom@">{% trans "Custom" %}</option>
46 47 
        </select>
47 48 
      </label>
48 49 
    </p>
49 50 
    <p>
50 51 
      <label>
51 
        {% trans "Value template" %}
52 
        <textarea name="card_field_template" style="resize: vertical;"></textarea>
52 
        {% trans "Card Fields" %}
53 
        <select name="field_varname" data-dynamic-display-child-of="entry_type" data-dynamic-display-value="@field@"></select>
53 54 
      </label>
54 55 
    </p>
55 56 
    <p>
56 57 
      <label>
57 
        {% trans "Display" %}
58 
        <select name="display_mode">
59 
          <option value="label-and-value">{% trans "Label & Value" %}</option>
58 
        {% trans "Field content" %}
59 
        <select name="field_content" data-dynamic-display-child-of="entry_type" data-dynamic-display-value="@field@">
60 60 
          <option value="label">{% trans "Label only" %}</option>
61 61 
          <option value="value">{% trans "Value only" %}</option>
62 
          <option value="label-and-value">{% trans "Label & Value" %}</option>
63 
        </select>
64 
      </label>
65 
    </p>
66 
    <p>
67 
      <label>
68 
        {% trans "Display mode" %}
69 
        <select name="field_display_mode" data-dynamic-display-child-of="entry_type" data-dynamic-display-value="@field@">
70 
          <option value="title">{% trans "Title" %}</option>
71 
          <option value="text">{% trans "Text" %}</option>
72 
        </select>
73 
      </label>
74 
    </p>
75 
    <p>
76 
      <label>
77 
        {% trans "Value template" %}
78 
        <textarea name="custom_template" data-dynamic-display-child-of="entry_type" data-dynamic-display-value="@custom@" style="resize: vertical;"></textarea>
79 
      </label>
80 
    </p>
81 
    <p>
82 
      <label>
83 
        {% trans "Display mode" %}
84 
        <select name="custom_display_mode" data-dynamic-display-child-of="entry_type" data-dynamic-display-value="@custom@">
62 85 
          <option value="title">{% trans "Title" %}</option>
86 
          <option value="label">{% trans "Label" %}</option>
87 
          <option value="text">{% trans "Text" %}</option>
63 88 
        </select>
64 89 
      </label>
65 90 
    </p>
combo/manager/static/js/combo.manager.js
397 397 
    window.location = $(this).parent('div').find('option:selected').data('add-url');
398 398 
    return false;
399 399 
  });
400 

  		




  
  401
  
    
  function prepare_dynamic_fields() {

  		




  
  402
  
    
    $('[data-dynamic-display-parent]').off('change input').on('change input', function() {

  		




  
  403
  
    
      var sel1 = '[data-dynamic-display-child-of="' + $(this).attr('name') + '"]';

  		




  
  404
  
    
      var sel2 = '[data-dynamic-display-value="' + $(this).val() + '"]';

  		




  
  405
  
    
      var sel3 = '[data-dynamic-display-value-in*="' + $(this).val() + '"]';

  		




  
  406
  
    
      $(sel1).addClass('field-hidden').parent().parent().hide();

  		




  
  407
  
    
      $(sel1 + sel2).removeClass('field-hidden').parent().parent().show();

  		




  
  408
  
    
      $(sel1 + sel3).removeClass('field-hidden').parent().parent().show();

  		




  
  409
  
    
      $(sel1).trigger('change');

  		




  
  410
  
    
    });

  		




  
  411
  
    
    $('[data-dynamic-display-child-of]').addClass('field-hidden').parent().parent().hide();

  		




  
  412
  
    
    $('select[data-dynamic-display-parent]').trigger('change');

  		




  
  413
  
    
    $('[data-dynamic-display-parent]:checked').trigger('change');

  		




  
  414
  
    
  }

  		




  
  415
  
    
  prepare_dynamic_fields();

  		




  
  416
  
    
  $(document).on('combo:dialog-loaded', prepare_dynamic_fields);

  		




  400
  417
  
    
});

  		




  401
  418
  
    

  		




  402
  419
  
    

  		




  ......




  472
  489
  
    
  //  Grid cell methods

  		




  473
  490
  
    
  grid_cell__init_form: function() {

  		




  474
  491
  
    
    const _self = this;

  		




  475
  
  
    
    this.grid_cell_form.varname = this.grid_cell_form[0];

  		




  476
  
  
    
    this.grid_cell_form.template = this.grid_cell_form[1];

  		




  477
  
  
    
    this.grid_cell_form.display_mode = this.grid_cell_form[2];

  		




  478
  
  
    
    this.grid_cell_form.size = this.grid_cell_form[3];

  		




  479
  
  
    
    const varname_select = this.grid_cell_form.varname;

  		




  480
  
  
    
    this.cardSchema.fields.reverse().forEach(function(el, id) {

  		




  
  492
  
    
    this.grid_cell_form.entry_type = this.grid_cell_form[0];

  		




  
  493
  
    
    this.grid_cell_form.field_varname= this.grid_cell_form[1];

  		




  
  494
  
    
    this.grid_cell_form.field_content = this.grid_cell_form[2];

  		




  
  495
  
    
    this.grid_cell_form.field_display_mode = this.grid_cell_form[3];

  		




  
  496
  
    
    this.grid_cell_form.custom_template = this.grid_cell_form[4];

  		




  
  497
  
    
    this.grid_cell_form.custom_display_mode = this.grid_cell_form[5];

  		




  
  498
  
    
    this.grid_cell_form.size = this.grid_cell_form[6];

  		




  
  499
  
    
    const varname_select = this.grid_cell_form.field_varname;

  		




  
  500
  
    
    this.cardSchema.fields.forEach(function(el, id) {

  		




  481
  501
  
    
      if (el.varname) {

  		




  482
  502
  
    
        $('<option />')

  		




  483
  503
  
    
          .attr('value', el.varname)

  		




  484
  504
  
    
          .text(el.label)

  		




  485
  
  
    
          .prependTo(varname_select);

  		




  
  505
  
    
          .appendTo(varname_select);

  		




  486
  506
  
    
      }

  		




  487
  507
  
    
    })

  		




  488
  508
  
    

  		




  489
  
  
    
    // hide or show template, change mode options, depending on selected field

  		




  490
  
  
    
    const _label_and_value_option = this.grid_cell_form.display_mode[0];

  		




  491
  
  
    
    $(varname_select).on('change', function() {

  		




  492
  
  
    
      if ($(this).val() == '@custom@') {

  		




  493
  
  
    
        $(_self.grid_cell_form.template).parent().show();

  		




  494
  
  
    
        $(_label_and_value_option).remove();

  		




  
  509
  
    
    const field_content_select = this.grid_cell_form.field_content;

  		




  
  510
  
    
    $(field_content_select).on('change', function() {

  		




  
  511
  
    
      if ($(this).hasClass('field-hidden') || $(this).val() == 'label-and-value') {

  		




  
  512
  
    
        $(_self.grid_cell_form.field_display_mode).removeClass('field-hidden').parent().parent().hide();

  		




  495
  513
  
    
      } else {

  		




  496
  
  
    
        $(_self.grid_cell_form.template).parent().hide();

  		




  497
  
  
    
        $(_label_and_value_option).prependTo($(_self.grid_cell_form.display_mode));

  		




  
  514
  
    
        $(_self.grid_cell_form.field_display_mode).addClass('field-hidden').parent().parent().show();

  		




  498
  515
  
    
      }

  		




  499
  516
  
    
    });

  		




  500
  517
  
    
  },

  		




  ......




  504
  521
  
    
      modal: true,

  		




  505
  522
  
    
      width: 'auto',

  		




  506
  523
  
    
      open: function( event, ui ) {

  		




  507
  
  
    
        $(_self.grid_cell_form.varname).change();

  		




  
  524
  
    
        $(document).trigger('combo:dialog-loaded');

  		




  
  525
  
    
        $(_self.grid_cell_form.field_content).change();

  		




  508
  526
  
    
      },

  		




  509
  527
  
    
      buttons: [

  		




  510
  528
  
    
        {

  		




  ......




  553
  571
  
    
      const cell_content = schema_cell.varname == '@custom@' ? (schema_cell.template || '') + ' (' + gettext('Custom') + ')' : schema_field.label;

  		




  554
  572
  
    
      cell_text += $('<span/>').addClass(schema_cell.display_mode).text(cell_content).html();

  		




  555
  573
  
    
      cell_text += '<span class="cell-meta">';

  		




  556
  
  
    
      let cell_display_mode_label = $(this.grid_cell_form).find('select[name="display_mode"] option[value="' + schema_cell.display_mode + '"]').text();

  		




  
  574
  
    
      let cell_display_mode_label = '';

  		




  
  575
  
    
      if (schema_cell.varname == '@custom@') {

  		




  
  576
  
    
        cell_display_mode_label = $(this.grid_cell_form).find('select[name="custom_display_mode"] option[value="' + schema_cell.display_mode + '"]').text();

  		




  
  577
  
    
      } else {

  		




  
  578
  
    
        cell_display_mode_label = $(this.grid_cell_form).find('select[name="field_content"] option[value="' + schema_cell.field_content + '"]').text();

  		




  
  579
  
    
        cell_display_mode_label += ' - ';

  		




  
  580
  
    
        cell_display_mode_label += $(this.grid_cell_form).find('select[name="field_display_mode"] option[value="' + schema_cell.display_mode + '"]').text();

  		




  
  581
  
    
      }

  		




  557
  582
  
    
      cell_text += '<span class="cell-display-mode-label">' + cell_display_mode_label + '</span>';

  		




  558
  583
  
    
      let cell_size_label = $(this.grid_cell_form).find('select[name="cell_size"] option[value="' + schema_cell.cell_size + '"]').text();

  		




  559
  584
  
    
      cell_text += '<span class="cell-size-label">' + gettext('Size:') + ' ' + cell_size_label + '</span>';

  		




  ......




  581
  606
  
    
  },

  		




  582
  607
  
    
  grid_cell__edit: function(grid_cell) {

  		




  583
  608
  
    
    const _self = this;

  		




  584
  
  
    
    this.grid_cell_form.varname.value = grid_cell.dataset.varname;

  		




  585
  
  
    
    this.grid_cell_form.template.value = grid_cell.dataset.template || '';

  		




  
  609
  
    
    if (grid_cell.dataset.varname == '@custom@') {

  		




  
  610
  
    
      this.grid_cell_form.entry_type.value = '@custom@';

  		




  
  611
  
    
      this.grid_cell_form.field_varname.value = '';

  		




  
  612
  
    
      this.grid_cell_form.field_content.value = '';

  		




  
  613
  
    
      this.grid_cell_form.field_display_mode.value = '';

  		




  
  614
  
    
      this.grid_cell_form.custom_template.value = grid_cell.dataset.template || '';

  		




  
  615
  
    
      this.grid_cell_form.custom_display_mode.value = grid_cell.dataset.display_mode;

  		




  
  616
  
    
    } else {

  		




  
  617
  
    
      this.grid_cell_form.entry_type.value = '@field@';

  		




  
  618
  
    
      this.grid_cell_form.field_varname.value = grid_cell.dataset.varname;

  		




  
  619
  
    
      this.grid_cell_form.field_content.value = grid_cell.dataset.field_content;

  		




  
  620
  
    
      this.grid_cell_form.field_display_mode.value = grid_cell.dataset.display_mode;

  		




  
  621
  
    
      this.grid_cell_form.custom_template.value = '';

  		




  
  622
  
    
      this.grid_cell_form.custom_display_mode.value = '';

  		




  
  623
  
    
    }

  		




  586
  624
  
    
    this.grid_cell_form.size.value = grid_cell.dataset.cell_size;

  		




  587
  
  
    
    this.grid_cell_form.display_mode.value = grid_cell.dataset.display_mode;

  		




  588
  625
  
    
    const cell_id = $(grid_cell).index();

  		




  589
  626
  
    
    const grid_cell_schema = this.gridSchema.cells[cell_id];

  		




  590
  627
  
    
    this.grid_cell__form_dialog(gettext('Edit'), function(form_datas){

  		




  ......




  594
  631
  
    
    });

  		




  595
  632
  
    
  },

  		




  596
  633
  
    
  grid_cell__set_schema: function(form_datas, schema_cell) {

  		




  597
  
  
    
    schema_cell.varname = form_datas.card_field_varname;

  		




  598
  
  
    
    schema_cell.template = form_datas.card_field_template;

  		




  
  634
  
    
    if (form_datas.entry_type == '@custom@') {

  		




  
  635
  
    
      schema_cell.varname = '@custom@';

  		




  
  636
  
    
      delete schema_cell.field_content;

  		




  
  637
  
    
      schema_cell.display_mode = form_datas.custom_display_mode;

  		




  
  638
  
    
      schema_cell.template = form_datas.custom_template;

  		




  
  639
  
    
    } else {

  		




  
  640
  
    
      schema_cell.varname = form_datas.field_varname;

  		




  
  641
  
    
      schema_cell.field_content = form_datas.field_content;

  		




  
  642
  
    
      schema_cell.display_mode = form_datas.field_display_mode;

  		




  
  643
  
    
      delete schema_cell.template;

  		




  
  644
  
    
    }

  		




  599
  645
  
    
    schema_cell.cell_size = form_datas.cell_size;

  		




  600
  
  
    
    schema_cell.display_mode = form_datas.display_mode;

  		




  601
  646
  
    
    return schema_cell

  		




  602
  647
  
    
  },

  		




  603
  648
  
    
  grid_cell__add_schema: function(form_datas) {

  		




  604
  
  
    
-