Note tab added
This commit is contained in:
@@ -4,108 +4,117 @@ Complex animated column editor for the table edit page
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<input type="hidden" :name="name" :value="JSON.stringify(columns)" v-if="newTable">
|
||||
<table :class="[
|
||||
{'table': !newTable},
|
||||
{'new-table': newTable},
|
||||
{'mt-3': !newTable},
|
||||
'table-narrow', 'table-sm', 'table-fixed', 'td-va-middle'
|
||||
]">
|
||||
<thead>
|
||||
<tr>
|
||||
<th v-if="sortable"></th>
|
||||
<th :style="tdWidthStyle('name')">Name</th>
|
||||
<th :style="tdWidthStyle('type')">Type</th>
|
||||
<th :style="tdWidthStyle('title')">Title</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</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,
|
||||
'text-success': col._new,
|
||||
remove: col._remove
|
||||
}">
|
||||
<td v-if="sortable">
|
||||
<span class="btn-group">
|
||||
<button type="button" class="btn btn-outline-secondary drag-btn"
|
||||
@keyup.up="move(i, -1)"
|
||||
@keyup.down="move(i, 1)"
|
||||
:ref="`col${i}-sort`"
|
||||
:style="{visibility: (columns.length > 1) ? 'visible' : 'hidden'}"
|
||||
@mousedown="beginDrag(i, $event)">
|
||||
<v-icon class="fa-bars" alt="Drag" />
|
||||
<input type="hidden" :name="name" :value="JSON.stringify(columns)" v-if="!newTable">
|
||||
|
||||
<div :class="newTable ? ['col-md-12', 'mt-3'] : []">
|
||||
<table :class="[
|
||||
{'table': !newTable},
|
||||
{'new-table': newTable},
|
||||
{'mt-3': !newTable},
|
||||
'table-narrow', 'table-sm', 'table-fixed', 'td-va-middle'
|
||||
]">
|
||||
<thead>
|
||||
<tr>
|
||||
<th v-if="sortable"></th>
|
||||
<th :style="tdWidthStyle('name')">Name</th>
|
||||
<th :style="tdWidthStyle('type')">Type</th>
|
||||
<th :style="tdWidthStyle('title')">Title</th>
|
||||
<th>
|
||||
<a href="" type="button" v-if="!newTable"
|
||||
@click.prevent="resetOrder()"
|
||||
class="text-danger no-decoration">
|
||||
Reset Order
|
||||
</a>
|
||||
</th>
|
||||
</tr>
|
||||
</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,
|
||||
'text-success': col._new,
|
||||
remove: col._remove
|
||||
}">
|
||||
<td v-if="sortable">
|
||||
<span class="btn-group">
|
||||
<button type="button" class="btn btn-outline-secondary drag-btn"
|
||||
@keyup.up="move(i, -1)"
|
||||
@keyup.down="move(i, 1)"
|
||||
:ref="`col${i}-sort`"
|
||||
:style="{visibility: (columns.length > 1) ? 'visible' : 'hidden'}"
|
||||
@mousedown="beginDrag(i, $event)">
|
||||
<v-icon class="fa-bars" alt="Drag" />
|
||||
</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" />
|
||||
</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" />
|
||||
</button>
|
||||
</span>
|
||||
</td>
|
||||
|
||||
<template v-if="col._editing || newTable">
|
||||
<!-- Editable cells -->
|
||||
<td :style="tdWidthStyle('name')">
|
||||
<input v-model="col.name"
|
||||
class="form-control"
|
||||
type="text">
|
||||
</td>
|
||||
|
||||
<td :style="tdWidthStyle('type')">
|
||||
<select v-model="col.type"
|
||||
class="form-control custom-select">
|
||||
<option v-for="t in colTypes" :value="t">{{t}}</option>
|
||||
</select>
|
||||
</td>
|
||||
|
||||
<td :style="tdWidthStyle('title')">
|
||||
<input v-model="col.title"
|
||||
class="form-control"
|
||||
type="text">
|
||||
</td>
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<!-- Value fields -->
|
||||
<td v-for='cell in ["name", "type", "title"]'>
|
||||
<span class="text-danger strike" title="Original value" v-if="isChanged(col, cell)">{{col._orig[cell]}}</span>
|
||||
<span>{{ col[cell] }}</span>
|
||||
<v-icon v-if="isChanged(col, cell)"
|
||||
@click="revertCell(col, cell)"
|
||||
class="fa-undo text-danger pointer"
|
||||
alt="Revert Change" />
|
||||
</td>
|
||||
</template>
|
||||
|
||||
<td class="text-nowrap"><!--
|
||||
Save button
|
||||
--><a href="" :class="['mr-1', 'btn', 'btn-outline-secondary', {'disabled': col._remove}]"
|
||||
v-if="!newTable"
|
||||
@click.prevent="toggleColEditing(col)">
|
||||
<v-icon v-if="col._editing" class="fa-save" alt="Save" />
|
||||
<v-icon v-else class="fa-pencil" alt="Edit" />
|
||||
</a><!--
|
||||
Delete button
|
||||
--><button type="button" :class="delBtnClass(col)"
|
||||
@click.prevent="toggleColDelete(col)">
|
||||
<v-icon v-if="col._remove" class="fa-undo" alt="Undo Remove" />
|
||||
<v-icon v-else class="fa-trash-o" alt="Remove" />
|
||||
</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" />
|
||||
</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" />
|
||||
Add button
|
||||
--><button type="button" :class="['x-add-btn', 'btn', 'btn-outline-secondary']"
|
||||
v-if="i === columns.length - 1"
|
||||
@click.prevent="addCol()">
|
||||
<v-icon class="fa-plus" alt="Add Column" />
|
||||
</button>
|
||||
</span>
|
||||
</td>
|
||||
|
||||
<template v-if="col._editing || newTable">
|
||||
<!-- Editable cells -->
|
||||
<td :style="tdWidthStyle('name')">
|
||||
<input v-model="col.name"
|
||||
class="form-control"
|
||||
type="text">
|
||||
</td>
|
||||
|
||||
<td :style="tdWidthStyle('type')">
|
||||
<select v-model="col.type"
|
||||
class="form-control custom-select">
|
||||
<option v-for="t in colTypes" :value="t">{{t}}</option>
|
||||
</select>
|
||||
</td>
|
||||
|
||||
<td :style="tdWidthStyle('title')">
|
||||
<input v-model="col.title"
|
||||
class="form-control"
|
||||
type="text">
|
||||
</td>
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<!-- Value fields -->
|
||||
<td v-for='cell in ["name", "type", "title"]'>
|
||||
<span class="text-danger strike" title="Original value" v-if="isChanged(col, cell)">{{col._orig[cell]}}</span>
|
||||
<span>{{ col[cell] }}</span>
|
||||
<v-icon v-if="isChanged(col, cell)"
|
||||
@click="revertCell(col, cell)"
|
||||
class="fa-undo text-danger pointer"
|
||||
alt="Revert Change" />
|
||||
</td>
|
||||
</template>
|
||||
|
||||
<td class="text-nowrap"><!--
|
||||
Save button
|
||||
--><a href="" :class="['mr-1', 'btn', 'btn-outline-secondary', {'disabled': col._remove}]"
|
||||
v-if="!newTable"
|
||||
@click.prevent="toggleColEditing(col)">
|
||||
<v-icon v-if="col._editing" class="fa-save" alt="Save" />
|
||||
<v-icon v-else class="fa-pencil" alt="Edit" />
|
||||
</a><!--
|
||||
Delete button
|
||||
--><button type="button" :class="delBtnClass(col)"
|
||||
@click.prevent="toggleColDelete(col)">
|
||||
<v-icon v-if="col._remove" class="fa-undo" alt="Undo Remove" />
|
||||
<v-icon v-else class="fa-trash-o" alt="Remove" />
|
||||
</button><!--
|
||||
Add button
|
||||
--><button type="button" :class="['x-add-btn', 'btn', 'btn-outline-secondary']"
|
||||
v-if="i === columns.length - 1"
|
||||
@click.prevent="addCol()">
|
||||
<v-icon class="fa-plus" alt="Add Column" />
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</transition-group>
|
||||
</table>
|
||||
</tr>
|
||||
</transition-group>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -342,13 +351,17 @@ export default {
|
||||
let n = this.colPos(col)
|
||||
|
||||
if (this.newTable) {
|
||||
if (this.columns.length == 1) return; // can't delete the last col
|
||||
if (this.columns.length == 1) return // can't delete the last col
|
||||
|
||||
// hard delete
|
||||
this.columns.splice(n, 1)
|
||||
} else {
|
||||
let remove = !col._remove
|
||||
|
||||
if (col._new) {
|
||||
if (!confirm(`Delete new column "${col.title}"? Any row data for this column will be lost.`)) return;
|
||||
}
|
||||
|
||||
this.query({
|
||||
action: remove ? 'col.remove' : 'col.restore',
|
||||
id: col.id
|
||||
@@ -398,6 +411,14 @@ export default {
|
||||
|
||||
return {width: `${w}rem`};
|
||||
},
|
||||
|
||||
resetOrder() {
|
||||
this.query({
|
||||
action: 'col.reset-sort'
|
||||
}, (resp) => {
|
||||
this.columns = resp.data;
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -44,7 +44,7 @@ Rows are identified by row._id, columns by col.id
|
||||
</form>
|
||||
|
||||
<button @click="saveAllChanges" type="button"
|
||||
:class="['btn', this.dirtyRows ? 'btn-info' : 'btn-outline-secondary']">
|
||||
:class="['btn', this.dirtyRows ? 'btn-info' : ['btn-outline-secondary', 'disabled']]">
|
||||
Save Rows
|
||||
</button>
|
||||
</div>
|
||||
|
||||
Vendored
+12
@@ -33,3 +33,15 @@
|
||||
.noscript-hide {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.italic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.no-decoration {
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user