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.
264 lines
14 KiB
HTML
264 lines
14 KiB
HTML
{% extends "main.html" %}
|
|
{%load static%}
|
|
{% block content %}
|
|
|
|
<!-- BREAD CRUMBS -->
|
|
<!-- <div class="w-full px-5 s:px-9 pb-5">
|
|
<div class="flex items-center px-6 py-3 bg-white border-b rounded-md shadow-md">
|
|
<a href="#" class="text-sm text-gray-500 hover:text-gray-700">Home</a>
|
|
<svg class="w-5 h-5 ml-4 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
|
|
stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
|
|
</svg>
|
|
<span class="ml-4 text-sm text-gray-500">Previous Page</span>
|
|
<svg class="w-5 h-5 ml-4 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
|
|
stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
|
|
</svg>
|
|
<span class="ml-4 text-sm text-slate-700 font-semibold">Current Page</span>
|
|
</div>
|
|
|
|
</div> -->
|
|
|
|
|
|
<!-- LEFT SIDE -->
|
|
<div class="w-full xxlg1:w-[75%]">
|
|
<!-- TASKS ON DESKTOP -->
|
|
<div class="hidden md:block">
|
|
<!-- TASKS TABLE -->
|
|
{% for task in tasks %}
|
|
<div class="w-full h-fit bg-white p-3 rounded-md shadow-md mb-5">
|
|
<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">
|
|
<div
|
|
class="flex justify-center items-center border-r border-b border-gray-200 {% 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">
|
|
<p>{{task.name}}</p>
|
|
</div>
|
|
|
|
<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 %}">
|
|
<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 %}">
|
|
<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">
|
|
<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-slate-700 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-slate-700 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-slate-700 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-slate-700 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-slate-700 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-slate-700 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="block md:hidden">
|
|
{% for task in tasks %}
|
|
<div class="w-full h-fit bg-white p-3 rounded-md shadow-md mb-5">
|
|
<div class="border border-gray-200 rounded-t-md">
|
|
<div class="w-full rounded-t-md">
|
|
<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">
|
|
<p>{{task.name}}</p>
|
|
</div>
|
|
</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">
|
|
<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">
|
|
<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">
|
|
<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-slate-700 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-slate-700 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-slate-700 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-slate-700 text-base">{{task.extra}}</p>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div
|
|
class="w-full bg-gray-100 flex justify-between items-center py-3 px-3 text-slate-700 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>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- POPUP MODAL -->
|
|
<div class="w-full h-full bg-black bg-opacity-40 z-20 fixed justify-center items-center hidden inset-0" id="popUpModal">
|
|
<div class="w-[95%] md:w-fit h-fit bg-white rounded-md p-9 relative">
|
|
<button class="absolute top-3 right-5 text-slate-800 text-xl cursor-pointer outline-none border-none"
|
|
id="closeModalButton">
|
|
<i class="fa fa-close"></i>
|
|
</button>
|
|
<iframe id="popupModalFrame" frameborder="0"></iframe>
|
|
</div>
|
|
</div>
|
|
<script type="text/javascript" src='{% static "js/pop-modals.js" %}'></script>
|
|
|
|
|
|
{% endblock content %} |