salim
/
newosinadjango
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

new

Browse Source
main
emile 1 month ago
parent 2231ea1ab0
commit dd85cad77e
1 changed files with 112 additions and 77 deletions
Show Stats Download Patch File Download Diff File

119
osinaweb/osinacore/templates/projects-dashboard.html
Unescape Escape View File

@ -5,32 +5,64 @@
<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">
<style>
.dashboard-container {
display: flex;
flex-direction: column;
height: calc(100vh - 100px); /* Adjust based on your header height */
padding: 1rem;
background-color: #f9fafb;
}
.table-container {
flex: 1;
overflow: hidden;
display: flex;
flex-direction: column;
}
.table-responsive {
flex: 1;
overflow: auto;
}
.compact-table {
width: 100%;
table-layout: fixed;
}
.compact-table th,
.compact-table td {
padding: 0.5rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.status-badge {
font-size: 0.75rem;
padding: 0.25rem 0.5rem;
}
</style>
<div class="dashboard-container rounded-xl bg-gray-50 shadow-md">
<div class="flex flex-row gap-3 justify-between items-center mb-4">
<h1 class="font-semibold text-xl text-primary">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>
<form method="get" id="filter-form" class="mb-4">
<div class="w-full flex flex-col gap-4">
<div class="flex flex-col lg:flex-row w-full gap-4">
<div class="flex-1 flex flex-col">
<label class="font-medium text-secondary mb-1">Date Range</label>
<div class="flex flex-col lg:flex-row gap-2">
<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>
class="border rounded-md outline-none focus:border-primary p-2">
<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">
class="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" multiple>
<div class="flex-1 flex flex-col">
<label class="font-medium text-secondary mb-1">Projects</label>
<select name="projects" id="projects" class="rounded-md" multiple>
{% for project in projects %}
<option value="{{ project.id }}"
{% if project.id in selected_projects %}selected{% endif %}>
@ -40,9 +72,9 @@
</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" multiple>
<div class="flex-1 flex flex-col">
<label class="font-medium text-secondary mb-1">Staff</label>
<select name="staff" id="staff" class="rounded-md" multiple>
{% for staff in staffs %}
<option value="{{ staff.id }}"
{% if staff.id in selected_staff %}selected{% endif %}>
@ -52,34 +84,34 @@
</select>
</div>
</div>
<button type="submit" class="bg-primary text-white px-4 py-2 rounded-md">
<button type="submit" class="self-start bg-primary text-white px-4 py-2 rounded-md">
Apply Filters
</button>
</div>
</form>
<div class="w-full overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200">
<div class="table-container">
<div class="table-responsive">
<table class="compact-table">
<thead class="bg-gray-50">
<tr>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Project</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Task</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Point</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Assigned To</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Time Spent</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Last Activity</th>
<th class="w-1/6">Project</th>
<th class="w-1/6">Task</th>
<th class="w-1/6">Point</th>
<th class="w-1/6">Status</th>
<th class="w-1/6">Assigned To</th>
<th class="w-1/6">Time Spent</th>
<th class="w-1/6">Last Activity</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
{% for point in points %}
<tr>
<td class="px-6 py-4 whitespace-nowrap">{{ point.task.project.name }}</td>
<td class="px-6 py-4 whitespace-nowrap">{{ point.task.name }}</td>
<td class="px-6 py-4 whitespace-nowrap">{{ point.text }}</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full
<td>{{ point.task.project.name }}</td>
<td>{{ point.task.name }}</td>
<td>{{ point.text|truncatechars:30 }}</td>
<td>
<span class="status-badge inline-flex rounded-full
{% if point.status == 'Completed' %}bg-green-100 text-green-800
{% elif point.status == 'Working On' %}bg-blue-100 text-blue-800
{% elif point.status == 'Paused' %}bg-yellow-100 text-yellow-800
@ -87,30 +119,31 @@
{{ point.status }}
</span>
</td>
<td class="px-6 py-4 whitespace-nowrap">{{ point.task.assigned_to.name }}</td>
<td class="px-6 py-4 whitespace-nowrap">
<td>{{ point.task.assigned_to.name }}</td>
<td>
{% with point.total_activity_time as time %}
{{ time.0 }}h {{ time.1 }}m {{ time.2 }}s
{{ time.0 }}h {{ time.1 }}m
{% endwith %}
</td>
<td class="px-6 py-4 whitespace-nowrap">
<td>
{% with point.pointactivity_set.last as last_activity %}
{% if last_activity %}
{{ last_activity.end_time|date:"Y-m-d H:i" }}
{{ last_activity.end_time|date:"m/d H:i" }}
{% else %}
No activity
-
{% endif %}
{% endwith %}
</td>
</tr>
{% empty %}
<tr>
<td colspan="7" class="px-6 py-4 text-center">No points found with the current filters</td>
<td colspan="7" class="text-center py-4">No points found with the current filters</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
<script>
@ -119,6 +152,7 @@ document.addEventListener('DOMContentLoaded', function() {
new TomSelect('#projects', {
create: false,
sortField: 'text',
plugins: ['remove_button'],
onChange: function() {
document.getElementById('filter-form').submit();
}
@ -128,6 +162,7 @@ document.addEventListener('DOMContentLoaded', function() {
new TomSelect('#staff', {
create: false,
sortField: 'text',
plugins: ['remove_button'],
onChange: function() {
document.getElementById('filter-form').submit();
}

Write Preview
Loading…
Cancel
Save