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

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

Write Preview
Loading…
Cancel
Save