Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | <script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useI18n } from 'vue-i18n'
import ApiLoader from '@/components/common/ApiLoader.vue'
import CustomerCard from '@/components/feature/CustomerCard.vue'
import { fetchCustomers } from '@/api/modules/customer'
import type { Customer } from '@/api/types'
const { t } = useI18n()
const loading = ref(true)
const error = ref<string | null>(null)
const customers = ref<Customer[]>([])
async function load() {
loading.value = true
error.value = null
try {
customers.value = await fetchCustomers()
} catch (e) {
error.value = e instanceof Error ? e.message : 'error'
} finally {
loading.value = false
}
}
onMounted(load)
</script>
<template>
<ApiLoader :loading="loading" :error="error" @retry="load">
<div v-if="customers.length" class="space-y-3">
<CustomerCard
v-for="(customer, index) in customers"
:key="index"
:customer="customer"
/>
</div>
<div v-else class="py-10 text-center text-sm text-slate-400">{{ t('customer.empty') }}</div>
</ApiLoader>
</template>
|