[tab].vue
3.15 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<script setup lang="ts">
import { useKeycloakStore } from '@/@core/stores/keycloakStore'
import UserBerita from '@/components/beranda/UserBerita.vue'
import UserLib from '@/components/beranda/UserLib.vue'
import UserLog from '@/components/beranda/UserLog.vue'
import UserRiwayat from '@/components/beranda/UserRiwayat.vue'
import { computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import UserKeamanan from '@/views/dstipro/beranda/keamanan/index.vue'
import UserPeta from '@/views/dstipro/beranda/peta/index.vue'
import UserProfile from '@/views/dstipro/beranda/profile/index.vue'
import UserProfileHeader from '@/views/dstipro/beranda/UserProfileHeader.vue'
const keycloakStore = useKeycloakStore()
definePageMeta({
navActiveLink: 'naputpro-beranda-tab',
key: 'tab',
})
const route = useRoute('naputpro-beranda-tab')
const router = useRouter()
// Pastikan activeTab bertipe string agar tidak ada error TypeScript
// const activeTab = computed(() => String(route.params.tab))
const activeTab = computed({
get: () => route.params.tab,
set: () => route.params.tab,
})
// Semua tab
const tabs = [
{ title: 'Profil', icon: 'ri-user-line', tab: 'profile' },
{ title: 'Keamanan', icon: 'ri-lock-line', tab: 'keamanan' },
{ title: 'Berita', icon: 'ri-news-line', tab: 'berita' },
{ title: 'Riwayat', icon: 'ri-file-history-line', tab: 'riwayat' },
{ title: 'Log Absen', icon: 'ri-history-line', tab: 'log' },
{ title: 'Peta', icon: 'ri-history-line', tab: 'peta' },
{ title: 'Peminjaman Buku', icon: 'ri-book-line', tab: 'lib' },
]
// Filter tab berdasarkan civitas
const filteredTabs = computed(() =>
tabs.filter(tab => !(tab.tab === 'riwayat' && keycloakStore.civitas !== 'mahasiswa')),
)
// Fungsi untuk navigasi tab
const navigateTab = (tab: string) => {
router.push(`/naputpro/beranda/${tab}`)
}
</script>
<template>
<UserProfileHeader class="mb-5" />
<!--
<div class="mb-10">
<h1>Welcome, {{ keycloakStore.name }}</h1>
</div>
-->
<div>
<VTabs
v-model="activeTab"
class="v-tabs-pill"
>
<VTab
v-for="item in filteredTabs"
:key="item.icon"
:value="item.tab"
:to="{ name: 'naputpro-beranda-tab', params: { tab: item.tab } }"
>
<VIcon
start
:icon="item.icon"
/>
{{ item.title }}
</VTab>
</VTabs>
<VWindow
v-model="activeTab"
class="mt-5 disable-tab-transition"
:touch="false"
>
<!-- Profile -->
<VWindowItem value="profile">
<UserProfile />
</VWindowItem>
<!-- Keamanan -->
<VWindowItem value="keamanan">
<UserKeamanan />
</VWindowItem>
<!-- Berita -->
<VWindowItem value="berita">
<UserBerita />
</VWindowItem>
<!-- Riwayat -->
<VWindowItem value="riwayat">
<UserRiwayat />
</VWindowItem>
<!-- Log Absen -->
<VWindowItem value="log">
<UserLog />
</VWindowItem>
<!-- Peta UI -->
<VWindowItem value="peta">
<UserPeta />
</VWindowItem>
<VWindowItem value="lib">
<UserLib />
</VWindowItem>
</vwindow>
</div>
</template>