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