Add message deletion functionality to chat interface, including delete buttons for sent messages and improved styling for consistency. Update backend to return message ID upon sending for proper deletion handling.

This commit is contained in:
Max Młynarczyk 2025-05-31 13:41:57 +02:00
parent e1b54ad588
commit d1e5a1e284
3 changed files with 22 additions and 12 deletions

View file

@ -126,7 +126,7 @@
<li><a href="{% url 'chat_with_user' user.username %}">{{ user.username }}</a></li>
{% endfor %}
</ul>
<!--
<hr class="my-5">
<h3>Inbox</h3>
@ -137,7 +137,7 @@
<h3>Outbox</h3>
<button class="btn btn-secondary mb-3" onclick="loadOutbox()">Refresh</button>
<ul id="outbox-messages" class="list-group"></ul>
-->
</div>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
@ -153,9 +153,6 @@
ul.append(`<li class="list-group-item">
<strong>${msg.sender}</strong>: ${msg.content}<br>
<small>${msg.timestamp}</small>
<form action="/delete/${msg.id}/" method="post" style="display:inline;">
<input type="hidden" name="csrfmiddlewaretoken" value="${$('input[name="csrfmiddlewaretoken"]').val()}">
<button type="submit" class="btn btn-danger btn-sm" style="margin-top:5px;">Delete</button>
</form>
</li>`);
});
@ -173,7 +170,7 @@
<small>${msg.timestamp}</small>
<form action="/delete/${msg.id}/" method="post" style="display:inline;">
<input type="hidden" name="csrfmiddlewaretoken" value="${$('input[name="csrfmiddlewaretoken"]').val()}">
<button type="submit" class="btn btn-danger btn-sm" style="margin-top:5px;">Delete</button>
<button type="submit" class="btn btn-danger btn-sm" style="margin-top:5px; background-color: #dc3545; color: white; border: none; padding: 2px 8px; border-radius: 4px; cursor: pointer;">Delete</button>
</form>
</li>`);
});

View file

@ -95,6 +95,12 @@
<div style="margin: 10px 0; text-align: {% if msg.sender == request.user %}right{% else %}left{% endif %};">
<strong>{{ msg.sender.username }}</strong>: {{ msg.content }}<br>
<small>{{ msg.timestamp }}</small>
{% if msg.sender == request.user %}
<form action="/delete/{{ msg.id }}/" method="post" style="display:inline;">
{% csrf_token %}
<button type="submit" class="btn btn-danger btn-sm" style="margin-top:5px; background-color: #dc3545; color: white; border: none; padding: 2px 8px; border-radius: 4px; cursor: pointer;">Delete</button>
</form>
{% endif %}
</div>
{% endfor %}
</div>
@ -159,14 +165,20 @@
receiver: receiver,
content: content,
csrfmiddlewaretoken: csrfToken
}, function () {
}, function (response) {
$('#message-content').val('');
const now = new Date().toLocaleString();
const messageId = response.message_id;
$('#chat-log').append(`
<div style="margin: 10px 0; text-align: right;">
<strong>{{ request.user.username }}</strong>: ${content}<br>
<small>${now}</small>
<form action="/delete/${messageId}/" method="post" style="display:inline;">
<input type="hidden" name="csrfmiddlewaretoken" value="${csrfToken}">
<button type="submit" class="btn btn-danger btn-sm" style="margin-top:5px; background-color: #dc3545; color: white; border: none; padding: 2px 8px; border-radius: 4px; cursor: pointer;">Delete</button>
</form>
</div>
`);

View file

@ -510,8 +510,8 @@ def send_message(request):
reciever_username = request.POST.get('receiver')
content = request.POST.get('content')
receiver = User.objects.get(username=reciever_username)
Message.objects.create(sender=request.user, receiver=receiver, content=content)
return JsonResponse({"message": "sent"})
message = Message.objects.create(sender=request.user, receiver=receiver, content=content)
return JsonResponse({"message": "sent", "message_id": message.id})
else:
return JsonResponse({"message": "error"})
@ -551,7 +551,8 @@ def delete_message(request, message_id):
if request.method == "POST":
message = get_object_or_404(Message, id=message_id, sender=request.user)
message.delete()
return redirect('chat')
referer = request.META.get("HTTP_REFERER")
return redirect(referer)
@login_required
def music(request):