galette/templates/default/pages/configuration_core_fields.html.twig

   1 {% extends 'page.html.twig' %}
   2
   3 {% block content %}
   4     <div class="jsonly displaynone ui basic fitted segment">
   5         <a class="ui labeled icon button collapse">
   6             <i class="angle double down icon" aria-hidden="true"></i>
   7             {{ _T("Expand all") }}
   8         </a>
   9     </div>
  10     <form action="{{ url_for('configureCoreFields') }}" method="post" id="config_fields_form" class="ui form">
  11     <div id="members_tab">
  12 {% for category in categories %}
  13     {% set catname = category.category %}
  14         <div class="galetteform ui styled fluid accordion field">
  15             <div class="ui title">
  16                 <i class="jsonly displaynone dropdown icon" aria-hidden="true"></i>
  17                 {{ _T(catname) }}
  18                 <i class="jsonly displaynone arrows alternate icon" aria-hidden="true"></i>
  19             </div>
  20             <div class="content">
  21                 <div class="ui basic fitted segment">
  22                     <div class="ui three column stackable grid core-fields-properties">
  23                         <div class="middle aligned row">
  24                             <div class="column">
  25                                 <span class="ui fluid label">{{ _T("Field name") }}</span>
  26                             </div>
  27                             <div class="column">
  28                                 <span class="ui fluid label">{{ _T("Required") }}</span>
  29                             </div>
  30                             <div class="column">
  31                                 <span class="ui fluid label">{{ _T("Permissions") }}</span>
  32                             </div>
  33                         </div>
  34                     </div>
  35                 </div>
  36                 <ul id="sortable_{{ loop.index }}" class="sortable-items">
  37     {% set fs = category.id_field_category %}
  38     {% for col, field in categorized_fields[fs] %}
  39         {% if (preferences.pref_show_id or field.field_id != 'id_adh') and field.field_id != 'parent_id' %}
  40             {% set fid = field.field_id %}
  41                     <li class="ui segment">
  42                         <div class="ui three column stackable grid core-fields-listing">
  43                             <div class="middle aligned row">
  44                                 <div class="column">
  45                                     <i class="jsonly displaynone arrows alternate icon" aria-hidden="true"></i>
  46                                     <span data-prop-label="{{ _T("Field name") }}" class="fieldname">
  47                                         <input type="hidden" name="fields[]" value="{{ fid }}"/>
  48                                         <input type="hidden" name="{{ fid }}_category" value="{{ category.id_field_category }}"/>
  49                                         <input type="hidden" name="{{ fid }}_label" value="{{ field.label }}"/>
  50                                         {{ field.label }}
  51                                     </span>
  52                                 </div>
  53                                 <div class="column">
  54                                     <span data-prop-label="{{ _T("Required") }}" class="yesno" title="{% if fid in non_required %}{{ _T("Field '%field' cannot be set as required.")|replace({'%field': field.label}) }}{% else %}{{ _T("Mark '%field' as (not) required")|replace({'%field': field.label}) }}{% endif %}">
  55                                         <label for="{{ fid }}_required_yes">{{ _T("Yes") }}</label>
  56                                         <input type="radio" name="{{ fid }}_required" id="{{ fid }}_required_yes" value="1"{% if field.required %} checked="checked"{% endif %}{% if fid in non_required %} disabled="disabled"{% endif %}/>
  57                                         <label for="{{ fid }}_required_no">{{ _T("No") }}</label>
  58                                         <input type="radio" name="{{ fid }}_required" id="{{ fid }}_required_no" value="0"{% if not field.required %} checked="checked"{% endif %}{% if fid in non_required %} disabled="disabled"{% endif %}/>
  59                                     </span>
  60                                 </div>
  61                                 <div class="column">
  62                                     <span data-prop-label="{{ _T("Permissions") }}" class="access" title="{{ _T("Change '%field' permissions")|replace({'%field': field.label}) }}">
  63                                         <select name="{{ fid }}_visible" id="{{ fid }}_visible" class="ui dropdown">
  64                                             <option value="{{ constant('Galette\\Entity\\FieldsConfig::NOBODY') }}"{% if field.visible == constant('Galette\\Entity\\FieldsConfig::NOBODY') %} selected="selected"{% endif %}>{{ _T("Inaccessible") }}</option>
  65                                             <option value="{{ constant('Galette\\Entity\\FieldsConfig::ADMIN') }}"{% if field.visible == constant('Galette\\Entity\\FieldsConfig::ADMIN') %} selected="selected"{% endif %}>{{ _T("Administrator") }}</option>
  66                                             <option value="{{ constant('Galette\\Entity\\FieldsConfig::STAFF') }}"{% if field.visible == constant('Galette\\Entity\\FieldsConfig::STAFF') %} selected="selected"{% endif %}>{{ _T("Staff member") }}</option>
  67                                             <option value="{{ constant('Galette\\Entity\\FieldsConfig::MANAGER') }}"{% if field.visible == constant('Galette\\Entity\\FieldsConfig::MANAGER') %} selected="selected"{% endif %}>{{ _T("Group manager") }}</option>
  68                                             <option value="{{ constant('Galette\\Entity\\FieldsConfig::USER_READ') }}"{% if field.visible == constant('Galette\\Entity\\FieldsConfig::USER_READ') %} selected="selected"{% endif %}>{{ _T("Read only") }}</option>
  69                                             <option value="{{ constant('Galette\\Entity\\FieldsConfig::USER_WRITE') }}"{% if field.visible == constant('Galette\\Entity\\FieldsConfig::USER_WRITE') %} selected="selected"{% endif %}>{{ _T("Read/Write") }}</option>
  70                                         </select>
  71                                     </span>
  72                                 </div>
  73                             </div>
  74                         </div>
  75                     </li>
  76         {% endif %}
  77     {% endfor %}
  78                 </ul>
  79             </div>
  80             <input type="hidden" name="categories[]" id="category{{ loop.index }}" value="{{ category.id_field_category }}"/>
  81         </div>
  82 {% endfor %}
  83     </div>
  84     <div class="jsonly hidden ui basic fitted segment">
  85         <a class="ui labeled icon button collapse">
  86             <i class="angle double down icon" aria-hidden="true"></i>
  87             {{ _T("Expand all") }}
  88         </a>
  89     </div>
  90         <div class="ui basic center aligned segment">
  91             <button type="submit" class="ui labeled icon primary button action">
  92                 <i class="save icon" aria-hidden="true"></i> {{ _T("Save") }}
  93             </button>
  94             {% include "components/forms/csrf.html.twig" %}
  95         </div>
  96     </form>
  97 {% endblock %}
  98
  99 {% block javascripts %}
 100     <script type="module">
 101
 102         var _initSortable = function(){
 103             var _categories = document.getElementById('members_tab');
 104
 105             var _nestedSortables = [].slice.call(document.querySelectorAll('.sortable-items'));
 106             for (var i = 0; i < _nestedSortables.length; i++) {
 107                 new Sortable(_nestedSortables[i], {
 108                     group: 'nested',
 109                     animation: 150,
 110                     ghostClass: 'yellow',
 111                     fallbackOnBody: true,
 112                     swapThreshold: 0.65,
 113                     onAdd: function (evt) {
 114                         var _item = evt.item;
 115                         var _category = _item.parentElement.parentElement.parentElement.querySelectorAll('input[name^=categories]')[0].attributes.value.nodeValue;
 116                         _item.classList.add('yellow');
 117                         _item.querySelectorAll('input[name$=category]')[0].setAttribute('value', _category);
 118                     },
 119                     onUpdate: function (evt) {
 120                         var _item = evt.item;
 121                         _item.classList.add('yellow');
 122                     }
 123                 });
 124             }
 125
 126             new Sortable(_categories, {
 127                 animation: 150,
 128                 ghostClass: 'yellow',
 129                 onUpdate: function (evt) {
 130                     var _item = evt.item;
 131                     _item.classList.add('yellow');
 132                 }
 133             });
 134         }
 135
 136
 137         var _bindCollapse = function() {
 138             $('.collapse').click(function(){
 139                 var _this = $(this);
 140                 var _buttons = $('.collapse');
 141                 var _expandTxt = '<i class="angle double down icon" aria-hidden="true"></i> {{ _T("Expand all") }}';
 142                 var _collapseTxt = '<i class="angle double up icon" aria-hidden="true"></i> {{ _T("Collapse all") }}';
 143                 var _isExpand = false;
 144                 var _icon = _this.children('.icon');
 145                 if( _icon.is('.down') ) {
 146                     _buttons.html(_collapseTxt);
 147                 } else {
 148                     _isExpand = true;
 149                     _buttons.html(_expandTxt);
 150                 }
 151                 if (_isExpand == true) {
 152                     $('.ui.accordion.galetteform').accordion('close', 0);
 153                 } else {
 154                     $('.ui.accordion.galetteform').accordion('open', 0);
 155                 }
 156             });
 157         }
 158
 159         var _warnings = [];
 160         var _checkCoherence = function(index, elt){
 161             var _elt = $(elt);
 162             var _disabled = _elt.find('.yesno input:disabled, .access input:disabled');
 163             if ( _disabled.length == 0 ) {
 164                 var _required = parseInt(_elt.find('.yesno input:checked').val());
 165                 var _accessible = parseInt(_elt.find('.access option:selected').val());
 166
 167
 168                 if ( _required === 1 && _accessible === 0 ) {
 169                     _elt.addClass('red');
 170                     _warnings[_warnings.length] = _elt;
 171                 }
 172             }
 173         }
 174
 175         var _bindForm = function(){
 176             $('#config_fields_form').submit(function(){
 177
 178                 _warnings = [];
 179                 $('#members_tab .segment').removeClass('red');
 180                 $('.fields_list li').each(_checkCoherence);
 181
 182                 if ( _warnings.length > 0 ) {
 183                     var _w = $('#warnings');
 184
 185                     _w.find('li').remove();
 186                     $.each(_warnings, function(i,w){
 187                         var _val = w[0].getElementsByClassName('fieldname')[0].textContent.trim();
 188                         _w.find('ul').append('<li>' + _val + '</li>');
 189                     });
 190
 191                     {% include "elements/js/modal.js.twig" with {
 192                         modal_title: "_w.find('.header')",
 193                         modal_content: "_w.find('.content')",
 194                         modal_class: "tiny",
 195                         modal_deny_only: true,
 196                         modal_cancel_text: _T("Close")|e("js"),
 197                         modal_classname: "redalert",
 198                     } %}
 199                     return false;
 200                 } else {
 201                     return true;
 202                 }
 203             });
 204         }
 205
 206         $(function() {
 207             $('body').append($('<div id="warnings" title="{{ _T("Warning")|e("js") }}"><div class="header">{{ _T("Some warnings has been thrown:")|e("js") }}</div><div class="content"><ul></ul><p class="center aligned">{{ _T("Please correct above warnings to continue.") }}</p></div></div>').hide());
 208
 209             _bindForm();
 210
 211             _bindCollapse();
 212
 213             _initSortable();
 214
 215             $('#add_category').click(function() {
 216                 var _fieldsets = $('fieldset[id^=cat_]');
 217                 var _cat_iter = _fieldsets.length + 1;
 218
 219                 var _fs = $(_fieldsets[0]).clone();
 220                 _fs.attr('id', 'cat_' + _cat_iter).children('ul').attr('id', 'sortable_' + _cat_iter);
 221                 _fs.find('li:not(.listing)').remove();
 222
 223                 var _legend = _fs.children('legend');
 224                 var _a = _legend.children('a');
 225
 226                 _legend.html('<input type="text" name="categories[]" id="category' + _cat_iter + '" value="New category #' + _cat_iter + '"/>');
 227                 _legend.prepend(_a);
 228                 _a.spinDown();
 229
 230                 $('#members_tab').append(_fs);
 231                 _initSortable();
 232                 _bindCollapse();
 233
 234                 $(this).attr('href', '#cat_' + _cat_iter);
 235                 //Getting
 236                 var _url = document.location.toString();
 237                 if (_url.match('#')) { // the URL contains an anchor
 238                     var _url = _url.split('#')[0];
 239                 }
 240                 _url += '#cat_' + _cat_iter;
 241
 242                 document.location = _url;
 243                 _legend.children(':input').focus();
 244                 return false;
 245             });
 246         });
 247     </script>
 248 {% endblock %}