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.
634 lines
35 KiB
HTML
634 lines
35 KiB
HTML
{% extends "main.html" %}
|
|
{%load static%}
|
|
{% block content %}
|
|
|
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
|
|
|
|
|
<div class="w-full xxlg1:w-[74.5%] bg-white h-fit rounded-md shadow-md p-5">
|
|
|
|
<div class="w-full rounded-md flex flex-col justify-center items-center py-2 bg-gray-400
|
|
{% if project.projectstatus_set.all.last.status == 'Completed' %}bg-green-700{% endif %}
|
|
{% if project.projectstatus_set.all.last.status == 'Cancelled' %}bg-red-500{% endif %}
|
|
{% if project.projectstatus_set.all.last.status == 'In Progress' %}bg-orange-500{% endif %}
|
|
{% if project.projectstatus_set.all.last.status == 'Pending' %}bg-yellow-500{% endif %}">
|
|
<h1 class="text-xl md:text-3xl text-white font-semibold text-center">{{project.name}}</h1>
|
|
<p class="text-white text-center text-base">{{project.project_id}}</p>
|
|
</div>
|
|
|
|
|
|
<p id="projectId" class="hidden">{{project.id}}</p>
|
|
|
|
<!-- PROJECT PROGRESS BAR -->
|
|
<div class="flex flex-col gap-1 mt-3">
|
|
<div class="w-full h-[10px] bg-gray-100 shadow-md mainBar rounded-md">
|
|
<div class="h-full rounded-md progressBar">
|
|
</div>
|
|
</div>
|
|
<div class="w-full flex justify-between items-center gap-3 text-gray-500 font-light text-sm">
|
|
<p class="startDate">{{project.start_date}}</p>
|
|
<p class="endDate">{{project.end_date}}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="w-full h-fit flex justify-between items-center bg-gray-100 shadow-md rounded-md px-3 py-3 mt-4">
|
|
<div class="w-full md:w-fit flex flex-col md:flex-row flex-wrap justify-start items-center gap-3">
|
|
<button data-modal-url="{% url 'editprojectstatusmodal' project.id %}"
|
|
class="w-full md:w-fit text-base px-3 py-2 bg-transparent text-osiblue outline-none border border-osiblue duration-300 rounded-md cursor-pointer hover:bg-osiblue hover:text-white editProjectStatusButton">
|
|
Update Status
|
|
</button>
|
|
|
|
<a href="{% url 'addepic' project.project_id %}" class="w-full md:w-fit">
|
|
<button
|
|
class="w-full md:w-fit text-base px-3 py-2 bg-transparent text-osiblue outline-none border border-osiblue duration-300 rounded-md cursor-pointer hover:bg-osiblue hover:text-white">Create
|
|
Epic</button>
|
|
</a>
|
|
<a href="{% url 'addprojecttask' project.project_id %}" class="w-full md:w-fit">
|
|
<button
|
|
class="w-full md:w-fit text-base px-3 py-2 bg-transparent text-osiblue outline-none border border-osiblue duration-300 rounded-md cursor-pointer hover:bg-osiblue hover:text-white">Create
|
|
Task</button>
|
|
</a>
|
|
<button
|
|
class="w-full md:w-fit text-base px-3 py-2 bg-transparent text-osiblue outline-none border border-osiblue duration-300 rounded-md cursor-pointer hover:bg-osiblue hover:text-white">Create
|
|
Story</button>
|
|
|
|
<a href="" class="w-full md:w-fit">
|
|
<button
|
|
class="w-full md:w-fit text-base px-3 py-2 bg-transparent text-osiblue outline-none border border-osiblue duration-300 rounded-md cursor-pointer hover:bg-osiblue hover:text-white">Add
|
|
Ticket</button>
|
|
</a>
|
|
|
|
<a href="{% url 'editproject' project.project_id %}" class="w-full md:w-fit">
|
|
<button
|
|
class="w-full md:w-fit text-base px-3 py-2 bg-transparent text-osiblue outline-none border border-osiblue duration-300 rounded-md cursor-pointer hover:bg-osiblue hover:text-white">Edit
|
|
Project</button>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="w-full flex flex-col gap-5 mt-5">
|
|
<!-- CLIENT -->
|
|
<div>
|
|
<p class="text-gray-500 text-xl">Client: <span
|
|
class="text-secondosiblue text-xl font-semibold">{{project.customer.user.first_name}}
|
|
{{project.customer.user.last_name}}</span></p>
|
|
</div>
|
|
|
|
<!-- PROJECT MANAGER -->
|
|
<div>
|
|
<p class="text-gray-500 text-xl">Project Manager:</p>
|
|
<div class="w-fit flex justify-start items-center gap-1 px-5 py-3 bg-gray-100 rounded-md shadow-md mt-2">
|
|
<div class="w-[40px] h-[40px] rounded-full bg-white">
|
|
{% if project.manager.image %}
|
|
<img src="{{project.manager.image.url}}" class="w-full h-full rounded-full object-cover">
|
|
{% else %}
|
|
<img src="{% static 'images/default-user.png' %}" class="w-full h-full rounded-full object-cover">
|
|
{% endif %}
|
|
</div>
|
|
|
|
<p class="text-secondosiblue font-light">{{project.manager.user.first_name}}
|
|
{{project.manager.user.last_name}}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- TYPE -->
|
|
<div class="w-full">
|
|
<p class="text-gray-500 text-xl">Type:
|
|
{% for type in project.project_type.all %}
|
|
<span class="text-secondosiblue text-xl font-semibold">
|
|
{{type.name}} {% if not forloop.last %}, {% endif %}
|
|
{% endfor %}</span>
|
|
</p>
|
|
</div>
|
|
|
|
|
|
<!-- STATUS -->
|
|
<p class="text-gray-500 text-xl">Status:
|
|
{% if project.projectstatus_set.exists %}
|
|
{% with latest_status=project.projectstatus_set.last.status %}
|
|
{% if latest_status == 'Cancelled' %}
|
|
<span class="text-red-500 text-xl font-semibold">{{ latest_status }}</span>
|
|
{% elif latest_status == 'Completed' %}
|
|
<span class="text-green-700 text-xl font-semibold">{{ latest_status }}</span>
|
|
{% elif latest_status == 'In Progress' %}
|
|
<span class="text-orange-500 text-xl font-semibold">{{ latest_status }}</span>
|
|
{% elif latest_status == 'Pending' %}
|
|
<span class="text-yellow-400 text-xl font-semibold">{{ latest_status }}</span>
|
|
{% else %}
|
|
<span class="text-gray-700 text-xl font-semibold">Unknown</span>
|
|
{% endif %}
|
|
{% endwith %}
|
|
{% else %}
|
|
<span class="text-gray-700 text-xl font-semibold">No status available</span>
|
|
{% endif %}
|
|
</p>
|
|
|
|
|
|
<!-- PROJECT DETAILS -->
|
|
<div>
|
|
<div>
|
|
<p class="text-gray-500 text-xl">Project Details:</p>
|
|
<div class="w-full pr-8">
|
|
<p class="text-secondosiblue font-semibold">
|
|
{{project.details}}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- TAGS -->
|
|
<div>
|
|
<p class="text-gray-500 text-xl">Tags:</p>
|
|
<div class="w-full h-fit px-4 mt-3 flex flex-wrap justify-start items-center gap-3">
|
|
<button
|
|
class="text-sm text-gray-400 border border-gray-400 rounded-md w-fit py-2 px-3 outline-none">Media
|
|
Streaming</button>
|
|
|
|
<button
|
|
class="text-sm text-gray-400 border border-gray-400 rounded-md w-fit py-2 px-3 outline-none">Live
|
|
Streaming</button>
|
|
|
|
<button
|
|
class="text-sm text-gray-400 border border-gray-400 rounded-md w-fit py-2 px-3 outline-none">Audio
|
|
On Demand</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- MEMBERS -->
|
|
<div class="w-full mt-5">
|
|
<div
|
|
class=" bg-gray-200 rounded-t-md flex justify-between items-center text-white text-xl font-bold h-[50px]">
|
|
<div class="px-3">
|
|
<p class="text-secondosiblue uppercase font-bold">Members</p>
|
|
</div>
|
|
|
|
<button
|
|
class="h-full rounded-tr-md px-4 bg-secondosiblue text-gray-200 text-[18px] outline-none border-none cursor-pointer flex justify-center items-center addProjectMemberModal" data-modal-url="{% url 'addprojectmembermodal' %}">
|
|
<i class="fa fa-plus"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="w-full flex justify-start items-center gap-3 flex-wrap mt-3">
|
|
{% for member in members %}
|
|
<div
|
|
class="w-fit flex flex-col gap-2 px-5 py-3 bg-gray-100 rounded-md shadow-md">
|
|
<div class="flex justify-start items-center gap-1">
|
|
<div class="w-[40px] h-[40px] rounded-full bg-white">
|
|
{% if member.image %}
|
|
<img src="{{member.image.url}}" class="w-full h-full rounded-full object-cover">
|
|
{% else %}
|
|
<img src="{% static 'images/default-user.png' %}"
|
|
class="w-full h-full rounded-full object-cover">
|
|
{% endif %}
|
|
</div>
|
|
|
|
<p class="text-secondosiblue font-light">{{member.user.first_name}} {{member.user.last_name}}
|
|
</p>
|
|
</div>
|
|
|
|
{% if request.user.is_superuser %}
|
|
<p class="text-secondosiblue text-sm">Working Hours:
|
|
{{member.total_time_worked_hours}}hr {{member.total_time_worked_minutes}}min
|
|
{{member.total_time_worked_seconds}}sec</p>
|
|
{% endif %}
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- TICKETS -->
|
|
<div class="w-full mt-5">
|
|
<div class="overflow-x-auto border border-gray-300 rounded-md">
|
|
<div
|
|
class=" bg-gray-200 rounded-t-md flex justify-between items-center text-white text-xl font-bold h-[50px]">
|
|
<div class="px-3">
|
|
<p class="text-secondosiblue uppercase font-bold">Tickets</p>
|
|
</div>
|
|
|
|
<button
|
|
class="h-full rounded-tr-md px-4 bg-secondosiblue text-gray-200 text-[18px] outline-none border-none cursor-pointer flex justify-center items-center">
|
|
<i class="fa fa-plus"></i>
|
|
</button>
|
|
</div>
|
|
<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 uppercase border-r border-gray-300 whitespace-nowrap">
|
|
Last Updated
|
|
</th>
|
|
<th scope="col"
|
|
class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 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>
|
|
|
|
<!-- TABLE BODY -->
|
|
<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">hhh</p>
|
|
</td>
|
|
|
|
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
|
|
<p class="text-secondosiblue">hhh</p>
|
|
</td>
|
|
|
|
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
|
|
<p class="text-secondosiblue">hhh</p>
|
|
</td>
|
|
|
|
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
|
|
<p class="text-secondosiblue">hhh</p>
|
|
</td>
|
|
|
|
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
|
|
<p class="text-secondosiblue">hhh</p>
|
|
</td>
|
|
|
|
<td class="px-6 py-4 text-center text-sm">
|
|
<div class="w-full flex justify-center items-center gap-3">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-[16px] cursor-pointer 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>
|
|
|
|
<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>
|
|
<!-- <tr>
|
|
<td colspan="6" class="px-6 py-4 text-center text-sm text-secondosiblue">
|
|
No Tickets at the moment
|
|
</td>
|
|
</tr> -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- USER STORIES -->
|
|
<div class="w-full mt-5">
|
|
<div class="overflow-x-auto border border-gray-300 rounded-md mt-5">
|
|
<div
|
|
class=" bg-gray-200 rounded-t-md flex justify-between items-center text-white text-xl font-bold h-[50px]">
|
|
<div class="px-3">
|
|
<p class="text-secondosiblue uppercase font-bold">User Stories</p>
|
|
</div>
|
|
|
|
<button
|
|
class="h-full rounded-tr-md px-4 bg-secondosiblue text-gray-200 text-[18px] outline-none border-none cursor-pointer flex justify-center items-center addUserStoryButton"
|
|
data-modal-url="{% url 'adduserstorymodal' project.project_id %}">
|
|
<i class="fa fa-plus"></i>
|
|
</button>
|
|
</div>
|
|
<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">
|
|
Story
|
|
</th>
|
|
<th scope="col"
|
|
class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
|
|
Related Task
|
|
</th>
|
|
<th scope="col"
|
|
class="px-6 py-3 text-sm font-medium text-gray-500 uppercase whitespace-nowrap">
|
|
Actions
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<!-- TABLE BODY -->
|
|
<tbody class="bg-white divide-y divide-gray-200">
|
|
<!-- 1st row -->
|
|
{% if project.projectrequirement_set.all %}
|
|
{% for requirement in project.projectrequirement_set.all %}
|
|
<tr>
|
|
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
|
|
<p class="text-secondosiblue">{{requirement.content}}</p>
|
|
</td>
|
|
|
|
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
|
|
{% if requirement.task_set.all %}
|
|
{% for task in requirement.task_set.all %}
|
|
<a class="text-blue-500 underline"
|
|
href="{% url 'detailed-task' task.task_id %}">{{task.name}} <i
|
|
class="fas fa-angle-double-right"></i></a>
|
|
{% endfor %}
|
|
{%else%}
|
|
<p class="text-secondosiblue">None</p>
|
|
{% endif %}
|
|
|
|
</td>
|
|
|
|
|
|
<td class="px-6 py-4 text-center text-sm">
|
|
<div class="w-full flex justify-center items-center gap-3">
|
|
<a href="{% url 'adduserstorytask' project.project_id requirement.id %}">
|
|
<button
|
|
class="w-fit py-2 px-3 bg-green-700 border border-green-700 text-white rounded-md cursor-pointer hover:bg-white hover:text-green-700">Add
|
|
Task</button>
|
|
</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>
|
|
{% endfor %}
|
|
{% else %}
|
|
<tr>
|
|
<td colspan="3" class="px-6 py-4 text-center text-sm text-secondosiblue">
|
|
No Requirements at the moment
|
|
</td>
|
|
</tr>
|
|
{% endif %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- CREDENTIALS -->
|
|
<div class="w-full mt-5">
|
|
<div
|
|
class=" bg-gray-200 rounded-t-md flex justify-between items-center text-white text-xl font-bold h-[50px]">
|
|
<div class="px-3">
|
|
<p class="text-secondosiblue uppercase font-bold">Credentials</p>
|
|
</div>
|
|
|
|
<button
|
|
class="h-full rounded-tr-md px-4 bg-secondosiblue text-gray-200 text-[18px] outline-none border-none cursor-pointer flex justify-center items-center addCredentialsButton"
|
|
data-modal-url="{% url 'addcredentialmodal' %}">
|
|
<i class="fa fa-plus"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="overflow-x-auto border border-gray-300 rounded-b-md">
|
|
<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">
|
|
Email or Username
|
|
</th>
|
|
<th scope="col"
|
|
class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
|
|
Password
|
|
</th>
|
|
<th scope="col"
|
|
class="px-6 py-3 text-sm font-medium text-gray-500 uppercase whitespace-nowrap">
|
|
Used For
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<!-- TABLE BODY -->
|
|
<tbody class="bg-white divide-y divide-gray-200">
|
|
<!-- 1st row -->
|
|
{% if project.projectcredential_set.all %}
|
|
{% for credential in project.projectcredential_set.all %}
|
|
<tr>
|
|
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
|
|
<p class="text-secondosiblue">{{credential.emailorusername}}</p>
|
|
</td>
|
|
|
|
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
|
|
<a class="text-secondosiblue">{{credential.password}}</a>
|
|
</td>
|
|
|
|
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
|
|
<a class="text-secondosiblue">{{credential.usedfor}}</a>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
{% else %}
|
|
<tr>
|
|
<td colspan="3" class="px-6 py-4 text-center text-sm text-secondosiblue">
|
|
No Available Credentials
|
|
</td>
|
|
</tr>
|
|
{% endif %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- RELATED FILES -->
|
|
<div class="w-full mt-5">
|
|
<div class="overflow-x-auto border border-gray-300 rounded-md">
|
|
<div
|
|
class=" bg-gray-200 rounded-t-md flex justify-between items-center text-white text-xl font-bold h-[50px]">
|
|
<div class="px-3">
|
|
<p class="text-secondosiblue uppercase font-bold">Related files</p>
|
|
</div>
|
|
|
|
<button
|
|
class="h-full rounded-tr-md px-4 bg-secondosiblue text-gray-200 text-[18px] outline-none border-none cursor-pointer flex justify-center items-center addFileButton"
|
|
data-modal-url="{% url 'addfilemodal' %}">
|
|
<i class="fa fa-plus"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<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">
|
|
File Name
|
|
</th>
|
|
<th scope="col"
|
|
class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
|
|
File
|
|
</th>
|
|
<th scope="col"
|
|
class="px-6 py-3 text-sm font-medium text-gray-500 uppercase whitespace-nowrap">
|
|
Date Entered
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<!-- TABLE BODY -->
|
|
<tbody class="bg-white divide-y divide-gray-200">
|
|
<!-- 1st row -->
|
|
{% if project.projectfile_set.all %}
|
|
{% for file in project.projectfile_set.all %}
|
|
<tr>
|
|
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
|
|
<p class="text-secondosiblue">{{file.name}}</p>
|
|
</td>
|
|
|
|
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
|
|
<a class="text-secondosiblue">{{file.file}}</a>
|
|
</td>
|
|
|
|
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
|
|
<a class="text-secondosiblue">{{file.date}}</a>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
{% else %}
|
|
<tr>
|
|
<td colspan="3" class="px-6 py-4 text-center text-sm text-secondosiblue">
|
|
No Available Files
|
|
</td>
|
|
</tr>
|
|
{% endif %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- NOTES -->
|
|
<div class="w-full mt-5">
|
|
<div
|
|
class=" bg-gray-200 rounded-t-md flex justify-between items-center text-white text-xl font-bold h-[50px]">
|
|
<div class="px-3">
|
|
<p class="text-secondosiblue uppercase font-bold">Notes</p>
|
|
</div>
|
|
|
|
<button
|
|
class="h-full rounded-tr-md px-4 bg-secondosiblue text-gray-200 text-[18px] outline-none border-none cursor-pointer flex justify-center items-center addProjectNoteButton"
|
|
data-modal-url="{% url 'addprojectnotemodal' project.project_id %}">
|
|
<i class="fa fa-plus"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="w-full h-fit mt-3 grid grid-cols-3 gap-5">
|
|
{% for note in project_notes %}
|
|
<div>
|
|
<div class="w-full rounded-t-md px-3 py-2 flex justify-between items-center border-b border-white border-opacity-30"
|
|
style="background-color: {{note.color}}">
|
|
<p class="text-sm text-gray-500">{{ note.date|date:"F j, Y" }}</p>
|
|
<button
|
|
class="w-[30px] h-[30px] bg-white shadow-md rounded-md p-2 flex justify-center items-center cursor-pointer hover:scale-105 duration-300 transition-transform deleteNoteButton"
|
|
data-modal-url="{% url 'deletenotemodal' note.id %}" style="color: {{note.color}};">
|
|
<i class="fa fa-trash"></i>
|
|
</button>
|
|
</div>
|
|
<div class="h-[150px] shadow-md rounded-b-md p-5 cursor-pointer"
|
|
style="background-color: {{note.color}}"
|
|
onclick="showModal('{{ note.text }}', '{{ note.color }}')">
|
|
<p class="text-sm text-gray-500 overflow-hidden"
|
|
style="word-break: break-all; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical;">
|
|
{{ note.text }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- RELATED TASK CONTAINER BASED ON THE CHOSEN EPIC -->
|
|
<div class="w-full mt-10">
|
|
<div class="w-full bg-gray-200 rounded-md shadow-md h-fit p-5 flex flex-col gap-3">
|
|
<p class="text-secondosiblue uppercase text-xl font-semibold">Filter Tasks by Epics</p>
|
|
<div class="w-full flex flex-wrap gap-3">
|
|
<div>
|
|
<a class="selectedEpic text-gray-500 font-semibold cursor-pointer openTasks"
|
|
data-project-id="{{project.id}}">All Open Tasks</a>
|
|
</div>
|
|
<p class="text-white opacity-30 font-extralight">|</p>
|
|
{% for epic in epics %}
|
|
<div>
|
|
<a class="epicTitle text-gray-400 font-semibold cursor-pointer"
|
|
data-epic-id="{{ epic.id }}">{{epic.title}}</a>
|
|
</div>
|
|
<p class="text-white opacity-30 font-extralight">|</p>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- LOADER -->
|
|
<div class="w-full flex justify-center items-center p-5 hidden" id="epicLoader">
|
|
<div role="status">
|
|
<svg aria-hidden="true" class="w-12 h-12 text-gray-200 animate-spin dark:text-gray-600 fill-osiblue"
|
|
viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path
|
|
d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
|
|
fill="currentColor" />
|
|
<path
|
|
d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
|
|
fill="currentFill" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- TO DISPLAY THE FETCHED TASKS -->
|
|
<div class="w-full flex flex-col gap-3" id="epicRelatedTasksContainer">
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<button
|
|
class="w-full mt-5 text-base px-3 py-2 bg-red-500 text-white outline-none border border-red-500 rounded-md cursor-pointer hover:bg-white hover:text-red-500 duration-300 deleteProjectButton"
|
|
data-modal-url="{% url 'deleteprojectmodal' project.id %}">Delete
|
|
Project</button>
|
|
|
|
</div>
|
|
|
|
|
|
<!---------------------- JS SCRIPTS -------------------->
|
|
|
|
<!-- TO FETCH THE RELATED TASKS -->
|
|
<script type="text/javascript" src='{% static "js/fetch-epic-tasks.js" %}'></script>
|
|
|
|
<!-- TO DISPLAY THE PROJECT PROGRESS BAR BASED ON ITS REMAINING TIME -->
|
|
<script type="text/javascript" src='{% static "js/calculate-project-time.js" %}'></script>
|
|
|
|
|
|
{% endblock content %} |