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

   1 {% extends "page.html.twig" %}
   2
   3 {% set can_export = login.isGroupManager() and preferences.pref_bool_groupsmanagers_exports or login.isAdmin() or login.isStaff() %}
   4
   5 {% macro group_item(login, group, opened, selected) %}
   6     <div class="{% if group.getGroups()|length > 0 %}title{% if group.getName() in opened %} active{% endif %}{% else %}nochild{% endif %}">
   7         <i class="{% if group.getGroups()|length > 0 %}dropdown{% else %}empty{% endif %} icon"></i>
   8         <a class="ui{% if group.getName() == selected %} primary{% endif %} label" href="{% if login.isGroupManager(group.getId()) %}{{ url_for("groups", {"id": group.getId()}) }}{% else %}#{% endif %}">
   9             {{ group.getName() }}
  10         </a>
  11     </div>
  12     {% if group.getGroups()|length > 0 %}
  13     <div class="content{% if group.getName() in opened %} active{% endif %}">
  14         <div class="accordion">
  15         {% for child_group in group.getGroups() %}
  16             {{ _self.group_item(login, child_group, opened, selected) }}
  17         {% endfor %}
  18         </div>
  19     </div>
  20     {% endif %}
  21 {% endmacro %}
  22
  23 {% block content %}
  24     {% if group.getId() %}
  25         {% set opened = group.getFullName()|split(' / ') %}
  26         {% set selected = opened|last %}
  27         <div class="ui stackable grid">
  28             <div class="three wide column">
  29                 <div class="ui top attached accordion-styled header">{{ _T("Select a group") }} :</div>
  30                 <div class="ui attached accordion-styled scrolling segment loader_selector">
  31                     <div class="ui tree accordion">
  32                     {% for group in groups_root %}
  33                         {{ _self.group_item(login, group, opened, selected) }}
  34                     {% endfor %}
  35                     </div>
  36                 </div>
  37         {% if can_export %}
  38                 <div class="ui basic fitted segment">
  39                     <div class="ui wrapping spaced buttons">
  40                         <a href="{{ url_for("pdf_groups") }}" class="ui labeled icon fluid button tooltip" title="{{ _T("Export all groups and their members as PDF") }}">
  41                             <i class="file pdf red labeled icon" aria-hidden="true"></i>
  42                             {{ _T("All groups PDF") }}
  43                         </a>
  44             {% if login.isAdmin() or login.isStaff() %}
  45                         <a href="{{ url_for("add_group", {"name": "NAME"}) }}" class="ui labeled icon fluid button tooltip" id="newgroup" title="{{ _T("New group") }}">
  46                             <i class="plus circle green icon" aria-hidden="true"></i>
  47                             {{ _T("New group") }}
  48                         </a>
  49             {% endif %}
  50                     </div>
  51                 </div>
  52         {% endif %}
  53             </div>
  54             <div class="thirteen wide column">
  55                 {% include "elements/group.html.twig" with {"group": group, "groups": groups} %}
  56             </div>
  57         </div>
  58     {% else %}
  59         {{ _T("no group") }}
  60     {% endif %}
  61 {% endblock %}
  62
  63 {% block javascripts %}
  64 <script type="text/javascript">
  65     $(function() {
  66         var _mode;
  67
  68         {# New group #}
  69         $('#newgroup').click(function(){
  70             var _href = $(this).attr('href');
  71             var _input = '<div class="ui labeled input"><div class="ui label">{{ _T("Name:") }}</div><input type="text" name="new_group_name" id="new_group_name" required/></div>';
  72             $('body').modal({
  73                 title: '{{ _T("Add a new group") }}',
  74                 class: 'tiny',
  75                 content: _input,
  76                 onApprove: function() {
  77                     var _name = $('#new_group_name').val();
  78                     if ( _name != '' ) {
  79                         //check uniqueness
  80                         $.ajax({
  81                             url: '{{ url_for("ajax_groupname_unique") }}',
  82                             type: "POST",
  83                             data: {
  84                                 ajax: true,
  85                                 gname: _name
  86                             },
  87                             {% include "elements/js/loader.js.twig" with {
  88                                 selector: ".segment:not(.tab).loader_selector",
  89                                 loader: "button"
  90                             } %},
  91                             success: function(res){
  92                                 if ( res.success == false ) {
  93                                     if (res.message) {
  94                                         {% include "elements/js/modal.js.twig" with {
  95                                             modal_title_twig: _T("An error occurred :(")|e("js"),
  96                                             modal_content: "res.message",
  97                                             modal_class: "tiny",
  98                                             modal_content_class: "scrolling",
  99                                             modal_deny_only: true,
 100                                             modal_cancel_text: _T("Close")|e("js"),
 101                                             modal_classname: "redalert",
 102                                         } %}
 103                                     } else {
 104                                         {% include "elements/js/modal.js.twig" with {
 105                                             modal_title_twig: _T("The group name you have requested already exists in the database.")|e("js"),
 106                                             modal_without_content: true,
 107                                             modal_class: "mini",
 108                                             modal_deny_only: true,
 109                                             modal_cancel_text: _T("Close")|e("js"),
 110                                             modal_classname: "redalert",
 111                                         } %}
 112                                     }
 113                                 } else {
 114                                     $(location).attr('href', _href.replace('NAME', _name));
 115                                 }
 116                             },
 117                             error: function() {
 118                                 {% include "elements/js/modal.js.twig" with {
 119                                     modal_title_twig: _T("An error occurred checking name uniqueness :(")|e("js"),
 120                                     modal_without_content: true,
 121                                     modal_class: "mini",
 122                                     modal_deny_only: true,
 123                                     modal_cancel_text: _T("Close")|e("js"),
 124                                     modal_classname: "redalert",
 125                                 } %}
 126                             }
 127                         });
 128                     } else {
 129                         {% include "elements/js/modal.js.twig" with {
 130                             modal_title_twig: _T("Please provide a group name")|e("js"),
 131                             modal_without_content: true,
 132                             modal_class: "mini",
 133                             modal_deny_only: true,
 134                             modal_cancel_text: _T("Close")|e("js"),
 135                             modal_classname: "redalert",
 136                         } %}
 137                         return false;
 138                     }
 139                 },
 140                 actions: [{
 141                     text    : '{{ _T("Create")|e('js') }}',
 142                     icon    : 'plus',
 143                     class   : 'icon labeled green approve'
 144                 },{
 145                     text    : '{{ _T("Close")|e('js') }}',
 146                     icon    : 'times',
 147                     class   : 'icon labeled deny'
 148                 },]
 149             }).modal('show');
 150             return false;
 151         });
 152
 153         {# Members popup #}
 154         var _btnuser_mapping = function(){
 155             $('#btnusers_small, #btnmanagers_small').click(function(){
 156                 _mode = ($(this).attr('id') == 'btnusers_small') ? 'members' : 'managers';
 157                 var _persons = $('input[name="' + _mode + '[]"]').map(function() {
 158                     return $(this).val();
 159                 }).get();
 160                 $.ajax({
 161                     url: '{{ url_for('ajaxMembers') }}',
 162                     type: "POST",
 163                     data: {
 164                         multiple: true,
 165                         from: 'groups',
 166                         gid: $('#id_group').val(),
 167                         mode: _mode,
 168                         members: _persons
 169                     },
 170                     {% include "elements/js/loader.js.twig" with {
 171                         loader: "action",
 172                         selector: ".tab.segment.active .loader_selector"
 173                     } %},
 174                     success: function(res){
 175                         _members_dialog(res, _mode);
 176                     },
 177                     error: function() {
 178                         {% include "elements/js/modal.js.twig" with {
 179                             modal_title_twig: _T("An error occurred displaying members interface :(")|e("js"),
 180                             modal_without_content: true,
 181                             modal_class: "mini",
 182                             modal_deny_only: true,
 183                             modal_cancel_text: _T("Close")|e("js"),
 184                             modal_classname: "redalert",
 185                         } %}
 186                     }
 187                 });
 188                 return false;
 189             });
 190         }
 191         _btnuser_mapping();
 192
 193         var _members_dialog = function(res, mode){
 194             var _title = '{{ _T("Group members selection")|e('js') }}';
 195             if ( mode == 'managers' ) {
 196                 _title = '{{ _T("Group managers selection")|e('js') }}';
 197             }
 198             {% include "elements/js/modal.js.twig" with {
 199                 modal_title: "_title",
 200                 modal_content: "res",
 201                 modal_class: "members-selection fullscreen",
 202                 modal_content_class: "scrolling",
 203                 modal_deny_only: true,
 204                 modal_cancel_text: _T("Close")|e("js")
 205             } %}
 206             _members_ajax_mapper(res, $('#group_id').val(), mode);
 207
 208         }
 209
 210         var _members_ajax_mapper = function(res, gid, mode){
 211             $('#btnvalid').click(function(){
 212                 //store entities in the original page so they can be saved
 213                 var _container;
 214                 if ( mode == 'managers' ) {
 215                     _container = $('#group_managers');
 216                 } else {
 217                     _container = $('#group_members');
 218                 }
 219                 var _persons = new Array();
 220                 $('li[id^="member_"]').each(function(){
 221                     _persons[_persons.length] = this.id.substring(7, this.id.length);
 222                 });
 223                 if ( _persons.length == 0 ) {
 224                     var _persons = '';
 225                 }
 226                 $.ajax({
 227                     url: '{{ url_for('ajaxGroupMembers') }}',
 228                     type: "POST",
 229                     data: {
 230                         persons: _persons,
 231                         person_mode: mode
 232                     },
 233                     {% include "elements/js/loader.js.twig" with {
 234                         selector: "#btnvalid",
 235                         loader: "button"
 236                     } %},
 237                     success: function(res){
 238                         var _modified = '<div class="ui icon yellow small message with-transition"><i class="exclamation triangle icon"></i><div class="content">{{ _T("Items in this list have been modified. Don't forget to save your changes.")|e('js') }}</div></div>';
 239                         _container.find('.message').remove();
 240                         if ( res != 0 ) {
 241                             _container.find('.loader_selector').remove();
 242                             _container.children('.segment').append(res);
 243                             _container.children('#group_' + mode + ' .segment').append(_modified);
 244                         } else {
 245                             var _emptyselection = '<tbody><tr><td colspan="2">{{ _T("No member attached")|e('js') }}</td></tr></tbody>';
 246                             _container.find('table.listing tbody').remove();
 247                             _container.find('table.listing').append(_emptyselection);
 248                             _container.children('#group_' + mode + ' .segment').append(_modified);
 249                         }
 250                         $('.members-selection').modal('hide');
 251                         $('.message.with-transition').transition('flash');
 252                     },
 253                     error: function() {
 254                         {% include "elements/js/modal.js.twig" with {
 255                             modal_title_twig: _T("An error occurred displaying members interface :(")|e("js"),
 256                             modal_without_content: true,
 257                             modal_class: "mini",
 258                             modal_deny_only: true,
 259                             modal_cancel_text: _T("Close")|e("js"),
 260                             modal_classname: "redalert",
 261                         } %}
 262                     }
 263                 });
 264             });
 265
 266             //Remap links
 267             var _none = $('#none_selected').clone();
 268             $('li[id^="member_"]').click(function(){
 269                 $(this).remove();
 270                 if ( $('#selected_members ul li').length == 0 ) {
 271                     $('#selected_members ul').append(_none);
 272                 }
 273             });
 274
 275             $('#listing tbody tr').click(function(event){
 276                 event.preventDefault();
 277                 var _mlink = $(this).find('.username_row a');
 278                 var _mid = _mlink[0].href.match(/.*\/(\d+)$/)[1];
 279                 var _mname = _mlink.text();
 280                 $('#none_selected').remove()
 281                 if ( $('#member_' + _mid).length == 0 ) {
 282                     var _li = '<li id="member_' + _mid + '" class="item"><i class="ui user minus icon"></i><span class="ui content">' + _mname + '</span></li>';
 283                     $('#selected_members ul').append(_li);
 284                     $('#member_' + _mid).click(function(){
 285                         $(this).remove();
 286                         if ( $('#selected_members ul li').length == 0 ) {
 287                             $('#selected_members ul').append(_none);
 288                         }
 289                     });
 290                 }
 291                 return false;
 292             }).css('cursor', 'pointer').attr('title', '{{ _T("Click on a contribution row to attach it to the current transaction")|e('js') }}');
 293
 294             $('.members-selection .pagination a').click(function(){
 295                 var gid = $('#the_id').val();
 296                 var _members = new Array();
 297                 $('li[id^="member_"]').each(function(){
 298                     _members[_members.length] = this.id.substring(7, this.id.length);
 299                 });
 300
 301                 $.ajax({
 302                     url: this.href,
 303                     type: "POST",
 304                     data: {
 305                         from: 'groups',
 306                         gid: gid,
 307                         members: _members,
 308                         mode: _mode,
 309                         multiple: true
 310                     },
 311                     {% include "elements/js/loader.js.twig" with {
 312                         loader: "#listing"
 313                     } %},
 314                     success: function(res){
 315                         $('#listing').remove();
 316                         var _listing = $($.parseHTML(res)).find('#listing');
 317                         $('.members-selection .eleven.wide.column').append(_listing);
 318                         _members_ajax_mapper(res, gid, _mode);
 319                     },
 320                     error: function() {
 321                         {% include "elements/js/modal.js.twig" with {
 322                             modal_title_twig: _T("An error occurred displaying members interface :(")|e("js"),
 323                             modal_without_content: true,
 324                             modal_class: "mini",
 325                             modal_deny_only: true,
 326                             modal_cancel_text: _T("Close")|e("js"),
 327                             modal_classname: "redalert",
 328                         } %}
 329                     }
 330                 });
 331                 return false;
 332             });
 333         }
 334
 335         {% include "elements/js/removal.js.twig" with {
 336             loader: "button",
 337             loader_selector: "#delete",
 338             single_action: "true"
 339         } %}
 340     });
 341 </script>
 342 {% endblock %}