Move table stuff into its own shizz

src/Router.vue

@@ -32,6 +32,6 @@ function displayUsername(): string {
 }
 
 function loginCallback(): void {
-  visible.value = false;
+  visible.value = false
 }
 </script>

src/TableList.vue

@@ -0,0 +1,109 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+
+import axios from 'axios'
+import Button from 'primevue/button'
+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'
+
+import {
+  GameTable,
+  useActiveTables,
+  useAllTables,
+  startTable,
+  hardStartTable,
+  stopTable,
+  deleteTable,
+} from './game_tables'
+
+const props = defineProps<{
+  gameTables: any
+  showClose?: boolean
+  showFullActions?: boolean
+}>()
+
+const hostname = ref()
+const router = useRouter()
+const confirm = useConfirm()
+
+onMounted(() => {
+  hostname.value = location.host
+})
+
+function buildButtonModel(table: any) {
+  return [
+    {
+      label: 'Edit',
+      command: () => {
+        router.push({ name: 'edit', params: { id: table.id } })
+      },
+    },
+    { label: 'Restart' },
+    {
+      label: 'Hard Start',
+      command: () => {
+        hardStartTable(table)
+      },
+    },
+    { separator: true },
+    {
+      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)
+          },
+        })
+      },
+    },
+  ]
+}
+</script>
+
+<style>
+</style>
+
+<template>
+  <ConfirmDialog></ConfirmDialog>
+
+  <DataTable class="Tables" :value="props.gameTables">
+    <Column field="table_name" header="Table Name" />
+
+    <Column field="table_link" header="Table Link">
+      <template #body="slotProps">
+        <a v-if="slotProps.data.active" :href="'/' + slotProps.data.table_link">
+          http://{{ hostname }}/{{ slotProps.data.table_link }}
+        </a>
+        <div v-if="!slotProps.data.active">
+          http://{{ hostname }}/{{ slotProps.data.table_link }}
+        </div>
+      </template>
+    </Column>
+
+    <Column header="Actions" v-if="showClose">
+      <template #body="slotProps">
+        <Button label="Close" @click="stopTable(slotProps.data)" />
+      </template>
+    </Column>
+
+    <Column header="Actions" v-if="props.showFullActions">
+      <template #body="slotProps">
+        <div class="flex flex-row">
+          <span class="flex"></span>
+          <SplitButton
+            label="Start"
+            @click="startTable(slotProps.data)"
+            :model="buildButtonModel(slotProps.data)"
+          />
+        </div>
+      </template>
+    </Column>
+  </DataTable>
+</template>

src/TableManager.vue

@@ -1,78 +1,18 @@
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
+import {
+  GameTable,
+  useActiveTables,
+  useAllTables,
+} from './game_tables'
 
-import axios from 'axios'
+import TableList from './TableList.vue'
 import Button from 'primevue/button'
-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 hostname = ref()
 const router = useRouter()
-const allTables = ref()
-const activeTables = ref()
-const confirm = useConfirm()
-
-onMounted(() => {
-  activeTables.value = []
-  loadTables()
-  hostname.value = location.host
-})
-
-async function loadTables(): Promise<void> {
-  return axios
-    .get('/api/tables/all')
-    .then((resp) => (allTables.value = resp.data))
-    .then(() => axios.get('/api/tables/active'))
-    .then((resp) => (activeTables.value = resp.data))
-}
-
-function startTable(tableId: number) {
-  axios.post(`/api/tables/${tableId}:start`, { hard: 'False' }).then(() => loadTables())
-}
-
-function stopTable(tableId: number) {
-  axios.post(`/api/tables/${tableId}:stop`).then(() => loadTables())
-}
-
-function deleteTable(tableId: number) {
-  axios.delete(`/api/tables/${tableId}`).then(() => loadTables())
-}
-
-function buildButtonModel(table: any) {
-  return [
-    {
-      label: 'Edit',
-      command: () => {
-        router.push({ name: 'edit', params: { id: table.id } })
-      },
-    },
-    { label: 'Restart' },
-    {
-      label: 'Hard Start',
-      command: () => {
-        axios.post(`/api/tables/${table.id}:start`, { hard: 'True' }).then(() => loadTables())
-      },
-    },
-    { separator: true },
-    {
-      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)
-          },
-        })
-      },
-    },
-  ]
-}
+const allTables = useAllTables()
+const activeTables = useActiveTables()
 </script>
 
 <style>
