From 1c8047a00673e71c95ea519b3ce51efce9a9b9d7 Mon Sep 17 00:00:00 2001
From: Luca <Luca@hackerspace-bamberg.de>
Date: Sat, 2 Nov 2024 19:21:47 +0100
Subject: [PATCH] refactor: remove dependencies on Bootstrap and jQuery

---
 .../pretalx_musicrate/submission_filter.js    | 21 +++---
 .../templates/pretalx_musicrate/assignee.html | 16 +----
 .../pretalx_musicrate/enhanced_list.html      | 68 +++++++++++++------
 .../templates/pretalx_musicrate/settings.html | 20 +-----
 4 files changed, 61 insertions(+), 64 deletions(-)

diff --git a/pretalx_musicrate/static/pretalx_musicrate/submission_filter.js b/pretalx_musicrate/static/pretalx_musicrate/submission_filter.js
index 18b7d4d..fda7358 100644
--- a/pretalx_musicrate/static/pretalx_musicrate/submission_filter.js
+++ b/pretalx_musicrate/static/pretalx_musicrate/submission_filter.js
@@ -1,11 +1,14 @@
-document.addEventListener("DOMContentLoaded", function() {
-  const updateRequireAllVisibility = () => {
-    if (document.querySelector("#id_tags").value) {
-      document.querySelector("#requireAll").classList.remove("d-none")
-    } else {
-      document.querySelector("#requireAll").classList.add("d-none")
+onReady(() => {
+    const updateRequireAllVisibility = () => {
+        if (document.querySelector("#id_tags").value) {
+            document.querySelector("#requireAll").classList.remove("d-none")
+        } else {
+            document.querySelector("#requireAll").classList.add("d-none")
+        }
     }
-  }
-  $("#id_tags").on("change", updateRequireAllVisibility)
-  updateRequireAllVisibility()
+
+    document
+        .querySelector("#id_tags")
+        .addEventListener("change", updateRequireAllVisibility)
+    updateRequireAllVisibility()
 })
diff --git a/pretalx_musicrate/templates/pretalx_musicrate/assignee.html b/pretalx_musicrate/templates/pretalx_musicrate/assignee.html
index aa1bcec..f6de955 100644
--- a/pretalx_musicrate/templates/pretalx_musicrate/assignee.html
+++ b/pretalx_musicrate/templates/pretalx_musicrate/assignee.html
@@ -1,22 +1,8 @@
 {% extends "orga/base.html" %}
-{% load bootstrap4 %}
 {% load i18n %}
 
 {% block content %}
     <h2>{% blocktranslate with title=submission.title %}Assignee for {{ quotation_open }}{{ title }}{{ quotation_close }}{% endblocktranslate %}</h2>
-    <form method="post">
-        {% csrf_token %}
-        {% bootstrap_form_errors form %}
-        {% bootstrap_field form.user layout='event' %}
-        <div class="submit-group panel">
-            <span></span>
-            <span>
-                <button type="submit" class="btn btn-success btn-lg">
-                    <i class="fa fa-check"></i>
-                    {% translate "Save" %}
-                </button>
-            </span>
-        </div>
-    </form>
+    {% include "orga/includes/base_form.html" %}
 {% endblock %}
 
diff --git a/pretalx_musicrate/templates/pretalx_musicrate/enhanced_list.html b/pretalx_musicrate/templates/pretalx_musicrate/enhanced_list.html
index d90b5af..5e65242 100644
--- a/pretalx_musicrate/templates/pretalx_musicrate/enhanced_list.html
+++ b/pretalx_musicrate/templates/pretalx_musicrate/enhanced_list.html
@@ -1,17 +1,37 @@
 {% extends "orga/base.html" %}
-{% load bootstrap4 %}
 {% load compress %}
 {% load i18n %}
 {% load rules %}
 {% load static %}
-{% load url_replace %}
 
 {% block scripts %}
     {% compress js %}
-        <script src="{% static "orga/js/submission_filter.js" %}"></script>
+        <script defer src="{% static "orga/js/submission_filter.js" %}"></script>
     {% endcompress %}
     {% compress js %}
-        <script src="{% static "pretalx_musicrate/submission_filter.js" %}"></script>
+        <script defer src="{% static "pretalx_musicrate/submission_filter.js" %}"></script>
+    {% endcompress %}
+{% endblock %}
+
+{% block stylesheets %}
+    {% compress css %}
+        <style>
+            .search-form {
+                #requireAll .form-group {
+                    margin-bottom: 0;
+                }
+
+                #requireAll label {
+                    display: inline-block;
+                    color: #6c757d;
+                }
+            }
+
+            #requireAll .form-group-inline {
+                flex-direction: row;
+                align-items: center;
+            }
+        </style>
     {% endcompress %}
 {% endblock %}
 
