New changes.
Nataly-ab
1 year ago
parent
c5cf92a9de
commit
3434dacbaf
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -1,14 +0,0 @@
|
||||
const epicSelect = document.getElementById('epicSelect');
|
||||
const epicDetails = document.getElementById('epicDetails');
|
||||
const latestEpicDetails = document.getElementById('latestEpicDetails');
|
||||
|
||||
epicSelect.addEventListener('change', function () {
|
||||
if (this.value !== 'EPICS') {
|
||||
epicDetails.classList.remove('hidden');
|
||||
epicDetails.classList.add('flex');
|
||||
|
||||
latestEpicDetails.classList.add('hidden');
|
||||
} else {
|
||||
epicDetails.classList.add('hidden');
|
||||
}
|
||||
});
|
||||
@ -1,79 +1,57 @@
|
||||
|
||||
$(document).ready(function () {
|
||||
// Function to fetch related tasks based on epic ID
|
||||
function fetchRelatedTasks(epicId) {
|
||||
|
||||
$.ajax({
|
||||
type: "GET",
|
||||
url: "/get_tasks/" + epicId + "/",
|
||||
success: function (data) {
|
||||
// console.log("Ajax call success. Data received:", data);
|
||||
|
||||
$("#epicRelatedTasksContainer").html(data);
|
||||
},
|
||||
error: function (xhr, status, error) {
|
||||
console.log("Ajax call failed. Error details:");
|
||||
console.log("XHR Object:", xhr);
|
||||
console.log("Status:", status);
|
||||
console.log("Error:", error);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
$("select#epicSelect").change(function () {
|
||||
// Get the selected option's value
|
||||
var selectedEpicId = $(this).val();
|
||||
|
||||
if (selectedEpicId) {
|
||||
// Fetch related tasks based on the selected epic
|
||||
fetchRelatedTasks(selectedEpicId);
|
||||
function fetchOpenTasks() {
|
||||
var projectId = $('#projectId').text().trim();
|
||||
|
||||
$.ajax({
|
||||
url: '/open_tasks_for_project/' + projectId + '/',
|
||||
method: 'GET',
|
||||
success: function (data) {
|
||||
console.log('Success:', data);
|
||||
$('#epicRelatedTasksContainer').html(data);
|
||||
console.log('Updated Container:', $('#epicRelatedTasksContainer').html());
|
||||
},
|
||||
error: function (error) {
|
||||
console.error('Error fetching open tasks:', error);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// TO FETCH THE LATEST EPIC BY DEFAULT
|
||||
var projectId = $("#projectId").text().trim();
|
||||
|
||||
function fetchLatestEpicTasks(projectId) {
|
||||
$.ajax({
|
||||
type: "GET",
|
||||
url: "/get_latest_epic/" + projectId + "/",
|
||||
success: function (data) {
|
||||
var latestEpicId = data.latest_epic ? data.latest_epic.id : null;
|
||||
|
||||
if (latestEpicId) {
|
||||
// Fetch related tasks based on the latest epic
|
||||
fetchRelatedTasks(latestEpicId);
|
||||
} else {
|
||||
// console.log("No latest epic found.");
|
||||
}
|
||||
|
||||
$("#epicRelatedTasksContainer").html(data);
|
||||
},
|
||||
error: function (xhr, status, error) {
|
||||
console.log("Ajax call failed. Error details:");
|
||||
console.log("XHR Object:", xhr);
|
||||
console.log("Status:", status);
|
||||
console.log("Error:", error);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
fetchLatestEpicTasks(projectId);
|
||||
|
||||
|
||||
|
||||
$('#epicSelect').change(function () {
|
||||
var selectedEpic = $(this).find(':selected');
|
||||
var startDate = selectedEpic.data('start-date');
|
||||
var endDate = selectedEpic.data('end-date');
|
||||
|
||||
if (startDate && endDate) {
|
||||
$('#epicDetails').removeClass('hidden');
|
||||
$('#epicDetails span#startDate').text(startDate);
|
||||
$('#epicDetails span#endDate').text(endDate);
|
||||
} else {
|
||||
$('#epicDetails').addClass('hidden');
|
||||
// To load to display open tasks by default
|
||||
$(document).ready(function () {
|
||||
fetchOpenTasks();
|
||||
});
|
||||
|
||||
// Click event handler for the "All Open Tasks" link
|
||||
$('.openTasks').on('click', function () {
|
||||
// Remove the selectedEpic class from all epic titles
|
||||
$('.epicTitle').removeClass('selectedEpic');
|
||||
$('.openTasks').removeClass('selectedEpic');
|
||||
|
||||
// Add the selectedEpic class to the "All Open Tasks" link
|
||||
$(this).addClass('selectedEpic');
|
||||
|
||||
fetchOpenTasks();
|
||||
});
|
||||
|
||||
// Click event handler for the epic titles
|
||||
$('.epicTitle').on('click', function () {
|
||||
// Remove the selectedEpic class from all epic titles
|
||||
$('.epicTitle').removeClass('selectedEpic');
|
||||
$('.openTasks').removeClass('selectedEpic');
|
||||
|
||||
var epicId = $(this).data('epic-id');
|
||||
|
||||
$(this).addClass('selectedEpic');
|
||||
|
||||
$.ajax({
|
||||
url: '/get_tasks/' + epicId + '/',
|
||||
method: 'GET',
|
||||
success: function (data) {
|
||||
console.log('Success:', data);
|
||||
$('#epicRelatedTasksContainer').html(data);
|
||||
console.log('Updated Container:', $('#epicRelatedTasksContainer').html());
|
||||
},
|
||||
error: function (error) {
|
||||
console.error('Error fetching tasks:', error);
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@ -0,0 +1,272 @@
|
||||
{% load static %}
|
||||
|
||||
|
||||
<!-- TASKS ON DESKTOP -->
|
||||
<div class="hidden md:block">
|
||||
<!-- TASKS TABLE -->
|
||||
{% for task in open_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 bg-blue-500 rounded-tl-md text-xl text-white font-semibold">
|
||||
<p>{{task.name}}</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-3">
|
||||
{% if task.status == 'Open' %}
|
||||
<div
|
||||
class="flex justify-center items-center border-r border-b border-gray-200 text-white bg-blue-500">
|
||||
<p>{{task.status}}</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if task.status == 'Open' %}
|
||||
<div
|
||||
class="flex justify-center items-center border-r border-b border-gray-200 text-white bg-blue-500">
|
||||
<p>{{task.formatted_start_date}}</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if task.status == 'Open' %}
|
||||
{% if task.end_date < current_date %}
|
||||
<div
|
||||
class="flex justify-center items-center border-b border-gray-200 text-white bg-red-500 rounded-tr-md">
|
||||
<p>{{task.formatted_end_date}}</p>
|
||||
</div>
|
||||
{% else %}
|
||||
<div
|
||||
class="flex justify-center items-center border-b border-gray-200 text-white bg-blue-500 rounded-tr-md">
|
||||
<p>{{task.formatted_end_date}}</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</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 'updatestatus' task.task_id %}">Update
|
||||
Status</button>
|
||||
|
||||
<button
|
||||
class="p-2 border border-gray-200 text-base h-[70px] bg-gray-100 text-gray-500 addTimeButton"
|
||||
data-modal-url="{% url 'addtime' %}">Add
|
||||
Time</button>
|
||||
|
||||
<button
|
||||
class="p-2 border border-gray-200 text-base h-[70px] bg-gray-100 text-gray-500 deleteTaskButton"
|
||||
>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 'addpoint' 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' %}">Timeline</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<!-- TASKS ON MOBILE -->
|
||||
<div class="block md:hidden">
|
||||
{% for task in related_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">
|
||||
{% if task.status == 'Open' %}
|
||||
<div
|
||||
class="w-full flex justify-center items-center text-white text-center bg-red-500 rounded-t-md py-5 px-3">
|
||||
<p>{{task.name}}</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if task.status == 'Working On' %}
|
||||
<div
|
||||
class="w-full flex justify-center items-center text-white text-center bg-orange-500 rounded-t-md py-5 px-3">
|
||||
<p>{{task.name}}</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
|
||||
<div class="grid grid-cols-3 border-t border-gray-200">
|
||||
{% if task.status == 'Open' %}
|
||||
<div
|
||||
class="text-white bg-red-500 border-r border-gray-200 flex justify-center items-center text-center py-3 text-sm">
|
||||
<p>{{task.status}}</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if task.status == 'Working On' %}
|
||||
<div
|
||||
class="text-white bg-orange-500 border-r border-gray-200 flex justify-center items-center text-center py-3 text-sm">
|
||||
<p>{{task.status}}</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
|
||||
{% if task.status == 'Open' %}
|
||||
<div
|
||||
class="text-white bg-red-500 border-r border-gray-200 flex justify-center items-center text-center py-3 text-sm">
|
||||
<p>{{task.start_date}}</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if task.status == 'Working On' %}
|
||||
<div
|
||||
class="text-white bg-orange-500 border-r border-gray-200 flex justify-center items-center text-center py-3 text-sm">
|
||||
<p>{{task.start_date}}</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
|
||||
{% if task.status == 'Open' %}
|
||||
<div class="text-white bg-red-500 flex justify-center items-center text-center py-3 text-sm">
|
||||
<p>{{task.end_date}}</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if task.status == 'Working On' %}
|
||||
<div class="text-white bg-orange-500 flex justify-center items-center text-center py-3 text-sm">
|
||||
<p>{{task.end_date}}</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
</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 'updatestatus' task.task_id %}">Update
|
||||
Status</button>
|
||||
|
||||
<button class="p-2 border border-gray-200 text-sm h-[70px] bg-gray-100 text-gray-500 addTimeButton"
|
||||
data-modal-url="{% url 'addtime' %}">Add
|
||||
Time</button>
|
||||
|
||||
<button class="p-2 border border-gray-200 text-sm h-[70px] bg-gray-100 text-gray-500 deleteTaskButton"
|
||||
>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 'addpoint' 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' %}">Timeline</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
Loading…
Reference in New Issue