MightyPork/datatable.directory
1
0
Fork 1
Code Issues 25 Pull Requests Releases Wiki Activity

UX improvements in table editor

Browse Source
This commit is contained in:
MightyPork
2018-08-10 18:11:34 +02:00
parent c642774316
commit 1e183f5059
24 changed files with 654 additions and 405 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/assets/fa-config/wanted.ini
+12 -6
View File
@@ -38,20 +38,26 @@ download # export buttons
wrench # Table options
trash-o
plus
warning
undo
plus # Add column in table editor
warning # validation fail icon
undo # Used in table editor
close
hourglass
spinner
paper-plane-o # save proposal
# dark mode
sun-o
moon-o
# manual sort buttons
chevron-up
chevron-down
bars
bars # sort icon
file-excel-o # CSV button
reply # reply, or back
arrow-left # back
# Unused
; sliders
resources/assets/js/components/ColumnEditor.vue
+1 -1
View File
@@ -5,7 +5,7 @@ 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},'table-narrow','table-sm','table-fixed','td-va-middle']">
<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>
resources/assets/js/components/RowsEditor.vue
+174 -46
View File
@@ -10,49 +10,95 @@ Rows are identified by row._id, columns by col.id
-->
<template>
<table class="table table-hover table-sm table-fixed td-va-middle">
<thead>
<tr>
<th style="width:6rem"></th>
<th v-for="col in columns" :class="colClasses(col)" :title="col.name">{{col.title}}</th>
</tr>
</thead>
<tbody>
<tr v-for="row in rows" :style="rowStyle(row)">
<td>
<a href="" :class="['mr-1','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><!--
--><a href="" :class="['btn','btn-outline-secondary',{'disabled': row._remove}]"
@click.prevent="toggleRowEditing(row._id)">
<v-icon :class="row._editing ? 'fa-save' : 'fa-pencil'"
:alt="row._editing ? 'Save' : 'Edit'" />
</a>
</td>
<div>
<div class="col-md-12 d-flex mt-3" v-if="newRows || hasPages">
<div v-if="hasPages" v-html="pager"></div>
<template v-if="row._editing">
<td v-for="col in columns" class="pr-0">
<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)">
</td>
</template>
<div class="flex-grow-1"></div>
<template v-else>
<td v-for="col in columns">
<span class="text-danger strike" title="Original value" v-if="isChanged(row, col.id)">{{row._orig[col.id]}}</span>
<span>{{ row[col.id] }}</span>
<v-icon v-if="isChanged(row, col.id)"
@click="revertCell(row, col.id)"
class="fa-undo text-danger pointer"
alt="Revert Change" />
</td>
</template>
</tr>
</tbody>
</table>
<form :action="route" method="POST" v-if="newRows" class="form-inline mr-2">
<input type="hidden" name="_token" :value="csrf">
<input type="hidden" name="action" value="rows.add">
<input type="hidden" name="redirect" :value="pageUrl">
<input name="count" id="newrow-count" type="number"
min=1 step=1 value=1 class="form-control mr-1" style="width: 10em">
<button class="btn btn-outline-success">Add Rows</button>
</form>
<a href="" class="btn btn-outline-success mr-2" v-if="newRows">
<v-icon class="fa-file-excel-o fa-pr" alt="CSV"></v-icon><!--
-->CSV
</a>
<form :action="route" method="POST" v-if="newRows" class="form-inline mr-2">
<input type="hidden" name="_token" :value="csrf">
<input type="hidden" name="action" value="rows.remove-empty-new">
<input type="hidden" name="redirect" :value="pageUrl">
<button class="btn btn-outline-danger">Remove Empty</button>
</form>
<button @click="saveAllChanges" type="button" v-if="newRows"
:class="['btn', this.dirtyRows ? 'btn-info' : 'btn-outline-secondary']">
Save Rows
</button>
</div>
<div class="col-md-12 mt-3">
<table class="table table-hover table-sm table-fixed td-va-middle">
<thead>
<tr>
<th style="width:6rem"></th>
<th v-for="col in columns" :class="colClasses(col)" :title="col.name">{{col.title}}</th>
</tr>
</thead>
<tbody>
<tr v-for="row in rows" :style="rowStyle(row)">
<td class="text-nowrap">
<button :class="['mr-1', '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'" />
</button><!--
--><button v-if="newRows" :class="['mr-1', 'btn', isRowChanged(row) ? 'btn-info' : 'btn-outline-secondary']"
@click.prevent="submitRowChange(row)">
<v-icon class="fa-save" alt="Save" />
</button><!--
--><button v-else :class="['btn', 'btn-outline-secondary', {'disabled': row._remove}]"
@click.prevent="toggleRowEditing(row._id)">
<v-icon :class="row._editing ? 'fa-save' : 'fa-pencil'"
:alt="row._editing ? 'Save' : 'Edit'" />
</button>
</td>
<template v-if="row._editing || newRows">
<td v-for="col in columns" class="pr-0">
<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"
@input="markRowDirty(row)"
@keyup.enter="toggleRowEditing(row._id)">
</td>
</template>
<template v-else>
<td v-for="col in columns">
<span class="text-danger strike" title="Original value" v-if="isChanged(row, col.id)">{{row._orig[col.id]}}</span>
<span>{{ row[col.id] }}</span>
<v-icon v-if="isChanged(row, col.id)"
@click="revertCell(row, col.id)"
class="fa-undo text-danger pointer"
alt="Revert Change" />
</td>
</template>
</tr>
</tbody>
</table>
</div>
<div class="col-md-12 d-flex" v-if="hasPages">
<div v-if="hasPages" v-html="pager"></div>
</div>
</div>
</template>
<style lang="scss" scoped>
@@ -61,7 +107,6 @@ Rows are identified by row._id, columns by col.id
th {
border-top: 0 none;
}
</style>
<script>
@@ -69,13 +114,43 @@ Rows are identified by row._id, columns by col.id
export default {
props: {
/** True if pager should be enabled */
hasPages: Boolean,
/** Pager HTML */
pager: String,
/** Update route */
route: String,
/** Row objects */
xRows: Object, // key'd by _id
/** Array of columns */
columns: Array,
/** CSRF token */
csrf: String,
/** Full URL of the current page */
pageUrl: String,
/** Indicate this is the Add Rows page */
newRows: {
type: Boolean,
default: false,
}
},
data () {
return {
/** All rows */
rows: this.xRows,
/** Number of dirty rows */
dirtyRows: 0,
}
},
watch: {
dirtyRows: function (value) {
if (value > 0) {
$(window).on('beforeunload', function () {
return 'Some row changes are not saved.';
});
} else {
$(window).off('beforeunload');
}
}
},
methods: {
@@ -86,14 +161,18 @@ Rows are identified by row._id, columns by col.id
/** Toggle row delete status, remove new rows (when using the editor widget for added rows) */
toggleRowDelete (_id) {
if (!_.isDefined(this.rows[_id])) return
let row = this.rows[_id]
if (!_.isDefined(row)) return
let remove = !this.rows[_id]._remove
let remove = !row._remove
let wasDirty = this.isRowChanged(row)
this.query({
action: remove ? 'row.remove' : 'row.restore',
id: _id
}, (resp) => {
if (wasDirty) this.dirtyRows--
// if response is null, this was a New row
// and it was discarded without a way back - hard drop
if (_.isEmpty(resp.data)) {
@@ -107,11 +186,14 @@ Rows are identified by row._id, columns by col.id
/** Save a change */
submitRowChange (row) {
let wasDirty = this.isRowChanged(row)
this.query({
action: 'row.update',
data: row
}, (resp) => {
this.$set(this.rows, row._id, resp.data)
if (wasDirty) this.dirtyRows--
}, (er) => {
if (!_.isUndefined(er.errors)) {
this.$set(this.rows[row._id], '_errors', er.errors)
@@ -122,9 +204,9 @@ Rows are identified by row._id, columns by col.id
/** Toggle editing state - edit or save */
toggleRowEditing (_id) {
if (this.rows[_id]._remove) return false // can't edit row marked for removal
let editing = !this.rows[_id]._editing
let wasEditing = this.rows[_id]._editing
if (!editing) {
if (wasEditing || this.newRows) {
this.submitRowChange(this.rows[_id])
} else {
this.$set(this.rows[_id], '_editing', true)
@@ -155,9 +237,55 @@ Rows are identified by row._id, columns by col.id
return row._changed && row._changed.indexOf(colId) > -1
},
/** Test if any field in the row is changed */
isRowChanged(row) {
return row._changed && row._changed.length
},
/** Revert a value cell */
revertCell (row, colId) {
this.submitRowChange(_.merge({}, row, {[colId]: row._orig[colId]}))
},
markRowDirty(row) {
if (!this.newRows) return
let wasDirty = this.isRowChanged(row)
let changes = []
_.each(row._orig, (v, k) => {
if (row[k] != v) {
changes.push(k)
}
})
this.rows[row._id]._changed = changes;
let isDirty = this.isRowChanged(row)
if (wasDirty && !isDirty) this.dirtyRows--
else if (!wasDirty && isDirty) this.dirtyRows++
},
saveAllChanges() {
let toChange = _.filter(this.rows, (r) => {
return this.isRowChanged(r)
})
this.query({
action: 'row.update-many',
data: toChange
}, (resp) => {
_.each(resp.data, (row) => {
this.$set(this.rows, row._id, row)
})
this.dirtyRows = 0
}, (er) => {
// TODO
console.log(er)
// if (!_.isUndefined(er.errors)) {
// this.$set(this.rows[row._id], '_errors', er.errors)
// }
})
}
}
}
resources/assets/js/udash.js
Vendored
+1
View File
@@ -6,6 +6,7 @@ export { default as merge } from 'lodash/merge'
export { default as unset } from 'lodash/unset'
export { default as isEmpty } from 'lodash/isEmpty'
export { default as debounce } from 'lodash/debounce'
export { default as filter } from 'lodash/filter'
function isDefined (x) {
return typeof x !== 'undefined'
resources/assets/js/vue-init.js
Vendored
+3 -3
View File
@@ -10,12 +10,12 @@ const Icon = Vue.component('v-icon', require('./components/Icon.vue'))
window.app = {
ColumnEditor: function (selector, data) {
new ColumnEditor({ propsData: data }).$mount(selector)
return new ColumnEditor({ propsData: data }).$mount(selector)
},
RowsEditor: function (selector, data) {
new RowsEditor({ propsData: data }).$mount(selector)
return new RowsEditor({ propsData: data }).$mount(selector)
},
Icon: function (selector, data) {
new Icon({ propsData: data }).$mount(selector)
return new Icon({ propsData: data }).$mount(selector)
}
}
resources/assets/sass/_fa-utils.scss
Vendored
+13
View File
@@ -34,3 +34,16 @@
.fa-huge {
font-size: 2em;
}
.fa-spin::before {
animation: fa-spin 2s infinite linear;
}
@keyframes fa-spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
}
}
resources/assets/sass/bootstrap-customizations/_nav.scss
Vendored
+7
View File
@@ -0,0 +1,7 @@
.nav-tabs .nav-link.highlight {
border-color: $nav-tabs-link-hover-border-color;
&:hover, &:focus {
border-color: $nav-tabs-link-hover-border-color;
}
}
resources/views/table/conf.blade.php
+1 -1
View File
@@ -18,7 +18,7 @@
<h1 class="mx-3">{{ $table->title }}</h1>
<a href="{{ $table->viewRoute }}" class="btn btn-outline-primary py-1 btn-sm" @tooltip(Back to Table)>
@icon(fa-table, sr:Back to Table)
@icon(fa-reply, sr:Back to Table)
</a>
</div>
</div>
resources/views/table/propose/add-rows-csv.blade.php
+27
View File
@@ -0,0 +1,27 @@
@php
$tab = 'add-rows';
/** @var \App\Tables\Column[] $columns */
/** @var \App\Tables\Changeset $changeset */
/** @var \App\Models\Row[]|Illuminate\Pagination\Paginator $rows */
/** @var \App\Models\Table $table */
@endphp
@extends('table.propose.layout')
@section('tab-content')
<div class="form-inline py-2 px-1">
<form action="{{$table->draftUpdateRoute}}" method="POST" class="form-inline">
@csrf
<input type="hidden" name="action" value="rows.add-csv">
<input type="hidden" name="redirect" value="{{request()->fullUrl()}}">
<label class="pr-2" for="csv-data">Add CSV:</label>
<textarea name="data" id="csv-data"
title="{{$errors->has('data') ? $errors->first('data') : ''}}"
class="form-control mr-1 {{ $errors->has('data')?'is-invalid':'' }}"
style="width:30em; height:10em">{{old('data')}}</textarea>
<button class="btn btn-outline-success">Append</button>
</form>
</div>
@stop
@push('scripts')
@endpush
resources/views/table/propose/add-rows.blade.php
+21 -30
View File
@@ -7,45 +7,36 @@
@endphp
@extends('table.propose.layout-row-pagination')
@section('header')
<div class="form-inline py-2 px-1 border-bottom mb-3">
{{-- TODO improve layout --}}
<form action="{{$table->draftUpdateRoute}}" method="POST" class="form-inline">
@csrf
<input type="hidden" name="action" value="rows.add-csv">
<input type="hidden" name="redirect" value="{{request()->fullUrl()}}">
<label class="pr-2" for="csv-data">Add CSV:</label>
<textarea name="data" id="csv-data"
title="{{$errors->has('data') ? $errors->first('data') : ''}}"
class="form-control mr-1 {{ $errors->has('data')?'is-invalid':'' }}"
style="width:30em; height:10em">{{old('data')}}</textarea>
<button class="btn btn-outline-success">Append</button>
</form>
<div class="flex-grow-1"></div>
<form action="{{$table->draftUpdateRoute}}" method="POST">
@csrf
<input type="hidden" name="action" value="rows.add">
<input type="hidden" name="redirect" value="{{request()->fullUrl()}}">
<label class="form-inline pr-2" for="newrow-count">Add Empty Rows:</label>
<input name="count" id="newrow-count" type="number" min=1 step=1 value=1 class="form-control mr-1" style="width:10em">
<button class="btn btn-outline-success">Add</button>
</form>
</div>
@stop
@section('rows')
<div id="rows-editor"></div>
@stop
@push('scripts')
@php
$xrows = $rows->map(function($r) {
$r['_orig'] = $r;
return $r;
})->keyBy('_id');
@endphp
<script>
ready(function() {
app.RowsEditor('#rows-editor', {
var rows_editor = app.RowsEditor('#rows-editor', {
hasPages: @json($rows->hasPages()),
pager:
'<nav class="text-center" aria-label="Table pages">' +
@json((string)$rows->links(null, ['ulClass' => 'mb-0'])) +
'</nav>',
route: {!! toJSON($table->draftUpdateRoute) !!},
columns: {!! toJSON($columns) !!},
xRows: {!! toJSON($rows->keyBy('_id'), true) !!},
xRows: {!! toJSON($xrows, true) !!},
newRows: true, // indicate all are new
pageUrl: @json(request()->fullUrl()),
csrf: @json(csrf_token()),
})
$('#save-all-rows').on('click', function () {
rows_editor.saveAllChanges()
})
});
</script>
resources/views/table/propose/edit-rows.blade.php
+5
View File
@@ -23,6 +23,11 @@
<script>
ready(function() {
app.RowsEditor('#rows-editor', {
hasPages: @json($rows->hasPages()),
pager:
'<nav class="text-center" aria-label="Table pages">' +
@json((string)$rows->links(null, ['ulClass' => 'mb-0'])) +
'</nav>',
route: {!! toJSON($table->draftUpdateRoute) !!},
columns: {!! toJSON($columns) !!},
xRows: {!! toJSON($transformed, true) !!},
resources/views/table/propose/layout-row-pagination.blade.php
+1 -19
View File
@@ -9,23 +9,5 @@
@yield('header')
</div>
@if($rows->hasPages())
<div class="col-md-12 d-flex">
<nav class="text-center" aria-label="Pages of the table">
{{ $rows->links(null, ['ulClass' => 'mb-0']) }}
</nav>
</div>
@endif
<div class="col-12">
@yield('rows')
</div>
@if($rows->hasPages())
<div class="col-md-12 d-flex">
<nav class="text-center" aria-label="Pages of the table">
{{ $rows->links(null, ['ulClass' => 'mb-0']) }}
</nav>
</div>
@endif
@yield('rows')
@stop
resources/views/table/propose/layout.blade.php
+26 -17
View File
@@ -20,36 +20,45 @@ if (!isset($tab) || $tab == '') $tab = 'edit-rows';
<h1 class="mx-3">
<a href="{{ $table->viewRoute }}" class="link-no-color">{{ $table->title }}</a>
</h1>
<a href="{{$table->draftDiscardRoute}}" class="btn btn-outline-danger mr-2" @tooltip(Discard changes)>
@icon(fa-trash-o, sr:Discard)
<a href="{{$table->draftDiscardRoute}}" class="btn btn-outline-danger mr-2 py-1 btn-sm">
@icon(fa-trash-o fa-pr, sr:Discard){{--
--}}Discard
</a>
<a href="{{ $table->viewRoute }}" class="btn btn-outline-primary py-1 btn-sm" @tooltip(Back to Table)>
@icon(fa-reply, sr:Back to Table)
</a>
@if(user()->ownsTable($table))
<a href="" class="btn btn-outline-success" @tooltip(Save the changes and apply them as a new table revision)>
@icon(fa-save fa-pr)Commit
</a>
@else
<a href="" class="btn btn-outline-success" @tooltip(Submit your changes for review by the table owner)>
@icon(fa-save fa-pr)Submit
</a>
@endif
</div>
</div>
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link{{ $tab=='edit-rows'?' active':'' }}" href="{{ $table->getDraftRoute('edit-rows') }}">Edit Rows</a>
<a class="nav-link {{ $tab=='edit-rows' ? 'active' : '' }}" href="{{ $table->getDraftRoute('edit-rows') }}">
Edit Rows
</a>
</li>
<li class="nav-item">
<a class="nav-link{{ $tab=='add-rows'?' active':'' }}" href="{{ $table->getDraftRoute('add-rows') }}">Add Rows</a>
<a class="nav-link {{ $tab=='add-rows' ? 'active' : '' }}" href="{{ $table->getDraftRoute('add-rows') }}">
Add Rows
</a>
</li>
<li class="nav-item">
<a class="nav-link{{ $tab=='manage-columns'?' active':'' }}" href="{{ $table->getDraftRoute('manage-columns') }}">Columns</a>
<a class="nav-link {{ $tab=='manage-columns' ? 'active' : '' }}" href="{{ $table->getDraftRoute('manage-columns') }}">
Change Columns
</a>
</li>
<li class="nav-item">
<a class="nav-link{{ $tab=='review'?' active':'' }}" href="{{ $table->getDraftRoute('review') }}">Note & Review</a>
<a class="text-success nav-link {{ $tab=='review' ? 'active' : '' }}" href="{{ $table->getDraftRoute('review') }}">
@if(user()->ownsTable($table))
@icon(fa-save fa-pr){{--
--}}Review & Apply
@else
@icon(fa-paper-plane-o fa-pr){{--
--}}Review & Submit
@endif
</a>
</li>
<li class="nav-item ml-auto pt-2 pr-2 opacity-fade" style="opacity:0" id="draft-busy">
@icon(fa-hourglass, Working...)
<li class="nav-item pt-2 pr-2 opacity-fade ml-auto" style="opacity:0" id="draft-busy">
@icon(fa-spinner fa-spin, Working...)
</li>
</ul>
resources/views/table/propose/review.blade.php
+9 -1
View File
@@ -2,5 +2,13 @@
@extends('table.propose.layout')
@section('tab-content')
...
@if(user()->ownsTable($table))
<a href="" class="btn btn-outline-success" @tooltip(Save the changes and apply them as a new table revision)>
@icon(fa-save fa-pr)Commit
</a>
@else
<a href="" class="btn btn-outline-success" @tooltip(Submit your changes for review by the table owner)>
@icon(fa-save fa-pr)Submit
</a>
@endif
@stop