@@ -29,20 +49,26 @@
 
     <div class="submit-group search-submit-group">
         <form class="search-form">
-            {% bootstrap_field filter_form.q %}
-            {% if show_submission_types and filter_form.submission_type %}{% bootstrap_field filter_form.submission_type %}{% endif %}
+            {{ filter_form.q.as_field_group }}
+            {% if show_submission_types and filter_form.submission_type %}{{ filter_form.submission_type.as_field_group }}{% endif %}
             <div class="d-flex flex-column form-group">
-                {% bootstrap_field filter_form.state layout='inline' %}
-                <div id="pending" class="d-none">{% bootstrap_field filter_form.pending_state__isnull layout='inline' %}</div>
+                {{ filter_form.state.as_field_group }}
+                <div id="pending" class="ml-1 d-none">{{ filter_form.pending_state__isnull.as_field_group }}</div>
             </div>
-            {% if filter_form.track %}{% bootstrap_field filter_form.track %}{% endif %}
+            {% if filter_form.track %}{{ filter_form.track.as_field_group }}{% endif %}
             {% if filter_form.tags %}
                 <div class="d-flex flex-column form-group">
-                    {% bootstrap_field filter_form.tags layout='inline' %}
-                    <div id="requireAll" class="d-none">{% bootstrap_field filter_form.require_all_tags layout='inline' %}</div>
+                    {{ filter_form.tags.as_field_group }}
+                    <div id="requireAll" class="ml-1 d-none">{{ filter_form.require_all_tags.as_field_group }}</div>
                 </div>
             {% endif %}
