|
|
|
@ -8,7 +8,7 @@ Complex animated column editor for the table edit page |
|
|
|
|
<table class="editor-table"> |
|
|
|
|
<thead> |
|
|
|
|
<tr> |
|
|
|
|
<th v-if="doSort"></th> |
|
|
|
|
<th v-if="sortable"></th> |
|
|
|
|
<th>Name</th> |
|
|
|
|
<th>Type</th> |
|
|
|
|
<th>Title</th> |
|
|
|
@ -19,17 +19,18 @@ Complex animated column editor for the table edit page |
|
|
|
|
</thead> |
|
|
|
|
<transition-group name="col-list" tag="tbody" ref="col-list"> |
|
|
|
|
<tr v-for="(col, i) in columns" :key="col.id" :ref="'col' + i" :class="{dragging: col._dragging}"> |
|
|
|
|
<td class="btn-group" v-if="doSort"> |
|
|
|
|
<button class="btn btn-outline-secondary drag-btn" @mousedown="beginDrag(i, $event)"> |
|
|
|
|
<td class="btn-group" v-if="sortable"> |
|
|
|
|
<button type="button" class="btn btn-outline-secondary drag-btn" @mousedown="beginDrag(i, $event)"> |
|
|
|
|
<v-icon class="fa-bars" alt="Drag" /> |
|
|
|
|
</button> |
|
|
|
|
<a href="" :class="['btn', 'btn-outline-secondary', {disabled: i==0}]" |
|
|
|
|
</button><!-- |
|
|
|
|
--><button type="button" :class="['btn', 'btn-outline-secondary', {disabled: i==0}]" v-if="manualSort" |
|
|
|
|
@click.prevent="move(i, -1)"> |
|
|
|
|
<v-icon class="fa-chevron-up" alt="Move Up" /> |
|
|
|
|
</a><a href="" :class="['btn', 'btn-outline-secondary', {disabled: i == (columns.length-1)}]" |
|
|
|
|
</button><!-- |
|
|
|
|
--><button type="button" :class="['btn', 'btn-outline-secondary', {disabled: i == (columns.length-1)}]" v-if="manualSort" |
|
|
|
|
@click.prevent="move(i, 1)"> |
|
|
|
|
<v-icon class="fa-chevron-down" alt="Move Down" /> |
|
|
|
|
</a> |
|
|
|
|
</button> |
|
|
|
|
</td> |
|
|
|
|
|
|
|
|
|
<td> |
|
|
|
@ -58,26 +59,26 @@ Complex animated column editor for the table edit page |
|
|
|
|
</td> |
|
|
|
|
|
|
|
|
|
<td v-if="!newTable"> |
|
|
|
|
<a href="" :class="['btn', col._dirty ? 'btn-info' : 'btn-outline-secondary']" |
|
|
|
|
<button type="button" :class="['btn', col._dirty ? 'btn-info' : 'btn-outline-secondary']" |
|
|
|
|
@click.prevent="saveCol(i)"> |
|
|
|
|
<v-icon class="fa-save" alt="Save" /> |
|
|
|
|
</a> |
|
|
|
|
</button> |
|
|
|
|
</td> |
|
|
|
|
|
|
|
|
|
<td> |
|
|
|
|
<a href="" :class="delBtnClass(col)" |
|
|
|
|
<button type="button" :class="delBtnClass(col)" |
|
|
|
|
@click.prevent="toggleColDelete(i)"> |
|
|
|
|
<v-icon :class="col._remove ? 'fa-undo' : 'fa-trash-o'" |
|
|
|
|
:alt="col._remove ? 'Undo Remove' : 'Remove'" /> |
|
|
|
|
</a> |
|
|
|
|
</button> |
|
|
|
|
</td> |
|
|
|
|
|
|
|
|
|
<td> |
|
|
|
|
<a href="" :class="['btn', 'btn-outline-secondary']" |
|
|
|
|
<button type="button" :class="['btn', 'btn-outline-secondary']" |
|
|
|
|
v-if="i === columns.length - 1" |
|
|
|
|
@click.prevent="addCol()"> |
|
|
|
|
<v-icon class="fa-plus" alt="Add Column" /> |
|
|
|
|
</a> |
|
|
|
|
</button> |
|
|
|
|
</td> |
|
|
|
|
</tr> |
|
|
|
|
</transition-group> |
|
|
|
@ -155,11 +156,12 @@ import { query } from './table-editor-utils' |
|
|
|
|
|
|
|
|
|
export default { |
|
|
|
|
props: { |
|
|
|
|
route: { type: String, default: null }, |
|
|
|
|
doSort: { type: Boolean, default: true }, |
|
|
|
|
newTable: { type: Boolean, default: false }, |
|
|
|
|
name: { type: String, required: true }, |
|
|
|
|
xColumns: { type: Array, required: true }, |
|
|
|
|
route: { type: String, default: null }, |
|
|
|
|
sortable: { type: Boolean, default: true }, |
|
|
|
|
manualSort: { type: Boolean, default: false }, |
|
|
|
|
newTable: { type: Boolean, default: false }, |
|
|
|
|
name: { type: String, required: true }, |
|
|
|
|
xColumns: { type: Array, required: true }, |
|
|
|
|
}, |
|
|
|
|
data: function () { |
|
|
|
|
return { |
|
|
|
|