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

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

@@ -0,0 +1,48 @@
+import { computed, ref } from 'vue'
+import { dummyExternalSystems } from '../data/dummy-external-systems'
+import {
+  externalSystemStatusLabel,
+  getExternalSystemStatus,
+} from '../utils/external-system.utils'
+import type { ExternalSystem } from '../types/external-system.types'
+
+export function useExternalSystemList() {
+  const search = ref('')
+  const loading = ref(false)
+
+  const systems = computed(() => {
+    const query = search.value.trim().toLowerCase()
+    if (!query) {
+      return dummyExternalSystems
+    }
+
+    return dummyExternalSystems.filter((system) => {
+      const haystack = [
+        system.name,
+        system.code,
+        system.description,
+        externalSystemStatusLabel(getExternalSystemStatus(system)),
+      ]
+        .join(' ')
+        .toLowerCase()
+
+      return haystack.includes(query)
+    })
+  })
+
+  const availableCount = computed(
+    () => systems.value.filter((system) => getExternalSystemStatus(system) === 'available').length,
+  )
+
+  function getSystemById(id: string): ExternalSystem | undefined {
+    return dummyExternalSystems.find((system) => system.id === id)
+  }
+
+  return {
+    systems,
+    search,
+    loading,
+    availableCount,
+    getSystemById,
+  }
+}