mirror of
https://github.com/IT4Change/gradido.git
synced 2025-12-13 07:45:54 +00:00
delete creative tim src/components/Navbar and Sidebarplugin
This commit is contained in:
ogerly
parent
274fd6e21e
commit
cbda7f81f3
@ -1,21 +0,0 @@
|
|||||||
<template>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
class="navbar-toggler collapsed"
|
|
||||||
data-toggle="collapse"
|
|
||||||
data-target="#navbar"
|
|
||||||
aria-controls="navbarSupportedContent"
|
|
||||||
aria-expanded="false"
|
|
||||||
aria-label="Toggle navigation"
|
|
||||||
>
|
|
||||||
<span class="navbar-toggler-bar bar1"></span>
|
|
||||||
<span class="navbar-toggler-bar bar2"></span>
|
|
||||||
<span class="navbar-toggler-bar bar3"></span>
|
|
||||||
</button>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: 'navbar-toggle-button',
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style></style>
|
|
||||||
@ -1,32 +0,0 @@
|
|||||||
<template>
|
|
||||||
<button
|
|
||||||
class="navbar-toggler"
|
|
||||||
type="button"
|
|
||||||
data-toggle="collapse"
|
|
||||||
:data-target="target"
|
|
||||||
:aria-controls="target"
|
|
||||||
:aria-expanded="toggled"
|
|
||||||
aria-label="Toggle navigation"
|
|
||||||
>
|
|
||||||
<span class="navbar-toggler-icon"></span>
|
|
||||||
<slot>
|
|
||||||
<span></span>
|
|
||||||
</slot>
|
|
||||||
</button>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
props: {
|
|
||||||
target: {
|
|
||||||
type: [String, Number],
|
|
||||||
description: 'Button target element',
|
|
||||||
},
|
|
||||||
toggled: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false,
|
|
||||||
description: 'Whether button is toggled',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style></style>
|
|
||||||
@ -1,197 +0,0 @@
|
|||||||
import { mount, RouterLinkStub } from '@vue/test-utils'
|
|
||||||
import SideBar from './SideBar'
|
|
||||||
|
|
||||||
const localVue = global.localVue
|
|
||||||
|
|
||||||
const storeDispatchMock = jest.fn()
|
|
||||||
|
|
||||||
describe('SideBar', () => {
|
|
||||||
let wrapper
|
|
||||||
|
|
||||||
const stubs = {
|
|
||||||
RouterLink: RouterLinkStub,
|
|
||||||
}
|
|
||||||
|
|
||||||
const propsData = {
|
|
||||||
balance: 1234.56,
|
|
||||||
}
|
|
||||||
|
|
||||||
const mocks = {
|
|
||||||
$store: {
|
|
||||||
state: {
|
|
||||||
email: 'test@example.org',
|
|
||||||
publisherId: 123,
|
|
||||||
firstName: 'test',
|
|
||||||
lastName: 'example',
|
|
||||||
hasElopage: false,
|
|
||||||
},
|
|
||||||
dispatch: storeDispatchMock,
|
|
||||||
},
|
|
||||||
$i18n: {
|
|
||||||
locale: 'en',
|
|
||||||
},
|
|
||||||
$t: jest.fn((t) => t),
|
|
||||||
$n: jest.fn((n) => n),
|
|
||||||
}
|
|
||||||
|
|
||||||
const Wrapper = () => {
|
|
||||||
return mount(SideBar, { localVue, mocks, stubs, propsData })
|
|
||||||
}
|
|
||||||
|
|
||||||
describe('mount', () => {
|
|
||||||
beforeEach(() => {
|
|
||||||
wrapper = Wrapper()
|
|
||||||
})
|
|
||||||
|
|
||||||
it('renders the component', () => {
|
|
||||||
expect(wrapper.find('#sidenav-main').exists()).toBeTruthy()
|
|
||||||
})
|
|
||||||
|
|
||||||
describe('navbar button', () => {
|
|
||||||
it('has a navbar button', () => {
|
|
||||||
expect(wrapper.find('button.navbar-toggler').exists()).toBeTruthy()
|
|
||||||
})
|
|
||||||
|
|
||||||
it('calls showSidebar when clicked', async () => {
|
|
||||||
const spy = jest.spyOn(wrapper.vm.$sidebar, 'displaySidebar')
|
|
||||||
wrapper.find('button.navbar-toggler').trigger('click')
|
|
||||||
await wrapper.vm.$nextTick()
|
|
||||||
expect(spy).toHaveBeenCalledWith(true)
|
|
||||||
})
|
|
||||||
})
|
|
||||||
|
|
||||||
describe('balance', () => {
|
|
||||||
it('shows em-dash as balance while loading', () => {
|
|
||||||
expect(wrapper.find('div.row.text-center').text()).toBe('— GDD')
|
|
||||||
})
|
|
||||||
|
|
||||||
it('shows the when loaded', async () => {
|
|
||||||
wrapper.setProps({
|
|
||||||
pending: false,
|
|
||||||
})
|
|
||||||
await wrapper.vm.$nextTick()
|
|
||||||
expect(wrapper.find('div.row.text-center').text()).toBe('1234.56 GDD')
|
|
||||||
})
|
|
||||||
})
|
|
||||||
|
|
||||||
describe('close siedbar', () => {
|
|
||||||
it('calls closeSidebar when clicked', async () => {
|
|
||||||
const spy = jest.spyOn(wrapper.vm.$sidebar, 'displaySidebar')
|
|
||||||
wrapper.find('#sidenav-collapse-main').find('button.navbar-toggler').trigger('click')
|
|
||||||
await wrapper.vm.$nextTick()
|
|
||||||
expect(spy).toHaveBeenCalledWith(false)
|
|
||||||
})
|
|
||||||
})
|
|
||||||
|
|
||||||
describe('static menu items', () => {
|
|
||||||
describe("member's area without publisher ID", () => {
|
|
||||||
it('has a link to the elopage', () => {
|
|
||||||
expect(wrapper.findAll('li').at(0).text()).toContain('members_area')
|
|
||||||
})
|
|
||||||
|
|
||||||
it('has a badge', () => {
|
|
||||||
expect(wrapper.findAll('li').at(0).text()).toContain('!')
|
|
||||||
})
|
|
||||||
|
|
||||||
it('links to the elopage registration', () => {
|
|
||||||
expect(wrapper.findAll('li').at(0).find('a').attributes('href')).toBe(
|
|
||||||
'https://elopage.com/s/gradido/basic-de/payment?locale=en&prid=111&pid=123&firstName=test&lastName=example&email=test@example.org',
|
|
||||||
)
|
|
||||||
})
|
|
||||||
|
|
||||||
describe('with locale="de"', () => {
|
|
||||||
beforeEach(() => {
|
|
||||||
mocks.$i18n.locale = 'de'
|
|
||||||
})
|
|
||||||
|
|
||||||
it('links to the German elopage registration when locale is set to de', () => {
|
|
||||||
expect(wrapper.findAll('li').at(0).find('a').attributes('href')).toBe(
|
|
||||||
'https://elopage.com/s/gradido/basic-de/payment?locale=de&prid=111&pid=123&firstName=test&lastName=example&email=test@example.org',
|
|
||||||
)
|
|
||||||
})
|
|
||||||
})
|
|
||||||
|
|
||||||
describe("member's area with publisher ID", () => {
|
|
||||||
beforeEach(() => {
|
|
||||||
mocks.$store.state.hasElopage = true
|
|
||||||
})
|
|
||||||
|
|
||||||
it('links to the elopage member area', () => {
|
|
||||||
expect(wrapper.findAll('li').at(0).find('a').attributes('href')).toBe(
|
|
||||||
'https://elopage.com/s/gradido/sign_in?locale=de',
|
|
||||||
)
|
|
||||||
})
|
|
||||||
|
|
||||||
it('has no badge', () => {
|
|
||||||
expect(wrapper.findAll('li').at(0).text()).not.toContain('!')
|
|
||||||
})
|
|
||||||
})
|
|
||||||
|
|
||||||
describe("member's area with default publisher ID and no elopage", () => {
|
|
||||||
beforeEach(() => {
|
|
||||||
mocks.$store.state.publisherId = null
|
|
||||||
mocks.$store.state.hasElopage = false
|
|
||||||
})
|
|
||||||
|
|
||||||
it('links to the elopage member area with default publisher ID', () => {
|
|
||||||
expect(wrapper.findAll('li').at(0).find('a').attributes('href')).toBe(
|
|
||||||
'https://elopage.com/s/gradido/basic-de/payment?locale=de&prid=111&pid=2896&firstName=test&lastName=example&email=test@example.org',
|
|
||||||
)
|
|
||||||
})
|
|
||||||
|
|
||||||
it('has a badge', () => {
|
|
||||||
expect(wrapper.findAll('li').at(0).text()).toContain('!')
|
|
||||||
})
|
|
||||||
})
|
|
||||||
})
|
|
||||||
|
|
||||||
describe('logout', () => {
|
|
||||||
it('has a logout button', () => {
|
|
||||||
expect(wrapper.findAll('li').at(1).text()).toBe('logout')
|
|
||||||
})
|
|
||||||
|
|
||||||
it('emits logout when logout is clicked', async () => {
|
|
||||||
wrapper.findAll('li').at(1).find('a').trigger('click')
|
|
||||||
await wrapper.vm.$nextTick()
|
|
||||||
expect(wrapper.emitted('logout')).toEqual([[]])
|
|
||||||
})
|
|
||||||
})
|
|
||||||
|
|
||||||
describe('admin-area', () => {
|
|
||||||
it('is not visible when not an admin', () => {
|
|
||||||
expect(wrapper.findAll('li').at(1).text()).not.toBe('admin_area')
|
|
||||||
})
|
|
||||||
|
|
||||||
describe('logged in as admin', () => {
|
|
||||||
const assignLocationSpy = jest.fn()
|
|
||||||
beforeEach(async () => {
|
|
||||||
mocks.$store.state.isAdmin = true
|
|
||||||
mocks.$store.state.token = 'valid-token'
|
|
||||||
window.location.assign = assignLocationSpy
|
|
||||||
wrapper = Wrapper()
|
|
||||||
})
|
|
||||||
|
|
||||||
it('is visible', () => {
|
|
||||||
expect(wrapper.findAll('li').at(1).text()).toBe('admin_area')
|
|
||||||
})
|
|
||||||
|
|
||||||
describe('click on admin area', () => {
|
|
||||||
beforeEach(async () => {
|
|
||||||
await wrapper.findAll('li').at(1).find('a').trigger('click')
|
|
||||||
})
|
|
||||||
|
|
||||||
it('opens a new window when clicked', () => {
|
|
||||||
expect(assignLocationSpy).toHaveBeenCalledWith(
|
|
||||||
'http://localhost/admin/authenticate?token=valid-token',
|
|
||||||
)
|
|
||||||
})
|
|
||||||
|
|
||||||
it('dispatches logout to store', () => {
|
|
||||||
expect(storeDispatchMock).toHaveBeenCalledWith('logout')
|
|
||||||
})
|
|
||||||
})
|
|
||||||
})
|
|
||||||
})
|
|
||||||
})
|
|
||||||
})
|
|
||||||
})
|
|
||||||
@ -1,145 +0,0 @@
|
|||||||
<template>
|
|
||||||
<nav
|
|
||||||
class="navbar navbar-vertical fixed-left navbar-expand-md navbar-light bg-transparent"
|
|
||||||
id="sidenav-main"
|
|
||||||
>
|
|
||||||
<div class="container-fluid">
|
|
||||||
<!--Toggler-->
|
|
||||||
<navbar-toggle-button @click.native="showSidebar"></navbar-toggle-button>
|
|
||||||
<div class="navbar-brand">
|
|
||||||
<img :src="logo" class="navbar-brand-img" alt="..." />
|
|
||||||
</div>
|
|
||||||
<b-row class="text-center">
|
|
||||||
<b-col>{{ pending ? '—' : $n(balance, 'decimal') }} GDD</b-col>
|
|
||||||
</b-row>
|
|
||||||
<slot name="mobile-right">
|
|
||||||
<ul class="nav align-items-center d-md-none">
|
|
||||||
<div class="media align-items-center">
|
|
||||||
<span class="avatar avatar-sm">
|
|
||||||
<vue-qrcode
|
|
||||||
v-if="$store.state.email"
|
|
||||||
:value="$store.state.email"
|
|
||||||
type="image/png"
|
|
||||||
></vue-qrcode>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</ul>
|
|
||||||
</slot>
|
|
||||||
<slot></slot>
|
|
||||||
<div
|
|
||||||
v-show="$sidebar.showSidebar"
|
|
||||||
class="navbar-collapse collapse show"
|
|
||||||
id="sidenav-collapse-main"
|
|
||||||
>
|
|
||||||
<div class="navbar-collapse-header d-md-none">
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-6 collapse-brand">
|
|
||||||
<img :src="logo" />
|
|
||||||
</div>
|
|
||||||
<div class="col-6 collapse-close">
|
|
||||||
<navbar-toggle-button @click.native="closeSidebar"></navbar-toggle-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<ul class="navbar-nav">
|
|
||||||
<slot name="links"></slot>
|
|
||||||
</ul>
|
|
||||||
<hr class="my-2" />
|
|
||||||
|
|
||||||
<ul class="navbar-nav ml-3">
|
|
||||||
<li class="nav-item">
|
|
||||||
<a :href="getElopageLink()" class="nav-link" target="_blank">
|
|
||||||
{{ $t('members_area') }}
|
|
||||||
<b-badge v-if="!$store.state.hasElopage" pill variant="danger">!</b-badge>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<ul class="navbar-nav ml-3" v-if="$store.state.isAdmin">
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link pointer" @click="admin">
|
|
||||||
{{ $t('admin_area') }}
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<ul class="navbar-nav ml-3">
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link pointer" @click="logout">
|
|
||||||
{{ $t('logout') }}
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
import NavbarToggleButton from '@/components/NavbarToggleButton'
|
|
||||||
import VueQrcode from 'vue-qrcode'
|
|
||||||
import CONFIG from '../../config'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'sidebar',
|
|
||||||
components: {
|
|
||||||
NavbarToggleButton,
|
|
||||||
VueQrcode,
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
logo: {
|
|
||||||
type: String,
|
|
||||||
default: 'img/brand/green.png',
|
|
||||||
description: 'Gradido Sidebar app logo',
|
|
||||||
},
|
|
||||||
value: { type: String },
|
|
||||||
autoClose: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true,
|
|
||||||
description: 'Whether sidebar should autoclose on mobile when clicking an item',
|
|
||||||
},
|
|
||||||
balance: {
|
|
||||||
type: Number,
|
|
||||||
default: 0,
|
|
||||||
},
|
|
||||||
pending: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
provide() {
|
|
||||||
return {
|
|
||||||
autoClose: this.autoClose,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
closeSidebar() {
|
|
||||||
this.$sidebar.displaySidebar(false)
|
|
||||||
},
|
|
||||||
showSidebar() {
|
|
||||||
this.$sidebar.displaySidebar(true)
|
|
||||||
},
|
|
||||||
logout() {
|
|
||||||
this.$emit('logout')
|
|
||||||
},
|
|
||||||
admin() {
|
|
||||||
window.location.assign(CONFIG.ADMIN_AUTH_URL.replace('$1', this.$store.state.token))
|
|
||||||
this.$store.dispatch('logout') // logout without redirect
|
|
||||||
},
|
|
||||||
getElopageLink() {
|
|
||||||
const pId = this.$store.state.publisherId
|
|
||||||
? this.$store.state.publisherId
|
|
||||||
: CONFIG.DEFAULT_PUBLISHER_ID
|
|
||||||
return encodeURI(
|
|
||||||
this.$store.state.hasElopage
|
|
||||||
? `https://elopage.com/s/gradido/sign_in?locale=${this.$i18n.locale}`
|
|
||||||
: `https://elopage.com/s/gradido/basic-de/payment?locale=${this.$i18n.locale}&prid=111&pid=${pId}&firstName=${this.$store.state.firstName}&lastName=${this.$store.state.lastName}&email=${this.$store.state.email}`,
|
|
||||||
)
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style>
|
|
||||||
.pointer {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,189 +0,0 @@
|
|||||||
<template>
|
|
||||||
<b-nav-item
|
|
||||||
:is="baseComponent"
|
|
||||||
:to="link.path ? link.path : '/'"
|
|
||||||
class="nav-item"
|
|
||||||
:class="{ active: isActive }"
|
|
||||||
>
|
|
||||||
<a
|
|
||||||
v-if="isMenu"
|
|
||||||
class="sidebar-menu-item nav-link"
|
|
||||||
:class="{ active: isActive }"
|
|
||||||
:aria-expanded="!collapsed"
|
|
||||||
data-toggle="collapse"
|
|
||||||
@click.prevent="collapseMenu"
|
|
||||||
>
|
|
||||||
<template v-if="addLink">
|
|
||||||
<span class="nav-link-text">
|
|
||||||
{{ link.name }}
|
|
||||||
<b class="caret"></b>
|
|
||||||
</span>
|
|
||||||
</template>
|
|
||||||
<template v-else>
|
|
||||||
<i :class="link.icon"></i>
|
|
||||||
<span class="nav-link-text">
|
|
||||||
{{ link.name }}
|
|
||||||
<b class="caret"></b>
|
|
||||||
</span>
|
|
||||||
</template>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<collapse-transition>
|
|
||||||
<div v-if="$slots.default || this.isMenu" v-show="!collapsed" class="collapse show">
|
|
||||||
<ul class="nav nav-sm flex-column">
|
|
||||||
<slot></slot>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</collapse-transition>
|
|
||||||
|
|
||||||
<slot name="title" v-if="children.length === 0 && !$slots.default && link.path">
|
|
||||||
<component
|
|
||||||
:to="link.path"
|
|
||||||
@click.native="linkClick"
|
|
||||||
:is="elementType(link, false)"
|
|
||||||
class="nav-link"
|
|
||||||
:class="{ active: link.active }"
|
|
||||||
:target="link.target"
|
|
||||||
:href="link.path"
|
|
||||||
>
|
|
||||||
<template v-if="addLink">
|
|
||||||
<span class="nav-link-text">{{ link.name }}</span>
|
|
||||||
</template>
|
|
||||||
<template v-else>
|
|
||||||
<i :class="link.icon"></i>
|
|
||||||
<span class="nav-link-text">{{ link.name }}</span>
|
|
||||||
</template>
|
|
||||||
</component>
|
|
||||||
</slot>
|
|
||||||
</b-nav-item>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
import { CollapseTransition } from 'vue2-transitions'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'sidebar-item',
|
|
||||||
components: {
|
|
||||||
CollapseTransition,
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
menu: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false,
|
|
||||||
description:
|
|
||||||
"Whether the item is a menu. Most of the item it's not used and should be used only if you want to override the default behavior.",
|
|
||||||
},
|
|
||||||
link: {
|
|
||||||
type: Object,
|
|
||||||
default: () => {
|
|
||||||
return {
|
|
||||||
name: '',
|
|
||||||
path: '',
|
|
||||||
children: [],
|
|
||||||
}
|
|
||||||
},
|
|
||||||
description:
|
|
||||||
'Sidebar link. Can contain name, path, icon and other attributes. See examples for more info',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
provide() {
|
|
||||||
return {
|
|
||||||
addLink: this.addChild,
|
|
||||||
removeLink: this.removeChild,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
inject: {
|
|
||||||
addLink: { default: null },
|
|
||||||
removeLink: { default: null },
|
|
||||||
autoClose: {
|
|
||||||
default: true,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
children: [],
|
|
||||||
collapsed: true,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
baseComponent() {
|
|
||||||
return this.isMenu || this.link.isRoute ? 'li' : 'router-link'
|
|
||||||
},
|
|
||||||
linkPrefix() {
|
|
||||||
if (this.link.name) {
|
|
||||||
const words = this.link.name.split(' ')
|
|
||||||
return words.map((word) => word.substring(0, 1)).join('')
|
|
||||||
}
|
|
||||||
return ''
|
|
||||||
},
|
|
||||||
isMenu() {
|
|
||||||
return this.children.length > 0 || this.menu === true
|
|
||||||
},
|
|
||||||
isActive() {
|
|
||||||
if (this.$route && this.$route.path) {
|
|
||||||
const matchingRoute = this.children.find((c) => this.$route.path.startsWith(c.link.path))
|
|
||||||
if (matchingRoute !== undefined) {
|
|
||||||
return true
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return false
|
|
||||||
},
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
addChild(item) {
|
|
||||||
const index = this.$slots.default.indexOf(item.$vnode)
|
|
||||||
this.children.splice(index, 0, item)
|
|
||||||
},
|
|
||||||
removeChild(item) {
|
|
||||||
const tabs = this.children
|
|
||||||
const index = tabs.indexOf(item)
|
|
||||||
tabs.splice(index, 1)
|
|
||||||
},
|
|
||||||
elementType(link, isParent = true) {
|
|
||||||
if (link.isRoute === false) {
|
|
||||||
return isParent ? 'li' : 'a'
|
|
||||||
} else {
|
|
||||||
return 'router-link'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
linkAbbreviation(name) {
|
|
||||||
const matches = name.match(/\b(\w)/g)
|
|
||||||
return matches.join('')
|
|
||||||
},
|
|
||||||
linkClick() {
|
|
||||||
if (this.autoClose && this.$sidebar && this.$sidebar.showSidebar === true) {
|
|
||||||
this.$sidebar.displaySidebar(false)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
collapseMenu() {
|
|
||||||
this.collapsed = !this.collapsed
|
|
||||||
},
|
|
||||||
collapseSubMenu(link) {
|
|
||||||
link.collapsed = !link.collapsed
|
|
||||||
},
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
if (this.addLink) {
|
|
||||||
this.addLink(this)
|
|
||||||
}
|
|
||||||
if (this.link.collapsed !== undefined) {
|
|
||||||
this.collapsed = this.link.collapsed
|
|
||||||
}
|
|
||||||
if (this.isActive && this.isMenu) {
|
|
||||||
this.collapsed = false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
destroyed() {
|
|
||||||
if (this.$el && this.$el.parentNode) {
|
|
||||||
this.$el.parentNode.removeChild(this.$el)
|
|
||||||
}
|
|
||||||
if (this.removeLink) {
|
|
||||||
this.removeLink(this)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style>
|
|
||||||
.sidebar-menu-item {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,41 +0,0 @@
|
|||||||
import Sidebar from './SideBar.vue'
|
|
||||||
import SidebarItem from './SidebarItem.vue'
|
|
||||||
|
|
||||||
const SidebarStore = {
|
|
||||||
showSidebar: false,
|
|
||||||
sidebarLinks: [],
|
|
||||||
isMinimized: false,
|
|
||||||
displaySidebar(value) {
|
|
||||||
this.showSidebar = value
|
|
||||||
},
|
|
||||||
toggleMinimize() {
|
|
||||||
document.body.classList.toggle('sidebar-mini')
|
|
||||||
const simulateWindowResize = setInterval(() => {
|
|
||||||
window.dispatchEvent(new Event('resize'))
|
|
||||||
}, 180)
|
|
||||||
|
|
||||||
setTimeout(() => {
|
|
||||||
clearInterval(simulateWindowResize)
|
|
||||||
}, 1000)
|
|
||||||
|
|
||||||
this.isMinimized = !this.isMinimized
|
|
||||||
},
|
|
||||||
}
|
|
||||||
|
|
||||||
const SidebarPlugin = {
|
|
||||||
install(Vue, options) {
|
|
||||||
if (options && options.sidebarLinks) {
|
|
||||||
SidebarStore.sidebarLinks = options.sidebarLinks
|
|
||||||
}
|
|
||||||
const app = new Vue({
|
|
||||||
data: {
|
|
||||||
sidebarStore: SidebarStore,
|
|
||||||
},
|
|
||||||
})
|
|
||||||
Vue.prototype.$sidebar = app.sidebarStore
|
|
||||||
Vue.component('side-bar', Sidebar)
|
|
||||||
Vue.component('sidebar-item', SidebarItem)
|
|
||||||
},
|
|
||||||
}
|
|
||||||
|
|
||||||
export default SidebarPlugin
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
import NavbarToggleButton from './Navbar/NavbarToggleButton'
|
|
||||||
|
|
||||||
import SidebarPlugin from './SidebarPlugin'
|
|
||||||
|
|
||||||
export { SidebarPlugin, NavbarToggleButton }
|
|
||||||
@ -1,6 +1,5 @@
|
|||||||
import GlobalComponents from './globalComponents'
|
import GlobalComponents from './globalComponents'
|
||||||
import GlobalDirectives from './globalDirectives'
|
import GlobalDirectives from './globalDirectives'
|
||||||
import SideBar from '@/components/SidebarPlugin'
|
|
||||||
|
|
||||||
import Toasted from 'vue-toasted'
|
import Toasted from 'vue-toasted'
|
||||||
|
|
||||||
@ -28,7 +27,6 @@ export default {
|
|||||||
install(Vue) {
|
install(Vue) {
|
||||||
Vue.use(GlobalComponents)
|
Vue.use(GlobalComponents)
|
||||||
Vue.use(GlobalDirectives)
|
Vue.use(GlobalDirectives)
|
||||||
Vue.use(SideBar)
|
|
||||||
Vue.use(BootstrapVue)
|
Vue.use(BootstrapVue)
|
||||||
Vue.use(IconsPlugin)
|
Vue.use(IconsPlugin)
|
||||||
Vue.use(VueMoment)
|
Vue.use(VueMoment)
|
||||||
|
|||||||
@ -8,7 +8,6 @@ import * as rules from 'vee-validate/dist/rules'
|
|||||||
import { messages } from 'vee-validate/dist/locale/en.json'
|
import { messages } from 'vee-validate/dist/locale/en.json'
|
||||||
|
|
||||||
import RegeneratorRuntime from 'regenerator-runtime'
|
import RegeneratorRuntime from 'regenerator-runtime'
|
||||||
import SideBar from '@/components/SidebarPlugin'
|
|
||||||
import VueQrcode from 'vue-qrcode'
|
import VueQrcode from 'vue-qrcode'
|
||||||
|
|
||||||
import VueMoment from 'vue-moment'
|
import VueMoment from 'vue-moment'
|
||||||
@ -41,7 +40,6 @@ global.localVue.use(BootstrapVue)
|
|||||||
global.localVue.use(Vuex)
|
global.localVue.use(Vuex)
|
||||||
global.localVue.use(IconsPlugin)
|
global.localVue.use(IconsPlugin)
|
||||||
global.localVue.use(RegeneratorRuntime)
|
global.localVue.use(RegeneratorRuntime)
|
||||||
global.localVue.use(SideBar)
|
|
||||||
global.localVue.use(VueQrcode)
|
global.localVue.use(VueQrcode)
|
||||||
global.localVue.use(VueMoment)
|
global.localVue.use(VueMoment)
|
||||||
global.localVue.component('validation-provider', ValidationProvider)
|
global.localVue.component('validation-provider', ValidationProvider)
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user