Helper methods refactoring

resources/js/Oasis/Invoices/components/InvoiceContextMenu.vue

@@ -1,30 +1,30 @@
 <template>
-    <div :style="{ top: positionY + 'px', left: positionX + 'px' }" @click="closeAndResetContextMenu" class="contextmenu" v-show="isVisible || showFromPreview" ref="contextmenu" :class="{'filePreviewFixed': showFromPreview}">
+    <div :style="{ top: positionY + 'px', left: positionX + 'px' }" @click="closeAndResetContextMenu" class="contextmenu" v-show="isVisible" ref="contextmenu">
 
         <!--Invoice-->
         <div v-show="isInvoice" class="menu-options" id="menu-list">
             <OptionGroup class="menu-option-group">
-                <Option @click.native="editItem" :title="$t('in.menu.edit_invoice')" icon="rename" />
+                <Option @click.native="$editInvoice(clipboard[0])" :title="$t('in.menu.edit_invoice')" icon="rename" />
                 <Option @click.native="" :title="$t('in.menu.send_invoice')" icon="send" />
-                <Option @click.native="goToCompany" :title="$t('in.menu.show_company')" icon="user" />
-                <Option @click.native="deleteInvoice" :title="$t('context_menu.delete')" icon="trash" />
+                <Option @click.native="$goToCompany(clipboard[0])" :title="$t('in.menu.show_company')" icon="user" />
+                <Option @click.native="$deleteInvoice(clipboard[0])" :title="$t('context_menu.delete')" icon="trash" />
             </OptionGroup>
 
             <OptionGroup>
                 <Option @click.native="showDetail" :title="$t('context_menu.detail')" icon="detail" />
-                <Option @click.native="downloadItem" :title="$t('context_menu.download')" icon="download" />
+                <Option @click.native="$downloadInvoice(clipboard[0])" :title="$t('context_menu.download')" icon="download" />
             </OptionGroup>
         </div>
 
         <!--Client-->
         <div v-show="isClient" class="menu-options" id="menu-list">
             <OptionGroup class="menu-option-group">
-                <Option @click.native="goToCompany" :title="$t('in.menu.edit')" icon="rename" />
-                <Option @click.native="deleteClient" :title="$t('context_menu.delete')" icon="trash" />
+                <Option @click.native="$goToCompany(clipboard[0])" :title="$t('in.menu.edit')" icon="rename" />
+                <Option @click.native="$deleteClient(clipboard[0])" :title="$t('context_menu.delete')" icon="trash" />
             </OptionGroup>
             <OptionGroup>
-                <Option @click.native="goToCompany" :title="$t('in.menu.show_company')" icon="user" />
-                <Option @click.native="showDetail" :title="$t('context_menu.detail')" icon="detail" />
+                <Option @click.native="$goToCompany(clipboard[0])" :title="$t('in.menu.show_company')" icon="user" />
+                <Option @click.native="$showSidebarPreview(clipboard[0])" :title="$t('context_menu.detail')" icon="detail" />
             </OptionGroup>
         </div>
     </div>
