better table spacing, bugfix in axios query code

pull/35/head
Ondřej Hruška 6 years ago
parent 81261aba8b
commit e3a8616c68
Signed by: MightyPork
GPG Key ID: 2C5FD5035250423D
  1. 29
      resources/assets/js/components/ColumnEditor.vue
  2. 12
      resources/assets/js/components/RowsEditor.vue
  3. 3
      resources/assets/js/components/table-editor-utils.js

@ -12,8 +12,6 @@ Complex animated column editor for the table edit page
<th :style="tdWidthStyle('name')">Name</th>
<th :style="tdWidthStyle('type')">Type</th>
<th :style="tdWidthStyle('title')">Title</th>
<th v-if="!newTable"></th>
<th></th>
<th></th>
</tr>
</thead>
@ -74,27 +72,22 @@ Complex animated column editor for the table edit page
</td>
</template>
<td v-if="!newTable">
<!-- Save button -->
<a href="" :class="['btn','btn-outline-secondary',{'disabled': col._remove}]"
<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 :class="col._editing ? 'fa-save' : 'fa-pencil'"
:alt="col._editing ? 'Save' : 'Edit'" />
</a>
</td>
<td>
<!-- Delete button -->
<button type="button" :class="delBtnClass(col)"
</a><!--
Delete button
--><button type="button" :class="delBtnClass(col)"
@click.prevent="toggleColDelete(col)">
<v-icon :class="col._remove ? 'fa-undo' : 'fa-trash-o'"
:alt="col._remove ? 'Undo Remove' : 'Remove'" />
</button>
</td>
<td>
<!-- Add button -->
<button type="button" :class="['btn', 'btn-outline-secondary']"
</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" />
@ -151,6 +144,7 @@ Complex animated column editor for the table edit page
// approximate position of delete button
clip-path: circle(calc(100% + 5em) at calc(100% - 4em) 50%);
}
.col-list-leave-active .delete-btn {
animation: col-list-leave-delete-btn .3s forwards;
}
@ -312,6 +306,7 @@ export default {
/** Compute classes for the column's delete button */
delBtnClass(col) {
return [
'mr-1',
'btn',
'btn-outline-danger',
'delete-btn',

@ -13,22 +13,19 @@ Rows are identified by row._id, columns by col.id
<table class="table table-hover table-sm table-fixed td-va-middle">
<thead>
<tr>
<th style="width:3rem"></th>
<th style="width:3rem"></th>
<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="['btn','btn-outline-danger',{'active': row._remove}]"
<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>
</td>
<td>
<a href="" :class="['btn','btn-outline-secondary',{'disabled': row._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'" />
@ -53,7 +50,6 @@ Rows are identified by row._id, columns by col.id
alt="Revert Change" />
</td>
</template>
</tr>
</tbody>
</table>

@ -5,7 +5,8 @@ function busy (yes) {
function query (route, data, sucfn, erfn) {
busy(true)
if (!sucfn) sucfn = () => {}
if (!sucfn) erfn = () => {}
if (!erfn) erfn = () => {}
window.axios.post(route, data).then(sucfn).catch((error) => {
console.error(error.message)
erfn(error.response.data)

Loading…
Cancel
Save