77 lines
2.3 KiB
Vue
77 lines
2.3 KiB
Vue
<script setup>
|
|
import { computed } from "vue";
|
|
import { useI18n } from "vue-i18n";
|
|
import { useRoute, useRouter } from "vue-router";
|
|
|
|
const route = useRoute();
|
|
const router = useRouter();
|
|
const { t } = useI18n();
|
|
|
|
const departmentId = computed(() => String(route.params.departmentId || ""));
|
|
const departmentPath = computed(() => `/superuser/departments/${encodeURIComponent(departmentId.value)}`);
|
|
|
|
const tabs = computed(() => [
|
|
{
|
|
name: t("superuser_dashboard.department_navigation.overview"),
|
|
path: departmentPath.value,
|
|
active: (path) => path === departmentPath.value,
|
|
},
|
|
{
|
|
name: t("superuser_dashboard.department_navigation.modules"),
|
|
path: `${departmentPath.value}/modules`,
|
|
active: (path) => path.startsWith(`${departmentPath.value}/modules`),
|
|
},
|
|
{
|
|
name: t("superuser_dashboard.department_navigation.branding"),
|
|
path: `${departmentPath.value}/branding`,
|
|
active: (path) => path.startsWith(`${departmentPath.value}/branding`),
|
|
},
|
|
{
|
|
name: t("superuser_dashboard.department_navigation.gateways"),
|
|
path: `${departmentPath.value}/gateways`,
|
|
active: (path) => path.startsWith(`${departmentPath.value}/gateways`),
|
|
},
|
|
{
|
|
name: t("superuser_dashboard.department_navigation.stripe"),
|
|
path: `${departmentPath.value}/stripe/terminals/readers`,
|
|
active: (path) => path.startsWith(`${departmentPath.value}/stripe`),
|
|
},
|
|
{
|
|
name: t("superuser_dashboard.department_navigation.pricing"),
|
|
path: `${departmentPath.value}/pricing`,
|
|
active: (path) => path.startsWith(`${departmentPath.value}/pricing`),
|
|
},
|
|
{
|
|
name: t("superuser_dashboard.department_navigation.categories"),
|
|
path: `${departmentPath.value}/categories`,
|
|
active: (path) => path.startsWith(`${departmentPath.value}/categories`),
|
|
},
|
|
]);
|
|
|
|
const activeTab = computed(() => tabs.value.findIndex((tab) => tab.active(route.path)));
|
|
|
|
const changeTab = (index) => {
|
|
const tab = tabs.value[index];
|
|
if (tab) {
|
|
router.push(tab.path);
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<div class="tabs is-right">
|
|
<ul>
|
|
<li
|
|
v-for="(tab, index) in tabs"
|
|
:key="tab.path"
|
|
:class="{ 'is-active': activeTab === index }"
|
|
@click="changeTab(index)"
|
|
>
|
|
<a>{{ tab.name }}</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</template>
|