new table shizz

src/TableManager.vue

@@ -8,10 +8,13 @@ import DataTable from 'primevue/datatable'
 import Column from 'primevue/column'
 import Card from 'primevue/card'
 import SplitButton from 'primevue/splitbutton'
+import ConfirmDialog from 'primevue/confirmdialog'
+import { useConfirm } from 'primevue/useconfirm'
 
 const route = useRouter()
 const allTables = ref()
 const activeTables = ref()
+const confirm = useConfirm()
 
 onMounted(() => {
   activeTables.value = [
@@ -26,37 +29,51 @@ onMounted(() => {
 })
 
 function startTable(tableId: number) {
-  const start = axios.post(`http://localhost/api/tables/${tableId}:start`)
-  start
+  axios.post(`http://localhost/api/tables/${tableId}:start`)
     .then((resp) => axios.get('http://localhost/api/tables/all'))
     .then((resp) => (allTables.value = resp.data))
-  start
     .then((resp) => axios.get('http://localhost/api/tables/active'))
     .then((resp) => (activeTables.value = resp.data))
 }
 
 function stopTable(tableId: number) {
-  const stop = axios.post(`http://localhost/api/tables/${tableId}:stop`)
-  stop
+  axios.post(`http://localhost/api/tables/${tableId}:stop`)
     .then((resp) => axios.get('http://localhost/api/tables/all'))
     .then((resp) => (allTables.value = resp.data))
-  stop
     .then((resp) => axios.get('http://localhost/api/tables/active'))
     .then((resp) => (activeTables.value = resp.data))
 }
 
-function buildButtonModel(id: number) {
+function deleteTable(tableId: number) {
+  axios
+    .delete(`http://localhost/api/tables/${tableId}`)
+    .then((resp) => axios.get('http://localhost/api/tables/active'))
+    .then((resp) => (activeTables.value = resp.data))
+    .then((resp) => axios.get('http://localhost/api/tables/all'))
+    .then((resp) => (allTables.value = resp.data))
+}
+
+function buildButtonModel(table) {
   return [
     {
       label: 'Edit',
       command: () => {
-        route.push({ name: 'edit', params: { id: id } })
+        route.push({ name: 'edit', params: { id: table.id } })
       },
     },
     { label: 'Restart' },
     { label: 'Force Stop' },
     { separator: true },
-    { label: 'Delete' },
+    {
+      label: 'Delete',
+      command: () => {
+        confirm.require({
+          header: `Delete ${table.table_name}?`,
+          message: "This will delete the table and all of it's data",
+          accept: () => { deleteTable(table.id) },
+        })
+      },
+    },
   ]
 }
 
@@ -97,6 +114,8 @@ function createTable() {
 </style>
 
 <template>
+  <ConfirmDialog></ConfirmDialog>
+
   <Card class="ActiveTables">
     <template #title>
       <h2>Active Tables</h2>
@@ -141,16 +160,15 @@ function createTable() {
         </Column>
         <Column header="Close">
           <template #body="slotProps">
-            <SplitButton
-              label="Start"
-              @click="startTable(slotProps.data.id)"
-              :model="buildButtonModel(slotProps.data.id)"
-            />
+            <SplitButton label="Start" @click="startTable(slotProps.data.id)"
+              :model="buildButtonModel(slotProps.data)" />
           </template>
         </Column>
       </DataTable>
       <div class="button-box flex justify-content-end">
-        <Button label="New Table" @click="createTable()" />
+        <router-link to="/new">
+          <Button label="New Table"" />
+        </router-link>
       </div>
     </template>
   </Card>