Invoice Desktop Toolbar

resources/js/Oasis/Modules/Invoices/Invoices.vue

@@ -0,0 +1,102 @@
+<template>
+    <section id="viewport">
+
+        <!--Mobile Navigation-->
+        <MobileNavigation />
+
+        <!--Navigation Sidebar-->
+        <SidebarNavigation/>
+
+		<!--Sidebar navigation-->
+        <ContentSidebar>
+            <ContentGroup title="Invoices" class="navigator">
+                <div class="menu-list-wrapper vertical">
+                    <router-link :to="{name: 'InvoicesList'}" class="menu-list-item link">
+                        <div class="icon text-theme">
+                            <file-text-icon size="17" />
+                        </div>
+                        <div class="label text-theme">
+                            Invoices
+                        </div>
+                    </router-link>
+                    <router-link :to="{name: 'Users'}" class="menu-list-item link">
+                        <div class="icon text-theme">
+                            <clock-icon size="17" />
+                        </div>
+                        <div class="label text-theme">
+                            Advance Invoices
+                        </div>
+                    </router-link>
+                </div>
+            </ContentGroup>
+            <ContentGroup title="Others" class="navigator">
+                <div class="menu-list-wrapper vertical">
+                    <router-link :to="{name: 'Plans'}" class="menu-list-item link">
+                        <div class="icon text-theme">
+                            <users-icon size="17" />
+                        </div>
+                        <div class="label text-theme">
+                            Clients
+                        </div>
+                    </router-link>
+                </div>
+            </ContentGroup>
+        </ContentSidebar>
+
+		<!--<ContentFileView/>-->
+
+		<router-view :class="{'is-scaled-down': isScaledDown}" />
+    </section>
+</template>
+
+<script>
+    import { UsersIcon, FileTextIcon, ClockIcon } from 'vue-feather-icons'
+    import SidebarNavigation from '@/components/Sidebar/SidebarNavigation'
+    import MobileNavigation from '@/components/Others/MobileNavigation'
+    import ContentSidebar from '@/components/Sidebar/ContentSidebar'
+    import ContentGroup from '@/components/Sidebar/ContentGroup'
+	import { mapGetters } from 'vuex'
+	import {events} from '@/bus'
+
+	import ContentFileView from '@/components/Others/ContentFileView'
+
+	export default {
+        name: 'Settings',
+        computed: {
+            ...mapGetters([
+				'config'
+			]),
+        },
+        components: {
+            SidebarNavigation,
+            MobileNavigation,
+            ContentSidebar,
+            FileTextIcon,
+            ContentGroup,
+            UsersIcon,
+			ClockIcon,
+			ContentFileView,
+        },
+		data() {
+			return {
+				isScaledDown: false
+			}
+		},
+		mounted() {
+			events.$on('mobile-menu:show', () => this.isScaledDown = true)
+			events.$on('fileItem:deselect', () => this.isScaledDown = false)
+			events.$on('mobile-menu:hide', () => this.isScaledDown = false)
+		}
+    }
+</script>
+
+<style lang="scss">
+    @import '@assets/vuefilemanager/_mixins';
+
+	@media only screen and (max-width: 690px) {
+
+		.is-scaled-down {
+			@include transform(scale(0.95));
+		}
+	}
+</style>

resources/js/Oasis/Modules/Invoices/InvoicesList.vue

@@ -0,0 +1,52 @@
+<template>
+    <div @contextmenu.prevent.capture="contextMenu($event, undefined)" id="files-view">
+		<DesktopToolbarInvoices/>
+		<!--<ContextMenu />
+        <FileBrowser/>-->
+    </div>
+</template>
+
+<script>
+    import DesktopToolbarInvoices from '@/Oasis/Modules/Invoices/components/DesktopToolbarInvoices'
+    import FileBrowser from '@/components/FilesView/FileBrowser'
+	import ContextMenu from '@/components/FilesView/ContextMenu'
+    import {events} from '@/bus'
+
+    export default {
+        name: 'FilesView',
+        components: {
+			DesktopToolbarInvoices,
+            FileBrowser,
+            ContextMenu,
+        },
+        methods: {
+            contextMenu(event, item) {
+                events.$emit('contextMenu:show', event, item)
+            },
+        },
+    }
+</script>
+
+<style lang="scss">
+
+    #files-view {
+        font-family: 'Nunito', sans-serif;
+        font-size: 16px;
+        width: 100%;
+        height: 100%;
+        position: relative;
+        min-width: 320px;
+        overflow-x: hidden;
+        padding-left: 15px;
+        padding-right: 15px;
+        overflow-y: hidden;
+    }
+
+    @media only screen and (max-width: 690px) {
+        #files-view {
+            padding-left: 0;
+            padding-right: 0;
+        }
+    }
+
+</style>

