contacts: display user roles in contact zone (#12630)

welco/contacts/templates/contacts/contact_detail_fragment.html

@@ -2,16 +2,17 @@
 <div class="contact">
 <input type="hidden" id="current-selected-user" name="current-selected-user" value="{{user_id}}"/>
 <h3>{{user_display_name}}</h3>
+{% if user_roles %}
+<p>{% for role in user_roles %}{{ role.text }}{% if not forloop.last %} / {% endif %}{% endfor %}</p>
+{% endif %}
+<ul>
 {% if user_var_address or user_var_city %}
-<p>{{user_var_address}} / {{user_var_zipcode}} {{user_var_city}}</p>
-{% endif %}
-{% if user_var_phone or user_var_mobile or user_var_email %}
-<p>
-  {% if user_var_phone %}{% trans 'Phone:' %} {{user_var_phone}}{% endif %}
-  {% if user_var_mobile %}{% trans 'Mobile:' %} {{user_var_mobile}}{% endif %}
-  {% if user_var_email %}{% trans 'Email:' %} {{user_var_email}}{% endif %}
-</p>
+<li>{% trans 'Address:' %} {{user_var_address}} / {{user_var_zipcode}} {{user_var_city}}</li>
 {% endif %}
+{% if user_var_phone %}<li>{% trans 'Phone:' %} {{user_var_phone}}</li>{% endif %}
+{% if user_var_mobile %}<li>{% trans 'Mobile:' %} {{user_var_mobile}}</li>{% endif %}
+{% if user_var_email %}<li>{% trans 'Email:' %} {{user_var_email}}</li>{% endif %}
+</ul>
 
 {% if forms %}
 <ul class="formdatas">

welco/contacts/views.py

@@ -84,8 +84,10 @@ def search_json(request):
         for user in result.get('data'):
             user['title'] = user['user_display_name']
             more = [user.get('user_var_address'), user.get('user_var_phone'),
-                user.get('user_var_birthdate'), user.get('user_var_email')]
+                user.get('user_var_mobile'), user.get('user_var_email')]
             user['more'] = ' / '.join([x for x in more if x])
+            if user.get('user_roles'):
+                user['roles'] = ' / '.join([r['text'] for r in user['user_roles']])
             user['slug'] = 'user-%s' % user['user_id']
     else:
         result = {'data': []}

welco/static/css/style.css

@@ -251,6 +251,11 @@ ul.formdatas a.remove {
 	color: #3c3c33;
 }
 
+ul.result li a span.roles {
+	display: block;
+	color: #333;
+}
+
 ul.result li a span.more {
 	display: block;
 	color: #666;

welco/static/js/welco.js

@@ -295,6 +295,9 @@ $(function() {
                     search_result_ul.empty();
                     $(response.data).each(function(idx, elem) {
                        var new_elem = '<li><a href="#" data-page-slug="' + elem.slug + '">' + elem.title;
+                       if (elem.roles) {
+                         new_elem = new_elem + ' <span class="roles">' + elem.roles + '</span>';
+                       }
                        if (elem.more) {
                          new_elem = new_elem + ' <span class="more">' + elem.more + '</span>';
                        }