frontend: useServers(), useOwners()

frontend/app/composables/useOwners.ts

@@ -0,0 +1,33 @@
+import { ref } from "vue"
+import { isUnauthorized } from "~/utils/auth"
+
+export function useOwners() {
+  const owners = ref([])
+  const loading = ref(false)
+  const error = ref("")
+
+  const { apiFetch } = useApi()
+
+  async function loadOwners() {
+    loading.value = true
+    error.value = ""
+
+    const result = await apiFetch("/owners")
+
+    if (isUnauthorized(result)) {
+      loading.value = false
+      return result
+    }
+
+    owners.value = result
+    loading.value = false
+    return result
+  }
+
+  return {
+    owners,
+    loading,
+    error,
+    loadOwners
+  }
+}

frontend/app/composables/useServers.ts

@@ -0,0 +1,33 @@
+import { ref } from "vue"
+import { isUnauthorized } from "~/utils/auth"
+
+export function useServers() {
+  const servers = ref([])
+  const loading = ref(false)
+  const error = ref("")
+
+  const { apiFetch } = useApi()
+
+  async function loadServers() {
+    loading.value = true
+    error.value = ""
+
+    const result = await apiFetch("/servers")
+
+    if (isUnauthorized(result)) {
+      loading.value = false
+      return result
+    }
+
+    servers.value = result
+    loading.value = false
+    return result
+  }
+
+  return {
+    servers,
+    loading,
+    error,
+    loadServers
+  }
+}

frontend/app/pages/owners/index.vue

@@ -9,28 +9,12 @@ import { ref, onMounted } from "vue"
 
 const { loadToken } = useAuth()
 const { apiFetch } = useApi()
+const { owners, loadOwners } = useOwners()
 
-const owners = ref([])
 const newOwnerName = ref("")
 const loading = ref(false)
 const error = ref("")
 
-async function loadOwners() {
-  loading.value = true
-  try {
-    const result = await apiFetch("/owners")
-    if (isUnauthorized(result)) {
-      return result
-    }
-    owners.value = result
-    return result
-  } catch (e: any) {
-    error.value = e.message
-  } finally {
-    loading.value = false
-  }
-}
-
 async function createOwner() {
   if (!newOwnerName.value.trim()) return
 

frontend/app/pages/servers/index.vue

@@ -8,8 +8,9 @@ import { ref, onMounted } from "vue"
 import { isUnauthorized } from "~/utils/auth"
 
 const { apiFetch } = useApi()
+const { servers, loadServers } = useServers()
+const { owners, loadOwners } = useOwners()
 
-const servers = ref([])
 const newServer = ref({
     hostname: "",
     description: "",
@@ -64,36 +65,6 @@ async function saveEdit(serverId: number) {
   }
 }
 
-
-const owners = ref([])
-
-async function loadOwners() {
-    try {
-        const result = await apiFetch("/owners")
-        if (isUnauthorized(result)) {
-            return result
-        }
-        owners.value = result
-    } catch (e: any) {
-        error.value = e.message
-    }
-}
-
-async function loadServers() {
-    loading.value = true
-    try {
-        const result = await apiFetch("/servers")
-        if (isUnauthorized(result)) {
-            return result
-        }
-        servers.value = result
-    } catch (e: any) {
-        error.value = e.message
-    } finally {
-        loading.value = false
-    }
-}
-
 async function createServer() {
     if (!newServer.value.hostname.trim()) return
 

frontend/app/pages/workentries/search.vue

@@ -8,8 +8,8 @@ import { ref, onMounted } from "vue"
 import { isUnauthorized } from "~/utils/auth"
 
 const { apiFetch } = useApi()
+const { servers, loadServers } = useServers()
 
-const servers = ref([])
 const selectedServer = ref(null)
 const query = ref("")
 const results = ref([])
@@ -21,18 +21,6 @@ function toggleRow(id: number) {
   expandedRow.value = expandedRow.value === id ? null : id
 }
 
-async function loadServers() {
-  try {
-    const result = await apiFetch("/servers")
-    if (isUnauthorized(result)) {
-      return result
-    }
-    servers.value = result
-  } catch (e: any) {
-    error.value = e.message
-  }
-}
-
 async function search() {
   if (!selectedServer.value && !query.value) {
     results.value = []