@@ -109,7 +49,6 @@ function buildButtonModel(table: any) {
 </style>
 
 <template>
-  <ConfirmDialog></ConfirmDialog>
 
   <Card class="ActiveTables">
     <template #title>
@@ -117,22 +56,7 @@ function buildButtonModel(table: any) {
     </template>
 
     <template #content>
-      <DataTable class="Tables" :value="activeTables">
-        <Column field="table_name" header="Table Name" />
-        <Column field="table_link" header="Table Link">
-          <template #body="slotProps">
-            <a :href="'/' + slotProps.data.table_link">
-              http://{{ hostname }}/{{ slotProps.data.table_link }}
-            </a>
-          </template>
-        </Column>
-
-        <Column header="Close">
-          <template #body="slotProps">
-            <Button label="Close" @click="stopTable(slotProps.data.id)" />
-          </template>
-        </Column>
-      </DataTable>
+      <TableList :show-close="true" :game-tables="activeTables" />
     </template>
   </Card>
 
@@ -142,31 +66,7 @@ function buildButtonModel(table: any) {
     </template>
 
     <template #content>
-      <DataTable class="Tables" :value="allTables">
-        <Column field="table_name" header="Table Name"> </Column>
-        <Column field="table_link" header="Table Link">
-          <template #body="slotProps">
-            <a v-if="slotProps.data.active" :href="'/' + slotProps.data.table_link">
-              http://{{ hostname }}/{{ slotProps.data.table_link }}
-            </a>
-            <div v-if="!slotProps.data.active">
-              http://{{ hostname }}/{{ slotProps.data.table_link }}
-            </div>
-          </template>
-        </Column>
-        <Column header="Close">
-          <template #body="slotProps">
-            <div class="flex flex-row">
-              <span class="flex"></span>
-              <SplitButton
-                label="Start"
-                @click="startTable(slotProps.data.id)"
-                :model="buildButtonModel(slotProps.data)"
-              />
-            </div>
-          </template>
-        </Column>
-      </DataTable>
+      <TableList :show-full-actions="true" :game-tables="allTables" />
       <div class="button-box flex justify-content-end">
         <router-link to="/new">
           <Button label="New Table" />

src/game_tables.ts

@@ -0,0 +1,59 @@
+import axios from 'axios'
+import { ref, computed, onMounted } from 'vue'
+import type { Ref } from 'vue'
+
+export interface GameTable {
+  id: number
+  table_name: string
+  table_link: string
+  active: boolean
+}
+
+const $activeTables: Ref<Array<GameTable>> = ref([])
+const $allTables: Ref<Array<GameTable>> = ref([])
+
+export function useActiveTables(): Ref<Array<GameTeable>> {
+  loadActiveTables()
+  return $activeTables
+}
+
+export function useAllTables(): Ref<Array<GameTable>> {
+  loadAllTables()
+  return $allTables
+}
+
+export function loadActiveTables(): void {
+  axios.get('/api/tables/active').then((resp) => ($activeTables.value = resp.data))
+}
+
+export function loadAllTables(): void {
+  axios.get('/api/tables/all').then((resp) => ($allTables.value = resp.data))
+}
+
+export function startTable(gameTable: GameTable) {
+  axios
+    .post(`/api/tables/${gameTable.id}:start`, { hard: 'False' })
+    .then(() => loadAllTables())
+    .then(() => loadActiveTables())
+}
+
+export function hardStartTable(gameTable: GameTable): void {
+  axios
+    .post(`/api/tables/${gameTable.id}:start`, { hard: 'True' })
+    .then(() => loadAllTables())
+    .then(() => loadActiveTables())
+}
+
+export function stopTable(gameTable: GameTable) {
+  axios
+    .post(`/api/tables/${gameTable.id}:stop`)
+    .then(() => loadAllTables())
+    .then(() => loadActiveTables())
+}
+
+export function deleteTable(gameTable: GameTable) {
+  axios
+    .delete(`/api/tables/${gameTable.id}`)
+    .then(() => loadAllTables())
+    .then(() => loadActiveTables())
+}

src/user.ts

@@ -10,7 +10,7 @@ export interface User {
 
 const $current_user = ref({ id: 0, username: 'username', is_admin: false, authenticated: false })
 export const current_user = computed((): User => {
-  return $current_user.value
+  return computed($current_user)
 })
 
 function loadCurrentUser(): void {