new
parent
71e722b0d1
commit
a1ebd69efc
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -0,0 +1,117 @@
|
|||||||
|
{% extends "main.html" %}
|
||||||
|
{% load static %}
|
||||||
|
{% block content %}
|
||||||
|
|
||||||
|
<link href="https://cdn.jsdelivr.net/npm/tom-select@2.4.3/dist/css/tom-select.css" rel="stylesheet" />
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/tom-select@2.4.3/dist/js/tom-select.complete.min.js"></script>
|
||||||
|
|
||||||
|
<div class="h-fit w-full flex flex-col items gap-5 rounded-xl bg-gray-50 shadow-md p-5">
|
||||||
|
<div class="flex flex-row gap-3 justify-between items-center">
|
||||||
|
<h1 class="text-2xl text-secondosiblue text-center font-semibold">Projects Dashboard</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form method="get" id="filter-form">
|
||||||
|
<div class="w-full flex flex-col gap-10 justify-center items-center">
|
||||||
|
<div class="flex flex-col lg:flex-row w-full justify-center items-center gap-5">
|
||||||
|
<div class="w-full max-w-[300px] flex flex-row gap-2 items-center">
|
||||||
|
<p>From:</p>
|
||||||
|
<input name="start_date" id="start-date" type="date"
|
||||||
|
value="{{ start_date }}"
|
||||||
|
class="w-full border rounded-md outline-none focus:border-primary p-2" />
|
||||||
|
</div>
|
||||||
|
<div class="w-full max-w-[300px] flex flex-row gap-2 items-center">
|
||||||
|
<p>To:</p>
|
||||||
|
<input name="end_date" id="end-date" type="date"
|
||||||
|
value="{{ end_date }}"
|
||||||
|
class="w-full border rounded-md outline-none focus:border-primary p-2" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="w-full flex flex-row flex-wrap gap-5">
|
||||||
|
<div class="w-full flex flex-1 flex-col items-center">
|
||||||
|
<p class="font-medium text-secondary">Projects</p>
|
||||||
|
<select name="projects" id="projects" class="w-full h-full rounded-md z-10 confirm-exit-input" multiple>
|
||||||
|
{% for project in projects %}
|
||||||
|
<option value="{{ project.id }}"
|
||||||
|
{% if project.id in selected_projects %}selected{% endif %}>
|
||||||
|
{{ project.name }}
|
||||||
|
</option>
|
||||||
|
{% endfor %}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="w-full flex-1 flex flex-col items-center">
|
||||||
|
<p class="font-medium text-secondary">Staff</p>
|
||||||
|
<select name="staff" id="staff" class="w-full h-full rounded-md z-10 confirm-exit-input" multiple>
|
||||||
|
{% for staff in staffs %}
|
||||||
|
<option value="{{ staff.id }}"
|
||||||
|
{% if staff.id in selected_staff %}selected{% endif %}>
|
||||||
|
{{ staff.user.first_name }} {{ staff.user.last_name }}
|
||||||
|
</option>
|
||||||
|
{% endfor %}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button type="submit" class="bg-primary text-white px-4 py-2 rounded-md">
|
||||||
|
Apply Filters
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<div class="w-full flex flex-col gap-10 justify-center items-center">
|
||||||
|
<table class="table-auto w-full">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">Project</th>
|
||||||
|
<th class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">Status</th>
|
||||||
|
<th class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">Date</th>
|
||||||
|
<th class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">Staff</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody id="status-table-body">
|
||||||
|
{% for task in tasks %}
|
||||||
|
<tr>
|
||||||
|
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">{{ task.project.name }}</td>
|
||||||
|
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">{{ task.status }}</td>
|
||||||
|
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">{{ task.start_date }}</td>
|
||||||
|
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">{{ task.assigned_to.user.first_name }} {{ task.assigned_to.user.last_name }}</td>
|
||||||
|
</tr>
|
||||||
|
{% endfor %}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
|
// Initialize TomSelect for Projects
|
||||||
|
new TomSelect('#projects', {
|
||||||
|
create: false,
|
||||||
|
sortField: 'text',
|
||||||
|
onChange: function() {
|
||||||
|
document.getElementById('filter-form').submit();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Initialize TomSelect for Staff
|
||||||
|
new TomSelect('#staff', {
|
||||||
|
create: false,
|
||||||
|
sortField: 'text',
|
||||||
|
onChange: function() {
|
||||||
|
document.getElementById('filter-form').submit();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Submit form when date changes
|
||||||
|
document.getElementById('start-date').addEventListener('change', function() {
|
||||||
|
document.getElementById('filter-form').submit();
|
||||||
|
});
|
||||||
|
|
||||||
|
document.getElementById('end-date').addEventListener('change', function() {
|
||||||
|
document.getElementById('filter-form').submit();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{% endblock content %}
|
@ -0,0 +1,61 @@
|
|||||||
|
document.addEventListener('DOMContentLoaded', function () {
|
||||||
|
// Initialize TomSelect for Projects
|
||||||
|
new TomSelect('#projects', {
|
||||||
|
create: false, // Disable creating new options
|
||||||
|
sortField: 'text',
|
||||||
|
onChange: function(values) {
|
||||||
|
updateTasks(); // Update tasks on value change
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Initialize TomSelect for Staff
|
||||||
|
new TomSelect('#staff', {
|
||||||
|
create: false,
|
||||||
|
sortField: 'text',
|
||||||
|
onChange: function(values) {
|
||||||
|
updateTasks(); // Update tasks on value change
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Update tasks based on filters
|
||||||
|
function updateTasks() {
|
||||||
|
const projectIds = Array.from(document.getElementById('projects').selectedOptions).map(option => option.value);
|
||||||
|
const staffIds = Array.from(document.getElementById('staff').selectedOptions).map(option => option.value);
|
||||||
|
const startDate = document.getElementById('start-date').value;
|
||||||
|
const endDate = document.getElementById('end-date').value;
|
||||||
|
|
||||||
|
// Construct the query parameters without brackets around the projectIds
|
||||||
|
let queryParams = `?projects=${projectIds.join(',')}&staff=${staffIds.join(',')}&start_date=${startDate}&end_date=${endDate}`;
|
||||||
|
|
||||||
|
// Perform AJAX request
|
||||||
|
fetch(`/projects-dashboard/${queryParams}`, {
|
||||||
|
method: 'GET',
|
||||||
|
headers: {
|
||||||
|
'X-Requested-With': 'XMLHttpRequest',
|
||||||
|
},
|
||||||
|
})
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(data => {
|
||||||
|
// Update table body with new data
|
||||||
|
const tbody = document.getElementById('status-table-body');
|
||||||
|
tbody.innerHTML = ''; // Clear the existing table rows
|
||||||
|
data.tasks_data.forEach(task => {
|
||||||
|
const tr = document.createElement('tr');
|
||||||
|
tr.innerHTML = `
|
||||||
|
<td>${task.project_name}</td>
|
||||||
|
<td>${task.status}</td>
|
||||||
|
<td>${task.start_date}</td>
|
||||||
|
<td>${task.staff}</td>
|
||||||
|
`;
|
||||||
|
tbody.appendChild(tr);
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
console.error('Error updating tasks:', error);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Trigger update when date range changes
|
||||||
|
document.getElementById('start-date').addEventListener('change', updateTasks);
|
||||||
|
document.getElementById('end-date').addEventListener('change', updateTasks);
|
||||||
|
});
|
Loading…
Reference in New Issue