work on episode form

aircox/locale/fr/LC_MESSAGES/django.po

@@ -1110,11 +1110,11 @@ msgstr "Année"
 
 #: aircox/templatetags/aircox_admin.py:53
 msgid "Save Settings"
-msgstr "Enregistrer la configuration"
+msgstr "Enregistrer"
 
 #: aircox/templatetags/aircox_admin.py:54
 msgid "Discard changes"
-msgstr "Annuler les changements"
+msgstr "Annuler"
 
 #: aircox/templatetags/aircox_admin.py:55
 msgid "Columns"
@@ -1122,7 +1122,7 @@ msgstr "Colonnes"
 
 #: aircox/templatetags/aircox_admin.py:56
 msgid "Add a track"
-msgstr "Ajouter un morceau"
+msgstr "Ajouter"
 
 #: aircox/templatetags/aircox_admin.py:57
 msgid "Remove"

aircox/static/aircox/css/chunk-common.css

@@ -533,6 +533,10 @@
   overflow: hidden;
 }
 
+.a-playlist-editor .dropdown {
+  display: unset !important;
+}
+
 .a-select-file > *:not(:last-child) {
   margin-bottom: 0.6rem;
 }
@@ -2782,6 +2786,9 @@ a.navbar-item:focus, a.navbar-item:focus-within, a.navbar-item:hover, a.navbar-i
   color: var(--button-fg);
   background-color: var(--button-bg);
 }
+#player .button.square, #player a.button.square, #player button.button.square, .ax .button.square, .ax a.button.square, .ax button.button.square {
+  min-width: 2.5rem;
+}
 #player .button.secondary, #player a.button.secondary, #player button.button.secondary, .ax .button.secondary, .ax a.button.secondary, .ax button.button.secondary {
   background-color: var(--button-sec-bg);
 }
@@ -2792,10 +2799,10 @@ a.navbar-item:focus, a.navbar-item:focus-within, a.navbar-item:hover, a.navbar-i
   vertical-align: middle;
 }
 #player .button .icon:not(:only-child):first-child, #player a.button .icon:not(:only-child):first-child, #player button.button .icon:not(:only-child):first-child, .ax .button .icon:not(:only-child):first-child, .ax a.button .icon:not(:only-child):first-child, .ax button.button .icon:not(:only-child):first-child {
-  margin-right: 0.6rem;
+  margin: 0 0.6rem 0 0.2rem;
 }
 #player .button .icon:not(:only-child):last-child, #player a.button .icon:not(:only-child):last-child, #player button.button .icon:not(:only-child):last-child, .ax .button .icon:not(:only-child):last-child, .ax a.button .icon:not(:only-child):last-child, .ax button.button .icon:not(:only-child):last-child {
-  margin-left: 0.6rem;
+  margin: 0 0.6rem 0 0.2rem;
 }
 #player .button:hover, #player a.button:hover, #player button.button:hover, .ax .button:hover, .ax a.button:hover, .ax button.button:hover {
   color: var(--button-hv-fg);
@@ -9550,11 +9557,17 @@ a.tag:hover {
   text-align: left;
   justify-content: left;
 }
+.align-left.x {
+  padding-left: 0px !important;
+}
 
 .align-right {
   text-align: right;
   justify-content: right;
 }
+.align-right.x {
+  padding-right: 0px !important;
+}
 
 .clear-left {
   clear: left !important;

aircox/static/aircox/css/public.css

@@ -533,6 +533,10 @@
   overflow: hidden;
 }
 
+.a-playlist-editor .dropdown {
+  display: unset !important;
+}
+
 .a-select-file > *:not(:last-child) {
   margin-bottom: 0.6rem;
 }
@@ -626,6 +630,9 @@
   color: var(--button-fg);
   background-color: var(--button-bg);
 }
+.button.square, a.button.square, button.button.square {
+  min-width: 2.5rem;
+}
 .button.secondary, a.button.secondary, button.button.secondary {
   background-color: var(--button-sec-bg);
 }
