Allow filtering by game, edition, purchase from the session list

CHANGELOG.md

@@ -1,3 +1,7 @@
+## Unreleased
+
+* Allow filtering by game, edition, purchase from the session list
+
 ## 1.0.2 / 2023-02-18 21:48+01:00
 
 * Add support for device info (https://git.kucharczyk.xyz/lukas/timetracker/issues/49)

frontend/src/index.css

@@ -14,7 +14,11 @@ textarea {
 
 #session-table {
   display: grid;
-  grid-template-columns: 3fr 1fr repeat(2, 2fr) 0.5fr 1fr;
+  grid-template-columns: 3fr repeat(3, 1fr) 0.5fr 1fr;
+}
+
+.purchase-name:hover > span:nth-child(2) {
+  @apply dark:text-slate-300
 }
 
 #button-container button {

games/templates/list_sessions.html

@@ -10,13 +10,13 @@
             {% if dataset.count >= 1 %}
             <div class="mb-4">Total playtime: {{ total_duration }} over {{ dataset.count }} sessions.</div>
             {% endif %}
-            {% if purchase or platform or edition %}
+            {% if purchase or platform or edition or game or ownership_type %}
             <span class="block">
                 <a class="text-red-400 inline" href="{% url 'list_sessions' %}">
                     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 inline">
                         <path stroke-linecap="round" stroke-linejoin="round" d="M9.75 9.75l4.5 4.5m0-4.5l-4.5 4.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                     </svg>
-                </a>Filtering by "{% firstof purchase platform edition %}"
+                </a>Filtering by "{% firstof purchase platform game edition ownership_type %}"
             </span>
             {% if purchase %}<a class="dark:text-white hover:underline block" href="{% url 'list_sessions_by_edition' purchase.edition.id %}">See all platforms</a>{% endif %}
             {% endif %}
@@ -31,15 +31,24 @@
             </a>
             {% endif %}
         </div>
-    <div id="session-table" class="gap-4 shadow rounded-xl max-w-screen-lg mx-auto dark:bg-slate-700 p-2 justify-center">
+    <div id="session-table" class="gap-4 shadow rounded-xl max-w-screen-2xl mx-auto dark:bg-slate-700 p-2 justify-center">
-        <div class="dark:border-white dark:text-slate-300 text-lg">Name</div>
+        <div class="dark:border-white dark:text-slate-300 text-lg">Purchase</div>
         <div class="dark:border-white dark:text-slate-300 text-lg">Platform</div>
         <div class="dark:border-white dark:text-slate-300 text-lg text-center">Start</div>
         <div class="dark:border-white dark:text-slate-300 text-lg text-center">End</div>
         <div class="dark:border-white dark:text-slate-300 text-lg">Duration</div>
         <div class="dark:border-white dark:text-slate-300 text-lg text-right">Manage</div>
         {% for data in dataset %}
-            <div class="dark:text-white overflow-hidden text-ellipsis whitespace-nowrap"><a class="hover:underline" href="{% url 'list_sessions_by_purchase' data.purchase.id %}">{{ data.purchase.edition }}</a></div>
+            <div class="purchase-name">
+                <span class="dark:text-white overflow-hidden text-ellipsis whitespace-nowrap">{{ data.purchase.edition }} <span class="dark:text-slate-400">({{ data.purchase.get_ownership_type_display }})</span></span>
+                
+                <span class="dark:text-slate-700 transition-colors duration-300">
+                    (<a class="hover:underline" href="{% url 'list_sessions_by_game'  data.purchase.edition.game.id %}">G</a>,
+                        <a class="hover:underline" href="{% url 'list_sessions_by_edition'  data.purchase.edition.id %}">E</a>,
+                        <a class="hover:underline" href="{% url 'list_sessions_by_purchase' data.purchase.id %}">P</a>,
+                        <a class="hover:underline" href="{% url 'list_sessions_by_ownership_type' data.purchase.ownership_type %}">O</a>)
+                </span>
+            </div>
             <div class="dark:text-white overflow-hidden text-ellipsis whitespace-nowrap"><a class="hover:underline" href="{% url 'list_sessions_by_platform' data.purchase.platform.id %}">{{ data.purchase.platform }}</a></div>
             <div class="dark:text-slate-400 text-center">{{ data.timestamp_start | date:"d/m/Y H:i" }}</div>
             <div class="dark:text-slate-400 text-center">

games/urls.py

@@ -47,10 +47,22 @@ urlpatterns = [
         {"filter": "platform"},
         name="list_sessions_by_platform",
     ),
+    path(
+        "list-sessions/by-game/<int:game_id>",
+        views.list_sessions,
+        {"filter": "game"},
+        name="list_sessions_by_game",
+    ),
     path(
         "list-sessions/by-edition/<int:edition_id>",
         views.list_sessions,
         {"filter": "edition"},
         name="list_sessions_by_edition",
     ),
+    path(
+        "list-sessions/by-ownership/<str:ownership_type>",
+        views.list_sessions,
+        {"filter": "ownership_type"},
+        name="list_sessions_by_ownership_type",
+    ),
 ]

games/views.py

@@ -110,7 +110,15 @@ def delete_session(request, session_id=None):
     return redirect("list_sessions")
 
 
-def list_sessions(request, filter="", purchase_id="", platform_id="", edition_id=""):
+def list_sessions(
+    request,
+    filter="",
+    purchase_id="",
+    platform_id="",
+    game_id="",
+    edition_id="",
+    ownership_type: str = "",
+):
     context = {}
     context["title"] = "Sessions"
 
@@ -123,6 +131,12 @@ def list_sessions(request, filter="", purchase_id="", platform_id="", edition_id
     elif filter == "edition":
         dataset = Session.objects.filter(purchase__edition=edition_id)
         context["edition"] = Edition.objects.get(id=edition_id)
+    elif filter == "game":
+        dataset = Session.objects.filter(purchase__edition__game=game_id)
+        context["game"] = Game.objects.get(id=game_id)
+    elif filter == "ownership_type":
+        dataset = Session.objects.filter(purchase__ownership_type=ownership_type)
+        context["ownership_type"] = dict(Purchase.OWNERSHIP_TYPES)[ownership_type]
     elif filter == "recent":
         dataset = Session.objects.filter(
             timestamp_start__gte=datetime.now() - timedelta(days=30)