Dev/v1.2 (#4)

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

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

@@ -0,0 +1,41 @@
+import { computed, ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import { useExternalSystemList } from './useExternalSystemList'
+import {
+  getExternalSystemStatus,
+  isExternalSystemAccessible,
+} from '../utils/external-system.utils'
+
+export function useExternalSystemDetail() {
+  const route = useRoute()
+  const { getSystemById } = useExternalSystemList()
+
+  const loading = ref(false)
+  const error = ref<string | 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,
+  )
+
+  watch(
+    systemId,
+    () => {
+      error.value = system.value ? null : 'Sistem luaran tidak dijumpai.'
+    },
+    { immediate: true },
+  )
+
+  return {
+    system,
+    loading,
+    error,
+    status,
+    isAccessible,
+  }
+}