@@ -44,8 +44,7 @@ export default {
     },
     computed: {
         ...mapGetters([
-			'user',
-			'clipboard'
+			'clipboard',
 		]),
 		isInvoice() {
 			return this.clipboard[0] && this.clipboard[0].type === 'invoice'
@@ -53,20 +52,9 @@ export default {
 		isClient() {
 			return this.clipboard[0] && this.clipboard[0].type === 'client'
 		},
-        isMultiSelectContextMenu() {
-
-            // If is context Menu open on multi selected items open just options for the multi selected items
-            if (this.clipboard.length > 1 && this.clipboard.includes(this.item))
-                return false
-
-            // If is context Menu open for the non selected item open options for the single item
-            if (this.clipboard.length < 2 || !this.clipboard.includes(this.item))
-                return true
-        },
     },
     data() {
         return {
-            showFromPreview: false,
             item: undefined,
             isVisible: false,
             positionX: 0,
@@ -74,70 +62,12 @@ export default {
         }
     },
     methods: {
-		goToCompany() {
-			this.$router.push({name: 'ClientDetail', params: {id: this.item.client_id ?? this.item.id}})
-
-			events.$emit('file-preview:hide')
-
-			this.isVisible = false
-		},
-        downloadItem() {
-            if (this.clipboard.length > 1)
-                this.$store.dispatch('downloadFiles')
-            else {
-                this.$downloadFile(this.item.file_url, this.item.name + '.' + this.item.mimetype)
-            }
-        },
-		showDetail() {
-            // Dispatch load file info detail
-            this.$store.commit('ADD_ITEM_TO_CLIPBOARD', this.item)
-
-            // Show panel if is not open
-            this.$store.dispatch('fileInfoToggle', true)
-        },
-		editItem() {
-			this.$router.push({name: 'EditInvoice', params: {id: this.item.id}})
-		},
-        deleteInvoice() {
-			events.$emit('confirm:open', {
-				title: this.$t('in.popup.delete_invoice.title', {number: this.item.invoice_number}),
-				message: this.$t('in.popup.delete_invoice.message'),
-				buttonColor: 'danger-solid',
-				action: {
-					id: this.item.id,
-					operation: 'delete-invoice'
-				}
-			})
-        },
-		deleteClient() {
-			events.$emit('confirm:open', {
-				title: this.$t('in.popup.delete_client.title', {name: this.item.name}),
-				message: this.$t('in.popup.delete_client.message'),
-				buttonColor: 'danger-solid',
-				action: {
-					id: this.item.id,
-					operation: 'delete-client'
-				}
-			})
-        },
         closeAndResetContextMenu() {
             // Close context menu
             this.isVisible = false
-			this.showFromPreview = false
 
             // Reset item container
             this.item = undefined
-
-			events.$emit('file-preview:hide')
-        },
-        showFolderActionsMenu() {
-            let container = document.getElementById('folder-actions')
-
-            this.positionX = container.offsetLeft + 16
-            this.positionY = container.offsetTop + 30
-
-            // Show context menu
-            this.isVisible = true
         },
         showContextMenu(event) {
             let parent = document.getElementById('menu-list')
@@ -170,31 +100,8 @@ export default {
             // Show context menu
             this.isVisible = true
         },
-        showFilePreviewMenu() {
-            let container = document.getElementById('fast-preview-menu')
-            if (container) {
-                this.positionX = container.offsetLeft + 16
-                this.positionY = container.offsetTop + 51
-            }
-        }
     },
     created() {
-        events.$on('showContextMenuPreview:show', (item) => {
-            if (!this.showFromPreview) {
-                this.item = item
-                this.showFromPreview = true
-                this.showFilePreviewMenu()
-            } else if (this.showFromPreview) {
-                this.showFromPreview = false
-                this.item = undefined
-            }
-        })
-
-        events.$on('showContextMenuPreview:hide', () => {
-            this.isVisible = false
-            this.showFromPreview = false
-            this.item = undefined
-        })
 
         events.$on('contextMenu:show', (event, item) => {
             // Store item
@@ -205,14 +112,6 @@ export default {
         })
 
         events.$on('unClick', () => this.closeAndResetContextMenu())
-
-        events.$on('folder:actions', (folder) => {
-            // Store item
-            this.item = folder
-
-            if (this.isVisible) this.isVisible = false
-            else this.showFolderActionsMenu()
-        })
     }
 }
 </script>
@@ -237,11 +136,6 @@ export default {
     }
 }
 
-.filePreviewFixed {
-    position: fixed !important;
-    display: flex;
-}
-
 .contextmenu {
     min-width: 250px;
     position: absolute;

resources/js/Oasis/Invoices/components/InvoiceMobileMenu.vue

@@ -11,13 +11,13 @@
 		<!--Trash location-->
         <MenuMobileGroup>
             <OptionGroup class="menu-option-group">
-                <Option @click.native="editInvoice" :title="$t('in.menu.edit_invoice')" icon="rename" />
+                <Option @click.native="$editInvoice(clipboard[0])" :title="$t('in.menu.edit_invoice')" icon="rename" />
                 <Option @click.native="" :title="$t('in.menu.send_invoice')" icon="send" />
-                <Option @click.native="goToCompany" :title="$t('in.menu.show_company')" icon="user" />
-                <Option @click.native="deleteInvoice" :title="$t('context_menu.delete')" icon="trash" />
+                <Option @click.native="$goToCompany(clipboard[0])" :title="$t('in.menu.show_company')" icon="user" />
+                <Option @click.native="$deleteInvoice(clipboard[0])" :title="$t('context_menu.delete')" icon="trash" />
             </OptionGroup>
             <OptionGroup>
-                <Option @click.native="downloadInvoice" :title="$t('context_menu.download')" icon="download" />
+                <Option @click.native="$downloadInvoice(clipboard[0])" :title="$t('context_menu.download')" icon="download" />
             </OptionGroup>
         </MenuMobileGroup>
     </MenuMobile>
@@ -53,28 +53,6 @@ export default {
         return {
             isVisible: false,
         }
-    },
-    methods: {
-		editInvoice() {
-			this.$router.push({name: 'EditInvoice', params: {id: this.clipboard[0].id}})
-		},
-		downloadInvoice() {
-			this.$downloadFile(this.clipboard[0].file_url, this.clipboard[0].name + '.' + this.clipboard[0].mimetype)
-		},
-		goToCompany() {
-			this.$router.push({name: 'ClientDetail', params: {id: this.clipboard[0].client_id}})
-		},
-		deleteInvoice() {
-			events.$emit('confirm:open', {
-				title: this.$t('in.popup.delete_invoice.title', {number: this.clipboard[0].invoice_number}),
-				message: this.$t('in.popup.delete_invoice.message'),
-				buttonColor: 'danger-solid',
-				action: {
-					id: this.clipboard[0].id,
-					operation: 'delete-invoice'
-				}
-			})
-		},
     }
 }
 </script>

resources/js/components/FilesView/FilePreviewToolbar.vue

@@ -10,7 +10,7 @@
 				<span @click.stop="showItemContextMenu" id="fast-preview-menu" class="fast-menu-icon group">
 					<more-horizontal-icon class="more-icon group-hover-text-theme" size="14" />
 				</span>
-				<PopoverItem name="file-preview-contextmenu" side="right">
+				<PopoverItem v-if="! isInvoice" name="file-preview-contextmenu" side="right">
 					<OptionGroup class="menu-option-group">
 						<Option @click.native="$renameFileOrFolder(clipboard[0])" :title="$t('context_menu.rename')" icon="rename" />
 						<Option @click.native="$moveFileOrFolder(clipboard[0])" :title="$t('context_menu.move')" icon="move-item" />
@@ -21,6 +21,18 @@
 						<Option @click.native="downloadItem" :title="$t('context_menu.download')" icon="download" />
 					</OptionGroup>
 				</PopoverItem>
+				<PopoverItem v-if="isInvoice" name="file-preview-contextmenu" side="right">
+					<OptionGroup class="menu-option-group">
+						<Option @click.native="$editInvoice(clipboard[0])" :title="$t('in.menu.edit_invoice')" icon="rename" />
+						<Option @click.native="" :title="$t('in.menu.send_invoice')" icon="send" />
+						<Option @click.native="$goToCompany(clipboard[0])" :title="$t('in.menu.show_company')" icon="user" />
+						<Option @click.native="$deleteInvoice(clipboard[0])" :title="$t('context_menu.delete')" icon="trash" />
+					</OptionGroup>
+
+					<OptionGroup>
+						<Option @click.native="$downloadInvoice(clipboard[0])" :title="$t('context_menu.download')" icon="download" />
+					</OptionGroup>
+				</PopoverItem>
 			</PopoverWrapper>
 		</div>
 
@@ -69,6 +81,9 @@
                 'clipboard',
                 'entries'
             ]),
+			isInvoice() {
+				return this.clipboard[0].type === 'invoice'
+			},
 			sharingTitle() {
 				return this.clipboard[0].shared
 					? this.$t('context_menu.share_edit')
@@ -119,7 +134,13 @@
         methods: {
 			showItemContextMenu() {
 				if (this.$isMobile()) {
-					events.$emit('mobile-menu:show', 'file-menu')
+
+					if (this.isInvoice) {
+						events.$emit('mobile-menu:show', 'invoice-menu')
+					} else {
+						events.$emit('mobile-menu:show', 'file-menu')
+					}
+
 				} else {
 					events.$emit('popover:open', 'file-preview-contextmenu')
 				}

resources/js/helpers.js

@@ -7,28 +7,11 @@ import axios from 'axios'
 const Helpers = {
     install(Vue) {
 
-        Vue.prototype.$searchInvoices = debounce(function (value) {
+        Vue.prototype.$showSidebarPreview = function (entry) {
+            this.$store.commit('ADD_ITEM_TO_CLIPBOARD', entry)
 
-            if (value !== '' && typeof value !== 'undefined') {
-
-                if (['regular-invoice', 'advance-invoice'].includes(this.$store.getters.currentFolder.location)) {
-                    this.$store.dispatch('getSearchResultForInvoices', value)
-                } else {
-                    this.$store.dispatch('getSearchResultForClients', value)
-                }
-            } else if (typeof value !== 'undefined') {
-
-                let locations = {
-                    'regular-invoice': 'getRegularInvoices',
-                    'advance-invoice': 'getAdvanceInvoices',
-                    'clients': 'getClients',
-                }
-
-                this.$store.dispatch(locations[this.$store.getters.currentFolder.location])
-
-                this.$store.commit('CHANGE_SEARCHING_STATE', false)
-            }
-        }, 300)
+            this.$store.dispatch('fileInfoToggle', true)
+        }
 
         Vue.prototype.$renameFileOrFolder = function (entry) {
             events.$emit('popup:open', {name: 'rename-item', item: entry})

resources/js/main.js

@@ -7,6 +7,7 @@ import App from "./App.vue";
 import store from "./store";
 import {events} from "./bus";
 import Helpers from "./helpers";
+import OasisHelpers from "./oasis-helpers";
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import {
@@ -85,6 +86,7 @@ library.add(
 Vue.component("FontAwesomeIcon", FontAwesomeIcon);
 
 Vue.use(VueRouter);
+Vue.use(OasisHelpers);
 Vue.use(Helpers);
 
 Vue.config.productionTip = false;

resources/js/oasis-helpers.js

@@ -0,0 +1,72 @@
+import i18n from '@/i18n/index'
+import {debounce} from 'lodash'
+import {events} from './bus'
+
+const OasisHelpers = {
+	install(Vue) {
+
+		Vue.prototype.$editInvoice = function (entry) {
+			this.$router.push({name: 'EditInvoice', params: {id: entry.id}})
+			events.$emit('file-preview:hide')
+		}
+
+		Vue.prototype.$downloadInvoice = function (entry) {
+			Vue.prototype.$downloadFile(entry.file_url, entry.name + '.' + entry.mimetype)
+		}
+
+		Vue.prototype.$deleteInvoice = function (entry) {
+			events.$emit('confirm:open', {
+				title: i18n.t('in.popup.delete_invoice.title', {number: entry.invoice_number}),
+				message: i18n.t('in.popup.delete_invoice.message'),
+				buttonColor: 'danger-solid',
+				action: {
+					id: entry.id,
+					operation: 'delete-invoice'
+				}
+			})
+		}
+
+		Vue.prototype.$deleteClient = function (entry) {
+			events.$emit('confirm:open', {
+				title: i18n.t('in.popup.delete_client.title', {name: entry.name}),
+				message: i18n.t('in.popup.delete_client.message'),
+				buttonColor: 'danger-solid',
+				action: {
+					id: entry.id,
+					operation: 'delete-client'
+				}
+			})
+		}
+
+		Vue.prototype.$goToCompany = function (entry) {
+			this.$router.push({name: 'ClientDetail', params: {id: entry.client_id ?? entry.id}})
+
+			events.$emit('file-preview:hide')
+		}
+
+		Vue.prototype.$searchInvoices = debounce(function (value) {
+
+			if (value !== '' && typeof value !== 'undefined') {
+
+				if (['regular-invoice', 'advance-invoice'].includes(this.$store.getters.currentFolder.location)) {
+					this.$store.dispatch('getSearchResultForInvoices', value)
+				} else {
+					this.$store.dispatch('getSearchResultForClients', value)
+				}
+			} else if (typeof value !== 'undefined') {
+
+				let locations = {
+					'regular-invoice': 'getRegularInvoices',
+					'advance-invoice': 'getAdvanceInvoices',
+					'clients': 'getClients',
+				}
+
+				this.$store.dispatch(locations[this.$store.getters.currentFolder.location])
+
+				this.$store.commit('CHANGE_SEARCHING_STATE', false)
+			}
+		}, 300)
+	}
+}
+
+export default OasisHelpers