mirror of
https://github.com/crater-invoice/crater.git
synced 2025-10-31 21:51:10 -04:00
build version 400
This commit is contained in:
Mohit Panjwani
@ -1,83 +1,61 @@
|
||||
<template>
|
||||
<div class="template-container" v-if="isAppLoaded">
|
||||
<div v-if="isAppLoaded" class="h-full">
|
||||
<base-modal />
|
||||
<site-header/>
|
||||
<site-sidebar type="basic"/>
|
||||
|
||||
<transition
|
||||
name="fade"
|
||||
mode="out-in">
|
||||
<site-header />
|
||||
<div class="flex h-screen pt-16 pb-10 overflow-hidden">
|
||||
<site-sidebar />
|
||||
<router-view />
|
||||
</transition>
|
||||
<site-footer/>
|
||||
</div>
|
||||
<site-footer />
|
||||
</div>
|
||||
<div v-else class="template-container">
|
||||
<font-awesome-icon icon="spinner" class="fa-spin"/>
|
||||
<div v-else class="h-full">
|
||||
<refresh-icon class="h-6 animate-spin" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script type="text/babel">
|
||||
import SiteHeader from './partials/TheSiteHeader.vue'
|
||||
import SiteFooter from './partials/TheSiteFooter.vue'
|
||||
import SiteSidebar from './partials/TheSiteSidebar.vue'
|
||||
import Layout from '../../helpers/layout'
|
||||
import BaseModal from '../../components/base/modal/BaseModal'
|
||||
import { RefreshIcon } from '@vue-hero-icons/solid'
|
||||
import { mapActions, mapGetters } from 'vuex'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
SiteHeader, SiteSidebar, SiteFooter, BaseModal
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
'header': 'header'
|
||||
}
|
||||
SiteHeader,
|
||||
SiteSidebar,
|
||||
SiteFooter,
|
||||
BaseModal,
|
||||
RefreshIcon,
|
||||
},
|
||||
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'isAppLoaded'
|
||||
]),
|
||||
...mapGetters(['isAppLoaded']),
|
||||
|
||||
...mapGetters('company', {
|
||||
selectedCompany: 'getSelectedCompany',
|
||||
companies: 'getCompanies'
|
||||
}),
|
||||
|
||||
isShow () {
|
||||
isShow() {
|
||||
return true
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
Layout.set('layout-default')
|
||||
},
|
||||
},
|
||||
|
||||
created () {
|
||||
this.bootstrap().then((res) => {
|
||||
created() {
|
||||
this.bootstrap().then(() => {
|
||||
this.setInitialCompany()
|
||||
})
|
||||
},
|
||||
|
||||
methods: {
|
||||
...mapActions(['bootstrap']),
|
||||
|
||||
...mapActions('company', ['setSelectedCompany']),
|
||||
setInitialCompany () {
|
||||
let selectedCompany = Ls.get('selectedCompany') !== null
|
||||
|
||||
if (selectedCompany) {
|
||||
let foundCompany = this.companies.find((company) => company.id === parseInt(selectedCompany))
|
||||
|
||||
if (foundCompany) {
|
||||
this.setSelectedCompany(foundCompany)
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
this.setSelectedCompany(this.companies[0])
|
||||
}
|
||||
}
|
||||
setInitialCompany() {
|
||||
this.setSelectedCompany(this.selectedCompany)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
body {
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,55 +1,83 @@
|
||||
<template>
|
||||
<div class="login-page login-3">
|
||||
<div class="site-wrapper">
|
||||
<div class="login-box">
|
||||
<div class="box-wrapper">
|
||||
<div class="logo-main">
|
||||
<a href="/admin">
|
||||
<img
|
||||
src="/assets/img/crater-logo.png"
|
||||
alt="Crater Logo">
|
||||
</a>
|
||||
</div>
|
||||
<router-view></router-view>
|
||||
<div class="page-copyright">
|
||||
<p>{{ $t('layout_login.copyright_crater') }}</p>
|
||||
</div>
|
||||
<div class="grid h-full grid-cols-12 overflow-y-hidden bg-gray-100">
|
||||
<div
|
||||
class="flex items-center justify-center w-full max-w-sm col-span-12 p-4 mx-auto text-gray-900 md:p-8 md:col-span-6 lg:col-span-4 flex-2 md:pb-48 md:pt-40"
|
||||
>
|
||||
<div class="w-full">
|
||||
<a href="/admin">
|
||||
<img
|
||||
src="/assets/img/crater-logo.png"
|
||||
class="block w-48 h-auto max-w-full mb-32 text-primary-400"
|
||||
alt="Crater Logo"
|
||||
/>
|
||||
</a>
|
||||
<router-view></router-view>
|
||||
<div
|
||||
class="pt-24 mt-0 text-sm not-italic font-medium leading-relaxed text-left text-gray-500 md:pt-40"
|
||||
>
|
||||
<p class="mb-3">{{ $t('layout_login.copyright_crater') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-box">
|
||||
<h1>{{ $t('layout_login.super_simple_invoicing') }}<br>
|
||||
{{ $t('layout_login.for_freelancer') }}<br>
|
||||
{{ $t('layout_login.small_businesses') }} <br>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="relative flex-col items-center justify-center hidden w-full h-full pl-10 bg-no-repeat bg-cover md:col-span-6 lg:col-span-8 md:flex content-box"
|
||||
>
|
||||
<div class="pl-20 xl:pl-0">
|
||||
<h1
|
||||
class="hidden mb-3 text-3xl font-bold leading-normal text-white xl:text-5xl xl:leading-tight md:none lg:block"
|
||||
>
|
||||
{{ $t('layout_login.super_simple_invoicing') }} <br />
|
||||
{{ $t('layout_login.for_freelancer') }} <br />
|
||||
{{ $t('layout_login.small_businesses') }} <br />
|
||||
</h1>
|
||||
|
||||
<p>
|
||||
{{ $t('layout_login.crater_help') }}<br>
|
||||
{{ $t('layout_login.invoices_and_estimates') }}<br>
|
||||
<p
|
||||
class="hidden text-sm not-italic font-normal leading-normal text-gray-100 xl:text-base xl:leading-6 md:none lg:block"
|
||||
>
|
||||
{{ $t('layout_login.crater_help') }}<br />
|
||||
{{ $t('layout_login.invoices_and_estimates') }}<br />
|
||||
</p>
|
||||
|
||||
<div class="content-bottom"/>
|
||||
</div>
|
||||
|
||||
<div class="absolute z-50 w-full bg-no-repeat content-bottom" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script type="text/babel">
|
||||
export default {
|
||||
watch: {
|
||||
$route: 'onRouteChange'
|
||||
},
|
||||
mounted () {
|
||||
this.setLayoutClasses()
|
||||
},
|
||||
methods: {
|
||||
setLayoutClasses () {
|
||||
let body = $('body')
|
||||
body.removeClass()
|
||||
body.addClass('login-page login-1 skin-crater')
|
||||
}
|
||||
},
|
||||
onRouteChange () {
|
||||
$('body').removeClass('login-page')
|
||||
}
|
||||
<style lang="scss" scoped>
|
||||
.content-box {
|
||||
background-image: url('/images/login-vector1.svg');
|
||||
}
|
||||
</script>
|
||||
|
||||
.content-bottom {
|
||||
background-image: url('/images/login-vector3.svg');
|
||||
background-size: 100% 100%;
|
||||
height: 300px;
|
||||
right: 32%;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.content-box::before {
|
||||
background-image: url('/images/frame.svg');
|
||||
content: '';
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
height: 300px;
|
||||
right: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 420px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.content-box::after {
|
||||
background-image: url('/images/login-vector2.svg');
|
||||
content: '';
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
right: 7.5%;
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="site-wrapper">
|
||||
<div class="container">
|
||||
<div class="site-wrapper h-full text-base">
|
||||
<div class="container mx-auto">
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</div>
|
||||
@ -9,19 +9,7 @@
|
||||
<script type="text/babel">
|
||||
export default {
|
||||
watch: {
|
||||
$route: 'onRouteChange'
|
||||
$route: 'onRouteChange',
|
||||
},
|
||||
mounted () {
|
||||
this.setLayoutBackground()
|
||||
},
|
||||
|
||||
destroyed () {
|
||||
document.body.style.backgroundColor = '#EBF1FA'
|
||||
},
|
||||
methods: {
|
||||
setLayoutBackground () {
|
||||
document.body.style.backgroundColor = '#f9fbff'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -1,21 +1,15 @@
|
||||
<template>
|
||||
<footer class="site-footer">
|
||||
<div class="text-right">
|
||||
{{ $t('general.powered_by') }}
|
||||
<a
|
||||
href="http://bytefury.com/"
|
||||
target="_blank">{{ $t('general.bytefury') }}
|
||||
</a>
|
||||
</div>
|
||||
<footer
|
||||
class="absolute bottom-0 flex items-center justify-end w-full h-10 py-2 pr-8 text-sm font-normal text-gray-700 bg-white"
|
||||
>
|
||||
{{ $t('general.powered_by') }}
|
||||
|
||||
<a
|
||||
href="http://bytefury.com/"
|
||||
target="_blank"
|
||||
class="pl-1 font-normal text-gray-900"
|
||||
>
|
||||
{{ $t('general.bytefury') }}
|
||||
</a>
|
||||
</footer>
|
||||
</template>
|
||||
|
||||
<script type="text/babel">
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
footer: 'footer'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -1,116 +1,192 @@
|
||||
<template>
|
||||
<header class="site-header">
|
||||
<a href="/" class="brand-main">
|
||||
<header
|
||||
class="fixed top-0 left-0 z-40 flex items-center justify-between w-full px-4 py-3 md:h-16 md:px-8 bg-gradient-to-r from-primary-500 to-primary-400"
|
||||
>
|
||||
<a
|
||||
href="/admin/dashboard"
|
||||
class="float-none text-lg not-italic font-black tracking-wider text-white brand-main md:float-left font-base"
|
||||
>
|
||||
<img
|
||||
id="logo-white"
|
||||
src="/assets/img/logo-white.png"
|
||||
alt="Crater Logo"
|
||||
class="d-none d-md-inline"
|
||||
>
|
||||
class="hidden h-6 md:block"
|
||||
/>
|
||||
<img
|
||||
id="logo-mobile"
|
||||
src="/assets/img/crater-white-small.png"
|
||||
alt="Laraspace Logo"
|
||||
class="d-md-none">
|
||||
alt="Crater Logo"
|
||||
class="block h-8 md:hidden"
|
||||
/>
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="#"
|
||||
class="nav-toggle"
|
||||
@click="onNavToggle"
|
||||
>
|
||||
<div class="hamburger hamburger--arrowturn">
|
||||
<div class="hamburger-box">
|
||||
<div class="hamburger-inner"/>
|
||||
<ul class="float-right h-8 m-0 list-none md:h-9">
|
||||
<global-search class="hidden float-left mr-2 md:block" />
|
||||
|
||||
<a
|
||||
:class="{ 'is-active': isSidebarOpen }"
|
||||
href="#"
|
||||
class="flex float-left p-1 ml-3 overflow-visible text-sm text-black ease-linear bg-white border-0 rounded cursor-pointer md:hidden md:ml-0 hamburger hamburger--arrowturn"
|
||||
@click="toggleSidebar"
|
||||
>
|
||||
<div class="relative inline-block w-6 h-6">
|
||||
<div class="block hamburger-inner top-1/2" />
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<ul class="action-list">
|
||||
<li>
|
||||
<v-dropdown :show-arrow="false">
|
||||
<a slot="activator" href="#">
|
||||
<font-awesome-icon icon="plus" />
|
||||
</a>
|
||||
|
||||
<li class="relative hidden float-left m-0 md:block">
|
||||
<sw-dropdown>
|
||||
<a
|
||||
slot="activator"
|
||||
href="#"
|
||||
style="padding: 6px"
|
||||
class="inline-block text-sm text-black bg-white rounded-sm"
|
||||
>
|
||||
<plus-icon class="w-6 h-6" />
|
||||
</a>
|
||||
<v-dropdown-item>
|
||||
<router-link class="dropdown-item" to="/admin/invoices/create">
|
||||
<font-awesome-icon icon="file-alt" class="dropdown-item-icon" /> <span> {{ $t('invoices.new_invoice') }} </span>
|
||||
</router-link>
|
||||
</v-dropdown-item>
|
||||
<v-dropdown-item>
|
||||
<router-link class="dropdown-item" to="/admin/estimates/create">
|
||||
<font-awesome-icon class="dropdown-item-icon" icon="file" /> <span> {{ $t('estimates.new_estimate') }} </span>
|
||||
</router-link>
|
||||
</v-dropdown-item>
|
||||
<v-dropdown-item>
|
||||
<router-link class="dropdown-item" to="/admin/customers/create">
|
||||
<font-awesome-icon class="dropdown-item-icon" icon="user" /> <span> {{ $t('customers.new_customer') }} </span>
|
||||
</router-link>
|
||||
</v-dropdown-item>
|
||||
</v-dropdown>
|
||||
|
||||
<sw-dropdown-item tag-name="router-link" to="/admin/invoices/create">
|
||||
<document-text-icon class="h-5 mr-2 text-gray-600" />
|
||||
{{ $t('invoices.new_invoice') }}
|
||||
</sw-dropdown-item>
|
||||
|
||||
<sw-dropdown-item tag-name="router-link" to="/admin/estimates/create">
|
||||
<document-icon class="h-5 mr-2 text-gray-600" />
|
||||
{{ $t('estimates.new_estimate') }}
|
||||
</sw-dropdown-item>
|
||||
|
||||
<sw-dropdown-item tag-name="router-link" to="/admin/customers/create">
|
||||
<user-icon class="h-5 mr-2 text-gray-600" />
|
||||
{{ $t('customers.new_customer') }}
|
||||
</sw-dropdown-item>
|
||||
</sw-dropdown>
|
||||
</li>
|
||||
<li>
|
||||
<v-dropdown :show-arrow="false">
|
||||
|
||||
<li class="relative block float-left ml-2">
|
||||
<sw-dropdown>
|
||||
<a
|
||||
slot="activator"
|
||||
href="#"
|
||||
data-toggle="dropdown"
|
||||
aria-haspopup="true"
|
||||
aria-expanded="false"
|
||||
class="avatar"
|
||||
class="inline-block text-sm text-black bg-white rounded-sm avatar"
|
||||
>
|
||||
<img :src="profilePicture" alt="Avatar">
|
||||
<img
|
||||
:src="profilePicture"
|
||||
alt="Avatar"
|
||||
class="w-8 h-8 rounded-sm md:h-9 md:w-9"
|
||||
/>
|
||||
</a>
|
||||
<v-dropdown-item>
|
||||
<router-link class="dropdown-item" to="/admin/settings">
|
||||
<font-awesome-icon icon="cogs" class="dropdown-item-icon"/> <span> {{ $t('navigation.settings') }} </span>
|
||||
</router-link>
|
||||
</v-dropdown-item>
|
||||
<v-dropdown-item>
|
||||
<a
|
||||
href="#"
|
||||
class="dropdown-item"
|
||||
@click.prevent="logout"
|
||||
>
|
||||
<font-awesome-icon icon="sign-out-alt" class="dropdown-item-icon"/> <span> {{ $t('navigation.logout') }} </span>
|
||||
</a>
|
||||
</v-dropdown-item>
|
||||
</v-dropdown>
|
||||
|
||||
<sw-dropdown-item tag-name="router-link" to="/admin/settings">
|
||||
<cog-icon class="w-4 h-4 mr-2 text-gray-600" />
|
||||
{{ $t('navigation.settings') }}
|
||||
</sw-dropdown-item>
|
||||
|
||||
<sw-dropdown-item @click="logout">
|
||||
<logout-icon class="w-4 h-4 mr-2 text-gray-600" />
|
||||
{{ $t('navigation.logout') }}
|
||||
</sw-dropdown-item>
|
||||
</sw-dropdown>
|
||||
</li>
|
||||
</ul>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<script type="text/babel">
|
||||
import { mapGetters, mapActions } from 'vuex'
|
||||
import {
|
||||
PlusIcon,
|
||||
DocumentTextIcon,
|
||||
DocumentIcon,
|
||||
UserIcon,
|
||||
CogIcon,
|
||||
} from '@vue-hero-icons/solid'
|
||||
|
||||
import { LogoutIcon } from '@vue-hero-icons/outline'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
PlusIcon,
|
||||
DocumentTextIcon,
|
||||
DocumentIcon,
|
||||
UserIcon,
|
||||
CogIcon,
|
||||
LogoutIcon,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('userProfile', [
|
||||
'user'
|
||||
]),
|
||||
profilePicture () {
|
||||
if (this.user && this.user.avatar !== null) {
|
||||
return this.user.avatar
|
||||
...mapGetters('user', ['currentUser']),
|
||||
...mapGetters(['isSidebarOpen']),
|
||||
profilePicture() {
|
||||
if (
|
||||
this.currentUser &&
|
||||
this.currentUser.avatar !== null &&
|
||||
this.currentUser.avatar !== 0
|
||||
) {
|
||||
return this.currentUser.avatar
|
||||
} else {
|
||||
return '/images/default-avatar.jpg'
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
created () {
|
||||
this.loadData()
|
||||
created() {
|
||||
this.fetchCurrentUser()
|
||||
},
|
||||
methods: {
|
||||
...mapActions('userProfile', [
|
||||
'loadData'
|
||||
]),
|
||||
...mapActions({
|
||||
companySelect: 'changeCompany'
|
||||
}),
|
||||
...mapActions('auth', [
|
||||
'logout'
|
||||
]),
|
||||
onNavToggle () {
|
||||
this.$utils.toggleSidebar()
|
||||
}
|
||||
}
|
||||
...mapActions('user', ['fetchCurrentUser']),
|
||||
...mapActions('auth', ['logout']),
|
||||
...mapActions('modal', ['openModal']),
|
||||
...mapActions(['toggleSidebar']),
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.hamburger {
|
||||
transition-property: opacity, filter;
|
||||
transition-duration: 0.15s;
|
||||
}
|
||||
.hamburger-inner {
|
||||
top: 50%;
|
||||
left: 4.5px;
|
||||
right: 4.5px;
|
||||
}
|
||||
.hamburger-inner,
|
||||
.hamburger-inner::before,
|
||||
.hamburger-inner::after {
|
||||
height: 2px;
|
||||
background-color: black;
|
||||
border-radius: 2px;
|
||||
position: absolute;
|
||||
transition-property: transform;
|
||||
transition-duration: 0.15s;
|
||||
transition-timing-function: ease;
|
||||
}
|
||||
|
||||
.hamburger-inner::before,
|
||||
.hamburger-inner::after {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.hamburger-inner::before {
|
||||
top: -5px;
|
||||
}
|
||||
|
||||
.hamburger-inner::after {
|
||||
bottom: -5px;
|
||||
}
|
||||
|
||||
.hamburger--arrowturn.is-active .hamburger-inner {
|
||||
transform: rotate(-180deg);
|
||||
}
|
||||
|
||||
.hamburger--arrowturn.is-active .hamburger-inner::before {
|
||||
transform: translate3d(5px, 3px, 0) rotate(45deg) scale(0.5, 1);
|
||||
}
|
||||
|
||||
.hamburger--arrowturn.is-active .hamburger-inner::after {
|
||||
transform: translate3d(5px, -3px, 0) rotate(-45deg) scale(0.5, 1);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,96 +1,184 @@
|
||||
<template>
|
||||
<div class="sidebar-left">
|
||||
<div class="sidebar-body scroll-pane">
|
||||
<div class="side-nav">
|
||||
<div
|
||||
v-for="(menuItems, index) in menu"
|
||||
<div>
|
||||
<!-- OVERLAY -->
|
||||
<sw-transition type="fade">
|
||||
<div
|
||||
v-show="isSidebarOpen"
|
||||
class="fixed top-0 left-0 z-20 w-full h-full"
|
||||
style="background: rgba(48, 75, 88, 0.5)"
|
||||
@click.prevent="toggleSidebar"
|
||||
></div>
|
||||
</sw-transition>
|
||||
|
||||
<!-- DESKTOP MENU -->
|
||||
<div
|
||||
class="hidden w-56 h-screen pb-32 overflow-y-auto bg-white border-r border-gray-200 border-solid xl:w-64 sw-scroll md:block"
|
||||
>
|
||||
<sw-list
|
||||
v-for="(menuItems, groupIndex) in menuItems"
|
||||
:key="groupIndex"
|
||||
variant="sidebar"
|
||||
>
|
||||
<sw-list-item
|
||||
v-for="(item, index) in menuItems"
|
||||
:title="$t(item.title)"
|
||||
:key="index"
|
||||
class="menu-group"
|
||||
:active="hasActiveUrl(item.route)"
|
||||
:to="item.route"
|
||||
tag-name="router-link"
|
||||
>
|
||||
<router-link
|
||||
v-for="(item, index1) in menuItems"
|
||||
:key="index1"
|
||||
:to="item.route"
|
||||
class="menu-item"
|
||||
@click.native="Toggle"
|
||||
>
|
||||
<font-awesome-icon :icon="item.icon" class="icon menu-icon" /> <span class="ml-3 menu-text">{{ $t(item.title) }}</span>
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
<component slot="icon" :is="item.icon" class="h-5" />
|
||||
</sw-list-item>
|
||||
</sw-list>
|
||||
</div>
|
||||
|
||||
<!-- MOBILE MENU -->
|
||||
<transition
|
||||
enter-class="-translate-x-full"
|
||||
enter-active-class="transition duration-300 ease-in-out transform"
|
||||
enter-to-class="translate-x-0"
|
||||
leave-active-class="transition duration-300 ease-in-out transform"
|
||||
leave-class="translate-x-0"
|
||||
leave-to-class="-translate-x-full"
|
||||
>
|
||||
<div
|
||||
v-show="isSidebarOpen"
|
||||
class="fixed top-0 z-30 w-64 h-screen pt-16 pb-32 overflow-y-auto bg-white border-r border-gray-200 border-solid sw-scroll md:hidden"
|
||||
>
|
||||
<sw-list
|
||||
v-for="(menuItems, groupIndex) in menuItems"
|
||||
:key="groupIndex"
|
||||
variant="sidebar"
|
||||
>
|
||||
<sw-list-item
|
||||
v-for="(item, index) in menuItems"
|
||||
:title="$t(item.title)"
|
||||
:key="index"
|
||||
:active="hasActiveUrl(item.route)"
|
||||
:to="item.route"
|
||||
tag-name="router-link"
|
||||
@click.native="toggleSidebar"
|
||||
>
|
||||
<component slot="icon" :is="item.icon" class="h-5" />
|
||||
</sw-list-item>
|
||||
</sw-list>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script type="text/babel">
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
sidebar: 'sidebar',
|
||||
menu: [
|
||||
import {
|
||||
HomeIcon,
|
||||
UserIcon,
|
||||
StarIcon,
|
||||
DocumentIcon,
|
||||
DocumentTextIcon,
|
||||
CreditCardIcon,
|
||||
CalculatorIcon,
|
||||
ChartBarIcon,
|
||||
CogIcon,
|
||||
UsersIcon,
|
||||
} from '@vue-hero-icons/outline'
|
||||
import { mapGetters, mapActions } from 'vuex'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
HomeIcon,
|
||||
UserIcon,
|
||||
StarIcon,
|
||||
DocumentIcon,
|
||||
DocumentTextIcon,
|
||||
CreditCardIcon,
|
||||
CalculatorIcon,
|
||||
ChartBarIcon,
|
||||
CogIcon,
|
||||
UsersIcon,
|
||||
},
|
||||
|
||||
computed: {
|
||||
...mapGetters(['isSidebarOpen']),
|
||||
...mapGetters('user', ['currentUser']),
|
||||
menuItems() {
|
||||
let menu = [
|
||||
[
|
||||
{
|
||||
title: 'navigation.dashboard',
|
||||
icon: 'tachometer-alt',
|
||||
route: '/admin/dashboard'
|
||||
icon: 'home-icon',
|
||||
route: '/admin/dashboard',
|
||||
},
|
||||
{
|
||||
title: 'navigation.customers',
|
||||
icon: 'user',
|
||||
route: '/admin/customers'
|
||||
icon: 'user-icon',
|
||||
route: '/admin/customers',
|
||||
},
|
||||
{
|
||||
title: 'navigation.items',
|
||||
icon: 'star',
|
||||
route: '/admin/items'
|
||||
}
|
||||
icon: 'star-icon',
|
||||
route: '/admin/items',
|
||||
},
|
||||
],
|
||||
|
||||
[
|
||||
{
|
||||
title: 'navigation.estimates',
|
||||
icon: 'file',
|
||||
route: '/admin/estimates'
|
||||
icon: 'document-icon',
|
||||
route: '/admin/estimates',
|
||||
},
|
||||
{
|
||||
title: 'navigation.invoices',
|
||||
icon: 'file-alt',
|
||||
route: '/admin/invoices'
|
||||
icon: 'document-text-icon',
|
||||
route: '/admin/invoices',
|
||||
},
|
||||
{
|
||||
title: 'navigation.payments',
|
||||
icon: 'credit-card',
|
||||
route: '/admin/payments'
|
||||
icon: 'credit-card-icon',
|
||||
route: '/admin/payments',
|
||||
},
|
||||
{
|
||||
title: 'navigation.expenses',
|
||||
icon: 'space-shuttle',
|
||||
route: '/admin/expenses'
|
||||
}
|
||||
icon: 'calculator-icon',
|
||||
route: '/admin/expenses',
|
||||
},
|
||||
],
|
||||
|
||||
[
|
||||
{
|
||||
title: 'navigation.reports',
|
||||
icon: 'signal',
|
||||
route: '/admin/reports'
|
||||
icon: 'chart-bar-icon',
|
||||
route: '/admin/reports',
|
||||
},
|
||||
{
|
||||
title: 'navigation.settings',
|
||||
icon: 'cog',
|
||||
route: '/admin/settings'
|
||||
}
|
||||
]
|
||||
|
||||
icon: 'cog-icon',
|
||||
route: '/admin/settings',
|
||||
},
|
||||
],
|
||||
]
|
||||
}
|
||||
|
||||
if (this.currentUser.role == 'super admin') {
|
||||
menu[2] = [
|
||||
{
|
||||
title: 'navigation.users',
|
||||
icon: 'users-icon',
|
||||
route: '/admin/users',
|
||||
},
|
||||
...menu[2],
|
||||
]
|
||||
}
|
||||
|
||||
return menu
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
Toggle () {
|
||||
this.$utils.toggleSidebar()
|
||||
}
|
||||
}
|
||||
...mapActions(['toggleSidebar']),
|
||||
|
||||
hasActiveUrl(url) {
|
||||
this.isActive = true
|
||||
return this.$route.path.indexOf(url) > -1
|
||||
},
|
||||
hasStaticUrl(url) {
|
||||
return this.$route.path.indexOf(url)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user