share invoice on email frontend

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

@@ -5,7 +5,7 @@
         <div v-show="isInvoice" class="menu-options" id="menu-list">
             <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="$shareInvoice(clipboard[0])" :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>

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

@@ -20,7 +20,7 @@
 				<!--Creating controls-->
 				<ToolbarGroup>
 					<PopoverWrapper>
-                    	<ToolbarButton @click.stop.native="createCreateMenu" source="plus" :action="$t('actions.create_folder')" />
+                    	<ToolbarButton @click.stop.native="createMenu" source="plus" :action="$t('actions.create_folder')" />
 						<PopoverItem name="desktop-create-invoices">
 							<OptionGroup>
 								<Option @click.stop.native="createInvoice('regular-invoice')" :title="$t('in_editor.page.create_regular_invoice')" icon="file-plus" />
@@ -35,7 +35,7 @@
 
 				<!--Invoice Controls-->
 				<ToolbarGroup v-if="! $isMobile()">
-                    <ToolbarButton @click.native="shareInvoice" :class="{'is-inactive': canActiveInView }" source="send" :action="$t('actions.share')" />
+                    <ToolbarButton @click.native="$shareInvoice(clipboard[0])" :class="{'is-inactive': canActiveInView }" source="send" :action="$t('actions.share')" />
                     <ToolbarButton @click.native="editItem" :class="{'is-inactive': canActiveInView }" source="rename" :action="$t('actions.share')" />
                     <ToolbarButton @click.native="deleteItem" :class="{'is-inactive': canActiveInView }" source="trash" :action="$t('actions.delete')" />
 				</ToolbarGroup>
@@ -130,46 +130,26 @@
 			showSortingMenu() {
 				events.$emit('popover:open', 'desktop-sorting')
 			},
-			createCreateMenu() {
+			createMenu() {
 				events.$emit('popover:open', 'desktop-create-invoices')
 			},
 			deleteItem() {
 
 				if (this.$isThisLocation(['regular-invoice', 'advance-invoice']) && this.clipboard.length > 0) {
-
-					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'
-						}
-					})
+					this.deleteInvoice(this.clipboard[0])
 				}
 
 				if (this.$isThisLocation('clients') && this.clipboard.length > 0) {
-					events.$emit('confirm:open', {
-						title: this.$t('in.popup.delete_client.title', {name: this.clipboard[0].name}),
-						message: this.$t('in.popup.delete_client.message'),
-						buttonColor: 'danger-solid',
-						action: {
-							id: this.clipboard[0].id,
-							operation: 'delete-client'
-						}
-					})
+					this.deleteClient(this.clipboard[0])
 				}
 			},
-			shareInvoice() {
-				alert('Send Invoice')
-			},
 			editItem() {
 				if (this.$isThisLocation(['regular-invoice', 'advance-invoice'])) {
-					this.$router.push({name: 'EditInvoice', params: {id: this.clipboard[0].id}})
+					this.$editInvoice(this.clipboard[0])
 				}
 
 				if (this.$isThisLocation('clients')) {
-					this.$router.push({name: 'ClientDetail', params: {id: this.clipboard[0].id}})
+					this.$goToCompany(this.clipboard[0])
 				}
 			},
 		},

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

@@ -12,7 +12,7 @@
         <MenuMobileGroup>
             <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="$shareInvoice(clipboard[0])" :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>
@@ -31,7 +31,6 @@ import OptionGroup from '@/components/FilesView/OptionGroup'
 import MenuMobile from '@/components/Mobile/MenuMobile'
 import Option from '@/components/FilesView/Option'
 import {mapGetters} from 'vuex'
