mirror of
https://github.com/crater-invoice/crater.git
synced 2025-10-31 13:41:09 -04:00
131 lines
3.3 KiB
Vue
131 lines
3.3 KiB
Vue
<template>
|
|
<BasePage>
|
|
<BasePageHeader :title="$tc('settings.setting', 2)" class="pb-6">
|
|
<BaseBreadcrumb>
|
|
<BaseBreadcrumbItem
|
|
:title="$t('general.home')"
|
|
:to="`/${companySlug}/customer/dashboard`"
|
|
/>
|
|
<BaseBreadcrumbItem
|
|
:title="$tc('settings.setting', 2)"
|
|
:to="`/${companySlug}/customer/settings/customer-profile`"
|
|
active
|
|
/>
|
|
</BaseBreadcrumb>
|
|
</BasePageHeader>
|
|
|
|
<div class="w-full mb-6 select-wrapper xl:hidden">
|
|
<aside class="pb-3 lg:col-span-3">
|
|
<nav class="space-y-1">
|
|
<BaseList>
|
|
<BaseListItem
|
|
v-for="(menuItem, index) in menuItems"
|
|
:key="index"
|
|
:title="menuItem.title"
|
|
:to="menuItem.link"
|
|
:active="hasActiveUrl(menuItem.link)"
|
|
:index="index"
|
|
class="py-3"
|
|
>
|
|
<template #icon>
|
|
<component :is="menuItem.icon" class="h-5 w-6" />
|
|
</template>
|
|
</BaseListItem>
|
|
</BaseList>
|
|
</nav>
|
|
</aside>
|
|
</div>
|
|
|
|
<div class="flex">
|
|
<div class="hidden mt-1 xl:block min-w-[240px]">
|
|
<BaseList>
|
|
<BaseListItem
|
|
v-for="(menuItem, index) in menuItems"
|
|
:key="index"
|
|
:title="menuItem.title"
|
|
:to="menuItem.link"
|
|
:active="hasActiveUrl(menuItem.link)"
|
|
:index="index"
|
|
class="py-3"
|
|
>
|
|
<template #icon>
|
|
<component :is="menuItem.icon" class="h-5 w-6" />
|
|
</template>
|
|
</BaseListItem>
|
|
</BaseList>
|
|
</div>
|
|
<div class="w-full overflow-hidden">
|
|
<RouterView />
|
|
</div>
|
|
</div>
|
|
</BasePage>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, reactive, watchEffect, computed } from 'vue'
|
|
import BaseList from '@/scripts/components/list/BaseList.vue'
|
|
import BaseListItem from '@/scripts/components/list/BaseListItem.vue'
|
|
import { OfficeBuildingIcon, UserIcon } from '@heroicons/vue/outline'
|
|
import { useGlobalStore } from '@/scripts/customer/stores/global'
|
|
import { useI18n } from 'vue-i18n'
|
|
const { t } = useI18n()
|
|
|
|
//route
|
|
const { useRoute, useRouter } = window.VueRouter
|
|
|
|
const route = useRoute()
|
|
const router = useRouter()
|
|
const globalStore = useGlobalStore()
|
|
|
|
const companySlug = computed(() => {
|
|
return globalStore.companySlug
|
|
})
|
|
|
|
// local state
|
|
const { global } = window.i18n
|
|
let currentSetting = ref({})
|
|
let activeIndex = ref()
|
|
const menuItems = reactive([
|
|
{
|
|
link: `/${globalStore.companySlug}/customer/settings/customer-profile`,
|
|
title: t('settings.account_settings.account_settings'),
|
|
icon: UserIcon,
|
|
},
|
|
{
|
|
link: `/${globalStore.companySlug}/customer/settings/address-info`,
|
|
title: t('settings.menu_title.address_information'),
|
|
icon: OfficeBuildingIcon,
|
|
},
|
|
])
|
|
|
|
// watch
|
|
|
|
watchEffect(() => {
|
|
if (route.path === `/${globalStore.companySlug}/customer/settings`) {
|
|
router.push({ name: 'customer.profile' })
|
|
}
|
|
|
|
const menu = menuItems.find((item) => {
|
|
return item.link === route.path
|
|
})
|
|
|
|
currentSetting.value = { ...menu }
|
|
})
|
|
|
|
// computed props
|
|
|
|
const dropdownMenuItems = computed(() => {
|
|
return menuItems
|
|
})
|
|
|
|
// methods
|
|
|
|
function hasActiveUrl(url) {
|
|
return route.path.indexOf(url) > -1
|
|
}
|
|
|
|
function navigateToSetting(setting) {
|
|
return router.push(setting.link)
|
|
}
|
|
</script>
|