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;
|
||||
}
|
||||
|
||||
@@ -48,13 +48,7 @@ if (!isset($tab) || $tab == '') $tab = 'edit-rows';
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<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
|
||||
@icon(fa-save fa-pr)Review & Confirm
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item pt-2 pr-2 opacity-fade ml-auto" style="opacity:0" id="draft-busy">
|
||||
|
||||
@@ -1,14 +1,111 @@
|
||||
@php($tab='review')
|
||||
@php
|
||||
$tab = 'review';
|
||||
/** @var \App\Tables\Changeset $changeset */
|
||||
/** @var \App\Models\Table $table */
|
||||
|
||||
$numChangedRows = count($changeset->rowUpdates);
|
||||
$numNewRows = count($changeset->newRows);
|
||||
$numRemovedRows = count($changeset->removedRows);
|
||||
|
||||
$anyRowChanges = $numChangedRows || $numNewRows || $numRemovedRows;
|
||||
|
||||
$numChangedColumns = count($changeset->columnUpdates);
|
||||
$numNewColumns = count($changeset->newColumns);
|
||||
$numRemovedColumns = count($changeset->removedColumns);
|
||||
$colsReordered = !empty($changeset->columnOrder);
|
||||
|
||||
$anyColChanges = $numChangedColumns || $numNewColumns || $numRemovedColumns || $colsReordered;
|
||||
|
||||
$anyChanges = $anyRowChanges || $anyColChanges;
|
||||
@endphp
|
||||
|
||||
@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
|
||||
<div class="my-3 col-md-12">
|
||||
<div class="mx-3">
|
||||
|
||||
<?php Widget::setLayout(3,7) ?>
|
||||
|
||||
{!! Widget::header(3, 'Change Summary') !!}
|
||||
|
||||
<div class="row border-bottom border-top py-3">
|
||||
<div class="col-md-3 text-right">
|
||||
Rows
|
||||
</div>
|
||||
<div class="col-md-7">
|
||||
@if($anyRowChanges)
|
||||
|
||||
@if($numChangedRows)
|
||||
<div class="text-info"><b>{{ $numChangedRows }}</b> changed</div>
|
||||
@endif
|
||||
|
||||
@if($numNewRows)
|
||||
<div class="text-success"><b>{{ $numNewRows }}</b> new</div>
|
||||
@endif
|
||||
|
||||
@if($numRemovedRows)
|
||||
<div class="text-danger"><b>{{ $numRemovedRows }}</b> removed</div>
|
||||
@endif
|
||||
|
||||
@else
|
||||
<span class="text-muted">No changes</span>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row border-bottom py-3 mb-3">
|
||||
<div class="col-md-3 text-right">
|
||||
Columns
|
||||
</div>
|
||||
<div class="col-md-7">
|
||||
@if($anyColChanges)
|
||||
|
||||
@if($numChangedColumns)
|
||||
<div class="text-info"><b>{{ $numChangedColumns }}</b> changed</div>
|
||||
@endif
|
||||
|
||||
@if($numNewColumns)
|
||||
<div class="text-success"><b>{{ $numNewColumns }}</b> new</div>
|
||||
@endif
|
||||
|
||||
@if($numRemovedColumns)
|
||||
<div class="text-danger"><b>{{ $numRemovedColumns }}</b> removed</div>
|
||||
@endif
|
||||
|
||||
@if($colsReordered)
|
||||
<div class="text-info">Order changed</div>
|
||||
@endif
|
||||
|
||||
@else
|
||||
<span class="text-muted">No changes</span>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{!! Widget::textarea('note', 'Summary')->value($changeset->note)
|
||||
->help(user()->ownsTable($table) ?
|
||||
"Describe changes you made to the table; this message will annotate the
|
||||
new table revision." :
|
||||
"Describe you suggested changes. The table owner will read this message
|
||||
and review your changes before deciding whether to accept the proposal."
|
||||
)->minHeight('8em')
|
||||
!!}
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-7 offset-md-3">
|
||||
@if(user()->ownsTable($table))
|
||||
<a href="" class="btn btn-outline-success {{$anyChanges?'':'disabled'}}">
|
||||
@icon(fa-save fa-pr)Save & Apply
|
||||
</a>
|
||||
@else
|
||||
<a href="" class="btn btn-outline-success {{$anyChanges?'':'disabled'}}">
|
||||
@icon(fa-paper-plane-o fa-pr)Submit for review
|
||||
</a>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@stop
|
||||
|
||||
Reference in New Issue
Block a user