contacts: improve contact selection UI (#8784)

welco/contacts/templates/contacts/contact_detail_fragment.html

@@ -1,7 +1,7 @@
 {% load i18n %}
 <div class="contact">
 <input type="hidden" id="current-selected-user" name="current-selected-user" value="{{user_id}}"/>
-<h3>{{user_display_name}} <button class="save">✓</button></h3>
+<h3>{{user_display_name}} <button class="save {% if is_pinned_user %}pinned{% endif %}">✓</button></h3>
 {% if user_var_address or user_var_city %}
 <p>{{user_var_address}} / {{user_var_zipcode}} {{user_var_city}}</p>
 {% endif %}

welco/contacts/templates/contacts/zone.html

@@ -14,7 +14,7 @@
     {% endif %}
   </div>
   <div class="back-to-empty">
-    <a href="#" class="reset">{% trans 'Back to search' %}</a>
+    <a href="#" class="reset">{% trans 'Back to search to search for another user' %}</a>
   </div>
 
 </div>

welco/contacts/views.py

@@ -84,11 +84,19 @@ class ContactDetailFragmentView(TemplateView):
 
     def get_context_data(self, **kwargs):
         context = super(ContactDetailFragmentView, self).get_context_data(**kwargs)
+
         user_id = self.kwargs.get('slug').split('-')[-1]
         user_details = get_wcs_data('api/users/%s/' % user_id)
         context.update(user_details)
         context['forms'] = get_wcs_data('api/users/%s/forms' % user_id)
         context['user_id'] = user_id
+
+        if 'source_pk' in self.request.GET:
+            source_class = ContentType.objects.get(
+                    id=self.request.GET['source_type']).model_class()
+            source_object = source_class.objects.get(id=self.request.GET['source_pk'])
+            context['is_pinned_user'] = bool(source_object.contact_id == user_id)
+
         return context
 
 contact_detail_fragment = ContactDetailFragmentView.as_view()

welco/static/css/style.css

@@ -446,3 +446,9 @@ form#note textarea {
 p.no-mail-table {
 	padding: 10px;
 }
+
+button.save.pinned {
+	background: transparent;
+	box-shadow: none;
+	border: none;
+}

welco/static/js/welco.js

@@ -49,6 +49,7 @@ $(function() {
             dataType: 'html',
             success: function(data) {
                     $('div.contacts h3').effect('highlight');
+                    $('div.contacts button.save').addClass('pinned');
             },
             error: function(error) { console.log(':/', error); }
     });
@@ -97,6 +98,12 @@ $(function() {
     var formdef_reference = $('#id_formdef_reference').val();
     var source_type = $('div.source div[data-source-type]').data('source-type');
     var source_pk = $('div.source .active[data-source-pk]').data('source-pk');
+    if ($('div.contacts button.save').length &&
+        $('div.contacts button.save.pinned').length == 0) {
+      if (confirm("Transmettre alors que le contact n'est pas sélectionné ?") != true) {
+        return false;
+      }
+    }
     $.ajax({url: $(this).data('action-url'),
             data: {formdef_reference: formdef_reference,
                    source_type: source_type,
@@ -228,8 +235,11 @@ $(function() {
   $('.contacts').delegate('ul.result a', 'click', function() {
     var user_slug = $(this).data('page-slug');
     var fragment_url = $(this).parents('[data-contact-fragment-url]').data('contact-fragment-url') + user_slug + '/';
+    var source_type = $('div.source div[data-source-type]').data('source-type');
+    var source_pk = $('div.source .active[data-source-pk]').data('source-pk');
     $.ajax({url: fragment_url,
             method: 'GET',
+            data: {source_type: source_type, source_pk: source_pk},
             dataType: 'html',
             success: function(data) {
               $('.contacts .contact').replaceWith(data);