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/pages/ExternalSystemList.vue

@@ -7,24 +7,25 @@ import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { Lucide } from '@/components/ui/lucide'
 import { useExternalSystemList } from '../composables/useExternalSystemList'
+import { useExternalSystemLaunch } from '../composables/useExternalSystemLaunch'
 import {
   externalSystemStatusLabel,
   externalSystemStatusVariant,
   formatExternalSystemDateTime,
   getExternalSystemStatus,
-  openExternalSystem,
 } from '../utils/external-system.utils'
 import type { ExternalSystem } from '../types/external-system.types'
 
 const router = useRouter()
-const { systems, search, loading, availableCount } = useExternalSystemList()
+const { systems, search, loading, error, availableCount } = useExternalSystemList()
+const { launching, launchExternalSystem } = useExternalSystemLaunch()
 
 function goToDetail(system: ExternalSystem) {
   router.push({ name: 'view-external-system', params: { id: system.id } })
 }
 
 function handleOpen(system: ExternalSystem) {
-  openExternalSystem(system)
+  launchExternalSystem(system)
 }
 </script>
 
@@ -39,6 +40,11 @@ function handleOpen(system: ExternalSystem) {
       </Badge>
     </div>
 
+    <AlertRoot v-if="error" class="mb-6" variant="danger">
+      <AlertTitle>Ralat</AlertTitle>
+      <AlertDescription>{{ error }}</AlertDescription>
+    </AlertRoot>
+
     <div class="mt-5 grid grid-cols-12 gap-x-6 gap-y-8">
       <div class="col-span-12 mt-2 flex flex-wrap items-center sm:flex-nowrap">
         <div class="w-full sm:w-auto">
@@ -82,7 +88,8 @@ function handleOpen(system: ExternalSystem) {
 
           <div class="mt-5 flex flex-col gap-2 sm:flex-row">
             <Button class="w-full sm:flex-1" look="outline" variant="primary"
-              :disabled="getExternalSystemStatus(system) !== 'available'" @click="handleOpen(system)">
+              :disabled="getExternalSystemStatus(system) !== 'available' || launching"
+              @click="handleOpen(system)">
               Buka Sistem
               <Lucide icon="ExternalLink" class="size-4" />
             </Button>
@@ -94,7 +101,7 @@ function handleOpen(system: ExternalSystem) {
         </Box>
       </template>
 
-      <Box v-else class="col-span-12 p-8 text-center">
+      <Box v-else-if="!loading" class="col-span-12 p-8 text-center">
         <Lucide icon="SearchX" class="mx-auto size-8 opacity-40" />
         <div class="mt-3 text-base font-medium">Tiada sistem dijumpai</div>
         <p class="mt-1 text-sm opacity-70">Cuba istilah carian yang berbeza.</p>