143 lines
3.7 KiB
Vue
143 lines
3.7 KiB
Vue
<template>
|
||
<div>
|
||
<the-sidebar2
|
||
:class="buildName"
|
||
:menu="menu"
|
||
:showUserAvatar="true"
|
||
></the-sidebar2>
|
||
<div class="container-fluid">
|
||
<div>
|
||
<div>
|
||
<div class="col">
|
||
<div
|
||
class="main-page__content navbar row align-items-center p-0"
|
||
:class="{ expanded: !isSidebarCollapsed }"
|
||
>
|
||
<div class="col col-lg-auto order-1 breadcrumbs">
|
||
<Breadcrumbs />
|
||
</div>
|
||
<div class="col-12 col-lg order-3 order-lg-2">
|
||
<div
|
||
class="nav-tabs-container nav-tabs d-flex justify-content-center"
|
||
>
|
||
<ul class="nav">
|
||
<li
|
||
class="nav-item desktop"
|
||
v-for="(navItem, index) in navList"
|
||
:key="index"
|
||
>
|
||
<button
|
||
:title="navItem.title"
|
||
type="button"
|
||
class="btn nav-link"
|
||
@click.prevent="setActiveTab(navItem)"
|
||
:class="{
|
||
active: activeTabGetter?.key == navItem.key,
|
||
}"
|
||
>
|
||
{{ navItem.title }}
|
||
</button>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="col-auto col-lg-auto order-2 order-lg-3 d-flex">
|
||
<user-avatar-dropdown
|
||
style="position: static"
|
||
class="user-avatar-component"
|
||
></user-avatar-dropdown>
|
||
<select-language-dropdown></select-language-dropdown>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="main-page__content"
|
||
:class="{ expanded: !isSidebarCollapsed }"
|
||
>
|
||
<component
|
||
v-if="mainComponentName"
|
||
:is="mainComponentName"
|
||
></component>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import HttpService from "@services/httpService";
|
||
import menu from "@task/json/menu.json";
|
||
import { mapGetters, mapMutations } from "vuex";
|
||
|
||
export default {
|
||
beforeMount() {
|
||
this.httpService = new HttpService(this.taskMicroServiceName);
|
||
},
|
||
mounted() {
|
||
this.setActiveTab(this.navList[0]);
|
||
},
|
||
data() {
|
||
return {
|
||
httpService: undefined,
|
||
menu: menu,
|
||
mainComponentName: "TaskUserReport",
|
||
navList: [
|
||
{
|
||
title: "کاربران",
|
||
key: "users",
|
||
},
|
||
{ title: "گروه ها", key: "group" },
|
||
],
|
||
};
|
||
},
|
||
computed: {
|
||
...mapGetters("entity", ["activeTabGetter"]),
|
||
...mapGetters(["isSidebarCollapsed"]),
|
||
},
|
||
methods: {
|
||
...mapMutations("entity", ["activeTabSetter"]),
|
||
setActiveTab(tab) {
|
||
this.activeTabSetter(tab);
|
||
if (tab.key == "group") {
|
||
this.mainComponentName = "TaskGroupReport";
|
||
} else {
|
||
this.mainComponentName = "TaskUserReport";
|
||
}
|
||
},
|
||
},
|
||
components: {
|
||
TaskUserReport: () => import("@task/components/TaskUserReport.vue"),
|
||
TaskGroupReport: () => import("@task/components/TaskGroupReport.vue"),
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
// .breadcrumbs {
|
||
// margin-right: 7.5em !important;
|
||
// }
|
||
// .expanded {
|
||
// margin-right: 3em;
|
||
// }
|
||
.nav-item {
|
||
.nav-tabs .nav-link:hover,
|
||
.nav-tabs .nav-link:focus {
|
||
color: var(--primary-color);
|
||
border-color: transparent;
|
||
transition: background-color 0.3s ease, color 0.3s ease;
|
||
}
|
||
|
||
.nav-link {
|
||
padding: 0.5rem 2.5rem !important;
|
||
color: var(--text-primary);
|
||
}
|
||
}
|
||
.navbar {
|
||
background-color: #eee;
|
||
}
|
||
.nav-tabs {
|
||
border-bottom: unset;
|
||
}
|
||
</style>
|