Fix groups selection widget on member form

[galette.git] / galette / templates / default / pages / member_form.html.twig

diff --git a/galette/templates/default/pages/member_form.html.twig b/galette/templates/default/pages/member_form.html.twig
index 6e1a0024a653d851e5c041b7dd3af3e88abf47e1..cbd0e0bc4bceedb9e14bd64a5859edc800599187 100644 (file)
--- a/galette/templates/default/pages/member_form.html.twig
+++ b/galette/templates/default/pages/member_form.html.twig
@@ -67,7 +67,7 @@
                             </div>
                         </div>
                         <span id="parent_id_elt" class="">
-                            <div id="parent_id" class="jsonly search-dropdown ui input nochosen paginated">
+                            <div id="parent_id" class="jsonly search-dropdown ui input paginated">
                                 <input id="parent_id_input" type="text" name="parent_id" value="{{ member.isDuplicate() and member.parent is defined and member.parent is not null ? member.parent.id }}" placeholder="{{ _T("Member ID") }}">
                                 <i class="jsonly displaynone dropdown icon" aria-hidden="true"></i>
                                 <span class="ui mini compact icon disabled button prev-results"><i class="jsonly displaynone chevron circle left icon disabled button tooltip" title="{{ _T("Load previous members...") }}" aria-hidden="true"></i></span>
@@ -116,7 +116,7 @@
             <div class="ui center aligned yellow segment">
                 <div class="inline field">
                     <label for="redirect_on_create">{{ _T("After member creation:") }}</label>
-                    <select name="redirect_on_create" id="redirect_on_create"i class="ui search dropdown nochosen">
+                    <select name="redirect_on_create" id="redirect_on_create"i class="ui search dropdown">
                         <option value="{{ constant('Galette\\Entity\\Adherent::AFTER_ADD_DEFAULT') }}"{% if preferences.pref_redirect_on_create == constant('Galette\\Entity\\Adherent::AFTER_ADD_DEFAULT') %} selected="selected"{% endif %}>{{ _T("create a new contribution (default action)") }}</option>
                         <option value="{{ constant('Galette\\Entity\\Adherent::AFTER_ADD_TRANS') }}"{% if preferences.pref_redirect_on_create == constant('Galette\\Entity\\Adherent::AFTER_ADD_TRANS') %} selected="selected"{% endif %}>{{ _T("create a new transaction") }}</option>
                         <option value="{{ constant('Galette\\Entity\\Adherent::AFTER_ADD_NEW') }}"{% if preferences.pref_redirect_on_create == constant('Galette\\Entity\\Adherent::AFTER_ADD_NEW') %} selected="selected"{% endif %}>{{ _T("create another new member") }}</option>
@@ -198,6 +198,7 @@
 {% block javascripts %}
         <script type="text/javascript">
             {% include "elements/js/choose_adh.js.twig" with {"js_chosen_id": "#parent_id"} %}
+            {% include "elements/js/choose_social.js.twig" %}
 
             $(function() {
                 $('#company_field.nocompany').addClass('displaynone');
@@ -270,14 +271,20 @@
                         //remove actual groups
                         var _form = (_managed) ? 'managed' : 'user';
                         $('#' + _form + 'groups_form').empty();
-                        var _groups = new Array();
-                        var _groups_str = '<br/><strong>';
-                        if ( _managed ) {
-                            _groups_str += '{{ _T("Manager for:")|e('js') }}';
+                        var _existing_labels = $('#groups_field .labels').children().length;
+                        var _new_labels = 0;
+                        if ($('#groups_field .labels').length === 0) {
+                            var _labels_container = '<div class="ui large labels"></div>';
+                            $('#btngroups').before(_labels_container);
                         } else {
-                            _groups_str += '{{ _T("Member of:")|e('js') }}';
+                            if (_managed) {
+                                $('#groups_field .labels').find('.label.manager').remove();
+                            } else {
+                                $('#groups_field .labels').find('.label.member').remove();
+                            }
                         }
-                        _groups_str += '</strong> ';
+                        var _groups = new Array();
+                        var _groups_str = '';
 
                         $('li[id^="group_"]').each(function(){
                             //get group values
@@ -290,12 +297,24 @@
                                 _gid + '|' + _gname + '|' +
                                 '" name="' + _iname + '[]">'
                             );
-                            if ( _groups.length > 1 ) {
-                                _groups_str += ', ';
+                            if (_managed) {
+                                _groups_str += '<span class="ui orange basic label manager">';
+                                _groups_str += '<i class="ui shield icon tooltip" title="' + '{{ _T("Group manager")|e('js') }}' + '" aria-hidden="true"></i>';
+                            } else {
+                                _groups_str += '<span class="ui orange basic label member">';
+                                _groups_str += '<i class="ui tag icon tooltip" title="' + '{{ _T("Member of group")|e('js') }}' + '" aria-hidden="true"></i>';
                             }
                             _groups_str += _gname;
+                            _groups_str += '</span>';
+                            _new_labels += 1;
                         });
-                        $('#' + _form + 'groups').html(_groups_str);
+                        $('#groups_field .labels').append(_groups_str);
+                        var _modified = '<div class="ui yellow tiny message with-transition">{{ _T("Items in this list have been modified. Don't forget to save your changes.")|e('js') }}</div>';
+                        if (_existing_labels != _new_labels) {
+                            $('#groups_field').find('.message').remove();
+                            $('#groups_field').append(_modified);
+                        }
+                        $('.message.with-transition').transition('flash');
                         $('.groups-selection').modal('hide');
                     });