@@ -636,10 +643,10 @@
   vertical-align: middle;
 }
 .button .icon:not(:only-child):first-child, a.button .icon:not(:only-child):first-child, button.button .icon:not(:only-child):first-child {
-  margin-right: 0.6rem;
+  margin: 0 0.6rem 0 0.2rem;
 }
 .button .icon:not(:only-child):last-child, a.button .icon:not(:only-child):last-child, button.button .icon:not(:only-child):last-child {
-  margin-left: 0.6rem;
+  margin: 0 0.6rem 0 0.2rem;
 }
 .button:hover, a.button:hover, button.button:hover {
   color: var(--button-hv-fg);
@@ -719,7 +726,7 @@
 }
 
 @media screen and (min-width: 600px) {
-  textarea {
+  comment.textarea {
     height: 7rem !important;
   }
 }

aircox/templates/aircox/episode_form.html

@@ -1,37 +1,8 @@
-{% extends "aircox/basepage_detail.html" %}
+{% extends "./page_form.html" %}
 {% load static i18n humanize honeypot aircox %}
 
-{% block head_extra %}
-  <script type="text/javascript" src="{% static "aircox/js/admin.js" %}"></script>
-  <script type="text/javascript" src="{% static "aircox/js/ckeditor-init.js" %}"></script>
-  <!-- <script type="text/javascript" src="{% static "ckeditor/ckeditor-init.js" %}"></script> -->
-  <script type="text/javascript" src="{% static "ckeditor/ckeditor/ckeditor.js" %}"></script>
-{% endblock %}
-
-{% block init-scripts %}
-    aircox.init(null, {hotReload:false, initPlayer:false, initApp:true})
-    initialiseCKEditor()
-    initialiseCKEditorInInlinedForms()
-{% endblock %}
-
-{% block comments %}
-{% endblock %}
-
-{% block content-container %}
-<section class="container">
-<form method="post" enctype="multipart/form-data">{% csrf_token %}
-    <table>
-        {{ form.as_table }}
-        {% render_honeypot_field "website" %}
-    </table>
-    <br/>
-    <input type="submit" value="Update" class="button is-success">
-    <hr>
-
-    {% include "aircox/playlist_inline.html" %}
-
-    <input type="submit" value="Update" class="button is-success">
-</form>
-
-</section>
+{% block page_form %}
+{{ block.super }}
+<hr/>
+{% include "./widgets/playlist_editor.html" with formset=playlist_formset %}
 {% endblock %}

aircox/templates/aircox/page_form.html

@@ -19,6 +19,7 @@
 <a-modal ref="cover-modal" title="{% translate "Select an image" %}">
     <template #default>
         <a-select-file list-url="{% url "api:image-list" %}" upload-url="{% url "api:image-list" %}"
+            list-class="grid-4"
             prev-label="{% translate "Show previous" %}"
             next-label="{% translate "Show next" %}"
             ref="cover-select"
@@ -48,11 +49,12 @@
 
 <section class="container">
 <form method="post" enctype="multipart/form-data">
+    {% block page_form %}
     {% csrf_token %}
     {% for field in form %}
     <div class="field">
         {% if field.name == "cover" %}
-        <input type="hidden" name="{{ field.name }}" value="{{ field.pk }}" ref="cover-input"/>
+        <input type="hidden" name="{{ field.name }}" value="{{ field.value }}" ref="cover-input"/>
         {% else %}
         <label class="label">{{ field.label }}</label>
         <div class="control clear-unset">
@@ -74,7 +76,9 @@
     <p class="help">{{ field.help_text|safe }}</p>
     {% endif %}
     {% endfor %}
+    {% endblock %}
 
+    <hr/>
     <div class="has-text-right">
         <button type="submit" class="button">{% translate "Update" %}</button>
     </div>

aircox/templates/aircox/widgets/page_actions.html

@@ -4,7 +4,10 @@
 
 {% if user.is_authenticated %}
 {{ object.get_status_display }}
-({{ object.pub_date|date:"d/m/Y H:i" }})
+
+{% if object.pub_date %}
+    ({{ object.pub_date|date:"d/m/Y H:i" }})
+{% endif %}
 {% endif %}
 
 {% if user.is_authenticated and can_edit %}

aircox/templates/aircox/widgets/playlist_editor.html

@@ -1,17 +1,23 @@
-{% comment %}Inline block to edit playlists{% endcomment %}
+{% comment %}
+Context:
+- formset: playlist's track formset
+
+{% endcomment %}
 {% load aircox aircox_admin static i18n %}
 
-<div id="inline-tracks" class="box mb-5">
+{% with formset.form.fields as fields %}
+<div id="inline-tracks">
     {{ formset.non_form_errors }}
     <!-- formset.management_form -->
 
     <a-playlist-editor
             :labels="{% track_inline_labels %}"
             :init-data="{% track_inline_data formset=formset %}"
+            :default-columns="[{% for f in fields %}{% if f != "position" %}'{{ f }}',{% endif %}{% endfor %}]"
             settings-url="{% url "api:user-settings" %}"
             data-prefix="{{ formset.prefix }}-">
         <template #title>
-            <h5 class="title is-4">{% trans "Playlist" %}</h5>
+            <h3 class="title is-2">{% trans "Playlist" %}</h3>
         </template>
         <template #top="{items}">
             <input type="hidden" name="{{ formset.prefix }}-TOTAL_FORMS"
@@ -42,7 +48,7 @@
                     :value="item.data.id || item.id"/>
 
                 {% for field in fields %}
-                {% if field != 'position' %}
+                {% if field != 'position' and field.widget.is_hidden %}
                 <input type="hidden"
                     :name="'{{ formset.prefix }}-' + row + '-{{ field.name }}'"
                     v-model="item.data[attr]"/>
@@ -51,6 +57,7 @@
             </td>
         </template>
         {% for field in fields %}
+        {% if not field.widget.is_hidden and not field.is_readonly %}
         <template v-slot:row-{{ field }}="{item,cell,value,attr,emit}">
             <div class="field">
                 <a-autocomplete
@@ -65,6 +72,8 @@
                 </p>
             </div>
         </template>
+        {% endif %}
         {% endfor %}
     </a-playlist-editor>
 </div>
+{% endwith %}

aircox/views/episode.py

@@ -52,8 +52,8 @@ class EpisodeUpdateView(UserPassesTestMixin, BaseProgramMixin, PageUpdateView):
     form_class = EpisodeForm
     template_name = "aircox/episode_form.html"
 
-    def get_sidebar_queryset(self):
-        return super().get_sidebar_queryset().filter(parent=self.program)
+    playlist_fields = ("position", "artist", "title", "tags", "album", "info")
+    """Playlist editor's ordered fields."""
 
     def test_func(self):
         program = self.get_object().program
@@ -62,20 +62,17 @@ class EpisodeUpdateView(UserPassesTestMixin, BaseProgramMixin, PageUpdateView):
     def get_success_url(self):
         return reverse("episode-detail", kwargs={"slug": self.get_object().slug})
 
-    def get_object(self, queryset=None):
-        obj = Episode.objects.get(pk=self.kwargs["pk"])
-        return obj
+    def get_playlist_queryset(self, episode):
+        return Track.objects.filter(episode=episode)
 
-    def get_formset(self, *args, **kwargs):
-        fields = ("position", "artist", "title", "tags", "album", "year", "info")
-        TrackFormSet = modelformset_factory(Track, fields=fields, extra=0)
-        return TrackFormSet(*args, **kwargs)
+    def get_playlist_formset(self, episode, **kwargs):
+        kwargs["queryset"] = self.get_playlist_queryset(episode)
+        TrackFormSet = modelformset_factory(Track, fields=self.playlist_fields, extra=0)
+        return TrackFormSet(**kwargs)
 
     def get_context_data(self, **kwargs):
-        context = super().get_context_data(**kwargs)
-        context["fields"] = ("position", "artist", "title", "tags", "album", "year", "info")
-        context["formset"] = self.get_formset(queryset=Track.objects.filter(episode=self.object))
-        return context
+        kwargs["playlist_formset"] = self.get_playlist_formset(self.object)
+        return super().get_context_data(**kwargs)
 
     def post(self, request, *args, **kwargs):
         super().post(request, *args, **kwargs)