mirror of
https://github.com/crater-invoice/crater.git
synced 2026-02-10 21:02:41 -05:00
build version 400
This commit is contained in:
Mohit Panjwani
@@ -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