- save & load

- key navigation
- ui improvements

aircox/admin/sound.py

@@ -9,7 +9,7 @@ from adminsortable2.admin import SortableAdminBase, SortableInlineAdminMixin
 from ..models import Sound, Track
 
 
-class TrackInline(SortableInlineAdminMixin, admin.TabularInline):
+class TrackInline(admin.TabularInline):
     template = 'admin/aircox/playlist_inline.html'
     model = Track
     extra = 0

aircox/templates/admin/aircox/playlist_inline.html

@@ -4,21 +4,18 @@
 {# include "adminsortable2/edit_inline/tabular-django-4.1.html" #}
 {% with inline_admin_formset as admin_formset %}
 {% with admin_formset.formset as formset %}
-<div id="inline-tracks" class="box mb-5">
+
-    <h5 class="title is-4">{% trans "Playlist" %}</h5>
+<script id="{{ formset.prefix }}-init-data">
-    <script id="{{ formset.prefix }}-init-data">{
+{{ formset|inline_data|json }}
-        "items": [
-            {% for form in formset.forms %}
-            {{ form.initial|json }}
-            {% if not forloop.last %},{% endif %}
-            {% endfor %}
-        ]
-    }
 </script>
+<div id="inline-tracks" class="box mb-5">
     {{ admin_formset.non_form_errors }}
 
-    
+    <a-playlist-editor data-el="{{ formset.prefix }}-init-data"
-    <a-playlist-editor>
+            data-prefix="{{ formset.prefix }}-">
+        <template #title>
+            <h5 class="title is-4">{% trans "Playlist" %}</h5>
+        </template>
         <template v-slot:top="{items}">
             <input type="hidden" name="{{ formset.prefix }}-TOTAL_FORMS"
                 :value="items.length || 0"/>
@@ -43,7 +40,7 @@
                 <input type="hidden"
                     :name="'{{ formset.prefix }}-' + row + '-position'"
                     :value="row"/>
-                <input t-if="item.data.id" type="hidden"
+                <input t-if="item.id" type="hidden"
                     :name="'{{ formset.prefix }}-' + row + '-id'"
                     :value="item.data.id"/>
 
@@ -59,12 +56,18 @@
         {% for field in admin_formset.fields %}
         {% if not field.widget.is_hidden and not field.is_readonly %}
         <template v-slot:row-{{ field.name }}="{item,col,row,value,attr,emit}">
+            <div class="field">
                 <div class="control">
-                <input type="{{ widget.type }}" class="input half-field"
+                    <input type="{{ widget.type }}"
+                        :class="['input', item.error(attr) ? 'is-danger' : 'half-field']"
                         :name="'{{ formset.prefix }}-' + row + '-{{ field.name }}'"
                         v-model="item.data[attr]"
                         @change="emit('change', col)"/>
                 </div>
+                <p v-for="error in item.error(attr)" class="help is-danger">
+                    [[ error ]] !
+                </p>
+            </div>
         </template>
         {% endif %}
         {% endfor %}

aircox/templates/aircox/widgets/player.html

@@ -18,7 +18,7 @@ The audio player
     </noscript>
 
     <a-player ref="player"
-            :live-args="{url: '{% url "api:live" %}', timeout:10, src: {{ audio_streams|json }} || []}"
+            :live-args="{url: '{% url "api:live" %}', timeout:10, src: {{ audio_streams|json|force_escape }} || []}"
             button-title="{% translate "Play or pause audio" %}">
         <template v-slot:content="{ loaded, live, current }">
             <h4 v-if="loaded" class="title is-4">

aircox/templatetags/aircox.py

@@ -6,7 +6,7 @@ from django.contrib.admin.templatetags.admin_urls import admin_urlname
 from django.urls import reverse
 from django.utils.safestring import mark_safe
 
-from aircox.models import Page, Diffusion, Log
+from aircox.models import Diffusion, Log
 
 random.seed()
 register = template.Library()
@@ -18,6 +18,7 @@ def do_admin_url(obj, arg, pass_id=True):
     name = admin_urlname(obj._meta, arg)
     return reverse(name, args=(obj.id,)) if pass_id else reverse(name)
 
+
 @register.filter(name='get_tracks')
 def do_get_tracks(obj):
     """ Get a list of track for the provided log, diffusion, or episode """
@@ -28,6 +29,7 @@ def do_get_tracks(obj):
         obj = obj.episode
     return obj.track_set.all()
 
+
 @register.simple_tag(name='has_perm', takes_context=True)
 def do_has_perm(context, obj, perm, user=None):
     """ Return True if ``user.has_perm('[APP].[perm]_[MODEL]')`` """
@@ -36,17 +38,21 @@ def do_has_perm(context, obj, perm, user=None):
     return user.has_perm('{}.{}_{}'.format(
         obj._meta.app_label, perm, obj._meta.model_name))
 
+
 @register.filter(name='is_diffusion')
 def do_is_diffusion(obj):
     """ Return True if object is a Diffusion. """
     return isinstance(obj, Diffusion)
 
+
 @register.filter(name='json')
 def do_json(obj, fields=""):
     """ Return object as json """
     if fields:
-        obj = { k: getattr(obj,k,None) for k in ','.split(fields) }
+        obj = {k: getattr(obj, k, None)
-    return json.dumps(obj)
+               for k in ','.split(fields)}
+    return mark_safe(json.dumps(obj))
+
 
 @register.simple_tag(name='nav_items', takes_context=True)
 def do_nav_items(context, menu, **kwargs):
@@ -55,6 +61,7 @@ def do_nav_items(context, menu, **kwargs):
     return [(item, item.render(request, **kwargs))
             for item in station.navitem_set.filter(menu=menu)]
 
+
 @register.simple_tag(name='update_query')
 def do_update_query(obj, **kwargs):
     """ Replace provided querydict's values with **kwargs. """
@@ -65,6 +72,7 @@ def do_update_query(obj, **kwargs):
             obj.pop(k)
     return obj
 
+
 @register.filter(name='verbose_name')
 def do_verbose_name(obj, plural=False):
     """
@@ -74,4 +82,3 @@ def do_verbose_name(obj, plural=False):
     return obj if isinstance(obj, str) else \
         obj._meta.verbose_name_plural if plural else \
         obj._meta.verbose_name
-

aircox/templatetags/aircox_admin.py

@@ -1,16 +1,27 @@
 from django import template
 from django.contrib import admin
 
-from ..serializers import AdminTrackSerializer
 
 register = template.Library()
 
+
 @register.simple_tag(name='get_admin_tools')
 def do_get_admin_tools():
     return admin.site.get_tools()
 
 
-@register.filter(name='serialize_track')
+@register.filter(name='inline_data')
-def do_serialize_track(instance):
+def do_inline_data(formset):
-    ser = AdminTrackSerializer(instance=instance)
+    items = []
-    return ser.data
+    for form in formset.forms:
+        item = {name: form[name].value()
+                for name in form.fields.keys()}
+        item['__errors__'] = form.errors
+
+        # hack for playlist editor
+        tags = item.get('tags')
+        if tags and not isinstance(tags, str):
+            item['tags'] = ', '.join(tag.name for tag in tags)
+        items.append(item)
+    return {"items": items}
+    

assets/src/components/APlaylistEditor.vue

@@ -1,30 +1,35 @@
 <template>
     <div class="playlist-editor">
-        <slot name="top" :set="set" :columns="columns" :items="items"/>
+        <div class="columns">
-        <div class="tabs">
+            <div class="column">
-            <ul>
+                <slot name="title" />
-                <li :class="{'is-active': mode == Modes.Text}"
+            </div>
+            <div class="column has-text-right">
+                <div class="float-right field has-addons">
+                    <p class="control">
+                        <a :class="['button','p-2', mode == Modes.Text ? 'is-primary' : 'is-light']"
                                 @click="mode = Modes.Text">
-                    <a>
                             <span class="icon is-small">
                                 <i class="fa fa-pencil"></i>
                             </span>
-                        Texte
+                            <span>Texte</span>
                         </a>
-                </li>
+                    </p>
-                <li :class="{'is-active': mode == Modes.List}"
+                    <p class="control">
+                        <a :class="['button','p-2', mode == Modes.List ? 'is-primary' : 'is-light']"
                                 @click="mode = Modes.List">
-                    <a>
                             <span class="icon is-small">
                                 <i class="fa fa-list"></i>
                             </span>
-                        Liste
+                            <span>Liste</span>
                         </a>
-                </li>
+                    </p>
-            </ul>
                 </div>
+            </div>
+        </div>
+        <slot name="top" :set="set" :columns="columns" :items="items"/>
         <section class="page" v-show="mode == Modes.Text">
-            <textarea ref="textarea" class="is-fullwidth" style="height: 10em;"
+            <textarea ref="textarea" class="is-fullwidth" rows="20"
                 @change="updateList"
             />
 
@@ -36,7 +41,7 @@
                     <table class="table is-bordered is-inline-block"
                             style="vertical-align: middle">
                         <tr>
-                            <a-row :columns="columns" :item="FormatLabels"
+                            <a-row :cell="{columns}" :item="FormatLabels"
                                 @move="formatMove" :orderable="true">
                             </a-row>
                         </tr>
@@ -93,22 +98,25 @@ const FormatLabels = {
 export default {
     components: { ARow, ARows },
     props: {
+        dataEl: String,
+        dataPrefix: String,
         listClass: String,
         itemClass: String,
     },
 
     data() {
         return {
-            dataEl: String,
             Modes: Modes,
             FormatLabels: FormatLabels,
             mode: Modes.Text,
             set: new Set(Track),
             columns: ['artist', 'title', 'tags', 'album', 'year'],
+            extraData: {},
         }
     },
 
     computed: {
+       
         items() {
             return this.set.items
         },
@@ -194,12 +202,25 @@ export default {
             return lines.join('\n')
         },
 
+
+        _data_key(key) {
+            key = key.slice(this.dataPrefix.length)
+            try {
+                var [index, attr] = key.split('-', 1)
+                return [Number(index), attr]
+            }
+            catch(err) {
+                return [null, key]
+            }
+        },
+        
         /**
          * Load initial data
          */
-        loadData({items=[], errors, fieldErrors, ...data}) {
+        loadData({items=[]}) {
-            for(var item of items)
+            for(var index in items)
-                this.set.push(item)
+                this.set.push(items[index])
+            this.updateInput()
          },
     },
 
@@ -207,10 +228,11 @@ export default {
         if(this.dataEl) {
             const el = document.getElementById(this.dataEl)
             if(el) {
-                const data = JSON.parse(el.textContext)
+                const data = JSON.parse(el.textContent)
-                loadData(data)
+                this.loadData(data)
             }
         }
+        this.mode = (this.items) ? Modes.List : Modes.Text
     },
 }
 </script>

assets/src/components/ARow.vue

@@ -1,21 +1,22 @@
 <template>
     <tr>
-        <slot name="head" :item="item" :row="index"/>
+        <slot name="head" :item="item" :row="row"/>
         <template v-for="(attr,col) in columns" :key="col">
-            <td :class="['cell', 'cell-' + attr]" :data-index="col"
+            <td :class="['cell', 'cell-' + attr]" :data-col="col"
                     :draggable="orderable"
                     @dragstart="onDragStart" @dragover="onDragOver" @drop="onDrop">
-                <slot :name="attr" :item="item" :row="index" :col="col"
+                <slot :name="attr" :item="item" :cell="cells[col]"
                         :data="itemData" :attr="attr" :emit="cellEmit"
                         :value="itemData && itemData[attr]">
                     {{ itemData && itemData[attr] }}
                 </slot>
             </td>
         </template>
-        <slot name="tail" :item="item" :row="index"/>
+        <slot name="tail" :item="item" :row="cell.row"/>
     </tr>
 </template>
 <script>
+import {isReactive, toRefs} from 'vue'
 import Model from '../model'
 
 export default {
@@ -23,35 +24,48 @@ export default {
 
     props: {
         item: Object,
-        index: Number,
+        cell: Object,
-        columns: Array,
         orderable: {type: Boolean, default: false},
     },
 
     computed: {
+        row() { return this.cell.row || 0 },
+        columns() { return this.cell.columns },
+        
         itemData() {
             return this.item instanceof Model ? this.item.data : this.item;
         },
+
+        cells() {
+            const cell = isReactive(this.cell) && toRefs(this.cell) || this.cell
+            const cells = []
+            for(var col in this.columns)
+                cells.push({...cell, col: Number(col)})
+            return cells
+        },
+
+        cellEls() {
+            return [...this.$el.querySelectorAll('td')].filter(x => x.dataset.col)
+        },
     },
 
     methods: {
         /// Emit a 'cell' event.
-        /// Event data: `{index, name, data, item, attr}`
+        /// Event data: `{name, data, item, attr}`
         ///
         /// @param {Number} col: cell column's index
         /// @param {String} name: cell's event name
         /// @param {} data: cell's event data
-        cellEmit(name, col, data) {
+        cellEmit(name, cell, data) {
             this.$emit('cell', {
-                name, col, data,
+                name, cell, data,
                 item: this.item,
-                attr: this.columns[col],
             })
         },
 
         onDragStart(ev) {
             const dataset = ev.target.dataset;
-            const data = `cell:${dataset.index}`
+            const data = `cell:${dataset.col}`
             ev.dataTransfer.setData("text/cell", data)
             ev.dataTransfer.dropEffect = 'move'
         },
@@ -69,9 +83,27 @@ export default {
             ev.preventDefault()
             this.$emit('move', {
                 from: Number(data.slice(5)),
-                to: Number(ev.target.dataset.index),
+                to: Number(ev.target.dataset.col),
             })
         },
+
+        focus(col, from) {
+            if(from)
+                col += from.col
+
+            const target = this.cellEls[col]
+            if(!target)
+                return
+            const control = target.querySelector('input') ||
+                            target.querySelector('button') ||
+                            target.querySelector('select') ||
+                            target.querySelector('a');
+            control && control.focus()
+        }
+    },
+
+    mounted() {
+        this.$el.__row = this
     },
 }
 

assets/src/components/ARows.vue

@@ -10,18 +10,26 @@
         </thead>
         <tbody>
             <slot name="head"/>
-            <template v-for="(item,index) in items" :key="index">
+            <template v-for="(item,row) in items" :key="row">
-                <a-row :item="item" :index="index" :columns="columns" :data-index="index"
+                <!-- data-index comes from AList component drag & drop -->
+                <a-row :item="item" :cell="{row, columns}" :data-index="row"
                         :draggable="orderable"
                         @dragstart="onDragStart" @dragover="onDragOver" @drop="onDrop"
                         @cell="onCellEvent(index, $event)">
                     <template v-for="[name,slot] of rowSlots" :key="slot" v-slot:[slot]="data">
+                        <template v-if="slot == 'head' || slot == 'tail'">
                             <slot :name="name" v-bind="data"/>
                         </template>
+                        <template v-else>
+                            <div @keydown.capture.ctrl="onControlKey($event, data.cell)">
+                                <slot :name="name" v-bind="data"/>
+                            </div>
+                        </template>
+                    </template>
                 </a-row>
             </template>
             <template v-if="allowCreate">
-                <a-row :item="extraItem" :index="items.length" :columns="columns"
+                <a-row :item="extraItem" :cell="{row:items.length, columns}" 
                         @keypress.enter.stop.prevent="validateExtraCell">
                     <template v-for="[name,slot] of rowSlots" :key="slot" v-slot:[slot]="data">
                         <slot :name="name" v-bind="data"/>
@@ -56,6 +64,17 @@ const Component = {
     },
 
     computed: {
+        rowCells() {
+            const cells = []
+            for(var row in this.items)
+                cells.push({row, columns: this.columns,})
+        },
+
+        rows() {
+            return [...this.$el.querySelectorAll('tr')].filter(x => x.__row)
+                                                       .map(x => x.__row)
+        },
+        
         rowSlots() {
             return Object.keys(this.$slots).filter(x => x.startsWith('row-'))
                                            .map(x => [x, x.slice(4)])
@@ -70,18 +89,60 @@ const Component = {
             this.extraItem = new this.set.model()
         },
 
-        /// React on 'cell' event, re-emitting it with additional values:
+        onControlKey(event, cell) {
-        /// - `set`: data set
+            switch(event.key) {
-        /// - `row`: row index
+                case "ArrowUp": this.focus(-1, 0, cell)
-        ///
+                                event.stopPropagation()
-        /// @param {Number} row: row index
+                                event.preventDefault()
-        /// @param {} data: cell's event data
+                                break;
+                case "ArrowDown": this.focus(1, 0, cell)
+                                event.stopPropagation()
+                                event.preventDefault()
+                                break;
+                case "ArrowLeft": this.focus(0, -1, cell)
+                                event.stopPropagation()
+                                event.preventDefault()
+                                break;
+                case "ArrowRight": this.focus(0, 1, cell)
+                                event.stopPropagation()
+                                event.preventDefault()
+                                break;
+            }
+        },
+    
+        /**
+         * React on 'cell' event, re-emitting it with additional values:
+         * - `set`: data set
+         * - `row`: row index
+         *
+         * @param {Number} row: row index
+         * @param {} data: cell's event data
+         */
         onCellEvent(row, event) {
+            if(event.name == 'focus')
+                this.cellFocus(event.data, event.cell)
+            
             this.$emit('cell', {
                 ...event, row,
                 set: this.set
             })
         },
+
+        getCellNode(row, col) {
+            const el = this.$refs[row]
+            return el && el.cellEls(col)
+        },
+
+        /**
+         * Focus on a cell
+         */
+        focus(row, col, from=null) {
+            if(from)
+                row += from.row
+
+            row = this.rows[row]
+            row && row.focus(col, from)
+        },
     },
 }
 Component.props.itemTag.default = 'tr'

assets/src/model.js

@@ -41,11 +41,15 @@ export default class Model {
         this.commit(data);
     }
 
+    get errors() {
+        return this.data.__errors__
+    }
+
     /**
      * Get instance id from its data
      */
     static getId(data) {
-        return data.id;
+        return 'id' in data ? data.id : data.pk;
     }
 
     /**
@@ -112,8 +116,16 @@ export default class Model {
      * Update instance's data with provided data. Return None
      */
     commit(data) {
-        this.id = this.constructor.getId(data);
         this.data = data;
+        this.id = this.constructor.getId(this.data);
+    }
+
+    /**
+     * Update model data, without reset previous value
+     */
+    update(data) {
+        this.data = {...this.data, ...data}
+        this.id = this.constructor.getId(this.data)
     }
 
     /**
@@ -130,6 +142,13 @@ export default class Model {
         let item = window.localStorage.getItem(key);
         return item === null ? item : new this(JSON.parse(item));
     }
+
+    /**
+     * Return error for a specific attribute name if any 
+     */
+    error(attr=null) {
+        return attr === null ? this.errors : this.errors && this.errors[attr]
+    }
 }