aircox/admin/sound.py

@@ -70,6 +70,20 @@ class SoundAdmin(SortableAdminBase, admin.ModelAdmin):
                 if obj.type != Sound.TYPE_REMOVED else ''
     audio.short_description = _('Audio')
 
+    def add_view(self, request, object_id, form_url='', context=None):
+        context = context or {}
+        context['init_app'] = True
+        context['init_el'] = '#inline-tracks'
+        context['track_timestamp'] = True
+        return super().change_view(request, object_id, form_url, context)
+
+    def change_view(self, request, object_id, form_url='', context=None):
+        context = context or {}
+        context['init_app'] = True
+        context['init_el'] = '#inline-tracks'
+        context['track_timestamp'] = True
+        return super().change_view(request, object_id, form_url, context)
+
 
 @admin.register(Track)
 class TrackAdmin(admin.ModelAdmin):

aircox/serializers/admin.py

@@ -13,7 +13,7 @@ class TrackSerializer(TaggitSerializer, serializers.ModelSerializer):
     class Meta:
         model = Track
         fields = ('pk', 'artist', 'title', 'album', 'year', 'position',
-                  'info', 'tags', 'episode', 'sound')
+                  'info', 'tags', 'episode', 'sound', 'timestamp')
 
 
 class UserSettingsSerializer(serializers.ModelSerializer):

aircox/templates/admin/aircox/playlist_inline.html

@@ -10,6 +10,9 @@
     <a-playlist-editor
             :labels="{% track_inline_labels %}"
             :init-data="{% track_inline_data formset=formset %}"
+            {% if not track_timestamp %}
+            :hide-columns="['timestamp']"
+            {% endif %}
             settings-url="{% url "api:user-settings" %}"
             data-prefix="{{ formset.prefix }}-">
         <template #title>
@@ -39,9 +42,9 @@
                 <input type="hidden"
                     :name="'{{ formset.prefix }}-' + row + '-position'"
                     :value="row"/>
-                <input t-if="item.id" type="hidden"
+                <input t-if="item.data.id" type="hidden"
                     :name="'{{ formset.prefix }}-' + row + '-id'"
-                    :value="item.data.id"/>
+                    :value="item.data.id || item.id"/>
 
                 {% for field in admin_formset.fields %}
                 {% if field.name != 'position' and field.widget.is_hidden %}
@@ -54,7 +57,7 @@
         </template>
         {% 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}">
+        <template v-slot:row-{{ field.name }}="{item,cell,value,attr,emit}">
             <div class="field">
                 {% if field.name in 'artist,title,album' %}
                 <a-autocomplete
@@ -65,7 +68,7 @@
                     <input type="{{ widget.type }}"
                         :class="['input', item.error(attr) ? 'is-danger' : 'half-field']"
                 {% endif %}
-                        :name="'{{ formset.prefix }}-' + row + '-{{ field.name }}'"
+                        :name="'{{ formset.prefix }}-' + cell.row + '-{{ field.name }}'"
                         v-model="item.data[attr]"
                         @change="emit('change', col)"/>
                 {% if field.name not in 'artist,title,album' %}

aircox/templatetags/aircox_admin.py

@@ -56,5 +56,8 @@ def do_track_inline_labels():
         'save_settings': __('Save Settings'),
         'discard_changes': __('Discard changes'),
         'columns': __('Columns'),
+        'add_track': __('Add a track'),
+        'remove_track': __('Remove'),
+        'timestamp': __('Timestamp'),
     })
 

assets/src/components/AAutocomplete.vue

@@ -140,7 +140,6 @@ export default {
             return this.labelField ? item && item[this.labelField] : item;
         },
 
-        
         hide() {
             this.cursor = -1;
             this.selectedIndex = -1;

assets/src/components/APlaylistEditor.vue

@@ -41,7 +41,19 @@
                     @cell="onCellEvent">
                 <template v-for="[name,slot] of rowsSlots" :key="slot"
                         v-slot:[slot]="data">
-                    <slot :name="name" v-bind="data"/>
+                    <slot v-if="name != 'row-tail'" :name="name" v-bind="data"/>
+                </template>
+
+                <template v-slot:row-tail="data">
+                    <slot v-if="$slots['row-tail']" :name="row-tail" v-bind="data"/>
+                    <td>
+                        <a class="button is-danger is-outlined p-3 is-size-6"
+                                @click="items.splice(data.row,1)"
+                                :title="labels.remove_track"
+                                :aria-label="labels.remove_track">
+                            <span class="icon"><i class="fa fa-trash" /></span>
+                        </a>
+                    </td>
                 </template>
             </a-rows>
         </section>
@@ -58,7 +70,7 @@
                         v-model="separator" @change="updateList()"/>
                 </div>
             </div>
-            <div class="field is-inline-block is-vcentered mr-5">
+            <div class="field is-inline-block is-vcentered mr-3">
                 <label class="label is-inline mr-2"
                         style="vertical-align: middle">
                     {{ labels.columns }}</label>
@@ -95,6 +107,11 @@
                     <span class="icon"><i class="fa fa-rotate" /></span>
                     <span>{{ labels.discard_changes }}</span>
                 </a>
+                <a class="button is-primary p-2 ml-2" t-if="page == page.List"
+                        @click="this.set.push(new this.set.model())">
+                    <span class="icon"><i class="fa fa-plus"/></span>
+                    <span>{{ labels.add_track }}</span>
+                </a>
             </div>
         </div>
         <slot name="bottom" :set="set" :columns="columns" :items="items"/>
@@ -123,7 +140,7 @@ export default {
         settingsUrl: String,
         defaultColumns: {
             type: Array,
-            default: () => ['artist', 'title', 'tags', 'album', 'year']},
+            default: () => ['artist', 'title', 'tags', 'album', 'year', 'timestamp']},
     },
 
     data() {

assets/src/components/ARow.vue

@@ -12,6 +12,9 @@
                         :value="itemData && itemData[attr]">
                     {{ itemData && itemData[attr] }}
                 </slot>
+                <slot name="cell" :item="item" :cell="cells[col]"
+                        :data="itemData" :attr="attr" :emit="cellEmit"
+                        :value="itemData && itemData[attr]"/>
             </component>
             <slot name="cell-after" :item="item" :col="col" :cell="cells[col]"
                     :attr="attr"/>

assets/src/components/ARows.vue

@@ -31,14 +31,6 @@
                     </template>
                 </a-row>
             </template>
-            <template v-if="allowCreate">
-                <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"/>
-                    </template>
-                </a-row>
-            </template>
             <slot name="tail"/>
         </tbody>
     </table>
@@ -85,13 +77,6 @@ const Component = {
     },
 
     methods: {
-        validateExtraCell() {
-            if(!this.allowCreate)
-                return
-            this.set.push(this.extraItem)
-            this.extraItem = new this.set.model()
-        },
-
         onControlKey(event, cell) {
             switch(event.key) {
                 case "ArrowUp": this.focus(-1, 0, cell)

assets/src/model.js

@@ -42,7 +42,7 @@ export default class Model {
     }
 
     get errors() {
-        return this.data.__errors__
+        return this.data && this.data.__errors__
     }
 
     /**
@@ -143,6 +143,13 @@ export default class Model {
         return item === null ? item : new this(JSON.parse(item));
     }
 
+    /**
+     * Return true if model instance has no data
+     */
+    get isEmpty() {
+        return !this.data || Object.keys(this.data).findIndex(k => !!this.data[k] && this.data[k] !== 0) == -1
+    }
+
     /**
      * Return error for a specific attribute name if any 
      */