datatable.directory codebase
https://datatable.directory/
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
161 lines
4.3 KiB
161 lines
4.3 KiB
6 years ago
|
<template>
|
||
|
<table class="table table-hover table-sm table-fixed td-va-middle">
|
||
|
<thead>
|
||
|
<tr>
|
||
|
<th style="width:3rem" class="border-top-0"></th>
|
||
|
<th style="width:3rem" class="border-top-0"></th>
|
||
6 years ago
|
<th v-for="col in columns" :class="colClasses(col)" :title="col.name">{{col.title}}</th>
|
||
6 years ago
|
</tr>
|
||
|
</thead>
|
||
|
<tbody>
|
||
|
<tr v-for="row in rows" :style="rowStyle(row)">
|
||
|
<td>
|
||
|
<a href="" :class="['btn','btn-outline-danger',{'active': row._remove}]"
|
||
|
@click.prevent="toggleRowDelete(row._id)">
|
||
|
<v-icon :class="row._remove ? 'fa-undo' : 'fa-trash-o'"
|
||
|
:alt="row._remove ? 'Undo Remove' : 'Remove'" />
|
||
|
</a>
|
||
|
</td>
|
||
|
<td>
|
||
6 years ago
|
<a href="" :class="['btn','btn-outline-secondary',{'disabled': row._remove}]"
|
||
6 years ago
|
@click.prevent="toggleRowEditing(row._id)">
|
||
|
<v-icon :class="row._editing ? 'fa-save' : 'fa-pencil'"
|
||
|
:alt="row._editing ? 'Save' : 'Edit'" />
|
||
|
</a>
|
||
|
</td>
|
||
|
|
||
|
<template v-if="row._editing">
|
||
|
<td v-for="col in columns" class="pr-0">
|
||
6 years ago
|
<input v-model="row[col.id]" :class="['form-control', { 'is-invalid': row._errors && row._errors[col.id] }]"
|
||
|
:title="(row._errors && row._errors[col.id]) ? row._errors[col.id][0] : null"
|
||
|
type="text" @keyup.enter="toggleRowEditing(row._id)">
|
||
6 years ago
|
</td>
|
||
|
</template>
|
||
|
|
||
|
<template v-else>
|
||
|
<td v-for="col in columns">
|
||
6 years ago
|
<span class="text-danger strike" title="Original value" v-if="isChanged(row, col.id)">{{row._orig[col.id]}}</span>
|
||
6 years ago
|
<span>{{ row[col.id] }}</span>
|
||
6 years ago
|
<v-icon v-if="isChanged(row, col.id)"
|
||
|
@click="revertCell(row, col.id)"
|
||
|
class="fa-undo text-danger pointer"
|
||
|
alt="Revert Change" />
|
||
6 years ago
|
</td>
|
||
|
</template>
|
||
|
|
||
|
</tr>
|
||
|
</tbody>
|
||
|
</table>
|
||
|
</template>
|
||
|
|
||
|
<style lang="scss" scoped>
|
||
|
@import "base";
|
||
|
|
||
|
</style>
|
||
|
|
||
|
<script>
|
||
|
export default {
|
||
|
props: {
|
||
|
route: String,
|
||
|
xRows: Object, // key'd by _id
|
||
|
columns: Array,
|
||
6 years ago
|
lastPage: Boolean,
|
||
6 years ago
|
},
|
||
|
data: function() {
|
||
|
return {
|
||
|
rows: this.xRows,
|
||
|
}
|
||
|
},
|
||
|
methods: {
|
||
6 years ago
|
busy (yes) {
|
||
|
$('#draft-busy').css('opacity', yes ? 1 : 0)
|
||
|
},
|
||
6 years ago
|
|
||
6 years ago
|
query (data, sucfn, erfn) {
|
||
6 years ago
|
this.busy(true)
|
||
|
if (!sucfn) sucfn = ()=>{}
|
||
6 years ago
|
if (!sucfn) erfn = ()=>{}
|
||
|
window.axios.post(this.route, data).then(sucfn).catch((error) => {
|
||
|
console.error(error.message)
|
||
|
erfn(error.response.data)
|
||
6 years ago
|
}).then(() => {
|
||
|
this.busy(false)
|
||
|
})
|
||
|
},
|
||
6 years ago
|
|
||
6 years ago
|
toggleRowDelete(_id) {
|
||
6 years ago
|
if (!_.isDefined(this.rows[_id])) return;
|
||
|
|
||
6 years ago
|
let remove = !this.rows[_id]._remove
|
||
6 years ago
|
|
||
|
this.query({
|
||
|
action: remove ? 'row.remove' : 'row.restore',
|
||
|
id: _id
|
||
|
}, (resp) => {
|
||
6 years ago
|
// if response is null, this was a New row
|
||
|
// and it was discarded without a way back - hard drop
|
||
|
if (_.isEmpty(resp.data)) {
|
||
|
this.$delete(this.rows, _id)
|
||
|
}
|
||
|
else {
|
||
|
this.$set(this.rows, _id, resp.data)
|
||
|
}
|
||
6 years ago
|
})
|
||
|
},
|
||
6 years ago
|
|
||
6 years ago
|
submitRowChange(row) {
|
||
|
this.query({
|
||
|
action: 'row.update',
|
||
|
data: row
|
||
|
}, (resp) => {
|
||
|
this.$set(this.rows, resp.data._id, resp.data);
|
||
6 years ago
|
}, (er) => {
|
||
|
if (!_.isUndefined(er.errors)) {
|
||
|
this.$set(this.rows[row._id], '_errors', er.errors);
|
||
|
}
|
||
6 years ago
|
})
|
||
6 years ago
|
},
|
||
6 years ago
|
|
||
6 years ago
|
toggleRowEditing(_id) {
|
||
6 years ago
|
if (this.rows[_id]._remove) return false; // can't edit row marked for removal
|
||
|
|
||
6 years ago
|
let editing = !this.rows[_id]._editing
|
||
6 years ago
|
|
||
|
if (!editing) {
|
||
6 years ago
|
this.submitRowChange(this.rows[_id])
|
||
6 years ago
|
} else {
|
||
|
this.$set(this.rows[_id], '_editing', true);
|
||
|
}
|
||
6 years ago
|
},
|
||
6 years ago
|
|
||
6 years ago
|
colClasses(col) {
|
||
|
return [
|
||
|
'border-top-0',
|
||
|
{
|
||
|
'text-danger': col._remove,
|
||
|
'strike': col._remove,
|
||
|
'text-success': col._new
|
||
|
}
|
||
|
]
|
||
|
},
|
||
6 years ago
|
|
||
6 years ago
|
rowStyle(row) {
|
||
|
return {
|
||
6 years ago
|
opacity: row._remove ? .8 : 1,
|
||
|
backgroundColor:
|
||
|
row._remove ? '#FFC4CC':
|
||
|
'transparent'
|
||
6 years ago
|
}
|
||
|
},
|
||
6 years ago
|
|
||
6 years ago
|
isChanged (row, colId) {
|
||
6 years ago
|
return row._changed && row._changed.indexOf(colId) > -1
|
||
6 years ago
|
},
|
||
6 years ago
|
|
||
6 years ago
|
revertCell(row, colId) {
|
||
6 years ago
|
this.submitRowChange(_.merge({}, row, { [colId]: row._orig[colId] }))
|
||
6 years ago
|
}
|
||
6 years ago
|
}
|
||
|
}
|
||
|
</script>
|