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/useExternalSystemDetail.ts

@@ -1,32 +1,52 @@
 import { computed, ref, watch } from 'vue'
 import { useRoute } from 'vue-router'
-import { useExternalSystemList } from './useExternalSystemList'
+import { getApiErrorMessage } from '@/core/utils/getApiErrorMessage'
+import { getExternalSystem } from '../services/external-system.service'
 import {
   getExternalSystemStatus,
   isExternalSystemAccessible,
 } from '../utils/external-system.utils'
+import type { ExternalSystem } from '../types/external-system.types'
 
 export function useExternalSystemDetail() {
   const route = useRoute()
-  const { getSystemById } = useExternalSystemList()
 
   const loading = ref(false)
   const error = ref<string | null>(null)
+  const system = ref<ExternalSystem | null>(null)
 
   const systemId = computed(() => String(route.params.id ?? ''))
 
-  const system = computed(() => getSystemById(systemId.value) ?? null)
-
   const status = computed(() => (system.value ? getExternalSystemStatus(system.value) : null))
 
   const isAccessible = computed(() =>
     system.value ? isExternalSystemAccessible(system.value) : false,
   )
 
+  async function fetchSystem(id: string) {
+    loading.value = true
+    error.value = null
+
+    try {
+      system.value = await getExternalSystem(id)
+    } catch (err) {
+      system.value = null
+      error.value = getApiErrorMessage(err, 'Sistem luaran tidak dijumpai.')
+    } finally {
+      loading.value = false
+    }
+  }
+
   watch(
     systemId,
-    () => {
-      error.value = system.value ? null : 'Sistem luaran tidak dijumpai.'
+    (id) => {
+      if (!id) {
+        system.value = null
+        error.value = 'Sistem luaran tidak dijumpai.'
+        return
+      }
+
+      fetchSystem(id)
     },
     { immediate: true },
   )

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

@@ -0,0 +1,49 @@
+import { ref } from 'vue'
+import Swal from 'sweetalert2'
+import { getApiErrorMessage } from '@/core/utils/getApiErrorMessage'
+import { launchExternalSystemSso } from '../services/external-system.service'
+import { isExternalSystemAccessible } from '../utils/external-system.utils'
+import type { ExternalSystem } from '../types/external-system.types'
+
+export function useExternalSystemLaunch() {
+  const launching = ref(false)
+
+  async function launchExternalSystem(system: ExternalSystem) {
+    if (!isExternalSystemAccessible(system) || launching.value) {
+      return
+    }
+
+    launching.value = true
+
+    try {
+      if (system.sso_enabled) {
+        const response = await launchExternalSystemSso(system.code)
+        window.open(
+          response.data.launch_url,
+          system.opens_in_new_tab ? '_blank' : '_self',
+          'noopener,noreferrer',
+        )
+        return
+      }
+
+      window.open(
+        system.url,
+        system.opens_in_new_tab ? '_blank' : '_self',
+        'noopener,noreferrer',
+      )
+    } catch (error) {
+      await Swal.fire({
+        icon: 'error',
+        title: 'Gagal membuka sistem',
+        text: getApiErrorMessage(error, 'Tidak dapat membuka sistem luaran.'),
+      })
+    } finally {
+      launching.value = false
+    }
+  }
+
+  return {
+    launching,
+    launchExternalSystem,
+  }
+}

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,
   }
 }