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.
344 lines
22 KiB
HTML
344 lines
22 KiB
HTML
{% extends "customer_main.html" %}
|
|
{%load static%}
|
|
{% block content %}
|
|
|
|
<!-- TEXT EDITOR -->
|
|
<style>
|
|
@import url(https://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/5.3.45/css/materialdesignicons.min.css);
|
|
</style>
|
|
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.js" defer></script>
|
|
|
|
|
|
<div class="w-full px-5 s:px-9 flex flex-col gap-3">
|
|
<div class="w-full bg-white rounded-md h-fit 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">
|
|
{% for file in ticket.ticketattachment_set.all %}
|
|
<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>
|
|
<a href="https://osina.ositcom.com/{{file.file_path}}" target="_blank" class="text-sm">{{ file.file_path | cut:"static/images/uploaded_ticket_files/" }}{% if not forloop.last %}, {% endif %}</a>
|
|
</div>
|
|
{% endfor %}
|
|
</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">
|
|
{% for file in update.ticketattachment_set.all %}
|
|
<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>
|
|
<a href="https://osina.ositcom.com/{{file.file_path}}" target="_blank">{{ file.file_path | cut:"static/images/uploaded_ticket_files/" }}{% if not forloop.last %}, {% endif %}</a>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
|
|
</div>
|
|
|
|
{% if update.added_by.staffprofile %}
|
|
<div class="w-full border-t border-gray-200 pt-5 flex justify-start items-center gap-3 p-5">
|
|
<a class="text-secondosiblue font-light cursor-pointer hover:text-gray-500 duration-300">How
|
|
did I do?</a>
|
|
|
|
<div class="flex justify-start items-center gap-2">
|
|
<a href="{% url 'customeraddticketupdatereaction' 'Happy' update.id %}">
|
|
<div
|
|
class="w-fit h-fit rounded-full {% if update.last_customer_reaction == 'Happy' %} border-2 border-secondosiblue {% endif %}">
|
|
<img src="{% static 'images/icons/happy-icon.png' %}"
|
|
class="w-[30px] h-[30px] rounded-full cursor-pointer hover:scale-105 duration-300 transition-transform">
|
|
</div>
|
|
</a>
|
|
|
|
<a href="{% url 'customeraddticketupdatereaction' 'Indifferent' update.id %}">
|
|
<div
|
|
class="w-fit h-fit rounded-full {% if update.last_customer_reaction == 'Indifferent' %} border-2 border-secondosiblue {% endif %}">
|
|
<img src="{% static 'images/icons/neutral-icon.png' %}"
|
|
class="w-[30px] h-[30px] rounded-full cursor-pointer hover:scale-105 duration-300 transition-transform">
|
|
</div>
|
|
</a>
|
|
|
|
<a href="{% url 'customeraddticketupdatereaction' 'Sad' update.id %}">
|
|
<div
|
|
class="w-fit h-fit rounded-full {% if update.last_customer_reaction == 'Sad' %} border-2 border-secondosiblue {% endif %}">
|
|
<img src="{% static 'images/icons/unhappy-icon.png' %}"
|
|
class="w-[30px] h-[30px] rounded-full cursor-pointer hover:scale-105 duration-300 transition-transform">
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
|
|
|
|
<!-- REPLYING SECTION -->
|
|
<form class="flex gap-3" method="POST" action="{% url 'customeraddticketupdate' 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 class="w-full rounded-md text-black" x-data="app()" x-init="init($refs.wysiwyg)">
|
|
<div class="border border-gray-200 overflow-hidden rounded-md">
|
|
<div class="w-full border-b border-gray-200 flex flex-wrap text-xl text-gray-600">
|
|
<button type="button"
|
|
class="w-[40px] h-[40px] border-r border-gray-200 flex justify-center items-center text-gray-400 duration-300 cursor-pointer hover:text-secondosiblue"
|
|
@click="format('bold')">
|
|
<i class="mdi mdi-format-bold"></i>
|
|
</button>
|
|
<button type="button"
|
|
class="w-[40px] h-[40px] border-r border-gray-200 flex justify-center items-center text-gray-400 duration-300 cursor-pointer hover:text-secondosiblue"
|
|
@click="format('italic')">
|
|
<i class="mdi mdi-format-italic"></i>
|
|
</button>
|
|
<button type="button"
|
|
class="w-[40px] h-[40px] border-r border-gray-200 flex justify-center items-center text-gray-400 duration-300 cursor-pointer hover:text-secondosiblue"
|
|
@click="format('underline')">
|
|
<i class="mdi mdi-format-underline"></i>
|
|
</button>
|
|
<button type="button"
|
|
class="w-[40px] h-[40px] border-r border-gray-200 flex justify-center items-center text-gray-400 duration-300 cursor-pointer hover:text-secondosiblue"
|
|
@click="format('formatBlock','P')">
|
|
<i class="mdi mdi-format-paragraph"></i>
|
|
</button>
|
|
<button type="button"
|
|
class="w-[40px] h-[40px] border-r border-gray-200 flex justify-center items-center text-gray-400 duration-300 cursor-pointer hover:text-secondosiblue"
|
|
@click="format('formatBlock','H1')">
|
|
<i class="mdi mdi-format-header-1"></i>
|
|
</button>
|
|
<button type="button"
|
|
class="w-[40px] h-[40px] border-r border-gray-200 flex justify-center items-center text-gray-400 duration-300 cursor-pointer hover:text-secondosiblue"
|
|
@click="format('formatBlock','H2')">
|
|
<i class="mdi mdi-format-header-2"></i>
|
|
</button>
|
|
<button type="button"
|
|
class="w-[40px] h-[40px] border-r border-gray-200 flex justify-center items-center text-gray-400 duration-300 cursor-pointer hover:text-secondosiblue"
|
|
@click="format('formatBlock','H3')">
|
|
<i class="mdi mdi-format-header-3"></i>
|
|
</button>
|
|
<button type="button"
|
|
class="w-[40px] h-[40px] border-r border-gray-200 flex justify-center items-center text-gray-400 duration-300 cursor-pointer hover:text-secondosiblue"
|
|
@click="format('insertUnorderedList')">
|
|
<i class="mdi mdi-format-list-bulleted"></i>
|
|
</button>
|
|
<button type="button"
|
|
class="w-[40px] h-[40px] border-r border-gray-200 flex justify-center items-center text-gray-400 duration-300 cursor-pointer hover:text-secondosiblue"
|
|
@click="format('insertOrderedList')">
|
|
<i class="mdi mdi-format-list-numbered"></i>
|
|
</button>
|
|
|
|
<button type="button"
|
|
class="w-[40px] h-[40px] border-r border-gray-200 flex justify-center items-center text-gray-400 duration-300 cursor-pointer hover:text-secondosiblue"
|
|
id="rightToLeft" @click="setDirection('rtl')">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
|
|
class="w-[18px] h-[18px]" 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>
|
|
</button>
|
|
|
|
<button type="button"
|
|
class="w-[40px] h-[40px] border-r border-gray-200 flex justify-center items-center text-gray-400 duration-300 cursor-pointer hover:text-secondosiblue"
|
|
id="leftToLeft" @click="setDirection('ltr')">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
|
|
class="w-[18px] h-[18px]" 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>
|
|
</button>
|
|
</div>
|
|
<div class="w-full">
|
|
<iframe x-ref="wysiwyg" class="w-full h-[300px] overflow-y-auto"></iframe>
|
|
</div>
|
|
</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 hidden"
|
|
placeholder="Add Comment..." required></textarea>
|
|
|
|
|
|
<div class="w-full flex flex-col items-end gap-3">
|
|
<div class="w-full s:w-fit 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">
|
|
<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>
|
|
<input type="file" id="fileupload" name="" placeholder="Select file" multiple
|
|
class="opacity-0 absolute top-1/2 left-1/2 w-[25px] -translate-x-1/2 -translate-y-1/2 z-10">
|
|
<select id="filePathInput" name="filePath" multiple hidden></select>
|
|
</div>
|
|
|
|
<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 id="uploaded_files" class="w-full flex flex-col gap-3"></div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!---------------------- JS SCRIPTS -------------------->
|
|
<script type="text/javascript" src="{% static 'js/tickets/ticket-details.js' %}"></script>
|
|
|
|
<script type="text/javascript" src="{% static 'js/inputs/text-editor.js' %}"></script>
|
|
|
|
<script type="text/javascript" src='{% static "js/inputs/file-uploader.js" %}'></script>
|
|
|
|
{% endblock %} |