Fix Invoice/Estimate template issues and Add Payment Receipt, Custom Payment Modes and Item units

resources/assets/js/views/invoices/Create.vue

@@ -83,7 +83,8 @@
             </div>
             <div class="customer-content mb-1">
               <label class="email">{{ selectedCustomer.name }}</label>
-              <label class="action" @click="removeCustomer">{{ $t('general.remove') }}</label>
+              <label class="action" @click="editCustomer">{{ $t('general.edit') }}</label>
+              <label class="action" @click="removeCustomer">{{ $t('general.deselect') }}</label>
             </div>
           </div>
 
@@ -193,6 +194,7 @@
             :key="item.id"
             :index="index"
             :item-data="item"
+            :invoice-items="newInvoice.items"
             :currency="currency"
             :tax-per-item="taxPerItem"
             :discount-per-item="discountPerItem"
@@ -589,6 +591,14 @@ export default {
     removeCustomer () {
       this.resetSelectedCustomer()
     },
+    editCustomer () {
+      this.openModal({
+        'title': this.$t('customers.edit_customer'),
+        'componentName': 'CustomerModal',
+        'id': this.selectedCustomer.id,
+        'data': this.selectedCustomer
+      })
+    },
     openTemplateModal () {
       this.openModal({
         'title': this.$t('general.choose_template'),

resources/assets/js/views/invoices/Index.vue

@@ -259,6 +259,18 @@
                   {{ $t('invoices.mark_as_sent') }}
                 </a>
               </v-dropdown-item>
+              <v-dropdown-item v-if="row.status === 'SENT' || row.status === 'VIEWED' || row.status === 'OVERDUE'">
+                <router-link :to="`/admin/payments/${row.id}/create`" class="dropdown-item">
+                  <font-awesome-icon :icon="['fas', 'credit-card']" class="dropdown-item-icon"/>
+                  {{ $t('payments.record_payment') }}
+                </router-link>
+              </v-dropdown-item>
+              <v-dropdown-item>
+                <a class="dropdown-item" href="#/" @click="onCloneInvoice(row.id)">
+                  <font-awesome-icon icon="copy" class="dropdown-item-icon" />
+                  {{ $t('invoices.clone_invoice') }}
+                </a>
+              </v-dropdown-item>
               <v-dropdown-item>
                 <div class="dropdown-item" @click="removeInvoice(row.id)">
                   <font-awesome-icon :icon="['fas', 'trash']" class="dropdown-item-icon" />
@@ -378,7 +390,8 @@ export default {
       'deleteMultipleInvoices',
       'sendEmail',
       'markAsSent',
-      'setSelectAllState'
+      'setSelectAllState',
+      'cloneInvoice'
     ]),
     ...mapActions('customer', [
       'fetchCustomers'
@@ -429,6 +442,27 @@ export default {
         }
       })
     },
+    async onCloneInvoice (id) {
+      swal({
+        title: this.$t('general.are_you_sure'),
+        text: this.$t('invoices.confirm_clone'),
+        icon: '/assets/icon/check-circle-solid.svg',
+        buttons: true,
+        dangerMode: true
+      }).then(async (value) => {
+        if (value) {
+          const data = {
+            id: id
+          }
+          let response = await this.cloneInvoice(data)
+          this.refreshTable()
+          if (response.data) {
+            window.toastr['success'](this.$tc('invoices.cloned_successfully'))
+            this.$router.push(`/admin/invoices/${response.data.invoice.id}/edit`)
+          }
+        }
+      })
+    },
     getStatus (val) {
       this.filters.status = {
         name: val,

resources/assets/js/views/invoices/Item.vue

@@ -24,6 +24,8 @@
                   :invalid="$v.item.name.$error"
                   :invalid-description="$v.item.description.$error"
                   :item="item"
+                  :tax-per-item="taxPerItem"
+                  :taxes="item.taxes"
                   @search="searchVal"
                   @select="onSelectItem"
                   @deselect="deselectItem"
@@ -109,7 +111,7 @@
 
                 <div class="remove-icon-wrapper">
                   <font-awesome-icon
-                    v-if="index > 0"
+                    v-if="showRemoveItemIcon"
                     class="remove-icon"
                     icon="trash-alt"
                     @click="removeItem"
@@ -181,6 +183,10 @@ export default {
     discountPerItem: {
       type: String,
       default: ''
+    },
+    invoiceItems: {
+      type: Array,
+      default: null
     }
   },
   data () {
@@ -222,6 +228,12 @@ export default {
         return this.defaultCurrenctForInput
       }
     },
+    showRemoveItemIcon () {
+      if (this.invoiceItems.length == 1) {
+        return false
+      }
+      return true
+    },
     subtotal () {
       return this.item.price * this.item.quantity
     },
@@ -325,6 +337,9 @@ export default {
   created () {
     window.hub.$on('checkItems', this.validateItem)
     window.hub.$on('newItem', (val) => {
+      if (this.taxPerItem === 'YES') {
+        this.item.taxes = val.taxes
+      }
       if (!this.item.item_id && this.modalActive && this.isSelected) {
         this.onSelectItem(val)
       }
@@ -364,7 +379,13 @@ export default {
       this.item.price = item.price
       this.item.item_id = item.id
       this.item.description = item.description
-
+      if (this.taxPerItem === 'YES' && item.taxes) {
+        let index = 0
+        item.taxes.forEach(tax => {
+          this.updateTax({index, item: { ...tax }})
+          index++
+        })
+      }
       // if (this.item.taxes.length) {
       //   this.item.taxes = {...item.taxes}
       // }

resources/assets/js/views/invoices/ItemSelect.vue

@@ -66,6 +66,14 @@ export default {
       type: Boolean,
       required: false,
       default: false
+    },
+    taxPerItem: {
+      type: String,
+      default: ''
+    },
+    taxes: {
+      type: Array,
+      default: null
     }
   },
   data () {
@@ -118,7 +126,8 @@ export default {
       this.$emit('onSelectItem')
       this.openModal({
         'title': 'Add Item',
-        'componentName': 'ItemModal'
+        'componentName': 'ItemModal',
+        'data': {taxPerItem: this.taxPerItem, taxes: this.taxes}
       })
     },
     deselectItem () {

resources/assets/js/views/invoices/View.vue

@@ -73,7 +73,9 @@
                 <font-awesome-icon icon="filter" />
               </base-button>
             </a>
-
+            <div class="filter-title">
+              {{ $t('general.sort_by') }}
+            </div>
             <div class="filter-items">
               <input
                 id="filter_invoice_date"
@@ -111,7 +113,7 @@
               <label class="inv-label" for="filter_invoice_number">{{ $t('invoices.invoice_number') }}</label>
             </div>
           </v-dropdown>
-          <base-button class="inv-button inv-filter-sorting-btn" color="default" size="medium" @click="sortData">
+          <base-button v-tooltip.top-center="{ content: getOrderName }" class="inv-button inv-filter-sorting-btn" color="default" size="medium" @click="sortData">
             <font-awesome-icon v-if="getOrderBy" icon="sort-amount-up" />
             <font-awesome-icon v-else icon="sort-amount-down" />
           </base-button>
@@ -168,13 +170,18 @@ export default {
     }
   },
   computed: {
-
     getOrderBy () {
       if (this.searchData.orderBy === 'asc' || this.searchData.orderBy == null) {
         return true
       }
       return false
     },
+    getOrderName () {
+      if (this.getOrderBy) {
+        return this.$t('general.ascending')
+      }
+      return this.$t('general.descending')
+    },
     shareableLink () {
       return `/invoices/pdf/${this.invoice.unique_hash}`
     }