Implement search select component
This commit is contained in:
@@ -2,6 +2,7 @@ from datetime import date, datetime
|
||||
from typing import List
|
||||
|
||||
from django.contrib import messages
|
||||
from django.db.models import Q
|
||||
from django.shortcuts import get_object_or_404
|
||||
from django.utils.timezone import now as django_timezone_now
|
||||
from ninja import Field, ModelSchema, NinjaAPI, Router, Schema, Status
|
||||
@@ -50,6 +51,27 @@ class PlayEventOut(Schema):
|
||||
created_at: datetime
|
||||
|
||||
|
||||
class GameOption(Schema): # mirrors SearchSelectOption
|
||||
value: int
|
||||
label: str
|
||||
data: dict
|
||||
|
||||
|
||||
@game_router.get("/search", response=list[GameOption])
|
||||
def search_games(request, q: str = "", limit: int = 10):
|
||||
qs = Game.objects.select_related("platform").order_by("sort_name")
|
||||
if q:
|
||||
qs = qs.filter(Q(name__icontains=q) | Q(sort_name__icontains=q))
|
||||
return [
|
||||
{
|
||||
"value": g.id,
|
||||
"label": g.search_label,
|
||||
"data": {"platform": g.platform_id or ""},
|
||||
}
|
||||
for g in qs[:limit]
|
||||
]
|
||||
|
||||
|
||||
@game_router.patch("/{game_id}/status", response={204: None})
|
||||
def partial_update_game(request, game_id: int, payload: GameStatusUpdate):
|
||||
game = get_object_or_404(Game, id=game_id)
|
||||
|
||||
+107
-26
@@ -1,8 +1,12 @@
|
||||
from django import forms
|
||||
from django.db import transaction
|
||||
from django.urls import reverse
|
||||
from django.db.models import OuterRef, Subquery
|
||||
|
||||
from common.utils import safe_getattr
|
||||
from common.components import (
|
||||
SearchSelect,
|
||||
SearchSelectOption,
|
||||
searchselect_selected,
|
||||
)
|
||||
from games.models import (
|
||||
Device,
|
||||
Game,
|
||||
@@ -22,18 +26,90 @@ autofocus_input_widget = forms.TextInput(attrs={"autofocus": "autofocus"})
|
||||
|
||||
class MultipleGameChoiceField(forms.ModelMultipleChoiceField):
|
||||
def label_from_instance(self, obj) -> str:
|
||||
return f"{obj.sort_name} ({obj.platform}, {obj.year_released})"
|
||||
return obj.search_label
|
||||
|
||||
|
||||
class SingleGameChoiceField(forms.ModelChoiceField):
|
||||
def label_from_instance(self, obj) -> str:
|
||||
return f"{obj.sort_name} ({obj.platform}, {obj.year_released})"
|
||||
return obj.search_label
|
||||
|
||||
|
||||
def _game_options(values) -> list[SearchSelectOption]:
|
||||
"""Resolve game ids (or instances) to SearchSelectOptions via one pk__in query."""
|
||||
return [
|
||||
{
|
||||
"value": g.id,
|
||||
"label": g.search_label,
|
||||
"data": {"platform": g.platform_id or ""},
|
||||
}
|
||||
for g in Game.objects.filter(pk__in=values).select_related("platform")
|
||||
]
|
||||
|
||||
|
||||
class SearchSelectWidget(forms.Widget):
|
||||
"""Thin Django adapter that renders a `SearchSelect()` component.
|
||||
|
||||
The only place that knows about Django/forms — the component itself stays
|
||||
reusable outside forms.
|
||||
"""
|
||||
|
||||
def __init__(
|
||||
self,
|
||||
*,
|
||||
search_url,
|
||||
multi_select=False,
|
||||
items_visible=5,
|
||||
items_scroll=10,
|
||||
always_visible=False,
|
||||
placeholder="Search…",
|
||||
attrs=None,
|
||||
):
|
||||
super().__init__(attrs)
|
||||
self.search_url = search_url
|
||||
self.multi_select = multi_select
|
||||
self.items_visible = items_visible
|
||||
self.items_scroll = items_scroll
|
||||
self.always_visible = always_visible
|
||||
self.placeholder = placeholder
|
||||
|
||||
@staticmethod
|
||||
def _values(value) -> list:
|
||||
if value is None:
|
||||
return []
|
||||
if isinstance(value, (list, tuple)):
|
||||
return [v for v in value if v not in (None, "")]
|
||||
return [value] if value not in (None, "") else []
|
||||
|
||||
def render(self, name, value, attrs=None, renderer=None):
|
||||
selected = searchselect_selected(self._values(value), _game_options)
|
||||
return SearchSelect(
|
||||
name=name,
|
||||
selected=selected,
|
||||
options=None,
|
||||
search_url=self.search_url,
|
||||
multi_select=self.multi_select,
|
||||
items_visible=self.items_visible,
|
||||
items_scroll=self.items_scroll,
|
||||
always_visible=self.always_visible,
|
||||
placeholder=self.placeholder,
|
||||
id=(attrs or {}).get("id", ""),
|
||||
)
|
||||
|
||||
def value_from_datadict(self, data, files, name):
|
||||
return data.get(name)
|
||||
|
||||
|
||||
class SearchSelectMultiple(SearchSelectWidget):
|
||||
def value_from_datadict(self, data, files, name):
|
||||
if hasattr(data, "getlist"):
|
||||
return data.getlist(name)
|
||||
return data.get(name)
|
||||
|
||||
|
||||
class SessionForm(forms.ModelForm):
|
||||
game = SingleGameChoiceField(
|
||||
queryset=Game.objects.order_by("sort_name"),
|
||||
widget=forms.Select(attrs={"autofocus": "autofocus"}),
|
||||
widget=SearchSelectWidget(search_url="/api/games/search"),
|
||||
)
|
||||
|
||||
duration_manual = forms.DurationField(
|
||||
@@ -83,38 +159,43 @@ class SessionForm(forms.ModelForm):
|
||||
return session
|
||||
|
||||
|
||||
class IncludePlatformSelect(forms.SelectMultiple):
|
||||
def create_option(self, name, value, *args, **kwargs):
|
||||
option = super().create_option(name, value, *args, **kwargs)
|
||||
if platform_id := safe_getattr(value, "instance.platform.id"):
|
||||
option["attrs"]["data-platform"] = platform_id
|
||||
return option
|
||||
def related_purchase_queryset():
|
||||
"""GAME purchases annotated with their first game's name.
|
||||
|
||||
Rendering the ``related_purchase`` ``<select>`` calls ``str()`` on every
|
||||
option, and ``Purchase.__str__`` falls back to ``first_game`` — one extra
|
||||
query per option (700+ on a large library). Annotating the first game's
|
||||
name via a subquery lets the choice field build labels without those
|
||||
per-row queries.
|
||||
"""
|
||||
first_game_name = Subquery(
|
||||
Game.objects.filter(purchases=OuterRef("pk")).order_by("id").values("name")[:1]
|
||||
)
|
||||
return Purchase.objects.filter(type=Purchase.GAME).annotate(
|
||||
_first_game_name=first_game_name
|
||||
)
|
||||
|
||||
|
||||
class RelatedPurchaseChoiceField(forms.ModelChoiceField):
|
||||
def label_from_instance(self, obj) -> str:
|
||||
# Mirrors Purchase.standardized_name but reads the annotated first-game
|
||||
# name instead of querying first_game per option.
|
||||
name = obj.name or getattr(obj, "_first_game_name", None)
|
||||
return name or obj.standardized_name
|
||||
|
||||
|
||||
class PurchaseForm(forms.ModelForm):
|
||||
def __init__(self, *args, **kwargs):
|
||||
super().__init__(*args, **kwargs)
|
||||
|
||||
# Automatically update related_purchase <select/>
|
||||
# to only include purchases of the selected game.
|
||||
related_purchase_by_game_url = reverse("games:related_purchase_by_game")
|
||||
self.fields["games"].widget.attrs.update(
|
||||
{
|
||||
"hx-trigger": "load, click",
|
||||
"hx-get": related_purchase_by_game_url,
|
||||
"hx-target": "#id_related_purchase",
|
||||
"hx-swap": "outerHTML",
|
||||
}
|
||||
)
|
||||
self.fields["platform"].queryset = Platform.objects.order_by("name")
|
||||
|
||||
games = MultipleGameChoiceField(
|
||||
queryset=Game.objects.order_by("sort_name"),
|
||||
widget=IncludePlatformSelect(attrs={"autoselect": "autoselect"}),
|
||||
widget=SearchSelectMultiple(search_url="/api/games/search", multi_select=True),
|
||||
)
|
||||
platform = forms.ModelChoiceField(queryset=Platform.objects.order_by("name"))
|
||||
related_purchase = forms.ModelChoiceField(
|
||||
queryset=Purchase.objects.filter(type=Purchase.GAME),
|
||||
related_purchase = RelatedPurchaseChoiceField(
|
||||
queryset=related_purchase_queryset(),
|
||||
required=False,
|
||||
)
|
||||
|
||||
|
||||
@@ -0,0 +1,18 @@
|
||||
# Generated by Django 6.0.1 on 2026-06-06 20:09
|
||||
|
||||
from django.db import migrations, models
|
||||
|
||||
|
||||
class Migration(migrations.Migration):
|
||||
|
||||
dependencies = [
|
||||
('games', '0017_add_filter_preset'),
|
||||
]
|
||||
|
||||
operations = [
|
||||
migrations.AlterField(
|
||||
model_name='session',
|
||||
name='timestamp_start',
|
||||
field=models.DateTimeField(db_index=True, verbose_name='Start'),
|
||||
),
|
||||
]
|
||||
+5
-1
@@ -65,6 +65,10 @@ class Game(models.Model):
|
||||
def __str__(self):
|
||||
return self.name
|
||||
|
||||
@property
|
||||
def search_label(self) -> str:
|
||||
return f"{self.sort_name} ({self.platform}, {self.year_released})"
|
||||
|
||||
def finished(self):
|
||||
return (
|
||||
self.status == self.Status.FINISHED
|
||||
@@ -290,7 +294,7 @@ class Session(models.Model):
|
||||
default=None,
|
||||
related_name="sessions",
|
||||
)
|
||||
timestamp_start = models.DateTimeField(verbose_name="Start")
|
||||
timestamp_start = models.DateTimeField(verbose_name="Start", db_index=True)
|
||||
timestamp_end = models.DateTimeField(blank=True, null=True, verbose_name="End")
|
||||
duration_manual = models.DurationField(
|
||||
blank=True, null=True, default=timedelta(0), verbose_name="Manual duration"
|
||||
|
||||
@@ -293,27 +293,85 @@
|
||||
--leading-5: 20px;
|
||||
--radius-base: 12px;
|
||||
--color-body: var(--color-gray-600);
|
||||
--color-body-subtle: var(--color-gray-500);
|
||||
--color-heading: var(--color-gray-900);
|
||||
--color-fg-brand-subtle: var(--color-blue-200);
|
||||
--color-fg-brand: var(--color-blue-700);
|
||||
--color-fg-brand-strong: var(--color-blue-900);
|
||||
--color-fg-success: var(--color-emerald-700);
|
||||
--color-fg-success-strong: var(--color-emerald-900);
|
||||
--color-fg-danger: var(--color-rose-700);
|
||||
--color-fg-danger-strong: var(--color-rose-900);
|
||||
--color-fg-warning-subtle: var(--color-orange-600);
|
||||
--color-fg-warning: var(--color-orange-900);
|
||||
--color-fg-yellow: var(--color-yellow-400);
|
||||
--color-fg-disabled: var(--color-gray-400);
|
||||
--color-fg-purple: var(--color-purple-600);
|
||||
--color-fg-cyan: var(--color-cyan-600);
|
||||
--color-fg-indigo: var(--color-indigo-600);
|
||||
--color-fg-pink: var(--color-pink-600);
|
||||
--color-fg-lime: var(--color-lime-600);
|
||||
--color-neutral-primary-soft: var(--color-white);
|
||||
--color-neutral-primary: var(--color-white);
|
||||
--color-neutral-primary-medium: var(--color-white);
|
||||
--color-neutral-primary-strong: var(--color-white);
|
||||
--color-neutral-secondary-soft: var(--color-gray-50);
|
||||
--color-neutral-secondary: var(--color-gray-50);
|
||||
--color-neutral-secondary-medium: var(--color-gray-50);
|
||||
--color-neutral-secondary-strong: var(--color-gray-50);
|
||||
--color-neutral-secondary-strongest: var(--color-gray-50);
|
||||
--color-neutral-tertiary-soft: var(--color-gray-100);
|
||||
--color-neutral-tertiary: var(--color-gray-100);
|
||||
--color-neutral-tertiary-medium: var(--color-gray-100);
|
||||
--color-neutral-quaternary: var(--color-gray-200);
|
||||
--color-neutral-quaternary-medium: var(--color-gray-200);
|
||||
--color-gray: var(--color-gray-300);
|
||||
--color-brand-softer: var(--color-blue-50);
|
||||
--color-brand-soft: var(--color-blue-100);
|
||||
--color-brand: var(--color-blue-700);
|
||||
--color-brand-medium: var(--color-blue-200);
|
||||
--color-brand-strong: var(--color-blue-800);
|
||||
--color-success-soft: var(--color-emerald-50);
|
||||
--color-success: var(--color-emerald-700);
|
||||
--color-success-medium: var(--color-emerald-100);
|
||||
--color-success-strong: var(--color-emerald-800);
|
||||
--color-danger-soft: var(--color-rose-50);
|
||||
--color-danger: var(--color-rose-700);
|
||||
--color-danger-medium: var(--color-rose-100);
|
||||
--color-danger-strong: var(--color-rose-800);
|
||||
--color-warning-soft: var(--color-orange-50);
|
||||
--color-warning: var(--color-orange-500);
|
||||
--color-warning-medium: var(--color-orange-100);
|
||||
--color-warning-strong: var(--color-orange-700);
|
||||
--color-dark-soft: var(--color-gray-800);
|
||||
--color-dark: var(--color-gray-800);
|
||||
--color-dark-strong: var(--color-gray-900);
|
||||
--color-disabled: var(--color-gray-100);
|
||||
--color-purple: var(--color-purple-500);
|
||||
--color-sky: var(--color-sky-500);
|
||||
--color-teal: var(--color-teal-600);
|
||||
--color-pink: var(--color-pink-600);
|
||||
--color-cyan: var(--color-cyan-500);
|
||||
--color-fuchsia: var(--color-fuchsia-600);
|
||||
--color-indigo: var(--color-indigo-600);
|
||||
--color-orange: var(--color-orange-400);
|
||||
--color-buffer: var(--color-white);
|
||||
--color-buffer-medium: var(--color-white);
|
||||
--color-buffer-strong: var(--color-white);
|
||||
--color-muted: var(--color-gray-50);
|
||||
--color-light-subtle: var(--color-gray-100);
|
||||
--color-light: var(--color-gray-100);
|
||||
--color-light-medium: var(--color-gray-100);
|
||||
--color-default-subtle: var(--color-gray-200);
|
||||
--color-default: var(--color-gray-200);
|
||||
--color-default-medium: var(--color-gray-200);
|
||||
--color-default-strong: var(--color-gray-200);
|
||||
--color-success-subtle: var(--color-emerald-200);
|
||||
--color-danger-subtle: var(--color-rose-200);
|
||||
--color-warning-subtle: var(--color-orange-200);
|
||||
--color-brand-subtle: var(--color-blue-200);
|
||||
--color-brand-light: var(--color-blue-600);
|
||||
--color-dark-subtle: var(--color-gray-800);
|
||||
--color-dark-backdrop: var(--color-gray-950);
|
||||
--color-accent: #7c3aed;
|
||||
}
|
||||
@@ -820,12 +878,18 @@
|
||||
.start-0 {
|
||||
inset-inline-start: calc(var(--spacing) * 0);
|
||||
}
|
||||
.end-1 {
|
||||
inset-inline-end: calc(var(--spacing) * 1);
|
||||
}
|
||||
.end-1\.5 {
|
||||
inset-inline-end: calc(var(--spacing) * 1.5);
|
||||
}
|
||||
.top-0 {
|
||||
top: calc(var(--spacing) * 0);
|
||||
}
|
||||
.top-1 {
|
||||
top: calc(var(--spacing) * 1);
|
||||
}
|
||||
.top-1\/2 {
|
||||
top: calc(1 / 2 * 100%);
|
||||
}
|
||||
@@ -847,6 +911,9 @@
|
||||
.bottom-0 {
|
||||
bottom: calc(var(--spacing) * 0);
|
||||
}
|
||||
.bottom-1 {
|
||||
bottom: calc(var(--spacing) * 1);
|
||||
}
|
||||
.bottom-1\.5 {
|
||||
bottom: calc(var(--spacing) * 1.5);
|
||||
}
|
||||
@@ -1276,6 +1343,9 @@
|
||||
margin-left: -10px !important;
|
||||
}
|
||||
}
|
||||
.ml-1 {
|
||||
margin-left: calc(var(--spacing) * 1);
|
||||
}
|
||||
.ml-4 {
|
||||
margin-left: calc(var(--spacing) * 4);
|
||||
}
|
||||
@@ -1470,9 +1540,15 @@
|
||||
.h-full {
|
||||
height: 100%;
|
||||
}
|
||||
.max-h-40 {
|
||||
max-height: calc(var(--spacing) * 40);
|
||||
}
|
||||
.max-h-full {
|
||||
max-height: 100%;
|
||||
}
|
||||
.min-h-\[28px\] {
|
||||
min-height: 28px;
|
||||
}
|
||||
.min-h-screen {
|
||||
min-height: 100vh;
|
||||
}
|
||||
@@ -1541,9 +1617,15 @@
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.w-1 {
|
||||
width: calc(var(--spacing) * 1);
|
||||
}
|
||||
.w-1\/2 {
|
||||
width: calc(1 / 2 * 100%);
|
||||
}
|
||||
.w-2 {
|
||||
width: calc(var(--spacing) * 2);
|
||||
}
|
||||
.w-2\.5 {
|
||||
width: calc(var(--spacing) * 2.5);
|
||||
}
|
||||
@@ -1652,6 +1734,9 @@
|
||||
.shrink-0 {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.border-collapse {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
.-translate-x-full {
|
||||
--tw-translate-x: -100%;
|
||||
translate: var(--tw-translate-x) var(--tw-translate-y);
|
||||
@@ -1668,6 +1753,10 @@
|
||||
--tw-translate-x: 100%;
|
||||
translate: var(--tw-translate-x) var(--tw-translate-y);
|
||||
}
|
||||
.-translate-y-1 {
|
||||
--tw-translate-y: calc(var(--spacing) * -1);
|
||||
translate: var(--tw-translate-x) var(--tw-translate-y);
|
||||
}
|
||||
.-translate-y-1\/2 {
|
||||
--tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
|
||||
translate: var(--tw-translate-x) var(--tw-translate-y);
|
||||
@@ -1710,6 +1799,9 @@
|
||||
.list-disc {
|
||||
list-style-type: disc;
|
||||
}
|
||||
.appearance-none {
|
||||
appearance: none;
|
||||
}
|
||||
.grid-cols-1 {
|
||||
grid-template-columns: repeat(1, minmax(0, 1fr));
|
||||
}
|
||||
@@ -2053,6 +2145,9 @@
|
||||
.bg-amber-50 {
|
||||
background-color: var(--color-amber-50);
|
||||
}
|
||||
.bg-black {
|
||||
background-color: var(--color-black);
|
||||
}
|
||||
.bg-black\/70 {
|
||||
background-color: color-mix(in srgb, #000 70%, transparent);
|
||||
@supports (color: color-mix(in lab, red, red)) {
|
||||
@@ -2071,6 +2166,15 @@
|
||||
.bg-brand {
|
||||
background-color: var(--color-brand);
|
||||
}
|
||||
.bg-brand\/15 {
|
||||
background-color: color-mix(in srgb, oklch(48.8% 0.243 264.376) 15%, transparent);
|
||||
@supports (color: color-mix(in lab, red, red)) {
|
||||
background-color: color-mix(in oklab, var(--color-brand) 15%, transparent);
|
||||
}
|
||||
}
|
||||
.bg-dark-backdrop {
|
||||
background-color: var(--color-dark-backdrop);
|
||||
}
|
||||
.bg-dark-backdrop\/70 {
|
||||
background-color: color-mix(in srgb, oklch(13% 0.028 261.692) 70%, transparent);
|
||||
@supports (color: color-mix(in lab, red, red)) {
|
||||
@@ -2089,12 +2193,18 @@
|
||||
.bg-gray-500 {
|
||||
background-color: var(--color-gray-500);
|
||||
}
|
||||
.bg-gray-800 {
|
||||
background-color: var(--color-gray-800);
|
||||
}
|
||||
.bg-gray-800\/20 {
|
||||
background-color: color-mix(in srgb, oklch(27.8% 0.033 256.848) 20%, transparent);
|
||||
@supports (color: color-mix(in lab, red, red)) {
|
||||
background-color: color-mix(in oklab, var(--color-gray-800) 20%, transparent);
|
||||
}
|
||||
}
|
||||
.bg-gray-900 {
|
||||
background-color: var(--color-gray-900);
|
||||
}
|
||||
.bg-gray-900\/50 {
|
||||
background-color: color-mix(in srgb, oklch(21% 0.034 264.665) 50%, transparent);
|
||||
@supports (color: color-mix(in lab, red, red)) {
|
||||
@@ -2209,6 +2319,18 @@
|
||||
fill: white !important;
|
||||
}
|
||||
}
|
||||
.apexcharts-gridline {
|
||||
stroke: var(--color-default) !important;
|
||||
.dark & {
|
||||
stroke: var(--color-default) !important;
|
||||
}
|
||||
}
|
||||
.apexcharts-xcrosshairs {
|
||||
stroke: var(--color-default) !important;
|
||||
.dark & {
|
||||
stroke: var(--color-default) !important;
|
||||
}
|
||||
}
|
||||
.apexcharts-ycrosshairs {
|
||||
stroke: var(--color-default) !important;
|
||||
.dark & {
|
||||
@@ -2267,6 +2389,9 @@
|
||||
.px-6 {
|
||||
padding-inline: calc(var(--spacing) * 6);
|
||||
}
|
||||
.py-0 {
|
||||
padding-block: calc(var(--spacing) * 0);
|
||||
}
|
||||
.py-0\.5 {
|
||||
padding-block: calc(var(--spacing) * 0.5);
|
||||
}
|
||||
@@ -2328,6 +2453,9 @@
|
||||
color: heading !important;
|
||||
}
|
||||
}
|
||||
.pb-1 {
|
||||
padding-bottom: calc(var(--spacing) * 1);
|
||||
}
|
||||
.pb-16 {
|
||||
padding-bottom: calc(var(--spacing) * 16);
|
||||
}
|
||||
@@ -2494,6 +2622,9 @@
|
||||
.text-balance {
|
||||
text-wrap: balance;
|
||||
}
|
||||
.text-wrap {
|
||||
text-wrap: wrap;
|
||||
}
|
||||
.whitespace-nowrap {
|
||||
white-space: nowrap;
|
||||
}
|
||||
@@ -2620,6 +2751,9 @@
|
||||
.italic {
|
||||
font-style: italic;
|
||||
}
|
||||
.no-underline {
|
||||
text-decoration-line: none;
|
||||
}
|
||||
.no-underline\! {
|
||||
text-decoration-line: none !important;
|
||||
}
|
||||
@@ -2683,6 +2817,10 @@
|
||||
-webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
|
||||
backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
|
||||
}
|
||||
.backdrop-filter {
|
||||
-webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
|
||||
backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
|
||||
}
|
||||
.transition {
|
||||
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
|
||||
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
|
||||
@@ -2847,6 +2985,11 @@
|
||||
background-color: var(--color-gray-50);
|
||||
}
|
||||
}
|
||||
.empty\:hidden {
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.hover\:scale-110 {
|
||||
&:hover {
|
||||
@media (hover: hover) {
|
||||
@@ -2892,6 +3035,16 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.hover\:bg-brand\/15 {
|
||||
&:hover {
|
||||
@media (hover: hover) {
|
||||
background-color: color-mix(in srgb, oklch(48.8% 0.243 264.376) 15%, transparent);
|
||||
@supports (color: color-mix(in lab, red, red)) {
|
||||
background-color: color-mix(in oklab, var(--color-brand) 15%, transparent);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.hover\:bg-gray-50 {
|
||||
&:hover {
|
||||
@media (hover: hover) {
|
||||
@@ -3068,6 +3221,12 @@
|
||||
color: var(--color-blue-700);
|
||||
}
|
||||
}
|
||||
.focus\:ring-0 {
|
||||
&:focus {
|
||||
--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
|
||||
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
||||
}
|
||||
}
|
||||
.focus\:ring-2 {
|
||||
&:focus {
|
||||
--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
|
||||
@@ -3883,6 +4042,51 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.\[\&\:\:-webkit-slider-thumb\]\:relative {
|
||||
&::-webkit-slider-thumb {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
.\[\&\:\:-webkit-slider-thumb\]\:z-10 {
|
||||
&::-webkit-slider-thumb {
|
||||
z-index: 10;
|
||||
}
|
||||
}
|
||||
.\[\&\:\:-webkit-slider-thumb\]\:z-20 {
|
||||
&::-webkit-slider-thumb {
|
||||
z-index: 20;
|
||||
}
|
||||
}
|
||||
.\[\&\:\:-webkit-slider-thumb\]\:h-4 {
|
||||
&::-webkit-slider-thumb {
|
||||
height: calc(var(--spacing) * 4);
|
||||
}
|
||||
}
|
||||
.\[\&\:\:-webkit-slider-thumb\]\:w-4 {
|
||||
&::-webkit-slider-thumb {
|
||||
width: calc(var(--spacing) * 4);
|
||||
}
|
||||
}
|
||||
.\[\&\:\:-webkit-slider-thumb\]\:cursor-pointer {
|
||||
&::-webkit-slider-thumb {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.\[\&\:\:-webkit-slider-thumb\]\:appearance-none {
|
||||
&::-webkit-slider-thumb {
|
||||
appearance: none;
|
||||
}
|
||||
}
|
||||
.\[\&\:\:-webkit-slider-thumb\]\:rounded-full {
|
||||
&::-webkit-slider-thumb {
|
||||
border-radius: calc(infinity * 1px);
|
||||
}
|
||||
}
|
||||
.\[\&\:\:-webkit-slider-thumb\]\:bg-brand {
|
||||
&::-webkit-slider-thumb {
|
||||
background-color: var(--color-brand);
|
||||
}
|
||||
}
|
||||
.\[\&\:first-of-type_button\]\:rounded-s-lg {
|
||||
&:first-of-type button {
|
||||
border-start-start-radius: var(--radius-lg);
|
||||
|
||||
@@ -1,20 +1,35 @@
|
||||
import {
|
||||
syncSelectInputUntilChanged,
|
||||
getEl,
|
||||
disableElementsWhenTrue,
|
||||
disableElementsWhenValueNotEqual,
|
||||
} from "./utils.js";
|
||||
import { getEl, disableElementsWhenTrue } from "./utils.js";
|
||||
|
||||
let syncData = [
|
||||
{
|
||||
source: "#id_games",
|
||||
source_value: "dataset.platform",
|
||||
target: "#id_platform",
|
||||
target_value: "value",
|
||||
},
|
||||
];
|
||||
const RELATED_PURCHASE_URL = "/tracker/purchase/related-purchase-by-game";
|
||||
|
||||
syncSelectInputUntilChanged(syncData, "form");
|
||||
// The games field is now a SearchSelect widget (a <div>, not a <select>), so we
|
||||
// react to its custom "search-select:change" event instead of syncing a select.
|
||||
document.addEventListener("search-select:change", (event) => {
|
||||
if (event.detail.name !== "games") return;
|
||||
|
||||
// (a) Auto-fill platform from the clicked option's data-platform.
|
||||
const last = event.detail.last;
|
||||
const platformId = last && last.data ? last.data.platform : "";
|
||||
if (platformId) {
|
||||
const platformEl = getEl("#id_platform");
|
||||
if (platformEl) platformEl.value = platformId;
|
||||
}
|
||||
|
||||
// (b) Refresh #id_related_purchase for the currently selected games.
|
||||
const query = event.detail.values
|
||||
.map((value) => "games=" + encodeURIComponent(value))
|
||||
.join("&");
|
||||
fetch(RELATED_PURCHASE_URL + "?" + query, { credentials: "same-origin" })
|
||||
.then((response) => {
|
||||
if (response.status === 204) return null;
|
||||
return response.text();
|
||||
})
|
||||
.then((html) => {
|
||||
if (html === null) return;
|
||||
const target = getEl("#id_related_purchase");
|
||||
if (target) target.outerHTML = html;
|
||||
});
|
||||
});
|
||||
|
||||
function setupElementHandlers() {
|
||||
disableElementsWhenTrue("#id_type", "game", [
|
||||
@@ -27,5 +42,4 @@ document.addEventListener("DOMContentLoaded", setupElementHandlers);
|
||||
document.addEventListener("htmx:afterSwap", setupElementHandlers);
|
||||
getEl("#id_type").addEventListener("change", () => {
|
||||
setupElementHandlers();
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
@@ -0,0 +1,277 @@
|
||||
/**
|
||||
* SearchSelect widget — a search box paired with a dropdown of options.
|
||||
* Single/multi select; chosen items render as removable pills, each backed by a
|
||||
* hidden <input> so existing Django form validation keeps working.
|
||||
*
|
||||
* Mirrors selectable_filter.js: initAll() on DOMContentLoaded + htmx:afterSwap,
|
||||
* each widget guarded with el._ssInit.
|
||||
*
|
||||
* The pill / option class strings below are kept byte-identical to the Python
|
||||
* Pill / SearchSelect components so Tailwind generates the classes and
|
||||
* server-rendered and JS-created pills are indistinguishable.
|
||||
*/
|
||||
(function () {
|
||||
"use strict";
|
||||
|
||||
var PILL_CLASS =
|
||||
"inline-flex items-center gap-1 px-2 py-0.5 text-sm rounded " +
|
||||
"bg-brand/15 text-heading";
|
||||
var PILL_REMOVE_CLASS =
|
||||
"ml-1 text-body hover:text-heading font-bold cursor-pointer";
|
||||
var OPTION_ROW_CLASS =
|
||||
"px-3 py-2 text-sm text-heading cursor-pointer hover:bg-brand/15";
|
||||
|
||||
var DEBOUNCE_MS = 500;
|
||||
|
||||
function initAll() {
|
||||
document.querySelectorAll("[data-search-select]").forEach(function (el) {
|
||||
if (el._ssInit) return;
|
||||
el._ssInit = true;
|
||||
initWidget(el);
|
||||
});
|
||||
}
|
||||
|
||||
function initWidget(container) {
|
||||
var search = container.querySelector("[data-ss-search]");
|
||||
var options = container.querySelector("[data-ss-options]");
|
||||
var pills = container.querySelector("[data-ss-pills]");
|
||||
if (!search || !options || !pills) return;
|
||||
|
||||
var name = container.getAttribute("data-name");
|
||||
var searchUrl = container.getAttribute("data-search-url");
|
||||
var multi = container.getAttribute("data-multi") === "true";
|
||||
var alwaysVisible = container.getAttribute("data-always-visible") === "true";
|
||||
var itemsScroll = parseInt(container.getAttribute("data-items-scroll"), 10) || 10;
|
||||
var syncUrl = container.getAttribute("data-sync-url") === "true";
|
||||
|
||||
var noResults = options.querySelector("[data-ss-no-results]");
|
||||
var debounceTimer = null;
|
||||
|
||||
function showPanel() {
|
||||
options.classList.remove("hidden");
|
||||
}
|
||||
function hidePanel() {
|
||||
if (!alwaysVisible) options.classList.add("hidden");
|
||||
}
|
||||
|
||||
function setNoResults(visible) {
|
||||
if (noResults) noResults.classList.toggle("hidden", !visible);
|
||||
}
|
||||
|
||||
// ── Render server-fetched rows into the panel ──
|
||||
function renderRows(items) {
|
||||
options.querySelectorAll("[data-ss-option]").forEach(function (r) {
|
||||
r.remove();
|
||||
});
|
||||
items.slice(0, itemsScroll).forEach(function (item) {
|
||||
options.insertBefore(buildRow(item), noResults || null);
|
||||
});
|
||||
setNoResults(items.length === 0);
|
||||
showPanel();
|
||||
}
|
||||
|
||||
function buildRow(option) {
|
||||
var row = document.createElement("div");
|
||||
row.setAttribute("data-ss-option", "");
|
||||
row.setAttribute("data-value", option.value);
|
||||
row.setAttribute("data-label", option.label);
|
||||
row.className = OPTION_ROW_CLASS;
|
||||
var data = option.data || {};
|
||||
Object.keys(data).forEach(function (key) {
|
||||
row.setAttribute("data-" + key, data[key]);
|
||||
});
|
||||
row.textContent = option.label;
|
||||
row._ssOption = option;
|
||||
return row;
|
||||
}
|
||||
|
||||
// ── Client-side filter of pre-rendered rows ──
|
||||
function filterRows(q) {
|
||||
var lower = q.toLowerCase();
|
||||
var anyVisible = false;
|
||||
options.querySelectorAll("[data-ss-option]").forEach(function (item) {
|
||||
var label = (item.getAttribute("data-label") || "").toLowerCase();
|
||||
var match = label.indexOf(lower) !== -1;
|
||||
item.style.display = match ? "" : "none";
|
||||
if (match) anyVisible = true;
|
||||
});
|
||||
setNoResults(!anyVisible);
|
||||
showPanel();
|
||||
}
|
||||
|
||||
function runSearch() {
|
||||
var q = search.value.trim();
|
||||
if (searchUrl && q) {
|
||||
clearTimeout(debounceTimer);
|
||||
debounceTimer = setTimeout(function () {
|
||||
fetch(searchUrl + "?q=" + encodeURIComponent(q), {
|
||||
credentials: "same-origin",
|
||||
})
|
||||
.then(function (r) {
|
||||
return r.json();
|
||||
})
|
||||
.then(renderRows)
|
||||
.catch(function () {
|
||||
setNoResults(true);
|
||||
});
|
||||
}, DEBOUNCE_MS);
|
||||
} else {
|
||||
filterRows(q);
|
||||
}
|
||||
}
|
||||
|
||||
search.addEventListener("focus", runSearch);
|
||||
search.addEventListener("input", runSearch);
|
||||
|
||||
// ── Option click → select ──
|
||||
options.addEventListener("click", function (e) {
|
||||
var row = e.target.closest("[data-ss-option]");
|
||||
if (!row) return;
|
||||
var option = optionFromRow(row);
|
||||
selectOption(option);
|
||||
});
|
||||
|
||||
function optionFromRow(row) {
|
||||
if (row._ssOption) return row._ssOption;
|
||||
var data = {};
|
||||
Object.keys(row.dataset).forEach(function (key) {
|
||||
if (key !== "value" && key !== "label" && key !== "ssOption") {
|
||||
data[key] = row.dataset[key];
|
||||
}
|
||||
});
|
||||
return {
|
||||
value: row.getAttribute("data-value"),
|
||||
label: row.getAttribute("data-label"),
|
||||
data: data,
|
||||
};
|
||||
}
|
||||
|
||||
function selectOption(option) {
|
||||
if (multi) {
|
||||
if (!pills.querySelector('input[value="' + cssEscape(option.value) + '"]')) {
|
||||
addPill(option);
|
||||
}
|
||||
} else {
|
||||
pills.innerHTML = "";
|
||||
addPill(option);
|
||||
search.value = option.label;
|
||||
hidePanel();
|
||||
}
|
||||
emitChange(option);
|
||||
}
|
||||
|
||||
function addPill(option) {
|
||||
pills.appendChild(buildPill(option));
|
||||
pills.appendChild(buildHidden(option.value));
|
||||
}
|
||||
|
||||
function buildPill(option) {
|
||||
var pill = document.createElement("span");
|
||||
pill.className = PILL_CLASS;
|
||||
pill.setAttribute("data-pill", "");
|
||||
pill.setAttribute("data-value", option.value);
|
||||
var data = option.data || {};
|
||||
Object.keys(data).forEach(function (key) {
|
||||
pill.setAttribute("data-" + key, data[key]);
|
||||
});
|
||||
pill.appendChild(document.createTextNode(option.label));
|
||||
var remove = document.createElement("button");
|
||||
remove.type = "button";
|
||||
remove.setAttribute("data-pill-remove", "");
|
||||
remove.className = PILL_REMOVE_CLASS;
|
||||
remove.setAttribute("aria-label", "Remove");
|
||||
remove.textContent = "×";
|
||||
pill.appendChild(remove);
|
||||
return pill;
|
||||
}
|
||||
|
||||
function buildHidden(value) {
|
||||
var input = document.createElement("input");
|
||||
input.type = "hidden";
|
||||
input.name = name;
|
||||
input.value = value;
|
||||
return input;
|
||||
}
|
||||
|
||||
// ── Pill × → remove ──
|
||||
pills.addEventListener("click", function (e) {
|
||||
var removeBtn = e.target.closest("[data-pill-remove]");
|
||||
if (!removeBtn) return;
|
||||
var pill = removeBtn.closest("[data-pill]");
|
||||
if (!pill) return;
|
||||
var value = pill.getAttribute("data-value");
|
||||
pill.remove();
|
||||
var hidden = pills.querySelector('input[value="' + cssEscape(value) + '"]');
|
||||
if (hidden) hidden.remove();
|
||||
emitChange(null);
|
||||
});
|
||||
|
||||
function currentValues() {
|
||||
return Array.prototype.map.call(
|
||||
pills.querySelectorAll('input[type="hidden"]'),
|
||||
function (input) {
|
||||
return input.value;
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
function emitChange(last) {
|
||||
var values = currentValues();
|
||||
if (syncUrl) syncToUrl(values);
|
||||
container.dispatchEvent(
|
||||
new CustomEvent("search-select:change", {
|
||||
bubbles: true,
|
||||
detail: { name: name, values: values, last: last },
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
function syncToUrl(values) {
|
||||
var params = new URLSearchParams(window.location.search);
|
||||
params.delete(name);
|
||||
values.forEach(function (v) {
|
||||
params.append(name, v);
|
||||
});
|
||||
var qs = params.toString();
|
||||
history.replaceState(null, "", qs ? "?" + qs : window.location.pathname);
|
||||
}
|
||||
|
||||
// On init, restore from URL params if the server supplied no selected pills.
|
||||
if (syncUrl && !pills.querySelector("[data-pill]")) {
|
||||
var initial = new URLSearchParams(window.location.search).getAll(name);
|
||||
initial.forEach(function (v) {
|
||||
addPill({ value: v, label: v, data: {} });
|
||||
});
|
||||
}
|
||||
|
||||
// ── Close panel on outside click ──
|
||||
document.addEventListener("click", function (e) {
|
||||
if (!container.contains(e.target)) hidePanel();
|
||||
});
|
||||
}
|
||||
|
||||
/** Minimal escape for use inside an attribute-value selector. */
|
||||
function cssEscape(value) {
|
||||
return String(value).replace(/["\\]/g, "\\$&");
|
||||
}
|
||||
|
||||
// Forward-looking hook (parallels readSelectableFilters): write each widget's
|
||||
// current values to a data-values JSON attribute.
|
||||
window.readSearchSelect = function (form) {
|
||||
form.querySelectorAll("[data-search-select]").forEach(function (container) {
|
||||
var pills = container.querySelector("[data-ss-pills]");
|
||||
var values = pills
|
||||
? Array.prototype.map.call(
|
||||
pills.querySelectorAll('input[type="hidden"]'),
|
||||
function (input) {
|
||||
return input.value;
|
||||
}
|
||||
)
|
||||
: [];
|
||||
container.setAttribute("data-values", JSON.stringify(values));
|
||||
});
|
||||
};
|
||||
|
||||
document.addEventListener("DOMContentLoaded", initAll);
|
||||
document.addEventListener("htmx:afterSwap", initAll);
|
||||
})();
|
||||
@@ -10,6 +10,7 @@ from django.db.models import (
|
||||
from django.http import HttpRequest, HttpResponse, HttpResponseRedirect
|
||||
from django.shortcuts import redirect
|
||||
from django.urls import reverse
|
||||
from django.utils.timezone import localtime
|
||||
from django.utils.timezone import now as timezone_now
|
||||
|
||||
from common.layout import render_page
|
||||
@@ -21,11 +22,14 @@ from games.views.stats_data import compute_stats
|
||||
|
||||
def model_counts(request: HttpRequest) -> dict[str, bool]:
|
||||
now = timezone_now()
|
||||
this_day, this_month, this_year = now.day, now.month, now.year
|
||||
# Use a contiguous [midnight, next midnight) range in the active timezone
|
||||
# instead of day/month/year extracts: a range filter can use an index on
|
||||
# timestamp_start, whereas the extracts force a per-row datetime function.
|
||||
start_of_today = localtime(now).replace(hour=0, minute=0, second=0, microsecond=0)
|
||||
start_of_tomorrow = start_of_today + timedelta(days=1)
|
||||
today_played = Session.objects.filter(
|
||||
timestamp_start__day=this_day,
|
||||
timestamp_start__month=this_month,
|
||||
timestamp_start__year=this_year,
|
||||
timestamp_start__gte=start_of_today,
|
||||
timestamp_start__lt=start_of_tomorrow,
|
||||
).aggregate(time=Sum(F("duration_total")))["time"]
|
||||
last_7_played = Session.objects.filter(
|
||||
timestamp_start__gte=(now - timedelta(days=7))
|
||||
|
||||
@@ -203,7 +203,9 @@ def add_purchase(request: HttpRequest, game_id: int = 0) -> HttpResponse:
|
||||
request,
|
||||
AddForm(form, request=request, additional_row=_purchase_additional_row()),
|
||||
title="Add New Purchase",
|
||||
scripts=ModuleScript("add_purchase.js"),
|
||||
scripts=mark_safe(
|
||||
ModuleScript("search_select.js") + ModuleScript("add_purchase.js")
|
||||
),
|
||||
)
|
||||
|
||||
|
||||
@@ -219,7 +221,9 @@ def edit_purchase(request: HttpRequest, purchase_id: int) -> HttpResponse:
|
||||
request,
|
||||
AddForm(form, request=request, additional_row=_purchase_additional_row()),
|
||||
title="Edit Purchase",
|
||||
scripts=ModuleScript("add_purchase.js"),
|
||||
scripts=mark_safe(
|
||||
ModuleScript("search_select.js") + ModuleScript("add_purchase.js")
|
||||
),
|
||||
)
|
||||
|
||||
|
||||
@@ -401,8 +405,10 @@ def finish_purchase(request: HttpRequest, purchase_id: int) -> HttpResponse:
|
||||
def related_purchase_by_game(request: HttpRequest) -> HttpResponse:
|
||||
games: list[str] = request.GET.getlist("games")
|
||||
if games:
|
||||
from games.forms import related_purchase_queryset
|
||||
|
||||
form = PurchaseForm()
|
||||
qs = Purchase.objects.filter(games__in=games, type=Purchase.GAME).order_by(
|
||||
qs = related_purchase_queryset().filter(games__in=games).order_by(
|
||||
"games__sort_name"
|
||||
)
|
||||
|
||||
|
||||
@@ -270,7 +270,9 @@ def add_session(request: HttpRequest, game_id: int = 0) -> HttpResponse:
|
||||
request,
|
||||
AddForm(form, request=request, fields=_session_fields(form), submit_class=""),
|
||||
title="Add New Session",
|
||||
scripts=ModuleScript("add_session.js"),
|
||||
scripts=mark_safe(
|
||||
ModuleScript("search_select.js") + ModuleScript("add_session.js")
|
||||
),
|
||||
)
|
||||
|
||||
|
||||
@@ -285,7 +287,9 @@ def edit_session(request: HttpRequest, session_id: int) -> HttpResponse:
|
||||
request,
|
||||
AddForm(form, request=request, fields=_session_fields(form), submit_class=""),
|
||||
title="Edit Session",
|
||||
scripts=ModuleScript("add_session.js"),
|
||||
scripts=mark_safe(
|
||||
ModuleScript("search_select.js") + ModuleScript("add_session.js")
|
||||
),
|
||||
)
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user