resources/js/Oasis/Modules/Invoices/components/DesktopToolbarInvoices.vue

@@ -0,0 +1,224 @@
+<template>
+    <div id="desktop-toolbar">
+        <div class="toolbar-wrapper">
+
+			<div class="location">
+				<!--<chevron-left-icon :class="{'is-active': browseHistory.length > 1 }" class="icon-back" size="17" />-->
+
+				<span class="location-title">
+					Invoices
+				</span>
+			</div>
+
+			<ToolbarWrapper>
+
+				<!--Search bar-->
+				<ToolbarGroup style="margin-left: 0">
+					<SearchBar v-model="query" @reset-query="query = ''" placeholder="Search your invoices..." />
+				</ToolbarGroup>
+
+				<!--Creating controls-->
+				<ToolbarGroup>
+                    <ToolbarButton @click.native="createInvoice" source="file-plus" :action="$t('actions.create_folder')" />
+				</ToolbarGroup>
+
+				<!--Invoice Controls-->
+				<ToolbarGroup v-if="! $isMobile()">
+                    <ToolbarButton @click.native="shareInvoice" source="send" :action="$t('actions.share')" />
+                    <ToolbarButton @click.native="deleteInvoice" source="trash" :action="$t('actions.delete')" />
+				</ToolbarGroup>
+
+				<!--View Controls-->
+				<ToolbarGroup>
+					<PopoverWrapper>
+						<ToolbarButton @click.stop.native="showSortingMenu" source="preview-sorting" :action="$t('actions.sorting_view')" />
+						<PopoverItem name="desktop-sorting">
+							<FileSortingOptions />
+						</PopoverItem>
+					</PopoverWrapper>
+                    <ToolbarButton @click.native="$store.dispatch('fileInfoToggle')" :class="{'active': isVisibleSidebar }" :action="$t('actions.info_panel')" source="info" />
+				</ToolbarGroup>
+			</ToolbarWrapper>
+        </div>
+
+		<UploadProgress />
+    </div>
+</template>
+
+<script>
+	import FileSortingOptions from '@/components/FilesView/FileSortingOptions'
+	import {ChevronLeftIcon, MoreHorizontalIcon} from 'vue-feather-icons'
+	import PopoverWrapper from '@/components/Desktop/PopoverWrapper'
+	import ToolbarWrapper from '@/components/Desktop/ToolbarWrapper'
+	import ToolbarButton from '@/components/FilesView/ToolbarButton'
+	import ToolbarGroup from '@/components/Desktop/ToolbarGroup'
+	import PopoverItem from '@/components/Desktop/PopoverItem'
+	import SearchBar from '@/components/FilesView/SearchBar'
+	import {mapGetters} from 'vuex'
+	import {events} from '@/bus'
+
+	export default {
+		name: 'ToolBar',
+		components: {
+			FileSortingOptions,
+			MoreHorizontalIcon,
+			ChevronLeftIcon,
+			ToolbarWrapper,
+			PopoverWrapper,
+			ToolbarButton,
+			ToolbarGroup,
+			PopoverItem,
+			SearchBar,
+		},
+		computed: {
+			...mapGetters([
+				'isVisibleSidebar',
+				'clipboard',
+			]),
+		},
+		data() {
+			return {
+				query: '',
+			}
+		},
+		watch: {
+			query(val) {
+				this.$searchFiles(val)
+			}
+		},
+		methods: {
+			showSortingMenu() {
+				events.$emit('popover:open', 'desktop-sorting')
+			},
+			deleteInvoice() {
+				if (this.clipboard.length > 0)
+					this.$store.dispatch('deleteInvoice')
+			},
+			shareInvoice() {
+				alert('Share Invoice')
+			},
+			createInvoice() {
+				alert('Create Invoice')
+			},
+		},
+	}
+</script>
+
+<style scoped lang="scss">
+@import "@assets/vuefilemanager/_variables";
+@import "@assets/vuefilemanager/_mixins";
+
+.is-inactive {
+	opacity: 0.25;
+	pointer-events: none;
+}
+
+.toolbar-wrapper {
+	padding-top: 10px;
+	padding-bottom: 10px;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	position: relative;
+	z-index: 2;
+}
+
+.location {
+	align-items: center;
+	cursor: pointer;
+	display: flex;
+
+	.icon-back {
+		@include transition(150ms);
+		pointer-events: none;
+		margin-right: 6px;
+		flex-shrink: 0;
+		opacity: 0.15;
+
+		&.is-active {
+			opacity: 1;
+			pointer-events: initial;
+		}
+	}
+
+	.location-title {
+		@include font-size(15);
+		line-height: 1;
+		font-weight: 700;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		color: $text;
+	}
+
+	.location-more {
+		margin-left: 6px;
+		padding: 1px 4px;
+		line-height: 0;
+		border-radius: 3px;
+		@include transition(150ms);
+
+		svg circle {
+			@include transition(150ms);
+		}
+
+		&:hover {
+			background: $light_background;
+
+			svg circle {
+				color: inherit;
+			}
+		}
+	}
+}
+
+.toolbar-position {
+	text-align: center;
+
+	span {
+		@include font-size(17);
+		font-weight: 600;
+	}
+}
+
+@media only screen and (max-width: 1024px) {
+	.location {
+
+		.location-title {
+			max-width: 120px;
+		}
+	}
+
+	.toolbar-tools {
+		.button {
+			margin-left: 0;
+			height: 40px;
+			width: 40px;
+		}
+	}
+}
+
+@media only screen and (max-width: 960px) {
+	#desktop-toolbar {
+		display: none;
+	}
+}
+
+@media (prefers-color-scheme: dark) {
+	.toolbar .directory-name {
+		color: $dark_mode_text_primary;
+	}
+
+	.toolbar-go-back {
+		.location-title {
+			color: $dark_mode_text_primary;
+		}
+
+		.location-more {
+			&:hover {
+				background: $dark_mode_foreground;
+			}
+		}
+	}
+}
+</style>

