fixes

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 
      */