You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
288 lines
17 KiB
HTML
288 lines
17 KiB
HTML
{% extends "main.html" %}
|
|
{%load static%}
|
|
{% block content %}
|
|
|
|
|
|
<div class="w-full xxlg1:w-[75%] bg-white h-fit rounded-md shadow-md p-5">
|
|
<div class="w-full h-fit flex flex-col gap-2 bg-gray-100 shadow-md rounded-md px-3 py-3">
|
|
<p class="text-secondosiblue text-[20px]">Ticket <span class="font-semibold">#{{ticket.ticket_number}}</span>
|
|
</p>
|
|
|
|
|
|
{% if last_ticket_status.status == 'Open' %}
|
|
<div class="flex justify-start items-center gap-1">
|
|
<div class="w-[16px] h-[16px] rounded-full bg-green-200 shadow-md"></div>
|
|
<p class="text-secondosiblue font-light">Opened by {{last_ticket_status.added_by.first_name}} at
|
|
{{last_ticket_status.date_added}}</p>
|
|
</div>
|
|
{% elif last_ticket_status.status == 'Working On' %}
|
|
<div class="flex justify-start items-center gap-1">
|
|
<div class="w-[16px] h-[16px] rounded-full bg-yellow-200 shadow-md"></div>
|
|
<p class="text-secondosiblue font-light">Updated to 'Working On' by
|
|
{{last_ticket_status.added_by.first_name}} at {{last_ticket_status.date_added}}</p>
|
|
</div>
|
|
{% elif last_ticket_status.status == 'Closed' %}
|
|
<div class="flex justify-start items-center gap-1">
|
|
<div class="w-[16px] h-[16px] rounded-full bg-red-200 shadow-md"></div>
|
|
<p class="text-secondosiblue font-light">Closed by {{last_ticket_status.added_by.first_name}} at
|
|
{{last_ticket_status.date_added}}</p>
|
|
</div>
|
|
{% endif %}
|
|
|
|
|
|
<div class="w-full mt-3">
|
|
<p class="text-gray-500 font-light text-sm leading-7">{{ticket.description}}
|
|
</p>
|
|
</div>
|
|
|
|
{% if ticket.ticketattachment_set.all %}
|
|
<div class="w-full flex flex-wrap justify-end items-center gap-3">
|
|
<a>
|
|
<div class="flex items-center gap-1 text-secondosiblue hover:text-gray-500 duration-300 cursor-pointer">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
|
stroke="currentColor" class="w-4 h-4 text-secondosiblue">
|
|
<path stroke-linecap="round" stroke-linejoin="round"
|
|
d="m18.375 12.739-7.693 7.693a4.5 4.5 0 0 1-6.364-6.364l10.94-10.94A3 3 0 1 1 19.5 7.372L8.552 18.32m.009-.01-.01.01m5.699-9.941-7.81 7.81a1.5 1.5 0 0 0 2.112 2.13" />
|
|
</svg>
|
|
{% for file in ticket.ticketattachment_set.all %}
|
|
<a href="{{file.file.url}}">{{ file.file }}{% if not forloop.last %}, {% endif %}</a>
|
|
{% endfor %}
|
|
</div>
|
|
</a>
|
|
</div>
|
|
{% endif %}
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="w-full flex flex-col gap-8 mt-5 s:mt-10">
|
|
<!-- REPLY 1 -->
|
|
{% for update in ticket_updates %}
|
|
<div class="flex gap-3">
|
|
<div>
|
|
<div class="w-[45px] s:w-[60px] h-[45px] s:h-[60px] rounded-full shadow-md border border-gray-100">
|
|
{% if update.added_by.customerprofile %}
|
|
{% if update.added_by.customerprofile.image %}
|
|
<img src="{{update.added_by.customerprofile.image.url}}"
|
|
class="w-full h-full rounded-full object-cover">
|
|
{% else %}
|
|
<div
|
|
class="w-full h-full border border-secondosiblue bg-secondosiblue text-white uppercase rounded-full flex justify-center items-center p-1 shadow-md">
|
|
{{ update.added_by.first_name.0 }}{{ update.added_by.last_name.0 }}
|
|
</div>
|
|
{% endif %}
|
|
{% elif update.added_by.staffprofile %}
|
|
{% if update.added_by.staffprofile.image %}
|
|
<img src="{{update.added_by.staffprofile.image.url}}"
|
|
class="w-full h-full rounded-full object-cover">
|
|
{% else %}
|
|
<div
|
|
class="w-full h-full border border-osiblue bg-osiblue text-white uppercase rounded-full flex justify-center items-center p-1 shadow-md">
|
|
{{ update.added_by.first_name.0 }}{{ update.added_by.last_name.0 }}
|
|
</div>
|
|
{% endif %}
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="w-full replyContainer shadow-md">
|
|
<div
|
|
class="w-full bg-gray-100 flex justify-between items-center gap-3 px-3 py-3 cursor-pointer rounded-t-md toggleReply">
|
|
<p class="text-secondosiblue font-light text-sm s:text-base"><span
|
|
class="font-semibold">{{update.added_by.first_name}}</span>
|
|
replied {{update.date_added}}</p>
|
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
|
stroke="currentColor" class="w-4 h-4 text-secondosiblue arrowUp">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="m4.5 15.75 7.5-7.5 7.5 7.5" />
|
|
</svg>
|
|
|
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
|
stroke="currentColor" class="w-4 h-4 text-secondosiblue arrowDown hidden">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
|
|
</svg>
|
|
</div>
|
|
|
|
<div class="w-full bg-white p-5 flex flex-col gap-3 reply default-css">
|
|
{{update.description | safe }}
|
|
|
|
|
|
{% if update.ticketattachment_set.all %}
|
|
<div class="w-full flex flex-wrap justify-end items-center gap-3">
|
|
<a>
|
|
<div
|
|
class="flex items-center gap-1 text-secondosiblue hover:text-gray-500 duration-300 cursor-pointer text-sm">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
|
|
stroke-width="1.5" stroke="currentColor" class="w-4 h-4 text-secondosiblue">
|
|
<path stroke-linecap="round" stroke-linejoin="round"
|
|
d="m18.375 12.739-7.693 7.693a4.5 4.5 0 0 1-6.364-6.364l10.94-10.94A3 3 0 1 1 19.5 7.372L8.552 18.32m.009-.01-.01.01m5.699-9.941-7.81 7.81a1.5 1.5 0 0 0 2.112 2.13" />
|
|
</svg>
|
|
{% for file in update.ticketattachment_set.all %}
|
|
<a href="{{file.file.url}}">{{ file.file }}{% if not forloop.last %}, {% endif %}</a>
|
|
{% endfor %}
|
|
</div>
|
|
</a>
|
|
</div>
|
|
{% endif %}
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
|
|
<!-- REPLYING SECTION -->
|
|
<form class="flex gap-3" method="POST" action="{% url 'addticketupdate' ticket.id %}"
|
|
enctype="multipart/form-data">
|
|
{% csrf_token %}
|
|
<div>
|
|
<div class="w-[45px] s:w-[60px] h-[45px] s:h-[60px] rounded-full shadow-md border border-gray-100">
|
|
{% if request.user.customerprofile %}
|
|
{% if request.user.customerprofile.image %}
|
|
<img src="{{request.user.customerprofile.image.url}}"
|
|
class="w-full h-full rounded-full object-cover">
|
|
{% else %}
|
|
<div
|
|
class="w-full h-full border border-secondosiblue bg-secondosiblue text-white uppercase rounded-full flex justify-center items-center p-1 shadow-md">
|
|
{{ request.user.first_name.0 }}{{ request.user.last_name.0 }}
|
|
</div>
|
|
{% endif %}
|
|
{% elif request.user.staffprofile %}
|
|
{% if request.user.staffprofile.image %}
|
|
<img src="{{request.user.staffprofile.image.url}}" class="w-full h-full rounded-full object-cover">
|
|
{% else %}
|
|
<div
|
|
class="w-full h-full border border-osiblue bg-osiblue text-white uppercase rounded-full flex justify-center items-center p-1 shadow-md">
|
|
{{ request.user.first_name.0 }}{{ request.user.last_name.0 }}
|
|
</div>
|
|
{% endif %}
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="w-full flex flex-col gap-3">
|
|
<div>
|
|
<div class="flex justify-start items-center gap-3 px-5 py-3 rounded-t-md bg-gray-200">
|
|
<div id="boldBtn" class="cursor-pointer hover:text-secondosiblue duration-300" title="Bold">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-5 h-5" color="#000000"
|
|
fill="none">
|
|
<path fill-rule="evenodd" clip-rule="evenodd"
|
|
d="M5 6C5 4.58579 5 3.87868 5.43934 3.43934C5.87868 3 6.58579 3 8 3H12.5789C15.0206 3 17 5.01472 17 7.5C17 9.98528 15.0206 12 12.5789 12H5V6Z"
|
|
stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
|
|
stroke-linejoin="round" />
|
|
<path
|
|
d="M12.4286 12H13.6667C16.0599 12 18 14.0147 18 16.5C18 18.9853 16.0599 21 13.6667 21H8C6.58579 21 5.87868 21 5.43934 20.5607C5 20.1213 5 19.4142 5 18V12"
|
|
stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
|
|
stroke-linejoin="round" />
|
|
</svg>
|
|
</div>
|
|
|
|
<div id="italicBtn" class="cursor-pointer hover:text-secondosiblue duration-300" title="Italic">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-5 h-5" color="#000000"
|
|
fill="none">
|
|
<path d="M12 4H19" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
|
|
<path d="M8 20L16 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
|
|
<path d="M5 20H12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
|
|
</svg>
|
|
</div>
|
|
|
|
<div id="listBtn" class="cursor-pointer hover:text-secondosiblue duration-300" title="List">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-5 h-5" color="#000000"
|
|
fill="none">
|
|
<path d="M8 5L20 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
|
|
<path d="M4 5H4.00898" stroke="currentColor" stroke-width="2" stroke-linecap="round"
|
|
stroke-linejoin="round" />
|
|
<path d="M4 12H4.00898" stroke="currentColor" stroke-width="2" stroke-linecap="round"
|
|
stroke-linejoin="round" />
|
|
<path d="M4 19H4.00898" stroke="currentColor" stroke-width="2" stroke-linecap="round"
|
|
stroke-linejoin="round" />
|
|
<path d="M8 12L20 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
|
|
<path d="M8 19L20 19" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
|
|
</svg>
|
|
</div>
|
|
|
|
<div id="rtlButton" class="cursor-pointer hover:text-secondosiblue duration-300"
|
|
title="Right To Left">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-5 h-5" color="#000000"
|
|
fill="none">
|
|
<path d="M15 3.5H21" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
|
|
stroke-linejoin="round" />
|
|
<path d="M15 9.5H21" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
|
|
stroke-linejoin="round" />
|
|
<path d="M3 15.5H21" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
|
|
stroke-linejoin="round" />
|
|
<path d="M3 21.5H21" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
|
|
stroke-linejoin="round" />
|
|
<path
|
|
d="M3.58579 9.91421C4.17157 10.5 5.11438 10.5 7 10.5C8.88562 10.5 9.82843 10.5 10.4142 9.91421C11 9.32843 11 8.38562 11 6.5C11 4.61438 11 3.67157 10.4142 3.08579C9.82843 2.5 8.88562 2.5 7 2.5C5.11438 2.5 4.17157 2.5 3.58579 3.08579C3 3.67157 3 4.61438 3 6.5C3 8.38562 3 9.32843 3.58579 9.91421Z"
|
|
stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
|
|
stroke-linejoin="round" />
|
|
</svg>
|
|
</div>
|
|
|
|
<div id="ltrButton" class="cursor-pointer hover:text-secondosiblue duration-300"
|
|
title="Left To Right">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-5 h-5" color="#000000"
|
|
fill="none">
|
|
<path d="M3 3.5H9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
|
|
stroke-linejoin="round" />
|
|
<path d="M3 9.5H9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
|
|
stroke-linejoin="round" />
|
|
<path d="M3 15.5H21" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
|
|
stroke-linejoin="round" />
|
|
<path d="M3 21.5H21" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
|
|
stroke-linejoin="round" />
|
|
<path
|
|
d="M13.5858 9.91421C14.1716 10.5 15.1144 10.5 17 10.5C18.8856 10.5 19.8284 10.5 20.4142 9.91421C21 9.32843 21 8.38562 21 6.5C21 4.61438 21 3.67157 20.4142 3.08579C19.8284 2.5 18.8856 2.5 17 2.5C15.1144 2.5 14.1716 2.5 13.5858 3.08579C13 3.67157 13 4.61438 13 6.5C13 8.38562 13 9.32843 13.5858 9.91421Z"
|
|
stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
|
|
stroke-linejoin="round" />
|
|
</svg>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<textarea name="description" rows="8" id="textEditor"
|
|
class="w-full bg-white px-3 py-3 border border-gray-200 rounded-b-md outline-none text-gray-500 resize-none"
|
|
placeholder="Add Comment..." required></textarea>
|
|
</div>
|
|
|
|
|
|
<div class="w-full flex flex-col s:flex-row justify-end items-center gap-3">
|
|
<div
|
|
class="w-full s:w-[50px] h-[50px] rounded-md bg-gray-50 shadow-md border border-gray-100 flex justify-center items-center p-2 cursor-pointer relative hover:scale-105 duration-300 transition-transform">
|
|
<input type="file" name="files" id="fileInput" class="opacity-0">
|
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
|
stroke="currentColor" class="w-5 h-5 text-secondosiblue z-10 absolute pointer-events-none">
|
|
<path stroke-linecap="round" stroke-linejoin="round"
|
|
d="m18.375 12.739-7.693 7.693a4.5 4.5 0 0 1-6.364-6.364l10.94-10.94A3 3 0 1 1 19.5 7.372L8.552 18.32m.009-.01-.01.01m5.699-9.941-7.81 7.81a1.5 1.5 0 0 0 2.112 2.13" />
|
|
</svg>
|
|
</div>
|
|
|
|
<button
|
|
class="w-full s:w-fit bg-white border border-secondosiblue text-secondosiblue rounded-md cursor-pointer hover:bg-secondosiblue hover:text-white duration-300 px-9 py-3">
|
|
Send as Note
|
|
</button>
|
|
|
|
<button
|
|
class="w-full s:w-fit bg-secondosiblue border border-secondosiblue text-white rounded-md cursor-pointer hover:bg-white hover:text-secondosiblue duration-300 px-9 py-3">
|
|
Send
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!---------------------- JS SCRIPTS -------------------->
|
|
|
|
<script type="text/javascript" src="{% static 'js/customer_dashboard/ticket-details.js' %}"></script>
|
|
<script type="text/javascript" src="{% static 'js/customer_dashboard/text-editor.js' %}"></script>
|
|
|
|
{% endblock %} |