resources/js/components/FilesView/ToolbarButton.vue

@@ -1,5 +1,7 @@
 <template>
   <button class="button hover-text-theme hover-svg-stroke-theme" :title="action">
+    <file-plus-icon v-if="source === 'file-plus'" size="19" class="hover-text-theme" />
+    <send-icon v-if="source === 'send'" size="19" class="hover-text-theme" />
     <corner-down-right-icon v-if="source === 'move'" size="19" class="hover-text-theme" />
     <download-cloud-icon v-if="source === 'download'" size="19" class="hover-text-theme" />
     <folder-plus-icon v-if="source === 'folder-plus'" size="19" class="hover-text-theme" />
@@ -21,6 +23,8 @@
 <script>
     import SortingIcon from '@/components/FilesView/Icons/SortingIcon'
     import {
+    	SendIcon,
+    	FilePlusIcon,
         CornerDownRightIcon,
         DownloadCloudIcon,
         FolderPlusIcon,
@@ -44,6 +48,8 @@
             'action'
         ],
         components: {
+			SendIcon,
+			FilePlusIcon,
             SortingIcon,
             CornerDownRightIcon,
             DownloadCloudIcon,
@@ -98,7 +104,7 @@
     svg {
         color: inherit;
 
-        path, line, polyline, rect, circle {
+        path, line, polyline, rect, circle, polygon {
             color: inherit;
         }
     }
@@ -110,6 +116,7 @@
         line,
         polyline,
         rect,
+		polygon,
         circle {
             @include transition(150ms);
             color: inherit;

resources/js/components/Sidebar/SidebarNavigation.vue

@@ -10,25 +10,31 @@
 
             <router-link :to="{name: 'Files'}" :title="$t('locations.home')" class="icon-navigation-item home">
                 <div class="button-icon text-theme">
-                    <hard-drive-icon size="19" class="text-theme"></hard-drive-icon>
+                    <hard-drive-icon size="19" class="text-theme" />
                 </div>
             </router-link>
 
             <router-link :to="{name: 'SharedFiles'}" :title="$t('locations.shared')" class="icon-navigation-item shared">
                 <div class="button-icon">
-                    <share-icon size="19"></share-icon>
+                    <share-icon size="19" />
+                </div>
+            </router-link>
+
+            <router-link :to="{name: 'InvoicesList'}" title="Invoices" class="icon-navigation-item shared">
+                <div class="button-icon">
+                    <file-text-icon size="19" />
                 </div>
             </router-link>
 
             <router-link :to="{name: 'Profile'}" :class="{'is-active': isUserProfileRoute}" :title="$t('locations.profile')" class="icon-navigation-item settings">
                 <div class="button-icon">
-                    <user-icon size="19"></user-icon>
+                    <user-icon size="19" />
                 </div>
             </router-link>
 
             <router-link v-if="user.data.attributes.role === 'admin'" :to="{name: 'Dashboard'}" :class="{'is-active': $isThisRoute($route, adminRoutes)}" :title="$t('locations.settings')" class="icon-navigation-item users">
                 <div class="button-icon">
-                    <settings-icon size="19"></settings-icon>
+                    <settings-icon size="19" />
                 </div>
             </router-link>
         </div>
@@ -37,7 +43,7 @@
         <ul class="icon-navigation logout">
             <li @click="$store.dispatch('logOut')" :title="$t('locations.logout')" class="icon-navigation-item">
                 <div class="button-icon">
-                    <power-icon size="19"></power-icon>
+                    <power-icon size="19" />
                 </div>
             </li>
         </ul>
@@ -48,6 +54,7 @@
     import UserAvatar from '@/components/Others/UserAvatar'
     import {mapGetters} from 'vuex'
     import {
+    	FileTextIcon,
         HardDriveIcon,
         SettingsIcon,
         Trash2Icon,
@@ -59,6 +66,7 @@
     export default {
         name: 'SidebarNavigation',
         components: {
+			FileTextIcon,
             HardDriveIcon,
             SettingsIcon,
             UserAvatar,
@@ -68,7 +76,9 @@
             UserIcon,
         },
         computed: {
-            ...mapGetters(['user']),
+            ...mapGetters([
+				'user'
+			]),
             isUserProfileRoute() {
                 return this.$isThisRoute(this.$route, ['Profile', 'Password', 'Storage', 'Invoice', 'Subscription', 'PaymentMethods'])
             }

resources/js/router.js

@@ -39,7 +39,7 @@ const routesOasis = [
             import(/* webpackChunkName: "chunks/oasis/upgrade-plan" */ './Oasis/Onboarding/SelectPlan'),
         meta: {
             requiresAuth: true,
-            title: i18n.t('routes_title.upgrade_plan')
+            title: 'routes_title.upgrade_plan'
         },
     },
     {
@@ -49,7 +49,7 @@ const routesOasis = [
             import(/* webpackChunkName: "chunks/oasis/upgrade-billing" */ './Oasis/Onboarding/PayForPlan'),
         meta: {
             requiresAuth: true,
-            title: i18n.t('routes_title.upgrade_billing')
+            title: 'routes_title.upgrade_billing'
         },
     },
     {
@@ -72,6 +72,28 @@ const routesOasis = [
             title: 'Vytvorit Heslo'
         },
     },
+    {
+        name: 'Invoicing',
+        path: '/invoices',
+        component: () =>
+            import(/* webpackChunkName: "chunks/oasis/invoices" */ './Oasis/Modules/Invoices/Invoices'),
+        meta: {
+            requiresAuth: true,
+            title: 'Faktúry'
+        },
+        children: [
+            {
+                name: 'InvoicesList',
+                path: '/invoices/all',
+                component: () =>
+                    import(/* webpackChunkName: "chunks/oasis/invoices/list" */ './Oasis/Modules/Invoices/InvoicesList'),
+                meta: {
+                    requiresAuth: true,
+                    title: 'Faktúry'
+                },
+            }
+        ]
+    },
     {
         name: 'Admin',
         path: '/admin',
@@ -99,7 +121,7 @@ const routesOasis = [
                     import(/* webpackChunkName: "chunks/oasis/users" */ './Oasis/Admin/Users'),
                 meta: {
                     requiresAuth: true,
-                    title: i18n.t('routes_title.users_list')
+                    title: 'routes_title.users_list'
                 },
             },
             {
@@ -109,7 +131,7 @@ const routesOasis = [
                     import(/* webpackChunkName: "chunks/oasis/user-create" */ './Oasis/Admin/UserCreateOrder'),
                 meta: {
                     requiresAuth: true,
-                    title: i18n.t('routes_title.user_create')
+                    title: 'routes_title.user_create'
                 },
             },
             {
@@ -119,7 +141,7 @@ const routesOasis = [
                     import(/* webpackChunkName: "chunks/oasis/user-create" */ './Oasis/Admin/UserCreate'),
                 meta: {
                     requiresAuth: true,
-                    title: i18n.t('routes_title.user_create')
+                    title: 'routes_title.user_create'
                 },
             },
         ]