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.
119 lines
6.8 KiB
HTML
119 lines
6.8 KiB
HTML
{% load static %}
|
|
|
|
{% for project in filtered_projects %}
|
|
<div class="w-full h-fit bg-white rounded-md shadow-md p-3 projectContainer">
|
|
<p id="projectId" class="hidden">{{project.id}}</p>
|
|
|
|
<p class="hidden startDate">{{project.start_date}}</p>
|
|
<p class="hidden endDate">{{project.end_date}}</p>
|
|
|
|
<div class="w-full bg-white h-fit rounded-md border border-gray-200">
|
|
<div class="w-full px-5 py-5 {% 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 %}
|
|
flex justify-center items-center text-center text-white rounded-t-md text-[17px] s:text-[20px]">
|
|
<p>{{project.name}}</p>
|
|
</div>
|
|
|
|
<!-- Progress Bar -->
|
|
<div class="w-full h-[8px] bg-gray-100 mainBar">
|
|
<div class="h-full progressBar">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="w-full grid grid-cols-1 l:grid-cols-2">
|
|
|
|
<!-- Left Section -->
|
|
<div class="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" 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>
|
|
|
|
<!-- Action Buttons -->
|
|
<div class="w-full border-t border-b l:border-b-0 border-gray-200 grid grid-cols-1 s:grid-cols-3">
|
|
<a href="{% url 'detailed-project' project.project_id %}"
|
|
class="p-3 border-b s:border-b-0 border-r-0 s:border-r border-gray-200 text-base bg-gray-50 text-secondosiblue flex justify-center items-center">View</a>
|
|
|
|
<a href="{% url 'editproject' project.project_id %}"
|
|
class="p-3 text-base bg-gray-50 border-b s:border-b-0 border-r-0 s:border-r border-gray-200 text-secondosiblue flex justify-center items-center">Edit</a>
|
|
|
|
<button class="p-3 text-base bg-gray-50 text-secondosiblue editProjectStatusButton"
|
|
data-modal-url="{% url 'editprojectstatusmodal' project.id %}">Update Status</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right Section - Recent Notes -->
|
|
<div class="w-full border-l-none l:border-l border-gray-200">
|
|
{% if project.note_set.exists %}
|
|
{% with last_note=project.note_set.last %}
|
|
<div class="w-full h-full flex flex-col gap-3 justify-center items-center p-3">
|
|
<p class="text-secondosiblue break-all whitespace-pre-wrap">{{ last_note.text }}</p>
|
|
<div class="w-[30px] h-[30px] rounded-full shadow-md p-1 flex justify-center items-center bg-gray-100 cursor-pointer hover:scale-105 duration-300 addProjectNoteButton"
|
|
data-modal-url="{% url 'addprojectnotemodal' project.project_id %}">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3"
|
|
stroke="currentColor" class="w-6 h-6 text-secondosiblue">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
{% endwith %}
|
|
{% else %}
|
|
<div class="w-full h-full flex flex-col justify-center items-center gap-3 p-3">
|
|
<p class="text-secondosiblue">No Recent Note</p>
|
|
<div class="w-[30px] h-[30px] rounded-full shadow-md p-1 flex justify-center items-center bg-gray-100 cursor-pointer hover:scale-105 duration-300 addProjectNoteButton"
|
|
data-modal-url="{% url 'addprojectnotemodal' project.project_id %}">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3"
|
|
stroke="currentColor" class="w-6 h-6 text-secondosiblue">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
|
|
|
|
<!-- 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="module" src='{% static "js/pop-modals.js" %}'></script> |