ilk commit
This commit is contained in:
burakovec
3
src/layouts/admin-inc/Footer.vue
Normal file
3
src/layouts/admin-inc/Footer.vue
Normal file
@ -0,0 +1,3 @@
|
||||
<template>
|
||||
<footer></footer>
|
||||
</template>
|
||||
41
src/layouts/admin-inc/Header.vue
Normal file
41
src/layouts/admin-inc/Header.vue
Normal file
@ -0,0 +1,41 @@
|
||||
<template>
|
||||
<header>
|
||||
<div class="header-c">
|
||||
<i class="ico-c ico-mobile-menu" @click="SideMenu">
|
||||
<svg>
|
||||
<use href="@/assets/images/icons.svg#mobilemenu" />
|
||||
</svg>
|
||||
</i>
|
||||
<a href="/" class="logo-header">
|
||||
<svg>
|
||||
<use href="@/assets/images/mpi-logos.svg#mpilogo" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
<div class="header-c">
|
||||
<!--i
|
||||
class="ico-c ico-notification badge-have panel-open"
|
||||
data-panelopen="notification"
|
||||
@click="OpenNotification">
|
||||
<span class="badge-c badge-notification"></span>
|
||||
<svg>
|
||||
<use href="@/assets/images/icons.svg#notification" />
|
||||
</svg>
|
||||
</!--i-->
|
||||
<profile-menu />
|
||||
</div>
|
||||
</header>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import ProfileMenu from '@/layouts/admin-inc/ProfileMenu.vue'
|
||||
import { useGlobalStore } from '@/stores/globalStore'
|
||||
const globalStore = useGlobalStore()
|
||||
|
||||
const OpenNotification = () => {
|
||||
globalStore.profileMenu = false
|
||||
globalStore.notificationPanel = !globalStore.notificationPanel
|
||||
}
|
||||
const SideMenu = () => {
|
||||
globalStore.sideMenu = !globalStore.sideMenu
|
||||
}
|
||||
</script>
|
||||
103
src/layouts/admin-inc/ProfileMenu.vue
Normal file
103
src/layouts/admin-inc/ProfileMenu.vue
Normal file
@ -0,0 +1,103 @@
|
||||
<template>
|
||||
<div class="header-profile">
|
||||
<div class="b-menu-profile menu-have-sub" @click="ProfileMenu">
|
||||
<div class="profile-photo-c">
|
||||
<img
|
||||
:src="
|
||||
usersStore.profilePhoto !== '' && usersStore.profilePhoto !== null
|
||||
? dataStore.siteBase + usersStore.profilePhoto
|
||||
: profilePhoto
|
||||
" />
|
||||
</div>
|
||||
</div>
|
||||
<nav
|
||||
id="profilemenu"
|
||||
class="menu-header menu-sub menu-sub-top menu-profile"
|
||||
v-if="globalStore.profileMenu">
|
||||
<ul>
|
||||
<li>
|
||||
<div>
|
||||
<span>Merhaba,</span>
|
||||
<strong>{{ usersStore.userName }}</strong>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<RouterLink to="/profil" @click="globalStore.profileMenu = false">
|
||||
<i class="ico-c ico-menu-profile">
|
||||
<svg>
|
||||
<use href="@/assets/images/icons.svg#profile"></use>
|
||||
</svg>
|
||||
</i>
|
||||
Profil
|
||||
</RouterLink>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" @click="LogOut">
|
||||
<i class="ico-c ico-menu-profile">
|
||||
<svg>
|
||||
<use href="@/assets/images/icons.svg#logout"></use>
|
||||
</svg>
|
||||
</i>
|
||||
<span>Çıkış</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { onBeforeMount } from 'vue'
|
||||
import profilePhoto from '@/assets/images/empty-user.png'
|
||||
|
||||
import { useGlobalStore } from '@/stores/globalStore'
|
||||
const globalStore = useGlobalStore()
|
||||
import { useDataStore } from '@/stores/dataStore'
|
||||
const dataStore = useDataStore()
|
||||
import { useUsersStore } from '@/stores/usersStore'
|
||||
const usersStore = useUsersStore()
|
||||
import router from '@/router'
|
||||
|
||||
const ProfileMenu = () => {
|
||||
globalStore.notificationPanel = false
|
||||
globalStore.profileMenu = !globalStore.profileMenu
|
||||
setTimeout(() => {
|
||||
document.addEventListener('click', closeProfileMenu)
|
||||
}, 10)
|
||||
}
|
||||
const LogOut = async () => {
|
||||
globalStore.profileMenu = false
|
||||
const token = sessionStorage.getItem(usersStore.userStorageKeys.TOKEN)
|
||||
if (token) {
|
||||
let dt = await dataStore.dataPost('Auth/logout')
|
||||
}
|
||||
usersStore.ResetUserData()
|
||||
router.push('/login')
|
||||
}
|
||||
|
||||
const closeProfileMenu = (e: Event) => {
|
||||
let p = e.composedPath && e.composedPath()
|
||||
var open = false
|
||||
if (p) {
|
||||
p.pop()
|
||||
p.forEach((pv) => {
|
||||
if (
|
||||
(pv as HTMLElement).id !== '' &&
|
||||
(pv as HTMLElement).id !== undefined &&
|
||||
(pv as HTMLElement).id.includes('profilemenu')
|
||||
)
|
||||
open = true
|
||||
})
|
||||
}
|
||||
if (!open) {
|
||||
globalStore.profileMenu = false
|
||||
document.removeEventListener('click', closeProfileMenu)
|
||||
}
|
||||
}
|
||||
|
||||
onBeforeMount(async () => {
|
||||
let dt = await dataStore.dataGet('AppUserResim/AppUserId/' + usersStore.userId)
|
||||
if (dt !== 'errorfalse') {
|
||||
usersStore.profilePhoto = dt.filePath
|
||||
}
|
||||
})
|
||||
</script>
|
||||
174
src/layouts/admin-inc/SideMenu.vue
Normal file
174
src/layouts/admin-inc/SideMenu.vue
Normal file
@ -0,0 +1,174 @@
|
||||
<template>
|
||||
<div
|
||||
:class="['menu-side-w', globalStore.menuLoaded ? 'animate' : '']"
|
||||
:style="[sideMenuPosition]">
|
||||
<nav-side :menuData="menuData" />
|
||||
</div>
|
||||
<div
|
||||
class="menu-side-shadow"
|
||||
:class="ShowSideMenuShadow"
|
||||
@click="globalStore.sideMenu = false"></div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted, computed } from 'vue'
|
||||
import NavSide from '@/components/NavSide.vue'
|
||||
import { useGlobalStore } from '@/stores/globalStore'
|
||||
const globalStore = useGlobalStore()
|
||||
import { useUsersStore } from '@/stores/usersStore'
|
||||
const usersStore = useUsersStore()
|
||||
|
||||
globalStore.screenWidth = window.screen.width
|
||||
|
||||
if (globalStore.screenWidth < globalStore.breakPoints.tablet)
|
||||
globalStore.sideMenu = false
|
||||
|
||||
var ShowSideMenuShadow = computed(() => {
|
||||
if (
|
||||
globalStore.screenWidth < globalStore.breakPoints.tablet &&
|
||||
globalStore.sideMenu
|
||||
) {
|
||||
return 'showme'
|
||||
} else {
|
||||
return ''
|
||||
}
|
||||
})
|
||||
|
||||
var sideMenuPosition = computed(() => {
|
||||
if (globalStore.sideMenu) {
|
||||
return 'left:0'
|
||||
} else {
|
||||
return 'left:-' + globalStore.sideMenuWidth + 'px'
|
||||
}
|
||||
})
|
||||
|
||||
const menuData = ref<Record<string, any>[]>([
|
||||
{
|
||||
title: 'Dashboard',
|
||||
ico: 'dashboard',
|
||||
desktop: 'hover',
|
||||
mobile: 'click',
|
||||
to: '/'
|
||||
},
|
||||
{
|
||||
title: 'Piyangolar',
|
||||
ico: 'draws',
|
||||
show: !usersStore.isAccounting,
|
||||
to: usersStore.isPanelUser ? '/piyangolar/piyango-listesi' : '',
|
||||
showsub: !usersStore.isPanelUser,
|
||||
sub: [
|
||||
{
|
||||
title: 'Yeni Piyango',
|
||||
to: '/piyangolar/yeni-piyango',
|
||||
show: usersStore.userApproveId === 4 && !usersStore.isPanelUser
|
||||
},
|
||||
{
|
||||
title: 'Piyango Listesi',
|
||||
to: '/piyangolar/piyango-listesi',
|
||||
show: !usersStore.isPanelUser
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Üyeler',
|
||||
ico: 'customers',
|
||||
show: usersStore.isPanelUser && !usersStore.isAccounting,
|
||||
sub: [
|
||||
{
|
||||
title: 'Üye Listesi',
|
||||
to: '/uyeler/uye-liste'
|
||||
},
|
||||
{
|
||||
title: 'Üye Tipleri',
|
||||
to: '/uyeler/uye-tipleri'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Kullanıcılar',
|
||||
ico: 'users',
|
||||
show: usersStore.isPanelUser,
|
||||
sub: [
|
||||
{
|
||||
title: 'Yeni Kullanıcı',
|
||||
to: '/kullanicilar/yeni-kullanici'
|
||||
},
|
||||
{
|
||||
title: 'Kullanıcı Listesi',
|
||||
to: '/kullanicilar/kullanici-liste'
|
||||
},
|
||||
{
|
||||
title: 'Kullanıcı Rolleri',
|
||||
to: '/kullanicilar/kullanici-roller'
|
||||
},
|
||||
{
|
||||
title: 'Ayarlar',
|
||||
to: '/kullanicilar/kullanici-ayarlari'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Site Yönetimi',
|
||||
ico: 'sitemanagement',
|
||||
show: usersStore.isPanelUser && !usersStore.isAccounting,
|
||||
sub: [
|
||||
{
|
||||
title: 'Yeni Sayfa',
|
||||
to: '/site-yonetimi/yeni-sayfa'
|
||||
},
|
||||
{
|
||||
title: 'Sayfa Listesi',
|
||||
to: '/site-yonetimi/sayfa-listesi'
|
||||
},
|
||||
{
|
||||
title: 'Menü Yönetimi',
|
||||
to: '/site-yonetimi/menu-listesi'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Muhasebe',
|
||||
ico: 'accounting1',
|
||||
show: usersStore.isPanelUser,
|
||||
sub: [
|
||||
{
|
||||
title: 'Piyango Listesi',
|
||||
to: '/muhasebe/piyango-listesi'
|
||||
},
|
||||
{
|
||||
title: 'Ayarlar',
|
||||
to: '/muhasebe/ayarlar'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Sistem Günlüğü',
|
||||
ico: 'logs',
|
||||
to: '/logs',
|
||||
show: usersStore.isPanelUser && !usersStore.isAccounting
|
||||
},
|
||||
{
|
||||
title: 'Profil',
|
||||
ico: 'customers',
|
||||
to: '/profil',
|
||||
show: !usersStore.isPanelUser
|
||||
}
|
||||
])
|
||||
const ResizeWindow = () => {
|
||||
globalStore.screenWidth = window.screen.width
|
||||
if (globalStore.screenWidth < globalStore.breakPoints.tablet)
|
||||
globalStore.sideMenu = false
|
||||
}
|
||||
onMounted(() => {
|
||||
const menuSideW = document.querySelector('.menu-side-w')
|
||||
if (menuSideW) {
|
||||
requestAnimationFrame(() => {
|
||||
globalStore.sideMenuWidth = menuSideW.getBoundingClientRect().width
|
||||
setTimeout(() => {
|
||||
globalStore.menuLoaded = true
|
||||
}, 100)
|
||||
})
|
||||
}
|
||||
ResizeWindow()
|
||||
window.addEventListener('resize', ResizeWindow)
|
||||
})
|
||||
</script>
|
||||
Reference in New Issue
Block a user