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 %}
+{% block page_form %}
-  <script type="text/javascript" src="{% static "aircox/js/admin.js" %}"></script>
+{{ block.super }}
-  <script type="text/javascript" src="{% static "aircox/js/ckeditor-init.js" %}"></script>
+<hr/>
-  <!-- <script type="text/javascript" src="{% static "ckeditor/ckeditor-init.js" %}"></script> -->
+{% include "./widgets/playlist_editor.html" with formset=playlist_formset %}
-  <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>
 {% 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):
+    playlist_fields = ("position", "artist", "title", "tags", "album", "info")
-        return super().get_sidebar_queryset().filter(parent=self.program)
+    """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):
+    def get_playlist_queryset(self, episode):
-        obj = Episode.objects.get(pk=self.kwargs["pk"])
+        return Track.objects.filter(episode=episode)
-        return obj
 
-    def get_formset(self, *args, **kwargs):
+    def get_playlist_formset(self, episode, **kwargs):
-        fields = ("position", "artist", "title", "tags", "album", "year", "info")
+        kwargs["queryset"] = self.get_playlist_queryset(episode)
-        TrackFormSet = modelformset_factory(Track, fields=fields, extra=0)
+        TrackFormSet = modelformset_factory(Track, fields=self.playlist_fields, extra=0)
-        return TrackFormSet(*args, **kwargs)
+        return TrackFormSet(**kwargs)
 
     def get_context_data(self, **kwargs):
-        context = super().get_context_data(**kwargs)
+        kwargs["playlist_formset"] = self.get_playlist_formset(self.object)
-        context["fields"] = ("position", "artist", "title", "tags", "album", "year", "info")
+        return super().get_context_data(**kwargs)
-        context["formset"] = self.get_formset(queryset=Track.objects.filter(episode=self.object))
-        return context
 
     def post(self, request, *args, **kwargs):
         super().post(request, *args, **kwargs)

assets/src/components/AActionButton.vue

@@ -3,7 +3,7 @@
         <span v-if="promise && runIcon">
             <i :class="runIcon"></i>
         </span>
-        <span v-else-if="icon" class="icon">
+        <span v-else-if="icon" class="icon is-small">
             <i :class="icon"></i>
         </span>
         <span v-if="$slots.default"><slot name="default"/></span>

assets/src/components/APlaylistEditor.vue

@@ -1,11 +1,11 @@
 <template>
-    <div class="playlist-editor">
+    <div class="a-playlist-editor">
-        <div class="columns">
+        <div class="flex-row">
-            <div class="column">
+            <div class="flex-grow-1">
                 <slot name="title" />
             </div>
-            <div class="column has-text-right">
+            <div class="flex-row align-right">
-                <div class="float-right field has-addons">
+                <div class="field has-addons">
                     <p class="control">
                         <a :class="['button','p-2', page == Page.Text ? 'is-primary' : 'is-light']"
                                 @click="page = Page.Text">
@@ -28,13 +28,13 @@
             </div>
         </div>
         <slot name="top" :set="set" :columns="columns" :items="items"/>
-        <section class="page" v-show="page == Page.Text">
+        <section v-show="page == Page.Text" class="panel">
             <textarea ref="textarea" class="is-fullwidth is-size-6" rows="20"
                 @change="updateList"
             />
 
         </section>
-        <section class="page" v-show="page == Page.List">
+        <section v-show="page == Page.List" class="panel">
             <a-rows :set="set" :columns="columns" :labels="labels"
                     :allow-create="true"
                     :orderable="true" @move="listItemMove" @colmove="columnMove"
@@ -46,9 +46,9 @@
 
                 <template v-slot:row-tail="data">
                     <slot v-if="$slots['row-tail']" :name="row-tail" v-bind="data"/>
-                    <td>
+                    <td class="align-right pr-0">
-                        <a class="button is-danger is-outlined p-3 is-size-6"
+                        <a class="button square"
-                                @click="items.splice(data.row,1)"
+                                @click.stop="items.splice(data.row,1)"
                                 :title="labels.remove_track"
                                 :aria-label="labels.remove_track">
                             <span class="icon"><i class="fa fa-trash" /></span>
@@ -58,62 +58,92 @@
             </a-rows>
         </section>
 
-        <div class="mt-2">
+        <div class="flex-row">
-            <div class="float-right">
+            <div class="flex-grow-1 flex-row">
-                <a class="button is-warning p-2 ml-2"
+                <div class="field ml-3">
-                        @click="loadData({items: this.initData.items},true)">
+                    <p class="control">
-                    <span class="icon"><i class="fa fa-rotate" /></span>
+                        <a class="button is-info"
-                    <span>{{ labels.discard_changes }}</span>
+                            @click="$refs.settings.open()">
-                </a>
+                            <span class="icon is-small">
-                <a class="button is-primary p-2 ml-2" t-if="page == page.List"
+                                <i class="fa fa-cog"></i>
-                        @click="this.set.push(new this.set.model())">
+                            </span>
-                    <span class="icon"><i class="fa fa-plus"/></span>
+                            <span>Options</span>
-                    <span>{{ labels.add_track }}</span>
+                        </a>
-                </a>
+                    </p>
-            </div>
-            <div class="field is-inline-block is-vcentered mr-3">
-                <label class="label is-inline mr-2"
-                        style="vertical-align: middle">
-                    Séparateur</label>
-                <div class="control is-inline-block"
-                        style="vertical-align: middle;">
-                    <input type="text" ref="sep" class="input is-inline is-text-centered is-small"
-                        style="max-width: 5em;"
-                        v-model="separator" @change="updateList()"/>
                 </div>
             </div>
-            <div class="field is-inline-block is-vcentered mr-3">
+            <div class="flex-grow-1 align-right">
-                <label class="label is-inline mr-2"
+                <a class="button square is-warning p-2"
-                        style="vertical-align: middle">
+                        @click="loadData({items: this.initData.items},true)"
-                    {{ labels.columns }}</label>
+                        :title="labels.discard_changes"
-                <table class="table is-bordered is-inline-block"
+                        :aria-label="labels.discard_changes"
-                        style="vertical-align: middle">
+                        >
-                    <tr>
+                    <span class="icon"><i class="fa fa-rotate" /></span>
-                        <a-row :columns="columns" :item="labels"
+                </a>
-                                @move="formatMove" :orderable="true">
+                <a class="button square is-primary p-2" v-if="page == Page.List"
-                            <template v-slot:cell-after="{cell}">
+                        @click="this.set.push(new this.set.model())"
-                                <td style="cursor:pointer;" v-if="cell.col < columns.length-1">
+                        :title="labels.add_track"
-                                    <span class="icon" @click="formatMove({from: cell.col, to: cell.col+1})"
+                        :aria-label="labels.add_track"
-                                        ><i class="fa fa-left-right"/>
+                        >
-                                    </span>
+                    <span class="icon"><i class="fa fa-plus"/></span>
-                                </td>
+                </a>
-                            </template>
-                        </a-row>
-                    </tr>
-                </table>
-            </div>
-            <div class="field is-vcentered is-inline-block"
-                    v-if="settingsChanged">
-                <a-action-button icon="fa fa-floppy-disk"
-                        class="button control p-3 is-info" run-class="blink"
-                        :url="settingsUrl" method="POST"
-                        :data="settings"
-                        :aria-label="labels.save_settings"
-                        @done="settingsSaved()">
-                    {{ labels.save_settings }}
-                </a-action-button>
             </div>
         </div>
+
+        <a-modal ref="settings" title="Options">
+            <template #default>
+                <div class="field">
+                    <label class="label" style="vertical-align: middle">
+                        {{ labels.columns }}
+                    </label>
+                    <table class="table is-bordered"
+                            style="vertical-align: middle">
+                        <tr>
+                            <a-row :columns="columns" :item="labels"
+                                    @move="formatMove" :orderable="true">
+                                <template v-slot:cell-after="{cell}">
+                                    <td style="cursor:pointer;" v-if="cell.col < columns.length-1">
+                                        <span class="icon" @click="formatMove({from: cell.col, to: cell.col+1})"
+                                            ><i class="fa fa-left-right"/>
+                                        </span>
+                                    </td>
+                                </template>
+                            </a-row>
+                        </tr>
+                    </table>
+                </div>
+
+                <div class="flex-row">
+                    <div class="field is-inline-block is-vcentered flex-grow-1">
+                        <label class="label is-inline mr-2"
+                                style="vertical-align: middle">
+                            Séparateur</label>
+                        <div class="control is-inline-block"
+                                style="vertical-align: middle;">
+                            <input type="text" ref="sep" class="input is-inline is-text-centered is-small"
+                                style="max-width: 5em;"
+                                v-model="separator" @change="updateList()"/>
+                        </div>
+                    </div>
+                </div>
+            </template>
+            <template #footer>
+                <div class="flex-row align-right">
+                    <a-action-button icon="fa fa-floppy-disk"
+                             v-if="settingsChanged"
+                             class="button control p-2 mr-3 is-secondary" run-class="blink"
+                            :url="settingsUrl" method="POST"
+                            :data="settings"
+                            :aria-label="labels.save_settings"
+                            @done="settingsSaved()">
+                        {{ labels.save_settings }}
+                    </a-action-button>
+                    <button class="button" type="button" @click="$refs.settings.close()">
+                        Fermer
+                    </button>
+                </div>
+            </template>
+        </a-modal>
         <slot name="bottom" :set="set" :columns="columns" :items="items"/>
     </div>
 </template>
@@ -123,8 +153,9 @@ import {Set} from '../model'
 import Track from '../track'
 
 import AActionButton from './AActionButton'
-import ARow from './ARow.vue'
+import ARow from './ARow'
-import ARows from './ARows.vue'
+import ARows from './ARows'
+import AModal from "./AModal"
 
 /// Page display
 export const Page = {
@@ -132,7 +163,7 @@ export const Page = {
 }
 
 export default {
-    components: { AActionButton, ARow, ARows },
+    components: { AActionButton, ARow, ARows, AModal },
     props: {
         initData: Object,
         dataPrefix: String,
@@ -297,6 +328,8 @@ export default {
         settingsSaved(settings=null) {
             if(settings !== null)
                 this.settings = settings
+            if(this.$refs.settings)
+                this.$refs.settings.close()
             this.savedSettings = cloneDeep(this.settings)
         },
 

assets/src/components/ASelectFile.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="a-select-file">
-        <div class="a-select-file-list" ref="list">
+        <div :class="['a-select-file-list', listClass]" ref="list">
-            <div class="flex-column file-preview">
+            <div class="flex-column">
                 <div class="field flex-grow-1" v-if="!uploadFile">
                     <label class="label">{{ uploadLabel }}</label>
                     <input type="file" @change="previewFile"/>
@@ -51,6 +51,7 @@ import {getCsrf} from "../model"
 export default {
     props: {
         name: { type: String },
+        listClass: {type: String, default: ""},
         prevLabel: { type: String, default: "Prev" },
         nextLabel: { type: String, default: "Next" },
         listUrl: { type: String },
@@ -88,7 +89,7 @@ export default {
             formData.append('file', this.uploadFile.file)
             formData.append('original_filename', this.uploadFile.file.name)
             formData.append('csrfmiddlewaretoken', getCsrf())
-            fetch(this.listUrl, {
+            fetch(this.uploadUrl, {
                 method: "POST",
                 body: formData
             }).then(

assets/src/dashboard.js

@@ -4,10 +4,18 @@ import './index.js'
 import App from './app';
 import {dashboard as components} from './components'
 
-const AdminApp = {
+const DashboardApp = {
     ...App,
     components: {...App.components, ...components},
 
+    /*
+    data() {
+        return {
+            editPageContent: null,
+        }
+    },
+    */
+
     methods: {
         ...App.methods,
 
@@ -22,7 +30,7 @@ const AdminApp = {
         },
     }
 }
-export default AdminApp;
+export default DashboardApp;
 
 
-window.App = AdminApp
+window.App = DashboardApp

assets/src/styles/components.scss

@@ -162,9 +162,8 @@
         color: var(--button-fg);
         background-color: var(--button-bg);
 
-        &.secondary {
+        &.square { min-width: 2.5rem; }
-            background-color: var(--button-sec-bg);
+        &.secondary { background-color: var(--button-sec-bg); }
-        }
 
         .label, label {
             cursor: pointer;
@@ -173,8 +172,8 @@
         .icon {
             vertical-align: middle;
             &:not(:only-child) {
-                &:first-child { margin-right: v.$mp-3; }
+                &:first-child { margin: 0 v.$mp-3 0 v.$mp-1; }
-                &:last-child { margin-left: v.$mp-3 }
+                &:last-child { margin: 0 v.$mp-3 0 v.$mp-1; }
             }
         }
 
@@ -710,6 +709,14 @@
         }
     }
 
+
+/// ---- playlist editor
+.a-playlist-editor {
+    .dropdown {
+        display: unset !important;
+    }
+}
+
 /// ----------------
 .a-select-file {
     > *:not(:last-child) {

assets/src/styles/helpers.scss

@@ -3,8 +3,18 @@
 .text-light { weight: 400; color: var(--text-color-light); }
 
 // ---- layout
-.align-left { text-align: left; justify-content: left; }
+.align-left {
-.align-right { text-align: right; justify-content: right; }
+    text-align: left;
+    justify-content: left;
+
+    &.x { padding-left: 0px !important; }
+}
+.align-right {
+    text-align: right;
+    justify-content: right;
+
+    &.x { padding-right: 0px !important; }
+}
 
 .clear-left { clear: left !important }
 .clear-right { clear: right !important }

assets/src/styles/public.scss

@@ -117,7 +117,7 @@
 }
 
 @media screen and (min-width: v.$screen-small) {
-    textarea {
+    comment.textarea {
         height: calc( v.$text-size * 7 ) !important;
     }
 }