Fix groups selection widget on member form

fixes #1801

diff --git a/galette/templates/default/components/forms/groups.html.twig b/galette/templates/default/components/forms/groups.html.twig
index 41994942256d5d6d7a56e6e3f5d7e7a427ab233a..594058d29202cfac13e2169524a16b7ebbde86bb 100644 (file)
--- a/galette/templates/default/components/forms/groups.html.twig
+++ b/galette/templates/default/components/forms/groups.html.twig
@@ -47,11 +47,12 @@
     <div class="ui large labels">
         {% for group in groups %}
             {% if member.isGroupMember(group.getName()) or member.isGroupManager(group.getName()) %}
-                <span class="ui label">
                 {% if member.isGroupMember(group.getName()) %}
+                <span class="ui label member">
                     <i class="ui tag icon tooltip" title="{{ _T("Member of group") }}" aria-hidden="true"></i>
                 {% endif %}
                 {% if member.isGroupManager(group.getName()) %}
+                <span class="ui label manager">
                     <i class="ui shield icon tooltip" title="{{ _T("Group manager") }}" aria-hidden="true"></i>
                 {% endif %}
                     {{ group.getName() }}

diff --git a/galette/templates/default/pages/member_form.html.twig b/galette/templates/default/pages/member_form.html.twig
index a5a900807643ee35b4b12e637966eec1b38e6347..4d6a91073123924365322bcc7615bf4793021636 100644 (file)
--- a/galette/templates/default/pages/member_form.html.twig
+++ b/galette/templates/default/pages/member_form.html.twig
@@ -291,14 +291,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
@@ -311,12 +317,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');
                     });