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.
153 lines
10 KiB
HTML
153 lines
10 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">
|
|
<a href="{% url 'detailed-project' project.project_id %}">
|
|
<div class="w-full pt-4 pb-1 px-5 flex flex-col gap-1 justify-center items-center text-center {% 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 %} text-white rounded-t-md text-[17px] s:text-[20px] bg-opacity-70 hover:bg-opacity-100 duration-300 relative">
|
|
<p>{{project.name}}</p>
|
|
|
|
<div class="w-full flex justify-between items-center gap-3 text-white text-[12px] opacity-80">
|
|
<p>{{project.start_date}}</p>
|
|
<p>{{project.end_date}}</p>
|
|
</div>
|
|
|
|
<div class="absolute top-3 right-3 cursor-pointer" 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 hidden" 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>
|
|
</a>
|
|
|
|
|
|
<!-- 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> |