From 295bf68738080b29ab4930affc9a121dd8bc47c1 Mon Sep 17 00:00:00 2001
From: Zambom <erikzambom@hotmail.com>
Date: Thu, 9 Feb 2017 13:08:00 -0200
Subject: [PATCH] Adding comment mark users

---
 amadeus/static/css/base/amadeus.css               |  21 ++++++++++++++++++++-
 amadeus/static/css/themes/green.css               |   6 +++++-
 mural/templates/mural/_form_comment.html          | 122 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--
 mural/templates/mural/_user_suggestions_list.html |  18 ++++++++++++++++++
 mural/templates/mural/_view_comment.html          |   2 +-
 mural/urls.py                                     |   1 +
 mural/views.py                                    |  14 +++++++++++++-
 7 files changed, 178 insertions(+), 6 deletions(-)
 create mode 100644 mural/templates/mural/_user_suggestions_list.html

diff --git a/amadeus/static/css/base/amadeus.css b/amadeus/static/css/base/amadeus.css
index 56f4ea4..458a820 100755
--- a/amadeus/static/css/base/amadeus.css
+++ b/amadeus/static/css/base/amadeus.css
@@ -975,7 +975,7 @@ li.item .notify_badge {
 .mural .post_make .panel-body {
     padding: 0;
 }
-.mural .post_make .user-img, .post .post-img {
+.mural .post_make .user-img, .post .post-img, .suggestions .suggested-user .user-img {
     padding: 0;
     display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
     display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
@@ -1097,6 +1097,25 @@ li.item .notify_badge {
     font-size: 15px;
 }
 
+#adduser_field {
+    margin-bottom: 0px;
+}
+
+.suggestions {
+    position: absolute;
+    width: 100%;
+    z-index: 9;
+}
+
+.suggestions .suggested-user {
+    padding-bottom: 5px;
+    padding-top: 5px;
+}
+
+.marked_user {
+    font-weight: 700;
+}
+
 .btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn.active.focus {
     outline: none;
 }
\ No newline at end of file
diff --git a/amadeus/static/css/themes/green.css b/amadeus/static/css/themes/green.css
index 24a2aef..7ce5e80 100644
--- a/amadeus/static/css/themes/green.css
+++ b/amadeus/static/css/themes/green.css
@@ -512,7 +512,7 @@ a.add-row {
     color: #1d8fe0;
 }
 
-.post .post-user, .comment .comment-user {
+.post .post-user, .comment .comment-user, .marked_user {
     color: #4caf50;
 }
 
@@ -570,6 +570,10 @@ a.add-row {
     color: #FF0000;
 }
 
+.suggestions {
+    background: #FFFFFF;
+}
+
 .btn:not(.btn-raised):not(.btn-link):focus, .btn:not(.btn-raised):not(.btn-link):hover, .input-group-btn .btn:not(.btn-raised):not(.btn-link):focus, .input-group-btn .btn:not(.btn-raised):not(.btn-link):hover {
     background-color: initial;
 }
diff --git a/mural/templates/mural/_form_comment.html b/mural/templates/mural/_form_comment.html
index 9c37af6..8c51f91 100644
--- a/mural/templates/mural/_form_comment.html
+++ b/mural/templates/mural/_form_comment.html
@@ -70,16 +70,87 @@
 	</div>
 </div>
 
+<div id="add-user-modal" style="display:none">
+	<div class="modal-dialog" role="document">
+		<div class="modal-content">
+			<div class="modal-header">
+				<h3>{% trans 'Mark user in comment' %}</h3>
+			</div>
+			<div class="modal-body">
+				<p>{% trans 'Type the user name in the field below' %}</p>
+				<div class="form-group">
+					<input type="text" class="form-control" id="adduser_field" oninput="typing_search($(this));" />
+					<div class="suggestions list-group" data-url="{% url 'mural:suggest_users' %}" style="display:none">
+						
+					</div>
+				</div>
+			</div>
+			<div class="modal-footer">
+				<div class="col-md-12">
+					<button type="button" id="mark_btn" class="btn btn-success btn-raised post-button pull-left">{% trans "Mark" %}</button>
+					<button type="button" class="btn btn-raised btn-default pull-right" data-dismiss="modal">{% trans "Cancel" %}</button>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
+
 <script type="text/javascript">
 	$(function () {
+		var AddUserBtn = function (context) {
+		  	var ui = $.summernote.ui;
+
+			  // create button
+		  	var button = ui.button({
+			    contents: '<i class="fa fa-user"/>',
+			    tooltip: '{% trans "Mark User" %}',
+			    click: function () {
+			    	var modal_content = $("#add-user-modal").html();
+		      		var modal = document.createElement('div');
+			      	$(modal).addClass('modal');
+			      	$(modal).attr('id', 'teste-modal');
+			      	$(modal).html(modal_content);
+
+			      	$(modal).modal('show');
+
+			      	var btn = $(modal).find("#mark_btn"),
+			      		field = $(modal).find("#adduser_field");
+
+			      	btn.prop('disabled', true);
+
+			      	btn.click(function () {
+			      		var node = document.createElement('span'),
+			      			value = field.val();
+
+			      		$(node).addClass('marked_user');
+			      		$(node).html(value);
+			      		
+			      		var code = context.invoke('code');
+
+			      		var new_code = $(code).append(node).append("&nbsp;");
+
+			      		context.invoke('code', new_code);
+
+			      		$(modal).modal('hide');
+			      	});
+			    }
+	  		});
+
+		  	return button.render();   // return button as jquery object 
+		}
+
 		$('.text_simple_wysiwyg').summernote({
 			dialogsInBody: true,
 			height: 150,
 		  	toolbar: [
 			    // [groupName, [list of button]]
 			    ['style', ['bold', 'italic']],
-			    ['insert', ['link']]
-		  	]
+			    ['insert', ['link']],
+			    ['mybuttons', ['addUser']],
+		  	],
+		  	buttons: {
+		  		addUser: AddUserBtn
+		  	}
 		});
 
 		$.material.init();
@@ -89,6 +160,53 @@
 		}
 	});
 
+	var typingSearchTimer;                //timer identifier
+	var doneTypingSearchInterval = 1000; 
+
+	function typing_search(field) {
+		clearTimeout(typingSearchTimer);
+
+		var loading = '<button type="button" class="btn btn-block btn-default btn-sm"><span class="fa fa-spin fa-circle-o-notch"></span></button>';
+
+		if (field.val() != "") {
+        	typingSearchTimer = setTimeout(function () { searchUsers(field); }, doneTypingSearchInterval);
+
+			$('.suggestions').html(loading);
+			$('.suggestions').show();
+		} else {
+			$('.suggestions').html("");
+			$('.suggestions').hide();
+		}
+
+		$("#mark_btn").prop('disabled', true);
+	}
+
+	function searchUsers (field) {
+		var url = $('.suggestions').data('url'),
+			param = field.val();
+	    
+	    $.ajax({
+	    	url: url,
+	    	data: {'param': param},
+	    	dataType: 'json',
+	    	success: function (response) {
+	    		$('.suggestions').html(response.search_result);
+
+	    		$('.suggestions').find('.is-user').click(function (e) {
+	    			e.preventDefault();
+
+	    			var user_name = $(this).find('h4').text();
+
+	    			field.val(user_name);
+
+	    			$('.suggestions').hide();
+
+	    			$('.suggestions').parent().parent().parent().find("#mark_btn").prop('disabled', false);
+	    		});
+	    	}
+	    });
+	}
+
 	// initialize
 	function Init() {
 		var small = $("#id_image"),
diff --git a/mural/templates/mural/_user_suggestions_list.html b/mural/templates/mural/_user_suggestions_list.html
new file mode 100644
index 0000000..3ef6c0d
--- /dev/null
+++ b/mural/templates/mural/_user_suggestions_list.html
@@ -0,0 +1,18 @@
+{% load i18n %}
+
+{% if users.count > 0 %}
+	{% for user in users %}
+		<a href="#" class="list-group-item suggested-user is-user">
+			<div class="col-md-1 user-img">
+				<img src="{{ user.image_url }}" class="img-responsive" />
+			</div>
+			<div class="col-md-11">
+				<h4 data-user="{{ user.id }}">{{ user }}</h4>
+			</div>
+		</a>
+	{% endfor %}
+{% else %}
+	<a href="#" class="list-group-item suggested-user">
+		<h4 class="text-center">{% trans 'No results found.' %}</h4>
+	</a>
+{% endif %}
\ No newline at end of file
diff --git a/mural/templates/mural/_view_comment.html b/mural/templates/mural/_view_comment.html
index 2217ef7..583d1f3 100644
--- a/mural/templates/mural/_view_comment.html
+++ b/mural/templates/mural/_view_comment.html
@@ -10,7 +10,7 @@
 		<h4 class="comment-user">
 			{{ comment.user }}
 			<span class="user-action">
-				<i class="fa fa-comments-o"></i>
+				<i class="fa fa-commenting-o"></i>
 				{% trans 'Comment' %}
 			</span>
 			{% if request.user == comment.user or request.user.is_staff %}
diff --git a/mural/urls.py b/mural/urls.py
index a1a9bb2..1fe7eb5 100644
--- a/mural/urls.py
+++ b/mural/urls.py
@@ -11,4 +11,5 @@ urlpatterns = [
 	url(r'^comment/(?P<post>[\w_-]+)/$', views.CommentCreate.as_view(), name='create_comment'),
 	url(r'^render_comment/([\w_-]+)/([\w_-]+)/$', views.render_comment, name='render_comment'),
 	url(r'^render_post/([\w_-]+)/([\w_-]+)/$', views.render_gen_post, name='render_post_general'),
+	url(r'^suggest_users/$', views.suggest_users, name='suggest_users'),
 ]
\ No newline at end of file
diff --git a/mural/views.py b/mural/views.py
index 3ed7053..1c1d827 100644
--- a/mural/views.py
+++ b/mural/views.py
@@ -302,4 +302,16 @@ def render_comment(request, comment, msg):
 
 	html = render_to_string("mural/_view_comment.html", context, request)
 
-	return JsonResponse({'message': msg, 'view': html, 'new_id': comment.id})
\ No newline at end of file
+	return JsonResponse({'message': msg, 'view': html, 'new_id': comment.id})
+
+def suggest_users(request):
+	param = request.GET.get('param', '')
+
+	users = User.objects.filter(Q(username__icontains = param) | Q(last_name__icontains = param) | Q(social_name__icontains = param)).exclude(id = request.user.id)[:5]
+
+	context = {}
+	context['users'] = users
+
+	response = render_to_string("mural/_user_suggestions_list.html", context, request)
+
+	return JsonResponse({"search_result": response})
\ No newline at end of file
--
libgit2 0.21.2