Create game status selector template

games/templates/partials/gamestatus_selector.html

@@ -0,0 +1,47 @@
+<div class="flex gap-2 items-center"
+     x-data="{
+         status: '{{ game.status }}',
+         status_display: '{{ game.get_status_display }}',
+         open: false,
+         saving: false,
+         setStatus(newStatus, newStatusDisplay) {
+             this.status = newStatus;
+             this.status_display = newStatusDisplay;
+             this.saving = true;
+             fetch(`/api/games/{{ game.id }}/status`, {
+                 method: 'PATCH',
+                 headers: {
+                     'Content-Type': 'application/json',
+                     'X-CSRFToken': '{{ csrf_token }}'
+                 },
+                 body: JSON.stringify({ status: newStatus })
+             }).then(() => {
+                 document.body.dispatchEvent(new CustomEvent('status-changed'));
+             })
+             .finally(() => this.saving = false);
+         }
+     }"
+>
+    <div class="inline-flex rounded-md shadow-xs" role="group" @click.outside="open = false">
+        <button type="button" @click="open = !open" class="relative px-4 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-800 dark:border-gray-700 dark:text-white dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-blue-500 dark:focus:text-white align-middle">
+            <span class="flex flex-row gap-4 justify-between items-center">
+                {% for status_value, status_label in game_statuses %}
+                    <template x-if="status == '{{ status_value }}'">
+                        <c-gamestatus display="flex" status="{{ status_value }}" class="text-slate-300">{{ status_label }}</c-gamestatus>
+                    </template>
+                {% endfor %}
+                <svg class="text-white w-3" viewBox="5 8 14 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M6 9L12 15L18 9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                </svg>
+            </span>
+            <div class="absolute top-[105%] left-0 w-full whitespace-nowrap z-10 text-sm font-medium bg-gray-800/20 backdrop-blur-lg rounded-md rounded-t-none border border-gray-200 dark:border-gray-700" x-show="open" style="display: none;">
+                <ul class="[&_li:first-of-type_a]:rounded-none [&_li:last-of-type_a]:rounded-t-none">
+                    {% for status_value, status_label in game_statuses %}
+                        <li><a href="#" @click.prevent.stop="setStatus('{{ status_value }}', '{{ status_label }}'); open = false;" class="block px-4 py-2 dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-blue-500 dark:focus:text-white rounded !no-underline !border-0" :class="{ 'font-bold': status === '{{ status_value }}' }"><c-gamestatus display="flex" status="{{ status_value }}" class="text-slate-300">{{ status_label }}</c-gamestatus></a></li>
+                    {% endfor %}
+                </ul>
+            </div>
+        </button>
+    </div>
+    <div x-show="saving" style="display: none;">Saving...</div>
+</div>

games/views/game.py

@@ -112,8 +112,12 @@ def list_games(request: HttpRequest, search_string: str = "") -> HttpResponse:
                     ),
                     game.year_released,
                     render_to_string(
-                        "cotton/gamestatus.html",
-                        {"status": game.status, "slot": game.get_status_display()},
+                        "partials/gamestatus_selector.html",
+                        {
+                            "game": game,
+                            "game_statuses": Game.Status.choices,
+                        },
+                        request=request,
                     ),
                     game.wikidata,
                     local_strftime(game.created_at, dateformat),