Add basic pie charts for todos

board/templates/board/employee_list.html

@@ -6,16 +6,18 @@
     <p><a href="{% url 'employee-pre' %}" class="action-button">Add employee from email</a> or <a href="{% url 'employee-create' %}">Add employee from scratch</a></p>
     <section>
         {% for employee in employee_list %}
-        <p>
-            <a href="{% url 'employee-detail' employee.pk %}"><strong>{{employee.full_name}}</strong></a><br>
-            <small>Hire date: {{employee.hire_date|date:"SHORT_DATE_FORMAT"}}</small><br>
-            <small>Department: {{employee.department}}</small>
-        </p>
-        <div class="pie_chart" type="pie" percent="0%">
-            <svg viewBox="0 0 64 64">
-                <circle class="pie" r="32" cx="32" cy="32" style="stroke-width: 64;"></circle>
-                <circle class="slice" r="32" cx="32" cy="32" style="stroke-width: 64;stroke-dasharray: 0 201.06192982974676;"></circle>
-            </svg>
+        <div class="employee__item">
+            <div class="pie_chart" type="pie" percent="0%">
+                <svg viewBox="0 0 64 64">
+                    <circle class="pie" r="32" cx="32" cy="32" style="stroke-width: 64;"></circle>
+                    <circle class="slice" r="32" cx="32" cy="32" style="stroke-width: 64;stroke-dasharray: {% widthratio employee.todos_completed employee.todos_total 201 %} 200;"></circle>
+                </svg>
+            </div>
+            <p>
+                <a href="{% url 'employee-detail' employee.pk %}"><strong>{{employee.full_name}}</strong></a><br>
+                <small>Hire date: {{employee.hire_date|date:"SHORT_DATE_FORMAT"}}</small><br>
+                <small>Department: {{employee.department}}</small>
+            </p>
         </div>
         {% endfor %}
     </section>

board/views.py

@@ -5,7 +5,11 @@ from django.views.generic.edit import FormView, CreateView, UpdateView, DeleteVi
 from django.views.generic.detail import DetailView
 from django.views.generic.list import ListView
 from django.contrib.auth.mixins import LoginRequiredMixin
-from django.db.models import Q
+
+
+from django.db.models import (Exists, OuterRef,
+    Prefetch, Subquery, Count, Sum, F, Q, Value)
+from django.db.models.functions import Length, Upper
 
 from .models import Employee, LogEntry, Todo, Event
 from .forms import (
@@ -32,7 +36,10 @@ class SearchResultsView(ListView):
 # Employees
 class EmployeeListView(LoginRequiredMixin, ListView):
     model = Employee
-    queryset = Employee.objects.filter(archived=False).order_by('hire_date')
+    queryset = Employee.objects.filter(archived=False).order_by('hire_date').annotate(
+        todos_total=Count('todo'),
+        todos_completed=Count('pk', filter=Q(todo__completed=True)),
+        )
 
 class EmployeeArchivedView(LoginRequiredMixin, ListView):
     model = Employee

onboard/settings.py

@@ -53,6 +53,7 @@ MIDDLEWARE = [
     'django.contrib.auth.middleware.AuthenticationMiddleware',
     'django.contrib.messages.middleware.MessageMiddleware',
     'django.middleware.clickjacking.XFrameOptionsMiddleware',
+    'onboard.middleware.TimezoneMiddleware',
 ]
 
 ROOT_URLCONF = 'onboard.urls'

static/styles/main.css

@@ -314,6 +314,13 @@ hgroup {
 }
 
 
+.employee__item {
+    display: grid;
+    grid-template-columns: 0.25fr 4fr;
+    column-gap: 1rem;
+    align-items: center;
+}
+
 
 .log_entry {
     display: grid;
@@ -351,8 +358,9 @@ hgroup {
 
 .pie_chart {
     display: inline-block;
-    width: 1.125em;
-    height: 1.125em;
+    width: 2rem;
+    height: 2rem;
+
 }