-            {% if filter_form.content_locale %}{% bootstrap_field filter_form.content_locale %}{% endif %}
+            {% if filter_form.content_locale %}{{ filter_form.content_locale.as_field_group }}{% endif %}
+            {# These fields are hidden, but included to keep question search intact #}
+            {% if request.GET.question %} <input type="hidden" name="question" value="{{ request.GET.question }}"> {% endif %}
+            {% if request.GET.answer__options %} <input type="hidden" name="answer__options" value="{{ request.GET.answer__options }}"> {% endif %}
+            {% if request.GET.answer %} <input type="hidden" name="answer" value="{{ request.GET.answer }}"> {% endif %}
+            {% if request.GET.unanswered %} <input type="hidden" name="unanswered" value="{{ request.GET.unanswered }}"> {% endif %}
+
             <button class="btn btn-success" type="submit">{% translate "Search" %}</button>
         </form>
         {% if filter_form.is_valid and filter_form.cleaned_data.question %}
@@ -51,7 +77,7 @@
                 {% blocktranslate trimmed with question=filter_form.cleaned_data.question.question %}
                     List filtered by answers to question "{{ question }}".
                 {% endblocktranslate %}
-                <a href="?{% url_replace request 'question' '' 'answer' '' 'answer__options' '' %}" class="text-muted">
+                <a href="{% querystring question="" answer="" answer__options="" %}" class="text-muted">
                     <span class="fa fa-times"></span>
                     {% translate "Remove filter" %}
                 </a>
@@ -65,13 +91,13 @@
                 <tr>
                     <th>
                         {% translate "Rating" %}
-                        <a href="?{% url_replace request 'sort' 'score__value' %}"><i class="fa fa-caret-down" title="{% translate "Sort by rating (0-10)" %}"></i></a>
-                        <a href="?{% url_replace request 'sort' '-score__value' %}"><i class="fa fa-caret-up" title="{% translate "Sort by rating (10-0)" %}"></i></a>
+                        <a href="{% querystring sort="score__value" %}"><i class="fa fa-caret-down" title="{% translate "Sort by rating (0-10)" %}"></i></a>
+                        <a href="{% querystring sort="-score__value" %}"><i class="fa fa-caret-up" title="{% translate "Sort by rating (10-0)" %}"></i></a>
                     </th>
                     <th>
                         {% translate "Title" %}
-                        <a href="?{% url_replace request 'sort' 'title' %}"><i class="fa fa-caret-down" title="{% translate "Sort by title (a-z)" %}"></i></a>
-                        <a href="?{% url_replace request 'sort' '-title' %}"><i class="fa fa-caret-up" title="{% translate "Sort by title (z-a)" %}"></i></a>
+                        <a href="?{% querystring sort="title" %}"><i class="fa fa-caret-down" title="{% translate "Sort by title (a-z)" %}"></i></a>
+                        <a href="?{% querystring sort="-title" %}"><i class="fa fa-caret-up" title="{% translate "Sort by title (z-a)" %}"></i></a>
                     </th>
                     {% if show_submission_types  %}
                         <th>
@@ -80,13 +106,13 @@
                     {% endif %}
                     <th>
                         {% translate "State" %}
-                        <a href="?{% url_replace request 'sort' 'state' %}"><i class="fa fa-caret-down" title="{% translate "Sort by state (a-z)" %}"></i></a>
-                        <a href="?{% url_replace request 'sort' '-state' %}"><i class="fa fa-caret-up" title="{% translate "Sort by state (z-a)" %}"></i></a>
+                        <a href="?{% querystring sort="state" %}"><i class="fa fa-caret-down" title="{% translate "Sort by state (a-z)" %}"></i></a>
+                        <a href="?{% querystring sort="-state" %}"><i class="fa fa-caret-up" title="{% translate "Sort by state (z-a)" %}"></i></a>
                     </th>
                     <th>
                         {% translate "Assignee" %}
-                        <a href="?{% url_replace request 'sort' 'assignee' %}"><i class="fa fa-caret-down" title="{% translate "Sort by assignee (a-z)" %}"></i></a>
-                        <a href="?{% url_replace request 'sort' '-assignee' %}"><i class="fa fa-caret-up" title="{% translate "Sort by assignee (z-a)" %}"></i></a>
+                        <a href="?{% querystring sort="assignee" %}"><i class="fa fa-caret-down" title="{% translate "Sort by assignee (a-z)" %}"></i></a>
+                        <a href="?{% querystring sort="-assignee" %}"><i class="fa fa-caret-up" title="{% translate "Sort by assignee (z-a)" %}"></i></a>
                     </th>
                     {% if can_change_submission %}
                         <th></th>
diff --git a/pretalx_musicrate/templates/pretalx_musicrate/settings.html b/pretalx_musicrate/templates/pretalx_musicrate/settings.html
index a04ef8f..2ad8452 100644
--- a/pretalx_musicrate/templates/pretalx_musicrate/settings.html
+++ b/pretalx_musicrate/templates/pretalx_musicrate/settings.html
@@ -1,29 +1,11 @@
 {% extends "orga/base.html" %}
-{% load bootstrap4 %}
 {% load compress %}
 {% load i18n %}
 {% load static %}
 
 {% block content %}
     <h2>{% translate "pretalx-musicrate settings" %}</h2>
-    <form method="post">
-        {% csrf_token %}
-        {% bootstrap_form_errors form %}
-        {% bootstrap_field form.submission_types layout='event' %}
-        {% bootstrap_field form.genre_question layout='event' %}
-        {% bootstrap_field form.origin_question layout='event' %}
-        {% bootstrap_field form.link_questions layout='event' %}
-        {% bootstrap_field form.advance_threshold layout='event' %}
-        <div class="submit-group panel">
-            <span></span>
-            <span>
-                <button type="submit" class="btn btn-success btn-lg">
-                    <i class="fa fa-check"></i>
-                    {% translate "Save" %}
-                </button>
-            </span>
-        </div>
-    </form>
+    {% include "orga/includes/base_form.html" %}
     <hr>
     <a class="btn btn-success btn-lg btn-block" href="{% url "plugins:pretalx_musicrate:export" event=request.event.slug %}">
         <i class="fa fa-download"></i>