nestict/ihrm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[UPDT] HELPDESK: Updated ticket detail view to include drag and drop for attachments, and navigation buttons for next and prev (#972)

Browse Source
This commit is contained in:
Horilla
2025-11-10 14:41:54 +05:30
parent df82a7a7b2
commit 17b8431a74
1 changed files with 70 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

170
horilla_theme/templates/helpdesk/ticket/ticket_detail.html
View File

@@ -9,7 +9,7 @@
<div class="col-span-12 lg:col-span-3 border-r border-dark-50 pe-4">
<div class="bg-white rounded-md shadow-card p-3">
<div
class="h-[calc(100vh_-_200px)] overflow-hidden overflow-y-auto p-3"
class="h-[calc(100vh_-_160px)] overflow-hidden overflow-y-auto p-3 flex flex-col"
>
<div class="flex items-center justify-between p-3">
<h3 class="text-lg font-semibold">{{ticket.title|title}}</h3>
@@ -160,6 +160,7 @@
>
<p>{% trans "Assigned to" %}</p>
<div class="flex gap-1">
{% if perms.helpdesk.change_claimrequest or perms.helpdesk.change_ticket or request.user.employee_get|is_department_manager:ticket %}
<button
class="w-6 h-6 rounded-md bg-primary-600 flex items-center justify-center text-white text-xs transition duration-300 hover:bg-primary-700"
data-toggle="oh-modal-toggle"
@@ -170,6 +171,9 @@
>
<i class="fa-solid fa-eye"></i>
</button>
{% endif %}
{% if perms.helpdesk.change_ticket or request.user.employee_get|is_department_manager:ticket %}
<button
class="w-6 h-6 rounded-md bg-primary-600 flex items-center justify-center text-white text-xs transition duration-300 hover:bg-primary-700"
hx-get="{% url 'ticket-change-assignees' ticket.id %}"
@@ -180,6 +184,7 @@
>
<i class="fa-solid fa-pen"></i>
</button>
{% endif %}
</div>
</div>
<ul class="userlist">
@@ -209,24 +214,19 @@
<h3 class="text-sm font-semibold mb-2">{% trans "Documents" %}</h3>
<div class="mb-3 w-full">
<label
for="fileUpload1"
class="flex items-center bg-white justify-center gap-2 px-4 py-2 border border-dark-50 rounded-md text-xs text-gray-700 cursor-pointer hover:bg-gray-100 transition duration-300"
>
<svg
class="w-4 h-4 text-primary-600"
fill="none"
stroke="currentColor"
stroke-width="2"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1M12 12V4m0 0l4 4m-4-4L8 8"
></path>
</svg>
{% trans "Choose File" %}
<label for="fileUpload1"
id="dropZone"
class="flex flex-col items-center justify-center px-4 py-6 border-2 border-dashed border-gray-300 rounded-md cursor-pointer hover:bg-gray-100 transition">
<div class="flex items-center gap-2">
<svg class="w-5 h-5 text-primary-600" fill="none" stroke="currentColor" stroke-width="2"
viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round"
d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1M12 12V4m0 0l4 4m-4-4L8 8"></path>
</svg>
<span class="text-gray-700 text-sm">{% trans "Choose or Drop Files Here" %}</span>
</div>
</label>
<input
@@ -272,7 +272,7 @@
</div>
</a>
<span class="absolute"
<span class="absolute attachmentDelete"
style="top: -6px; right: 0px; color: red; font-size: 16px; cursor: pointer;"
title="Delete attachment"
hx-delete="{% url 'delete-ticket-document' attachment.id %}"
@@ -289,6 +289,22 @@
{% endif %}
</div>
</div>
<div class="mt-auto">
<div class="flex gap-1 justify-end cursor-pointer mb-4">
<a
href = "{% url 'ticket-detail' prev_id %}"
class="p-2 w-8 h-8 justify-center bg-primary-600 text-white rounded-full text-xs flex items-center gap-2 hover:bg-primary-800 transition duration-300"
>
<i class="fa-solid fa-angle-left"></i>
</a>
<a
href = "{% url 'ticket-detail' next_id %}"
class="p-2 w-8 h-8 justify-center bg-primary-600 text-white rounded-full text-xs flex items-center gap-2 hover:bg-primary-800 transition duration-300"
>
<i class="fa-solid fa-angle-right"></i>
</a>
</div>
</div>
</div>
</div>
</div>
@@ -340,87 +356,10 @@
<div class=" h-[calc(100vh_-_365px)] overflow-hidden overflow-y-auto p-5" id="ticketContainer">
{% for item in sorted_activity_list %}
{% if item.type == 'comment' %}
{% if item.comment.employee_id == ticket.employee_id %}
{% comment %} <div class="w-full flex justify-end mb-3">
<div
class="bg-[#26bf941a] p-5 rounded-2xl max-w-[90%] md:w-[60%] mb-3 md:mb-1"
>
<div
class="flex flex-wrap items-center justify-between mb-3"
>
<div
class="flex gap-3 items-center font-semibold text-sm"
>
<img
src="{{item.comment.employee_id.get_avatar}}"
alt="{{item.comment.employee_id}}"
width="30"
/><span>{{item.comment.employee_id.get_full_name}}</span>
</div>
<p class="text-sm font-semibold">
<span class="dateformat_changer">{{ item.comment.date|date}}</span>
<span class="timeformat_changer">{{ item.comment.date|time}}</span>
</p>
</div>
<span class="text-sm text-[#333]">
{{item.comment.comment|safe}}
</span>
<div class="oh-btn-group" style="border:none">
{% if request.user.employee_get|is_department_manager:ticket or perms.helpdesk.change_comment or request.user.employee_get == item.comment.employee_id %}
<a class="oh-btn p-3 edit_comment" title="{% trans 'Edit' %}">
<ion-icon name="pencil-outline"></ion-icon>
</a>
{% endif %}
{% if perms.helpdesk.delete_comment %}
<a href="{% url "comment-delete" item.comment.id %}" type="button"
title="{% trans 'Delete' %}" class="oh-btn p-3 text-danger">
<ion-icon name="trash-outline"></ion-icon>
</a>
{% endif %}
</div>
<div class="w-[80%] overflow-x-auto flex mt-3">
{% if item.comment.comment_attachment.all %}
{% for attachment in item.comment.comment_attachment.all %}
{% with extension=attachment.file.name|lower|slice:"-4:" %}
<a class="me-2"
data-toggle="oh-modal-toggle"
data-target="#viewFileModal"
hx-target="#viewFile"
hx-get="{% url 'view-ticket-document' attachment.id %}"
>
<div class="oh-helpdesk__icon bg-[#d944bb1a]">
<span class="oh-file-icon
{% if extension == '.pdf' %} oh-file-icon--pdf
{% elif extension in '.jpg .jpeg .png .gif .svg' %} oh-file-icon--image
{% elif extension in '.mp3 .wav .ogg' %} oh-file-icon--audio
{% elif extension in '.doc .docx' %} oh-file-icon--word
{% elif extension in '.xls .xlsx' %} oh-file-icon--excel
{% elif extension in '.ppt .pptx' %} oh-file-icon--powerpoint
{% elif extension in '.html' %} oh-file-icon--html
{% else %} oh-file-icon--default
{% endif %}"
title="{{ attachment }}"
>
</span>
</div>
</a>
{% endwith %}
{% endfor %}
{% endif %}
</div>
</div>
</div> {% endcomment %}
<div class="w-full flex justify-end mb-3">
<div
class="bg-[#26bf941a] p-5 rounded-2xl max-w-[90%] md:w-[60%] mb-3 md:mb-1"
>
{% else %}
<div class="w-full flex justify-start mb-3">
<div class="w-full flex mb-3 {% if item.comment.employee_id == ticket.employee_id %}justify-end {% else %}justify-start {% endif %}">
<div
class="bg-[#d944bb1a] p-5 rounded-2xl max-w-[90%] md:w-[60%] mb-3 md:mb-1"
>
{% endif %}
<div
class="flex flex-wrap items-center justify-between mb-3"
>
@@ -491,7 +430,6 @@
</div>
</div>
</div>
{% comment %} {% endif %} {% endcomment %}
{% elif item.type == 'history' %}
{% if item.history.type == 'Ticket created' %}
<p class="text-sm text-[#0E79DC] mb-2">
@@ -764,6 +702,38 @@
}
}, 100);
})
</script>
$(document).ready(function () {
const $dropZone = $("#dropZone");
const $fileInput = $("#fileUpload1");
$dropZone.on("dragover", function (e) {
e.preventDefault();
$dropZone.addClass("bg-gray-100 border-primary-500");
});
$dropZone.on("dragleave", function () {
$dropZone.removeClass("bg-gray-100 border-primary-500");
});
$dropZone.on("drop", function (e) {
e.preventDefault();
$dropZone.removeClass("bg-gray-100 border-primary-500");
const files = e.originalEvent.dataTransfer.files;
$fileInput[0].files = files;
$fileInput[0].dispatchEvent(new Event('change', { bubbles: true }));
});
$(".attachmentDelete").on("click", function(){
$(".swal2-confirm").on("click", function(){
setTimeout(() => {
reloadMessage()
}, 300)
})
})
});
</script>
{% endblock %}