hide manual sort buttons

resources/assets/js/components/ColumnEditor.vue

@@ -8,7 +8,7 @@ Complex animated column editor for the table edit page
     <table class="editor-table">
       <thead>
         <tr>
-          <th v-if="doSort"></th>
+          <th v-if="sortable"></th>
           <th>Name</th>
           <th>Type</th>
           <th>Title</th>
@@ -19,17 +19,18 @@ Complex animated column editor for the table edit page
       </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}">
-          <td class="btn-group" v-if="doSort">
-            <button class="btn btn-outline-secondary drag-btn" @mousedown="beginDrag(i, $event)">
+          <td class="btn-group" v-if="sortable">
+            <button type="button" class="btn btn-outline-secondary drag-btn" @mousedown="beginDrag(i, $event)">
               <v-icon class="fa-bars" alt="Drag" />
-            </button>
-            <a href="" :class="['btn', 'btn-outline-secondary', {disabled: i==0}]"
+            </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" />
-            </a><a href="" :class="['btn', 'btn-outline-secondary', {disabled: i == (columns.length-1)}]"
+            </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" />
-            </a>
+            </button>
           </td>
 
           <td>
@@ -58,26 +59,26 @@ Complex animated column editor for the table edit page
           </td>
 
           <td v-if="!newTable">
-            <a href="" :class="['btn', col._dirty ? 'btn-info' : 'btn-outline-secondary']"
+            <button type="button" :class="['btn', col._dirty ? 'btn-info' : 'btn-outline-secondary']"
                @click.prevent="saveCol(i)">
               <v-icon class="fa-save" alt="Save" />
-            </a>
+            </button>
           </td>
 
           <td>
-            <a href="" :class="delBtnClass(col)"
+            <button type="button" :class="delBtnClass(col)"
                @click.prevent="toggleColDelete(i)">
               <v-icon :class="col._remove ? 'fa-undo' :  'fa-trash-o'"
                       :alt="col._remove ? 'Undo Remove' : 'Remove'" />
-            </a>
+            </button>
           </td>
 
           <td>
-            <a href="" :class="['btn', 'btn-outline-secondary']"
+            <button type="button" :class="['btn', 'btn-outline-secondary']"
                v-if="i === columns.length - 1"
                @click.prevent="addCol()">
               <v-icon class="fa-plus" alt="Add Column" />
-            </a>
+            </button>
           </td>
         </tr>
       </transition-group>
@@ -155,11 +156,12 @@ import { query } from './table-editor-utils'
 
 export default {
   props: {
-    route:    { type: String,   default: null },
-    doSort:   { type: Boolean,  default: true },
-    newTable: { type: Boolean,  default: false },
-    name:     { type: String,   required: true },
-    xColumns: { type: Array,    required: true },
+    route:      { type: String,  default: null },
+    sortable:   { type: Boolean, default: true },
+    manualSort: { type: Boolean, default: false },
+    newTable:   { type: Boolean, default: false },
+    name:       { type: String,  required: true },
+    xColumns:   { type: Array,   required: true },
   },
   data: function () {
     return {

resources/views/table/create.blade.php

@@ -81,7 +81,6 @@
         name: 'columns',
         xColumns: {!! old('columns', toJSON($columns)) !!},
         newTable: true,
-        doSort: false,
       })
     });
   </script>