-import {events} from '@/bus'
 
 export default {
     name: 'InvoiceMobileMenu',

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

@@ -0,0 +1,154 @@
+<template>
+    <PopupWrapper name="share-invoice">
+        <!--Title-->
+        <PopupHeader :title="$t('in.share.share_invoice')" icon="share" />
+
+        <!--Content-->
+        <PopupContent>
+
+            <!--Item Thumbnail-->
+			<TitlePreview
+				v-if="pickedItem"
+				class="item-thumbnail"
+				icon="file-text"
+				:title="pickedItem.name"
+				:subtitle="$t('in.invoice') + ' - ' + pickedItem.invoice_number"
+			/>
+
+            <!--Form to set sharing-->
+            <ValidationObserver @submit.prevent ref="shareForm" v-slot="{ invalid }" tag="form" class="form-wrapper">
+
+				<ValidationProvider tag="div" mode="passive" name="Email" rules="required" v-slot="{ errors }">
+					<input v-model="shareOptions.email" :class="{'is-error': errors[0]}" type="text" class="focus-border-theme" :placeholder="$t('in.share.type_email')">
+					<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+				</ValidationProvider>
+
+            </ValidationObserver>
+        </PopupContent>
+
+        <!--Actions-->
+        <PopupActions>
+            <ButtonBase class="popup-button" @click.native="$closePopup()" button-style="secondary">
+                {{ $t('popup_move_item.cancel') }}
+            </ButtonBase>
+            <ButtonBase class="popup-button" @click.native="submitShareOptions" button-style="theme" :loading="isLoading" :disabled="isLoading">
+                {{ $t('in.share.submit_share') }}
+            </ButtonBase>
+        </PopupActions>
+    </PopupWrapper>
+</template>
+
+<script>
+import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
+import PopupWrapper from '@/components/Others/Popup/PopupWrapper'
+import PopupActions from '@/components/Others/Popup/PopupActions'
+import PopupContent from '@/components/Others/Popup/PopupContent'
+import PopupHeader from '@/components/Others/Popup/PopupHeader'
+import TitlePreview from '@/components/FilesView/TitlePreview'
+import ActionButton from '@/components/Others/ActionButton'
+import ButtonBase from '@/components/FilesView/ButtonBase'
+import {required} from 'vee-validate/dist/rules'
+import {events} from '@/bus'
+import axios from 'axios'
+
+export default {
+    name: 'ShareInvoicePopup',
+    components: {
+        ValidationProvider,
+        ValidationObserver,
+		TitlePreview,
+        ActionButton,
+        PopupWrapper,
+        PopupActions,
+        PopupContent,
+        PopupHeader,
+        ButtonBase,
+        required,
+    },
+    data() {
+        return {
+            shareOptions: {
+                email: undefined
+            },
+            pickedItem: undefined,
+            isLoading: false,
+        }
+    },
+    methods: {
+        async submitShareOptions() {
+
+            // Validate fields
+            const isValid = await this.$refs.shareForm.validate()
+
+            if (!isValid) return
+
+            this.isLoading = true
+
+            // Send request to get share link
+            axios
+                .post(`/api/oasis/invoices/${this.pickedItem.id}/share`,
+                    this.shareOptions
+                )
+                .then(() => {
+                	this.$closePopup()
+
+					events.$emit('toaster', {
+						type: 'success',
+						message: this.$t('in.share.invoice_sended'),
+					})
+                })
+                .catch(() => {
+                    events.$emit('alert:open', {
+                        title: this.$t('popup_error.title'),
+                        message: this.$t('popup_error.message'),
+                    })
+                })
+                .finally(() => {
+                    this.isLoading = false
+                })
+        }
+    },
+    mounted() {
+
+        // Show popup
+        events.$on('popup:open', args => {
+
+            if (args.name !== 'share-invoice') return
+
+            this.pickedItem = args.item
+        })
+
+        // Close popup
+        events.$on('popup:close', () => {
+
+            // Restore data
+            setTimeout(() => {
+                this.shareOptions = {
+                    email: undefined
+                }
+            }, 150)
+        })
+    }
+}
+</script>
+
+<style scoped lang="scss">
+@import "@assets/vuefilemanager/_inapp-forms.scss";
+@import '@assets/vuefilemanager/_forms';
+
+.more-options {
+    margin-bottom: 10px;
+}
+
+.input-wrapper {
+
+    &.password {
+        margin-top: -10px;
+    }
+}
+
+.item-thumbnail {
+    padding: 0 20px 20px;
+}
+
+</style>