better representation of list of single_datetime_events in org detail page

2 files changed, 29 insertions, 11 deletions

diff --git a/ctrack/organisations/templates/organisations/organisation_detail.html b/ctrack/organisations/templates/organisations/organisation_detail.html
index d6f99a8..316d6e8 100644
--- a/ctrack/organisations/templates/organisations/organisation_detail.html
+++ b/ctrack/organisations/templates/organisations/organisation_detail.html
@@ -230,14 +230,16 @@
                           d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/>
                     <path d="M2.56 11.332L3.1 9.73h1.984l.54 1.602h.718L4.444 6h-.696L1.85 11.332h.71zm1.544-4.527L4.9 9.18H3.284l.8-2.375h.02zm5.746.422h-.676V9.77c0 .652-.414 1.023-1.004 1.023-.539 0-.98-.246-.98-1.012V7.227h-.676v2.746c0 .941.606 1.425 1.453 1.425.656 0 1.043-.28 1.188-.605h.027v.539h.668V7.227zm2.258 5.046c-.563 0-.91-.304-.985-.636h-.687c.094.683.625 1.199 1.668 1.199.93 0 1.746-.527 1.746-1.578V7.227h-.649v.578h-.019c-.191-.348-.637-.64-1.195-.64-.965 0-1.64.679-1.64 1.886v.34c0 1.23.683 1.902 1.64 1.902.558 0 1.008-.293 1.172-.648h.02v.605c0 .645-.423 1.023-1.071 1.023zm.008-4.53c.648 0 1.062.527 1.062 1.359v.253c0 .848-.39 1.364-1.062 1.364-.692 0-1.098-.512-1.098-1.364v-.253c0-.868.406-1.36 1.098-1.36z"/>
                   </svg>
-                  <a href="{% url "register:event_create_simple_event_from_org_with_type" object.slug 'MEETING' %}">New meeting</a> |
+                  <a href="{% url "register:event_create_simple_event_from_org_with_type" object.slug 'MEETING' %}">New
+                    meeting</a> |
                   <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-telephone-fill" fill="currentColor"
                        xmlns="http://www.w3.org/2000/svg">
                     <path fill-rule="evenodd"
                           d="M2.267.98a1.636 1.636 0 0 1 2.448.152l1.681 2.162c.309.396.418.913.296 1.4l-.513 2.053a.636.636 0 0 0 .167.604L8.65 9.654a.636.636 0 0 0 .604.167l2.052-.513a1.636 1.636 0 0 1 1.401.296l2.162 1.681c.777.604.849 1.753.153 2.448l-.97.97c-.693.693-1.73.998-2.697.658a17.47 17.47 0 0 1-6.571-4.144A17.47 17.47 0 0 1 .639 4.646c-.34-.967-.035-2.004.658-2.698l.97-.969z"/>
                   </svg>
 
-                  <a href="{% url "register:event_create_simple_event_from_org_with_type" object.slug 'PHONE_CALL' %}">New phone call</a> |
+                  <a href="{% url "register:event_create_simple_event_from_org_with_type" object.slug 'PHONE_CALL' %}">New
+                    phone call</a> |
 
                   <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-camera-video" fill="currentColor"
                        xmlns="http://www.w3.org/2000/svg">
@@ -245,7 +247,8 @@
                           d="M0 5a2 2 0 0 1 2-2h7.5a2 2 0 0 1 1.983 1.738l3.11-1.382A1 1 0 0 1 16 4.269v7.462a1 1 0 0 1-1.406.913l-3.111-1.382A2 2 0 0 1 9.5 13H2a2 2 0 0 1-2-2V5zm11.5 5.175l3.5 1.556V4.269l-3.5 1.556v4.35zM2 4a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h7.5a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1H2z"/>
                   </svg>
 
-                  <a href="{% url "register:event_create_simple_event_from_org_with_type" object.slug 'VIDEO_CALL' %}">New video call</a> |
+                  <a href="{% url "register:event_create_simple_event_from_org_with_type" object.slug 'VIDEO_CALL' %}">New
+                    video call</a> |
 
                   <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-envelope" fill="currentColor"
                        xmlns="http://www.w3.org/2000/svg">
@@ -253,7 +256,8 @@
                           d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1H2zm13 2.383l-4.758 2.855L15 11.114v-5.73zm-.034 6.878L9.271 8.82 8 9.583 6.728 8.82l-5.694 3.44A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.739zM1 11.114l4.758-2.876L1 5.383v5.73z"/>
                   </svg>
 
-                  <a href="{% url "register:event_create_simple_event_from_org_with_type" object.slug 'EMAIL' %}">New email</a> |
+                  <a href="{% url "register:event_create_simple_event_from_org_with_type" object.slug 'EMAIL' %}">New
+                    email</a> |
 
                   <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-journal-text" fill="currentColor"
                        xmlns="http://www.w3.org/2000/svg">
@@ -262,15 +266,29 @@
                     <path fill-rule="evenodd"
                           d="M5 10.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5zm0-2a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm0-2a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm0-2a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5z"/>
                   </svg>
-                  <a href="{% url "register:event_create_simple_event_from_org_with_type" object.slug 'NOTE' %}">New note</a>
+                  <a href="{% url "register:event_create_simple_event_from_org_with_type" object.slug 'NOTE' %}">New
+                    note</a>
                 </div>
 
-              <div>
-                {% for event in single_datetime_events %}
-                  {{ event }} {{ event.short_description }}
-                {% endfor %}
+                <div>
+                  {% for event in single_datetime_events %}
+                    <div class="card" style="width: 100%">
+                      <div class="card-body">
+                        <h5 class="card-title">{{ event.short_description }}</h5>
+                          <div class="card-subtitle mb-2">
+                            <span class="badge badge-info">{{ event.type_descriptor }}</span>
+                            <span class="badge badge-light">{{ event.datetime|date:"l j F Y" }}, {{ event.datetime|date:"G:i" }}</span></h5>
+                          </div>
+                        <p class="card-text">{{ event.comments }}</p>
+                            Participants:
+                          {% for person in event.participants.all %}
+                            <a href="{% url "organisations:person-detail" person.id %}">{{ person }}</a> &nbsp;
+                          {% endfor %}
+                      </div>
+                    </div>
+                  {% endfor %}
 
-              </div>
+                </div>
 
                 <div class="table table-responsive">
                   <table class="table table-sm table-striped table-bordered">
diff --git a/ctrack/organisations/views.py b/ctrack/organisations/views.py
index ea6aa14..e8affdb 100644
--- a/ctrack/organisations/views.py
+++ b/ctrack/organisations/views.py
@@ -3,7 +3,7 @@ from typing import Any
 
 from django.contrib.auth.mixins import LoginRequiredMixin, PermissionRequiredMixin
 from django.db import transaction
-from django.db.models import Q
+from django.db.models import Q, QuerySet
 from django.http import HttpResponseRedirect
 from django.shortcuts import render, get_object_or_404
 from django.urls import reverse, reverse_lazy