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.
537 lines
35 KiB
HTML
537 lines
35 KiB
HTML
{% extends "main.html" %}
|
|
{%load static%}
|
|
{% block content %}
|
|
|
|
<!-- LEFT SIDE -->
|
|
<div class="w-full xxlg1:w-[75%] flex flex-col gap-5">
|
|
<!-- PINNED PROJECTS -->
|
|
<div class="w-full grid grid-cols-1 md:grid-cols-2 gap-5">
|
|
<div class="w-full h-fit bg-white rounded-md shadow-md p-3 projectContainer">
|
|
<div class="w-full bg-white h-fit rounded-md border border-gray-200">
|
|
<div
|
|
class="w-full px-5 pt-4 pb-1 bg-orange-500 flex flex-col gap-1 justify-center items-center text-center text-white rounded-t-md text-[17px] s:text-[20px] bg-opacity-70 relative">
|
|
<p>hallo</p>
|
|
|
|
<div class="w-full flex justify-between items-center gap-3 text-white text-[12px] opacity-80">
|
|
<p>20-2-24</p>
|
|
<p>20-2-24</p>
|
|
</div>
|
|
|
|
<div class="absolute top-3 right-3 cursor-pointer z-20" id="unpinProject">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-5 h-5 text-white"
|
|
color="#000000" fill="none">
|
|
<path
|
|
d="M7.5 8C6.95863 8.1281 6.49932 8.14239 5.99268 8.45891C5.07234 9.03388 4.85108 9.71674 5.08821 10.7612C5.94028 14.5139 9.48599 18.0596 13.2388 18.9117C14.2834 19.1489 14.9661 18.928 15.5416 18.0077C15.8411 17.5288 15.8716 17.0081 16 16.5"
|
|
stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
|
|
stroke-linejoin="round" />
|
|
<path
|
|
d="M12 7.79915C12.1776 7.77794 12.3182 7.74034 12.4295 7.68235C13.3997 7.17686 13.9291 5.53361 14.4498 4.60009C14.9311 3.73715 15.1718 3.30567 15.7379 3.10227C16.3041 2.89888 16.6448 3.02205 17.3262 3.26839C18.9197 3.8445 20.1555 5.08032 20.7316 6.6738C20.9779 7.35521 21.1011 7.69591 20.8977 8.26204C20.6943 8.82817 20.2628 9.06884 19.3999 9.55018C18.4608 10.074 16.7954 10.6108 16.2905 11.5898C16.2345 11.6983 16.1978 11.8327 16.1769 12"
|
|
stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
|
|
stroke-linejoin="round" />
|
|
<path d="M3 21L8 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
|
|
stroke-linejoin="round" />
|
|
<path d="M3 3L21 21" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
|
|
stroke-linejoin="round" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Progress Bar -->
|
|
<div class="w-full h-[8px] bg-gray-100 mainBar">
|
|
<div class="h-full progressBar">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="w-full flex flex-col justify-between">
|
|
<!-- Details -->
|
|
<div class="w-full flex flex-col gap-3 p-5">
|
|
<div class="w-full flex justify-start items-center gap-2">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
|
stroke="currentColor" class="w-6 h-6 text-secondosiblue">
|
|
<path stroke-linecap="round" stroke-linejoin="round"
|
|
d="M6 6.878V6a2.25 2.25 0 0 1 2.25-2.25h7.5A2.25 2.25 0 0 1 18 6v.878m-12 0c.235-.083.487-.128.75-.128h10.5c.263 0 .515.045.75.128m-12 0A2.25 2.25 0 0 0 4.5 9v.878m13.5-3A2.25 2.25 0 0 1 19.5 9v.878m0 0a2.246 2.246 0 0 0-.75-.128H5.25c-.263 0-.515.045-.75.128m15 0A2.25 2.25 0 0 1 21 12v6a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 18v-6c0-.98.626-1.813 1.5-2.122" />
|
|
</svg>
|
|
|
|
<p class="text-secondosiblue"><span
|
|
class="font-poppinsBold">{{project.open_user_tasks_count}}</span> Open
|
|
{% if project.open_user_tasks_count == 1 %} Task {% else %} Tasks {% endif %}</p>
|
|
</div>
|
|
|
|
<div class="w-full flex justify-start items-center gap-2">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
|
|
class="w-6 h-6 text-secondosiblue" color="#000000" fill="none">
|
|
<path
|
|
d="M2.46433 9.34375C2.21579 9.34375 1.98899 9.14229 2.00041 8.87895C2.06733 7.33687 2.25481 6.33298 2.78008 5.53884C3.08228 5.08196 3.45765 4.68459 3.88923 4.36468C5.05575 3.5 6.70139 3.5 9.99266 3.5H14.0074C17.2986 3.5 18.9443 3.5 20.1108 4.36468C20.5424 4.68459 20.9177 5.08196 21.2199 5.53884C21.7452 6.33289 21.9327 7.33665 21.9996 8.87843C22.011 9.14208 21.7839 9.34375 21.5351 9.34375C20.1493 9.34375 19.0259 10.533 19.0259 12C19.0259 13.467 20.1493 14.6562 21.5351 14.6562C21.7839 14.6562 22.011 14.8579 21.9996 15.1216C21.9327 16.6634 21.7452 17.6671 21.2199 18.4612C20.9177 18.918 20.5424 19.3154 20.1108 19.6353C18.9443 20.5 17.2986 20.5 14.0074 20.5H9.99266C6.70139 20.5 5.05575 20.5 3.88923 19.6353C3.45765 19.3154 3.08228 18.918 2.78008 18.4612C2.25481 17.667 2.06733 16.6631 2.00041 15.1211C1.98899 14.8577 2.21579 14.6562 2.46433 14.6562C3.85012 14.6562 4.97352 13.467 4.97352 12C4.97352 10.533 3.85012 9.34375 2.46433 9.34375Z"
|
|
stroke="currentColor" stroke-width="1.5" stroke-linejoin="round" />
|
|
<path d="M9 3.5L9 20.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
|
|
stroke-linejoin="round" />
|
|
</svg>
|
|
<p class="text-secondosiblue"><span
|
|
class="font-poppinsBold">{{project.open_user_tasks_count}}</span> Open
|
|
{% if project.open_user_tasks_count == 1 %} Ticket {% else %} Tickets {% endif %}</p>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="w-full flex justify-start items-center gap-2">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
|
stroke="currentColor" class="w-6 h-6 text-secondosiblue">
|
|
<path stroke-linecap="round" stroke-linejoin="round"
|
|
d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
|
|
</svg>
|
|
|
|
<p class="text-secondosiblue">Total Time: <span
|
|
class="font-poppinsBold">{{project.total_time_worked_hours}}hr
|
|
{{project.total_time_worked_minutes}}min
|
|
{{project.total_time_worked_seconds}}sec</span>
|
|
</p>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="w-full h-fit bg-white rounded-md shadow-md p-3 projectContainer">
|
|
<div class="w-full bg-white h-fit rounded-md border border-gray-200">
|
|
<div
|
|
class="w-full px-5 pt-4 pb-1 bg-yellow-500 flex flex-col gap-1 justify-center items-center text-center text-white rounded-t-md text-[17px] s:text-[20px] bg-opacity-70 hover:bg-opacity-100 duration-300 relative">
|
|
<p>hallo</p>
|
|
|
|
<div class="w-full flex justify-between items-center gap-3 text-white text-[12px] opacity-80">
|
|
<p>20-2-24</p>
|
|
<p>20-2-24</p>
|
|
</div>
|
|
|
|
<div class="absolute top-3 right-3 cursor-pointer hidden" id="pinProject">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-5 h-5 text-white"
|
|
color="#000000" fill="none">
|
|
<path d="M3 21L8 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
|
|
stroke-linejoin="round" />
|
|
<path
|
|
d="M13.2585 18.8714C9.51516 18.0215 5.97844 14.4848 5.12853 10.7415C4.99399 10.1489 4.92672 9.85266 5.12161 9.37197C5.3165 8.89129 5.55457 8.74255 6.03071 8.44509C7.10705 7.77265 8.27254 7.55888 9.48209 7.66586C11.1793 7.81598 12.0279 7.89104 12.4512 7.67048C12.8746 7.44991 13.1622 6.93417 13.7376 5.90269L14.4664 4.59604C14.9465 3.73528 15.1866 3.3049 15.7513 3.10202C16.316 2.89913 16.6558 3.02199 17.3355 3.26771C18.9249 3.84236 20.1576 5.07505 20.7323 6.66449C20.978 7.34417 21.1009 7.68401 20.898 8.2487C20.6951 8.8134 20.2647 9.05346 19.4039 9.53358L18.0672 10.2792C17.0376 10.8534 16.5229 11.1406 16.3024 11.568C16.0819 11.9955 16.162 12.8256 16.3221 14.4859C16.4399 15.7068 16.2369 16.88 15.5555 17.9697C15.2577 18.4458 15.1088 18.6839 14.6283 18.8786C14.1477 19.0733 13.8513 19.006 13.2585 18.8714Z"
|
|
stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
|
|
stroke-linejoin="round" />
|
|
</svg>
|
|
</div>
|
|
|
|
<div class="absolute top-3 right-3 cursor-pointer z-20" id="unpinProject">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-5 h-5 text-white"
|
|
color="#000000" fill="none">
|
|
<path
|
|
d="M7.5 8C6.95863 8.1281 6.49932 8.14239 5.99268 8.45891C5.07234 9.03388 4.85108 9.71674 5.08821 10.7612C5.94028 14.5139 9.48599 18.0596 13.2388 18.9117C14.2834 19.1489 14.9661 18.928 15.5416 18.0077C15.8411 17.5288 15.8716 17.0081 16 16.5"
|
|
stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
|
|
stroke-linejoin="round" />
|
|
<path
|
|
d="M12 7.79915C12.1776 7.77794 12.3182 7.74034 12.4295 7.68235C13.3997 7.17686 13.9291 5.53361 14.4498 4.60009C14.9311 3.73715 15.1718 3.30567 15.7379 3.10227C16.3041 2.89888 16.6448 3.02205 17.3262 3.26839C18.9197 3.8445 20.1555 5.08032 20.7316 6.6738C20.9779 7.35521 21.1011 7.69591 20.8977 8.26204C20.6943 8.82817 20.2628 9.06884 19.3999 9.55018C18.4608 10.074 16.7954 10.6108 16.2905 11.5898C16.2345 11.6983 16.1978 11.8327 16.1769 12"
|
|
stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
|
|
stroke-linejoin="round" />
|
|
<path d="M3 21L8 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
|
|
stroke-linejoin="round" />
|
|
<path d="M3 3L21 21" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
|
|
stroke-linejoin="round" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Progress Bar -->
|
|
<div class="w-full h-[8px] bg-gray-100 mainBar">
|
|
<div class="h-full progressBar">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="w-full flex flex-col justify-between">
|
|
<!-- Details -->
|
|
<div class="w-full flex flex-col gap-3 p-5">
|
|
<div class="w-full flex justify-start items-center gap-2">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
|
stroke="currentColor" class="w-6 h-6 text-secondosiblue">
|
|
<path stroke-linecap="round" stroke-linejoin="round"
|
|
d="M6 6.878V6a2.25 2.25 0 0 1 2.25-2.25h7.5A2.25 2.25 0 0 1 18 6v.878m-12 0c.235-.083.487-.128.75-.128h10.5c.263 0 .515.045.75.128m-12 0A2.25 2.25 0 0 0 4.5 9v.878m13.5-3A2.25 2.25 0 0 1 19.5 9v.878m0 0a2.246 2.246 0 0 0-.75-.128H5.25c-.263 0-.515.045-.75.128m15 0A2.25 2.25 0 0 1 21 12v6a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 18v-6c0-.98.626-1.813 1.5-2.122" />
|
|
</svg>
|
|
|
|
<p class="text-secondosiblue"><span
|
|
class="font-poppinsBold">{{project.open_user_tasks_count}}</span> Open
|
|
{% if project.open_user_tasks_count == 1 %} Task {% else %} Tasks {% endif %}</p>
|
|
</div>
|
|
|
|
<div class="w-full flex justify-start items-center gap-2">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
|
|
class="w-6 h-6 text-secondosiblue" color="#000000" fill="none">
|
|
<path
|
|
d="M2.46433 9.34375C2.21579 9.34375 1.98899 9.14229 2.00041 8.87895C2.06733 7.33687 2.25481 6.33298 2.78008 5.53884C3.08228 5.08196 3.45765 4.68459 3.88923 4.36468C5.05575 3.5 6.70139 3.5 9.99266 3.5H14.0074C17.2986 3.5 18.9443 3.5 20.1108 4.36468C20.5424 4.68459 20.9177 5.08196 21.2199 5.53884C21.7452 6.33289 21.9327 7.33665 21.9996 8.87843C22.011 9.14208 21.7839 9.34375 21.5351 9.34375C20.1493 9.34375 19.0259 10.533 19.0259 12C19.0259 13.467 20.1493 14.6562 21.5351 14.6562C21.7839 14.6562 22.011 14.8579 21.9996 15.1216C21.9327 16.6634 21.7452 17.6671 21.2199 18.4612C20.9177 18.918 20.5424 19.3154 20.1108 19.6353C18.9443 20.5 17.2986 20.5 14.0074 20.5H9.99266C6.70139 20.5 5.05575 20.5 3.88923 19.6353C3.45765 19.3154 3.08228 18.918 2.78008 18.4612C2.25481 17.667 2.06733 16.6631 2.00041 15.1211C1.98899 14.8577 2.21579 14.6562 2.46433 14.6562C3.85012 14.6562 4.97352 13.467 4.97352 12C4.97352 10.533 3.85012 9.34375 2.46433 9.34375Z"
|
|
stroke="currentColor" stroke-width="1.5" stroke-linejoin="round" />
|
|
<path d="M9 3.5L9 20.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
|
|
stroke-linejoin="round" />
|
|
</svg>
|
|
<p class="text-secondosiblue"><span
|
|
class="font-poppinsBold">{{project.open_user_tasks_count}}</span> Open
|
|
{% if project.open_user_tasks_count == 1 %} Ticket {% else %} Tickets {% endif %}</p>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="w-full flex justify-start items-center gap-2">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
|
stroke="currentColor" class="w-6 h-6 text-secondosiblue">
|
|
<path stroke-linecap="round" stroke-linejoin="round"
|
|
d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
|
|
</svg>
|
|
|
|
<p class="text-secondosiblue">Total Time: <span
|
|
class="font-poppinsBold">{{project.total_time_worked_hours}}hr
|
|
{{project.total_time_worked_minutes}}min
|
|
{{project.total_time_worked_seconds}}sec</span>
|
|
</p>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- TICKETS -->
|
|
<div class="w-full h-fit bg-white p-3 rounded-md shadow-md">
|
|
<div class="overflow-x-auto border border-gray-300 rounded-md" id="openTickets">
|
|
<table class="min-w-full divide-y">
|
|
<!-- TABLE HEADER -->
|
|
<thead class="bg-gray-50">
|
|
<tr>
|
|
<th scope="col"
|
|
class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
|
|
Subject
|
|
</th>
|
|
<th scope="col"
|
|
class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
|
|
Ticket ID
|
|
</th>
|
|
<th scope="col"
|
|
class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
|
|
Regarding
|
|
</th>
|
|
<th scope="col"
|
|
class="px-6 py-3 text-sm font-medium text-gray-500 border-r border-gray-300 uppercase whitespace-nowrap">
|
|
Last Updated
|
|
</th>
|
|
<th scope="col"
|
|
class="px-6 py-3 text-sm font-medium text-gray-500 border-r border-gray-300 uppercase whitespace-nowrap">
|
|
Updated By
|
|
</th>
|
|
<th scope="col" class="px-6 py-3 text-sm font-medium text-gray-500 uppercase whitespace-nowrap">
|
|
Actions
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody class="bg-white divide-y divide-gray-200">
|
|
|
|
<tr>
|
|
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
|
|
<p class="text-secondosiblue">Ticket Subject</p>
|
|
</td>
|
|
|
|
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
|
|
<p class="text-secondosiblue">234233</p>
|
|
</td>
|
|
|
|
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
|
|
<p class="text-secondosiblue">ggg</p>
|
|
</td>
|
|
|
|
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
|
|
<p class="text-secondosiblue">20-2-234</p>
|
|
</td>
|
|
|
|
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
|
|
<p class="text-secondosiblue">20-2-234</p>
|
|
</td>
|
|
|
|
<td class="px-6 py-4 text-center text-sm">
|
|
<div class="flex justify-center items-center gap-3">
|
|
|
|
<button onclick="myFunction()">
|
|
<input type="text" class="hidden"
|
|
value="https://osina.ositcom.com/my-tickets/{{ticket.ticket_number}}/"
|
|
id="myInput">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
|
|
stroke-width="1.5" stroke="currentColor"
|
|
class="w-[16px] text-fifthosiblue hover:scale-110 duration-500 transition-transform">
|
|
<path stroke-linecap="round" stroke-linejoin="round"
|
|
d="M7.217 10.907a2.25 2.25 0 1 0 0 2.186m0-2.186c.18.324.283.696.283 1.093s-.103.77-.283 1.093m0-2.186 9.566-5.314m-9.566 7.5 9.566 5.314m0 0a2.25 2.25 0 1 0 3.935 2.186 2.25 2.25 0 0 0-3.935-2.186Zm0-12.814a2.25 2.25 0 1 0 3.933-2.185 2.25 2.25 0 0 0-3.933 2.185Z" />
|
|
</svg>
|
|
</button>
|
|
<a href="">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
|
|
stroke-width="1.5" stroke="currentColor"
|
|
class="w-[18px] text-fifthosiblue hover:scale-110 duration-500 transition-transform">
|
|
<path stroke-linecap="round" stroke-linejoin="round"
|
|
d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z" />
|
|
<path stroke-linecap="round" stroke-linejoin="round"
|
|
d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
|
|
</svg>
|
|
</a>
|
|
<a href="">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
|
|
stroke-width="1.5" stroke="currentColor"
|
|
class="w-[18px] text-fifthosiblue hover:scale-110 duration-500 transition-transform">
|
|
<path stroke-linecap="round" stroke-linejoin="round"
|
|
d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10" />
|
|
</svg>
|
|
</a>
|
|
<div class="cursor-pointer deleteTicketButton" data-modal-url="">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
|
|
stroke-width="1.5" stroke="currentColor"
|
|
class="w-[18px] text-red-500 hover:scale-110 duration-500 transition-transform">
|
|
<path stroke-linecap="round" stroke-linejoin="round"
|
|
d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
{% if tasks %}
|
|
<!-- TASKS ON DESKTOP -->
|
|
<div class="hidden md:flex flex-col gap-5">
|
|
<!-- TASKS TABLE -->
|
|
{% for task in tasks %}
|
|
<div class="w-full h-fit bg-white p-3 rounded-md shadow-md">
|
|
<div class="w-full bg-white h-fit rounded-md border border-gray-200">
|
|
<!-- TABLE HEADER -->
|
|
<div class="w-full h-[70px] rounded-t-md grid grid-cols-2">
|
|
<a href="{% url 'detailed-task' task.task_id %}" class="h-[70px]">
|
|
<div
|
|
class="h-full flex justify-center items-center border-r border-b border-gray-200 px-3 {% if task.status == 'Open' %}bg-secondosiblue{% endif %} {% if task.status == 'Working On' %}bg-yellow-500{% endif %} {% if task.status == 'Closed' %}bg-green-700{% endif %} rounded-tl-md text-[17px] text-white text-center bg-opacity-70 hover:bg-opacity-100 duration-300">
|
|
<p>{{task.name}}</p>
|
|
</div>
|
|
</a>
|
|
|
|
<div class="grid grid-cols-3">
|
|
<div
|
|
class="flex justify-center items-center border-r border-b border-gray-200 text-white {% if task.status == 'Open' %}bg-secondosiblue{% endif %} {% if task.status == 'Working On' %}bg-yellow-500{% endif %} {% if task.status == 'Closed' %}bg-green-700{% endif %} bg-opacity-70">
|
|
<p>{{task.status}}</p>
|
|
</div>
|
|
|
|
<div
|
|
class="flex justify-center items-center border-r border-b border-gray-200 text-white {% if task.status == 'Open' %}bg-secondosiblue{% endif %} {% if task.status == 'Working On' %}bg-yellow-500{% endif %} {% if task.status == 'Closed' %}bg-green-700{% endif %} bg-opacity-70">
|
|
<p>{{task.start_date|date:"d-m-Y"}}</p>
|
|
</div>
|
|
|
|
<div
|
|
class="flex justify-center items-center border-r border-b border-gray-200 text-white {% if task.status == 'Open' %}bg-secondosiblue{% endif %} {% if task.status == 'Working On' %}bg-yellow-500{% endif %} {% if task.status == 'Closed' %}bg-green-700{% endif %} rounded-tr-md bg-opacity-70">
|
|
<p>{{task.end_date|date:"d-m-Y"}}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- TABLE BODY -->
|
|
<div class="w-full h-fit grid grid-cols-2">
|
|
<!-- LEFT SIDE OF TABLE BODY -->
|
|
<div class="h-fit bg-white p-3 rounded-bl-md">
|
|
<!-- 1st row -->
|
|
<div class="w-full flex flex-col gap-2">
|
|
<div class="flex justify-start items-center gap-2">
|
|
<p class="text-gray-400 text-base">Project:</p>
|
|
<p class="text-secondosiblue text-base">{{task.project.name}}</p>
|
|
</div>
|
|
|
|
<div class="flex justify-start items-center gap-2">
|
|
<p class="text-gray-400 text-base">Epic:</p>
|
|
<p class="text-secondosiblue text-base">{{task.epic.title}}</p>
|
|
</div>
|
|
|
|
<div class="flex justify-start items-center gap-2">
|
|
<p class="text-gray-400 text-base">Assigned To:</p>
|
|
<p class="text-secondosiblue text-base">{{task.assigned_to.user.first_name}}
|
|
{{task.assigned_to.user.last_name}}</p>
|
|
</div>
|
|
|
|
<div class="flex justify-start items-center gap-2">
|
|
<p class="text-gray-400 text-base">Files:</p>
|
|
<p class="text-secondosiblue text-base"></p>
|
|
</div>
|
|
<div class="flex justify-start items-center gap-2">
|
|
<p class="text-gray-400 text-base">Tags:</p>
|
|
<p class="text-secondosiblue text-base"></p>
|
|
</div>
|
|
|
|
<div class="flex justify-start items-center gap-2">
|
|
<p class="text-gray-400 text-base">Extra:</p>
|
|
<p class="text-secondosiblue text-base">{{task.extra}}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- RIGHT SIDE OF TABLE BODY -->
|
|
<div class="h-fit bg-white grid grid-cols-3 rounded-br-md">
|
|
<button
|
|
class="p-2 border border-gray-200 text-base h-[70px] bg-gray-100 text-gray-500">Close</button>
|
|
|
|
<button
|
|
class="p-2 border border-gray-200 text-base h-[70px] bg-gray-100 text-gray-500 updateStatusButton"
|
|
data-modal-url="{% url 'edittaskstatusmodal' task.task_id %}">Update
|
|
Status</button>
|
|
|
|
<button class="p-2 border border-gray-200 text-base h-[70px] bg-gray-100 text-gray-500 ">Add
|
|
Time</button>
|
|
|
|
<button
|
|
class="p-2 border border-gray-200 text-base h-[70px] bg-gray-100 text-gray-500 deleteTaskButton"
|
|
data-modal-url="{% url 'deletetaskmodal' task.id %}">Delete</button>
|
|
|
|
<a href="{% url 'edittask' task.task_id %}">
|
|
<button
|
|
class="w-full p-2 border border-gray-200 text-base h-[70px] bg-gray-100 text-gray-500">Edit</button>
|
|
</a>
|
|
|
|
<button
|
|
class="p-2 border border-gray-200 text-base h-[70px] bg-gray-100 text-gray-500 showPointsButton"
|
|
data-modal-url="{% url 'showpoints' task.task_id %}">Show
|
|
Points</button>
|
|
|
|
<button
|
|
class="p-2 border border-gray-200 text-base h-[70px] bg-gray-100 text-gray-500 addPointButton"
|
|
data-modal-url="{% url 'addpointmodal' task.task_id %}">Add
|
|
Point</button>
|
|
|
|
<a href="{% url 'detailed-task' task.task_id %}">
|
|
<button
|
|
class="w-full p-2 border border-gray-200 text-base h-[70px] bg-gray-100 text-gray-500">Details</button>
|
|
</a>
|
|
|
|
<button
|
|
class="p-2 border border-gray-200 text-base h-[70px] bg-gray-100 text-gray-500 rounded-br-md timelineButton"
|
|
data-modal-url="{% url 'timeline' task.task_id %}">Timeline</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<!-- TASKS ON MOBILE -->
|
|
<div class="flex flex-col gap-5 md:hidden">
|
|
{% for task in tasks %}
|
|
<div class="w-full h-fit bg-white p-3 rounded-md shadow-md">
|
|
<div class="border border-gray-200 rounded-t-md">
|
|
<div class="w-full rounded-t-md">
|
|
<a href="{% url 'detailed-task' task.task_id %}">
|
|
<div
|
|
class="text-white {% if task.status == 'Open' %}bg-secondosiblue{% endif %} {% if task.status == 'Working On' %}bg-yellow-500{% endif %} {% if task.status == 'Closed' %}bg-green-700{% endif %} border-r border-gray-200 rounded-t-md flex justify-center items-center text-center py-3 text-sm bg-opacity-70 hover:bg-opacity-100 duration-300">
|
|
<p>{{task.name}}</p>
|
|
</div>
|
|
</a>
|
|
|
|
</div>
|
|
|
|
|
|
<div class="grid grid-cols-3 border-t border-gray-200">
|
|
<div
|
|
class="text-white {% if task.status == 'Open' %} bg-secondosiblue {% endif %} {% if task.status == 'Working On' %} bg-yellow-500 {% endif %} {% if task.status == 'Closed' %} bg-green-700{% endif %} border-r border-gray-200 flex justify-center items-center text-center py-3 text-sm bg-opacity-70">
|
|
<p>{{task.status}}</p>
|
|
</div>
|
|
|
|
<div
|
|
class="text-white {% if task.status == 'Open' %} bg-secondosiblue {% endif %} {% if task.status == 'Working On' %} bg-yellow-500 {% endif %} {% if task.status == 'Closed' %} bg-green-700{% endif %} border-r border-gray-200 flex justify-center items-center text-center py-3 text-sm bg-opacity-70">
|
|
<p>{{task.start_date|date:"d-m-Y"}}</p>
|
|
</div>
|
|
|
|
<div
|
|
class="text-white {% if task.status == 'Open' %} bg-secondosiblue {% endif %} {% if task.status == 'Working On' %} bg-yellow-500 {% endif %} {% if task.status == 'Closed' %} bg-green-700{% endif %} border-r border-gray-200 flex justify-center items-center text-center py-3 text-sm bg-opacity-70">
|
|
<p>{{task.end_date|date:"d-m-Y"}}</p>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="w-full flex flex-col gap-2 p-3">
|
|
<div class="flex justify-start items-center gap-2">
|
|
<p class="text-gray-400 text-base">Project:</p>
|
|
<p class="text-secondosiblue text-base">{{task.project.name}}</p>
|
|
</div>
|
|
|
|
<div class="flex justify-start items-center gap-2">
|
|
<p class="text-gray-400 text-base">Epic:</p>
|
|
<p class="text-secondosiblue text-base">{{task.epic.title}}</p>
|
|
</div>
|
|
|
|
<div class="flex justify-start items-center gap-2">
|
|
<p class="text-gray-400 text-base">Assigned To:</p>
|
|
<p class="text-secondosiblue text-base">{{task.assigned_to.user.first_name}}
|
|
{{task.assigned_to.user.last_name}}</p>
|
|
</div>
|
|
|
|
<div class="flex justify-start items-center gap-2">
|
|
<p class="text-gray-400 text-base">Extra:</p>
|
|
<p class="text-secondosiblue text-base">{{task.extra}}</p>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div
|
|
class="w-full bg-gray-100 flex justify-between items-center py-3 px-3 text-secondosiblue actionsButton">
|
|
<p>Actions</p>
|
|
<i class="fa fa-angle-down" style="font-size: 20px;"></i>
|
|
<i class="fa fa-angle-up" style="font-size: 20px; display: none;"></i>
|
|
</div>
|
|
|
|
|
|
<div class="grid-cols-3 actionsContainer hidden">
|
|
<button class="p-2 border border-gray-200 text-sm h-[70px] bg-gray-100 text-gray-500">Close</button>
|
|
|
|
<button
|
|
class="p-2 border border-gray-200 text-sm h-[70px] bg-gray-100 text-gray-500 updateStatusButton"
|
|
data-modal-url="{% url 'edittaskstatusmodal' task.task_id %}">Update
|
|
Status</button>
|
|
|
|
<button class="p-2 border border-gray-200 text-sm h-[70px] bg-gray-100 text-gray-500">Add
|
|
Time</button>
|
|
|
|
<button
|
|
class="p-2 border border-gray-200 text-base h-[70px] bg-gray-100 text-gray-500 deleteTaskButton"
|
|
data-modal-url="{% url 'deletetaskmodal' task.id %}">Delete</button>
|
|
|
|
<a href="{% url 'edittask' task.task_id %}">
|
|
<button
|
|
class="w-full p-2 border border-gray-200 text-sm h-[70px] bg-gray-100 text-gray-500">Edit</button>
|
|
</a>
|
|
|
|
<button
|
|
class="p-2 border border-gray-200 text-sm h-[70px] bg-gray-100 text-gray-500 showPointsButton"
|
|
data-modal-url="{% url 'showpoints' task.task_id %}">Show
|
|
Points</button>
|
|
|
|
<button class="p-2 border border-gray-200 text-sm h-[70px] bg-gray-100 text-gray-500 addPointButton"
|
|
data-modal-url="{% url 'addpointmodal' task.task_id %}">Add
|
|
Point</button>
|
|
|
|
<a href="{% url 'detailed-task' task.task_id %}">
|
|
<button
|
|
class="w-full p-2 border border-gray-200 text-sm h-[70px] bg-gray-100 text-gray-500">Details</button>
|
|
</a>
|
|
|
|
<button class="p-2 border border-gray-200 text-sm h-[70px] bg-gray-100 text-gray-500 timelineButton"
|
|
data-modal-url="{% url 'timeline' task.task_id %}">Timeline</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% else %}
|
|
|
|
<div
|
|
class="w-full h-fit bg-white p-5 rounded-md shadow-md mb-5 flex flex-col justify-center items-center text-secondosiblue text-center text-xl font-poppinsBold">
|
|
<p>No Available Tasks</p>
|
|
</div>
|
|
{% endif %}
|
|
|
|
</div>
|
|
|
|
|
|
{% endblock content %} |