From e3a8616c68c5ef04c60321dc5dff4e1909198340 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ond=C5=99ej=20Hru=C5=A1ka?= <ondra@ondrovo.com>
Date: Fri, 10 Aug 2018 11:03:53 +0200
Subject: [PATCH] better table spacing, bugfix in axios query code

---
 .../assets/js/components/ColumnEditor.vue     | 29 ++++++++-----------
 resources/assets/js/components/RowsEditor.vue | 14 ++++-----
 .../js/components/table-editor-utils.js       |  3 +-
 3 files changed, 19 insertions(+), 27 deletions(-)

diff --git a/resources/assets/js/components/ColumnEditor.vue b/resources/assets/js/components/ColumnEditor.vue
index bc8de13..f91217d 100644
--- a/resources/assets/js/components/ColumnEditor.vue
+++ b/resources/assets/js/components/ColumnEditor.vue
@@ -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',
diff --git a/resources/assets/js/components/RowsEditor.vue b/resources/assets/js/components/RowsEditor.vue
index e1896ec..5ef9b95 100644
--- a/resources/assets/js/components/RowsEditor.vue
+++ b/resources/assets/js/components/RowsEditor.vue
@@ -13,23 +13,20 @@ 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}]"
-             @click.prevent="toggleRowEditing(row._id)">
+          </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>
@@ -53,7 +50,6 @@ Rows are identified by row._id, columns by col.id
                     alt="Revert Change" />
           </td>
         </template>
-
       </tr>
     </tbody>
   </table>
diff --git a/resources/assets/js/components/table-editor-utils.js b/resources/assets/js/components/table-editor-utils.js
index d806608..8814948 100644
--- a/resources/assets/js/components/table-editor-utils.js
+++ b/resources/assets/js/components/table-editor-utils.js
@@ -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)