#132 | #121: backoffice / dev-1.0-121 (#131)

cfr #121

Co-authored-by: Christophe Siraut <d@tobald.eu.org>
Co-authored-by: bkfox <thomas bkfox net>
Co-authored-by: Thomas Kairos <thomas@bkfox.net>
Reviewed-on: rc/aircox#131
Co-authored-by: Chris Tactic <ctactic@noreply.git.radiocampus.be>
Co-committed-by: Chris Tactic <ctactic@noreply.git.radiocampus.be>

assets/src/components/ARows.vue

@@ -1,34 +1,38 @@
 <template>
     <table class="table is-stripped is-fullwidth">
         <thead>
-            <a-row :item="labels" :columns="columns" :orderable="orderable"
-                    @move="$emit('colmove', $event)">
+            <a-row :context="context" :columns="columnNames"
+                    :orderable="columnsOrderable" cellTag="th"
+                    @move="moveColumn">
                 <template v-if="$slots['header-head']" v-slot:head="data">
                     <slot name="header-head" v-bind="data"/>
                 </template>
                 <template v-if="$slots['header-tail']" v-slot:tail="data">
                     <slot name="header-tail" v-bind="data"/>
                 </template>
+                <template v-for="column of columns" v-bind:key="column.name"
+                    v-slot:[column.name]="data">
+                    <slot :name="'header-' + column.name" v-bind="data">
+                        {{ column.label }}
+                        <span v-if="column.help" class="icon small"
+                                :title="column.help">
+                            <i class="fa fa-circle-question"/>
+                        </span>
+                    </slot>
+                </template>
             </a-row>
         </thead>
         <tbody>
             <slot name="head"/>
             <template v-for="(item,row) in items" :key="row">
                 <!-- data-index comes from AList component drag & drop -->
-                <a-row :item="item" :cell="{row}" :columns="columns" :data-index="row"
+                <a-row :context="context" :item="item" :cell="{row}" :columns="columnNames" :data-index="row"
                         :data-row="row"
                         :draggable="orderable"
                         @dragstart="onDragStart" @dragover="onDragOver" @drop="onDrop"
                         @cell="onCellEvent(row, $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>
-                                <slot :name="name" v-bind="data"/>
-                            </div>
-                        </template>
+                        <slot :name="name" v-bind="data"/>
                     </template>
                 </a-row>
             </template>
@@ -43,29 +47,41 @@ import ARow from './ARow.vue'
 const Component = {
     extends: AList,
     components: { ARow },
-    emit: ['cell', 'colmove'],
+    //! Event:
+    //! - cell(event): an event occured inside cell
+    //! - colmove({from,to}), colmove(): columns moved
+    emits: ['cell', 'colmove'],
 
     props: {
         ...AList.props,
+        //! Context object
+        context: {type: Object, default: () => ({})},
+
+        //! Ordered list of columns, as objects with:
+        //! - name: item attribute value
+        //! - label: display label
+        //! - help: help text
+        //! - hidden: if true, field is hidden
         columns: Array,
-        labels: Object,
-        allowCreate: Boolean,
+        //! If True, columns are orderable
+        columnsOrderable: Boolean,
     },
 
     data() {
         return {
             ...super.data,
+            // TODO: add observer
+            columns_: [...this.columns],
             extraItem: new this.set.model(),
         }
     },
 
     computed: {
-        rowCells() {
-            const cells = []
-            for(var row in this.items)
-                cells.push({row})
-        },
-
+        columnNames() { return this.columns_.map(c => c.name) },
+        columnLabels() { return this.columns_.reduce(
+            (labels, c) => ({...labels, [c.name]: c.label}),
+            {}
+        )},
         rowSlots() {
             return Object.keys(this.$slots).filter(x => x.startsWith('row-'))
                                            .map(x => [x, x.slice(4)])
@@ -73,6 +89,25 @@ const Component = {
     },
 
     methods: {
+        // TODO: use in tracklist
+        sortColumns(names) {
+            const ordered = names.map(n => this.columns_.find(c => c.name == n)).filter(c => !!c);
+            const remaining = this.columns_.filter(c =>  names.indexOf(c.name) == -1)
+            this.columns_ = [...ordered, ...remaining]
+            this.$emit('colmove')
+        },
+
+        /**
+         * Move column using provided event object (as `{from, to}`)
+         */
+        moveColumn(event) {
+            const {from, to} = event
+            const value = this.columns_[from]
+            this.columns_.splice(from, 1)
+            this.columns_.splice(to, 0, value)
+            this.$emit('colmove', event)
+        },
+
         /**
          * React on 'cell' event, re-emitting it with additional values:
          * - `set`: data set