331 lines
8.6 KiB
Vue
331 lines
8.6 KiB
Vue
<script setup>
|
|
const props = defineProps({
|
|
userData: {
|
|
type: Object,
|
|
required: true,
|
|
},
|
|
})
|
|
|
|
const standardPlan = {
|
|
plan: 'Standard',
|
|
price: 99,
|
|
benefits: [
|
|
'10 Users',
|
|
'Up to 10GB storage',
|
|
'Basic Support',
|
|
],
|
|
}
|
|
|
|
const isUserInfoEditDialogVisible = ref(false)
|
|
const isUpgradePlanDialogVisible = ref(false)
|
|
|
|
const resolveUserStatusVariant = stat => {
|
|
if (stat === 'pending')
|
|
return 'warning'
|
|
if (stat === 'Active')
|
|
return 'success'
|
|
if (stat === 'inActive')
|
|
return 'secondary'
|
|
|
|
return 'primary'
|
|
}
|
|
|
|
const resolveUserRoleVariant = role => {
|
|
if (role === 'subscriber')
|
|
return {
|
|
color: 'primary',
|
|
icon: 'ri-user-line',
|
|
}
|
|
if (role === 'author')
|
|
return {
|
|
color: 'warning',
|
|
icon: 'ri-settings-2-line',
|
|
}
|
|
if (role === 'maintainer')
|
|
return {
|
|
color: 'success',
|
|
icon: 'ri-database-2-line',
|
|
}
|
|
if (role === 'editor')
|
|
return {
|
|
color: 'info',
|
|
icon: 'ri-pencil-line',
|
|
}
|
|
if (role === 'admin')
|
|
return {
|
|
color: 'error',
|
|
icon: 'ri-server-line',
|
|
}
|
|
|
|
return {
|
|
color: 'primary',
|
|
icon: 'ri-user-line',
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<VRow>
|
|
<!-- SECTION User Details -->
|
|
<VCol cols="12">
|
|
<VCard v-if="props.userData">
|
|
<VCardText class="text-center pt-12 pb-6">
|
|
<!-- 👉 Avatar -->
|
|
<VAvatar
|
|
rounded
|
|
:size="120"
|
|
:color="!props.userData.telemed.avatar ? 'primary' : undefined"
|
|
:variant="!props.userData.telemed.avatar ? 'tonal' : undefined"
|
|
>
|
|
<VImg
|
|
v-if="props.userData.telemed.avatar"
|
|
:src="props.userData.telemed.avatar"
|
|
/>
|
|
<span
|
|
v-else
|
|
class="text-5xl font-weight-medium"
|
|
>
|
|
{{ avatarText(props.userData.telemed.name) }}
|
|
</span>
|
|
</VAvatar>
|
|
|
|
<!-- 👉 User fullName -->
|
|
<h5 class="text-h5 mt-4">
|
|
{{ props.userData.telemed.first_name }} {{ props.userData.telemed.last_name }}
|
|
</h5>
|
|
|
|
<!-- 👉 Role chip -->
|
|
<VChip
|
|
:color="resolveUserRoleVariant('Provider').color"
|
|
size="small"
|
|
class="text-capitalize mt-4"
|
|
>
|
|
Provider
|
|
</VChip>
|
|
<VChip
|
|
:color="resolveUserStatusVariant(props.userData.telemed.status==1?'Active':'InActive')"
|
|
size="small"
|
|
class="text-capitalize mt-4"
|
|
>
|
|
{{ props.userData.telemed.status==1?"Active":'InActive' }}
|
|
</VChip>
|
|
</VCardText>
|
|
|
|
|
|
|
|
<!-- 👉 Details -->
|
|
<VCardText class="pb-6">
|
|
<h5 class="text-h5">
|
|
Details
|
|
</h5>
|
|
|
|
<VDivider class="my-4" />
|
|
|
|
<!-- 👉 User Details list -->
|
|
<VList class="card-list">
|
|
<VListItem>
|
|
<VListItemTitle class="text-sm">
|
|
<span class="font-weight-medium">
|
|
Email:
|
|
</span>
|
|
<span class="text-body-1">{{ props.userData.telemed.email }}</span>
|
|
</VListItemTitle>
|
|
</VListItem>
|
|
|
|
<VListItem>
|
|
<VListItemTitle class="text-sm">
|
|
<span class="font-weight-medium">
|
|
Address:
|
|
</span>
|
|
<span class="text-body-1">{{ props.userData.telemed.home_address }}
|
|
<br/> {{ props.userData.telemed.city }},{{ props.userData.telemed.state }} {{ props.userData.telemed.zip_code }}</span>
|
|
</VListItemTitle>
|
|
</VListItem>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<VListItem>
|
|
<VListItemTitle class="text-sm">
|
|
<span class="font-weight-medium">
|
|
Contact:
|
|
</span>
|
|
<span class="text-body-1">{{ props.userData.telemed.phone_number }}</span>
|
|
</VListItemTitle>
|
|
</VListItem>
|
|
<VListItem>
|
|
<VListItemTitle class="text-sm">
|
|
<span class="font-weight-medium">
|
|
Availability:
|
|
</span>
|
|
<span class="text-body-1">{{ props.userData.telemed.availability_from }}</span> <span class="text-body-1">{{ props.userData.telemed.availability_to }}</span>
|
|
</VListItemTitle>
|
|
</VListItem>
|
|
|
|
|
|
|
|
</VList>
|
|
</VCardText>
|
|
|
|
<!-- 👉 Edit and Suspend button -->
|
|
<VCardText class="d-flex justify-center" >
|
|
<VBtn
|
|
variant="elevated"
|
|
class="me-4"
|
|
@click="isUserInfoEditDialogVisible = true"
|
|
style="display: none;"
|
|
>
|
|
Edit
|
|
</VBtn>
|
|
<VBtn
|
|
variant="outlined"
|
|
color="error"
|
|
style="display: none;"
|
|
>
|
|
Suspend
|
|
</VBtn>
|
|
</VCardText>
|
|
</VCard>
|
|
</VCol>
|
|
<!-- !SECTION -->
|
|
|
|
<!-- SECTION Current Plan -->
|
|
<VCol cols="12" v-if="props.userData.plans">
|
|
<VCard
|
|
flat
|
|
class="current-plan"
|
|
|
|
>
|
|
<VCardText class="d-flex">
|
|
<!-- 👉 Standard Chip -->
|
|
<VChip
|
|
color="primary"
|
|
size="small"
|
|
>
|
|
{{ props.userData.plans.title }}
|
|
</VChip>
|
|
|
|
<VSpacer />
|
|
|
|
<!-- 👉 Current Price -->
|
|
<div class="d-flex align-center">
|
|
<sup class="text-primary text-lg font-weight-medium"> {{ props.userData.plans.currency }}</sup>
|
|
<h1 class="text-h1 text-primary">
|
|
{{ props.userData.plans.price }}
|
|
</h1>
|
|
<sub class="mt-3"><h6 class="text-h6 font-weight-regular">month</h6></sub>
|
|
</div>
|
|
</VCardText>
|
|
|
|
<VCardText>
|
|
<!-- 👉 Price Benefits -->
|
|
<VList class="card-list">
|
|
<VListItem
|
|
>
|
|
<div class="d-flex align-center">
|
|
<VIcon
|
|
size="10"
|
|
color="medium-emphasis"
|
|
class="me-2"
|
|
icon="ri-circle-fill"
|
|
/>
|
|
<div class="text-medium-emphasis">
|
|
{{ props.userData.plans.list_one_title }}
|
|
</div>
|
|
</div>
|
|
</VListItem>
|
|
<VListItem
|
|
>
|
|
<div class="d-flex align-center">
|
|
<VIcon
|
|
size="10"
|
|
color="medium-emphasis"
|
|
class="me-2"
|
|
icon="ri-circle-fill"
|
|
/>
|
|
<div class="text-medium-emphasis">
|
|
{{ props.userData.plans.list_sub_title }}
|
|
</div>
|
|
</div>
|
|
</VListItem>
|
|
|
|
<VListItem
|
|
>
|
|
<div class="d-flex align-center">
|
|
<VIcon
|
|
size="10"
|
|
color="medium-emphasis"
|
|
class="me-2"
|
|
icon="ri-circle-fill"
|
|
/>
|
|
<div class="text-medium-emphasis">
|
|
{{ props.userData.plans.list_two_title }}
|
|
</div>
|
|
</div>
|
|
</VListItem>
|
|
</VList>
|
|
|
|
<!-- 👉 Days -->
|
|
<div class="my-6">
|
|
<div class="d-flex mt-3 mb-2">
|
|
<h6 class="text-h6 font-weight-medium">
|
|
Days
|
|
</h6>
|
|
<VSpacer />
|
|
<h6 class="text-h6 font-weight-medium">
|
|
26 of 30 Days
|
|
</h6>
|
|
</div>
|
|
|
|
<!-- 👉 Progress -->
|
|
<VProgressLinear
|
|
rounded
|
|
:model-value="86"
|
|
height="8"
|
|
color="primary"
|
|
/>
|
|
|
|
<p class="text-sm mt-1">
|
|
4 days remaining
|
|
</p>
|
|
</div>
|
|
|
|
<!-- 👉 Upgrade Plan -->
|
|
<VBtn
|
|
block
|
|
@click="isUpgradePlanDialogVisible = true"
|
|
>
|
|
Upgrade Plan
|
|
</VBtn>
|
|
</VCardText>
|
|
</VCard>
|
|
</VCol>
|
|
<!-- !SECTION -->
|
|
</VRow>
|
|
|
|
<!-- 👉 Edit user info dialog -->
|
|
<UserInfoEditDialog
|
|
v-model:isDialogVisible="isUserInfoEditDialogVisible"
|
|
:user-data="props.userData"
|
|
/>
|
|
|
|
<!-- 👉 Upgrade plan dialog -->
|
|
<UserUpgradePlanDialog v-model:isDialogVisible="isUpgradePlanDialogVisible" />
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.card-list {
|
|
--v-card-list-gap: .5rem;
|
|
}
|
|
|
|
.current-plan {
|
|
border: 2px solid rgb(var(--v-theme-primary));
|
|
}
|
|
|
|
.text-capitalize {
|
|
text-transform: capitalize !important;
|
|
}
|
|
</style>
|