121 lines
3.1 KiB
Vue
121 lines
3.1 KiB
Vue
<script setup>
|
|
import ECommerceAddCustomerDrawer from '@/views/apps/ecommerce/ECommerceAddCustomerDrawer.vue'
|
|
import CustomerBioPanel from '@/views/apps/ecommerce/customer/view/CustomerBioPanel.vue'
|
|
import CustomerTabAddressAndBilling from '@/views/apps/ecommerce/customer/view/CustomerTabAddressAndBilling.vue'
|
|
import CustomerTabNotification from '@/views/apps/ecommerce/customer/view/CustomerTabNotification.vue'
|
|
import CustomerTabOverview from '@/views/apps/ecommerce/customer/view/CustomerTabOverview.vue'
|
|
import CustomerTabSecurity from '@/views/apps/ecommerce/customer/view/CustomerTabSecurity.vue'
|
|
|
|
const route = useRoute('apps-ecommerce-customer-details-id')
|
|
const customerData = ref()
|
|
const userTab = ref(null)
|
|
|
|
const tabs = [
|
|
{
|
|
title: 'Overview',
|
|
icon: 'tabler-user',
|
|
},
|
|
{
|
|
title: 'Security',
|
|
icon: 'tabler-lock',
|
|
},
|
|
{
|
|
title: 'Address & Billing',
|
|
icon: 'tabler-map-pin',
|
|
},
|
|
{
|
|
title: 'Notifications',
|
|
icon: 'tabler-bell',
|
|
},
|
|
]
|
|
|
|
const { data } = await useApi(`/apps/ecommerce/customers/${ route.params.id }`)
|
|
if (data.value)
|
|
customerData.value = data.value
|
|
const isAddCustomerDrawerOpen = ref(false)
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<!-- 👉 Header -->
|
|
<div class="d-flex justify-space-between align-center flex-wrap gap-y-4 mb-6">
|
|
<div>
|
|
<h4 class="text-h4 mb-1">
|
|
Customer ID #{{ route.params.id }}
|
|
</h4>
|
|
<div class="text-body-1">
|
|
Aug 17, 2020, 5:48 (ET)
|
|
</div>
|
|
</div>
|
|
<div class="d-flex gap-4">
|
|
<VBtn
|
|
variant="tonal"
|
|
color="error"
|
|
>
|
|
Delete Customer
|
|
</VBtn>
|
|
</div>
|
|
</div>
|
|
<!-- 👉 Customer Profile -->
|
|
<VRow v-if="customerData">
|
|
<VCol
|
|
v-if="customerData"
|
|
cols="12"
|
|
md="5"
|
|
lg="4"
|
|
>
|
|
<CustomerBioPanel :customer-data="customerData" />
|
|
</VCol>
|
|
<VCol
|
|
cols="12"
|
|
md="7"
|
|
lg="8"
|
|
>
|
|
<VTabs
|
|
v-model="userTab"
|
|
class="v-tabs-pill mb-3 disable-tab-transition"
|
|
>
|
|
<VTab
|
|
v-for="tab in tabs"
|
|
:key="tab.title"
|
|
>
|
|
<VIcon
|
|
size="20"
|
|
start
|
|
:icon="tab.icon"
|
|
/>
|
|
{{ tab.title }}
|
|
</VTab>
|
|
</VTabs>
|
|
<VWindow
|
|
v-model="userTab"
|
|
class="disable-tab-transition"
|
|
:touch="false"
|
|
>
|
|
<VWindowItem>
|
|
<CustomerTabOverview />
|
|
</VWindowItem>
|
|
<VWindowItem>
|
|
<CustomerTabSecurity />
|
|
</VWindowItem>
|
|
<VWindowItem>
|
|
<CustomerTabAddressAndBilling />
|
|
</VWindowItem>
|
|
<VWindowItem>
|
|
<CustomerTabNotification />
|
|
</VWindowItem>
|
|
</VWindow>
|
|
</VCol>
|
|
</VRow>
|
|
<div v-else>
|
|
<VAlert
|
|
type="error"
|
|
variant="tonal"
|
|
>
|
|
Invoice with ID {{ route.params.id }} not found!
|
|
</VAlert>
|
|
</div>
|
|
<ECommerceAddCustomerDrawer v-model:is-drawer-open="isAddCustomerDrawerOpen" />
|
|
</div>
|
|
</template>
|