Feature/phone register (#11)

Co-authored-by: ISMAIL MASSERAN <topaz@ISMAILs-Macbook.local>
Co-authored-by: ISMAIL MASSERAN <topaz@Mac.dlinkrouter.local>
Reviewed-on: #11

fe/src/modules/external-system/composables/useExternalSystemList.ts

@@ -1,5 +1,6 @@
-import { computed, ref } from 'vue'
-import { dummyExternalSystems } from '../data/dummy-external-systems'
+import { computed, onMounted, ref } from 'vue'
+import { getApiErrorMessage } from '@/core/utils/getApiErrorMessage'
+import { listExternalSystems } from '../services/external-system.service'
 import {
   externalSystemStatusLabel,
   getExternalSystemStatus,
@@ -9,14 +10,16 @@ import type { ExternalSystem } from '../types/external-system.types'
 export function useExternalSystemList() {
   const search = ref('')
   const loading = ref(false)
+  const error = ref<string | null>(null)
+  const allSystems = ref<ExternalSystem[]>([])
 
   const systems = computed(() => {
     const query = search.value.trim().toLowerCase()
     if (!query) {
-      return dummyExternalSystems
+      return allSystems.value
     }
 
-    return dummyExternalSystems.filter((system) => {
+    return allSystems.value.filter((system) => {
       const haystack = [
         system.name,
         system.code,
@@ -35,14 +38,34 @@ export function useExternalSystemList() {
   )
 
   function getSystemById(id: string): ExternalSystem | undefined {
-    return dummyExternalSystems.find((system) => system.id === id)
+    return allSystems.value.find((system) => system.id === id)
   }
 
+  async function fetchSystems() {
+    loading.value = true
+    error.value = null
+
+    try {
+      allSystems.value = await listExternalSystems()
+    } catch (err) {
+      error.value = getApiErrorMessage(err, 'Gagal memuatkan senarai sistem luaran.')
+      allSystems.value = []
+    } finally {
+      loading.value = false
+    }
+  }
+
+  onMounted(() => {
+    fetchSystems()
+  })
+
   return {
     systems,
     search,
     loading,
+    error,
     availableCount,
     getSystemById,
+    fetchSystems,
   }
 }