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

resources/assets/js/views/settings/Customization.vue

@@ -11,12 +11,15 @@
         <li class="tab" @click="setActiveTab('PAYMENTS')">
           <a :class="['tab-link', {'a-active': activeTab === 'PAYMENTS'}]" href="#">{{ $t('settings.customization.payments.title') }}</a>
         </li>
+        <li class="tab" @click="setActiveTab('ITEMS')">
+          <a :class="['tab-link', {'a-active': activeTab === 'ITEMS'}]" href="#">{{ $t('settings.customization.items.title') }}</a>
+        </li>
       </ul>
 
       <!-- Invoices Tab -->
       <transition name="fade-customize">
         <div v-if="activeTab === 'INVOICES'" class="invoice-tab">
-          <form action="" class="form-section" @submit.prevent="updateInvoiceSetting">
+          <form action="" class="mt-3" @submit.prevent="updateInvoiceSetting">
             <div class="row">
               <div class="col-md-12 mb-4">
                 <label class="input-label">{{ $t('settings.customization.invoices.invoice_prefix') }}</label>
@@ -32,7 +35,7 @@
                 <span v-if="!$v.invoices.invoice_prefix.alpha" class="text-danger">{{ $t('validation.characters_only') }}</span>
               </div>
             </div>
-            <div class="row mb-3">
+            <div class="row pb-3">
               <div class="col-md-12">
                 <base-button
                   icon="save"
@@ -43,25 +46,23 @@
                 </base-button>
               </div>
             </div>
-            <hr>
           </form>
-          <div class="col-md-12 mt-3">
-            <div class="page-header">
-              <h3 class="page-title">
-                {{ $t('settings.customization.invoices.invoice_settings') }}
-              </h3>
-              <div class="flex-box">
-                <div class="left">
-                  <base-switch
-                    v-model="invoiceAutogenerate"
-                    class="btn-switch"
-                    @change="setInvoiceSetting"
-                  />
-                </div>
-                <div class="right ml-15">
-                  <p class="box-title">  {{ $t('settings.customization.invoices.autogenerate_invoice_number') }} </p>
-                  <p class="box-desc">  {{ $t('settings.customization.invoices.invoice_setting_description') }} </p>
-                </div>
+          <hr>
+          <div class="page-header pt-3">
+            <h3 class="page-title">
+              {{ $t('settings.customization.invoices.invoice_settings') }}
+            </h3>
+            <div class="flex-box">
+              <div class="left">
+                <base-switch
+                  v-model="invoiceAutogenerate"
+                  class="btn-switch"
+                  @change="setInvoiceSetting"
+                />
+              </div>
+              <div class="right ml-15">
+                <p class="box-title">  {{ $t('settings.customization.invoices.autogenerate_invoice_number') }} </p>
+                <p class="box-desc">  {{ $t('settings.customization.invoices.invoice_setting_description') }} </p>
               </div>
             </div>
           </div>
@@ -71,7 +72,7 @@
       <!-- Estimates Tab -->
       <transition name="fade-customize">
         <div v-if="activeTab === 'ESTIMATES'" class="estimate-tab">
-          <form action="" class="form-section" @submit.prevent="updateEstimateSetting">
+          <form action="" class="mt-3" @submit.prevent="updateEstimateSetting">
             <div class="row">
               <div class="col-md-12 mb-4">
                 <label class="input-label">{{ $t('settings.customization.estimates.estimate_prefix') }}</label>
@@ -87,7 +88,7 @@
                 <span v-if="!$v.estimates.estimate_prefix.alpha" class="text-danger">{{ $t('validation.characters_only') }}</span>
               </div>
             </div>
-            <div class="row mb-3">
+            <div class="row pb-3">
               <div class="col-md-12">
                 <base-button
                   icon="save"
@@ -100,23 +101,21 @@
             </div>
             <hr>
           </form>
-          <div class="col-md-12 mt-3">
-            <div class="page-header">
-              <h3 class="page-title">
-                {{ $t('settings.customization.estimates.estimate_settings') }}
-              </h3>
-              <div class="flex-box">
-                <div class="left">
-                  <base-switch
-                    v-model="estimateAutogenerate"
-                    class="btn-switch"
-                    @change="setEstimateSetting"
-                  />
-                </div>
-                <div class="right ml-15">
-                  <p class="box-title">  {{ $t('settings.customization.estimates.autogenerate_estimate_number') }} </p>
-                  <p class="box-desc">  {{ $t('settings.customization.estimates.estimate_setting_description') }} </p>
-                </div>
+          <div class="page-header pt-3">
+            <h3 class="page-title">
+              {{ $t('settings.customization.estimates.estimate_settings') }}
+            </h3>
+            <div class="flex-box">
+              <div class="left">
+                <base-switch
+                  v-model="estimateAutogenerate"
+                  class="btn-switch"
+                  @change="setEstimateSetting"
+                />
+              </div>
+              <div class="right ml-15">
+                <p class="box-title">  {{ $t('settings.customization.estimates.autogenerate_estimate_number') }} </p>
+                <p class="box-desc">  {{ $t('settings.customization.estimates.estimate_setting_description') }} </p>
               </div>
             </div>
           </div>
@@ -126,7 +125,66 @@
       <!-- Payments Tab -->
       <transition name="fade-customize">
         <div v-if="activeTab === 'PAYMENTS'" class="payment-tab">
-          <form action="" class="form-section" @submit.prevent="updatePaymentSetting">
+          <div class="page-header">
+            <div class="row">
+              <div class="col-md-8">
+                <!-- <h3 class="page-title">
+                  {{ $t('settings.customization.payments.payment_mode') }}
+                </h3> -->
+              </div>
+              <div class="col-md-4 d-flex flex-row-reverse">
+                <base-button
+                  outline
+                  class="add-new-tax"
+                  color="theme"
+                  @click="addPaymentMode"
+                >
+                  {{ $t('settings.customization.payments.add_payment_mode') }}
+                </base-button>
+              </div>
+            </div>
+          </div>
+          <table-component
+            ref="table"
+            :show-filter="false"
+            :data="paymentModes"
+            table-class="table tax-table"
+            class="mb-3"
+          >
+            <table-column
+              :sortable="true"
+              :label="$t('settings.customization.payments.payment_mode')"
+              show="name"
+            />
+            <table-column
+              :sortable="false"
+              :filterable="false"
+              cell-class="action-dropdown"
+            >
+              <template slot-scope="row">
+                <span>{{ $t('settings.tax_types.action') }}</span>
+                <v-dropdown>
+                  <a slot="activator" href="#">
+                    <dot-icon />
+                  </a>
+                  <v-dropdown-item>
+                    <div class="dropdown-item" @click="editPaymentMode(row)">
+                      <font-awesome-icon :icon="['fas', 'pencil-alt']" class="dropdown-item-icon" />
+                      {{ $t('general.edit') }}
+                    </div>
+                  </v-dropdown-item>
+                  <v-dropdown-item>
+                    <div class="dropdown-item" @click="removePaymentMode(row.id)">
+                      <font-awesome-icon :icon="['fas', 'trash']" class="dropdown-item-icon" />
+                      {{ $t('general.delete') }}
+                    </div>
+                  </v-dropdown-item>
+                </v-dropdown>
+              </template>
+            </table-column>
+          </table-component>
+          <hr>
+          <form action="" class="pt-3" @submit.prevent="updatePaymentSetting">
             <div class="row">
               <div class="col-md-12 mb-4">
                 <label class="input-label">{{ $t('settings.customization.payments.payment_prefix') }}</label>
@@ -142,7 +200,7 @@
                 <span v-if="!$v.payments.payment_prefix.alpha" class="text-danger">{{ $t('validation.characters_only') }}</span>
               </div>
             </div>
-            <div class="row mb-3">
+            <div class="row pb-3">
               <div class="col-md-12">
                 <base-button
                   icon="save"
@@ -155,33 +213,97 @@
             </div>
           </form>
           <hr>
-          <div class="col-md-12 mt-4">
-            <div class="page-header">
-              <h3 class="page-title">
-                {{ $t('settings.customization.payments.payment_settings') }}
-              </h3>
-              <div class="flex-box">
-                <div class="left">
-                  <base-switch
-                    v-model="paymentAutogenerate"
-                    class="btn-switch"
-                    @change="setPaymentSetting"
-                  />
-                </div>
-                <div class="right ml-15">
-                  <p class="box-title">  {{ $t('settings.customization.payments.autogenerate_payment_number') }} </p>
-                  <p class="box-desc">  {{ $t('settings.customization.payments.payment_setting_description') }} </p>
-                </div>
+          <div class="page-header pt-3">
+            <h3 class="page-title">
+              {{ $t('settings.customization.payments.payment_settings') }}
+            </h3>
+            <div class="flex-box">
+              <div class="left">
+                <base-switch
+                  v-model="paymentAutogenerate"
+                  class="btn-switch"
+                  @change="setPaymentSetting"
+                />
+              </div>
+              <div class="right ml-15">
+                <p class="box-title">  {{ $t('settings.customization.payments.autogenerate_payment_number') }} </p>
+                <p class="box-desc">  {{ $t('settings.customization.payments.payment_setting_description') }} </p>
               </div>
             </div>
           </div>
         </div>
       </transition>
+
+      <!-- Items Tab -->
+      <transition name="fade-customize">
+        <div v-if="activeTab === 'ITEMS'" class="item-tab">
+          <div class="page-header">
+            <div class="row">
+              <div class="col-md-8">
+                <!-- <h3 class="page-title">
+                  {{ $t('settings.customization.items.title') }}
+                </h3> -->
+              </div>
+              <div class="col-md-4 d-flex flex-row-reverse">
+                <base-button
+                  outline
+                  class="add-new-tax"
+                  color="theme"
+                  @click="addItemUnit"
+                >
+                  {{ $t('settings.customization.items.add_item_unit') }}
+                </base-button>
+              </div>
+            </div>
+          </div>
+          <table-component
+            ref="itemTable"
+            :show-filter="false"
+            :data="itemUnits"
+            table-class="table tax-table"
+            class="mb-3"
+          >
+            <table-column
+              :sortable="true"
+              :label="$t('settings.customization.items.units')"
+              show="name"
+            />
+            <table-column
+              :sortable="false"
+              :filterable="false"
+              cell-class="action-dropdown"
+            >
+              <template slot-scope="row">
+                <span>{{ $t('settings.tax_types.action') }}</span>
+                <v-dropdown>
+                  <a slot="activator" href="#">
+                    <dot-icon />
+                  </a>
+                  <v-dropdown-item>
+                    <div class="dropdown-item" @click="editItemUnit(row)">
+                      <font-awesome-icon :icon="['fas', 'pencil-alt']" class="dropdown-item-icon" />
+                      {{ $t('general.edit') }}
+                    </div>
+                  </v-dropdown-item>
+                  <v-dropdown-item>
+                    <div class="dropdown-item" @click="removeItemUnit(row.id)">
+                      <font-awesome-icon :icon="['fas', 'trash']" class="dropdown-item-icon" />
+                      {{ $t('general.delete') }}
+                    </div>
+                  </v-dropdown-item>
+                </v-dropdown>
+              </template>
+            </table-column>
+          </table-component>
+        </div>
+      </transition>
+
     </div>
   </div>
 </template>
 <script>
 import { validationMixin } from 'vuelidate'
+import { mapActions, mapGetters } from 'vuex'
 const { required, maxLength, alpha } = require('vuelidate/lib/validators')
 export default {
   mixins: [validationMixin],
@@ -204,9 +326,20 @@ export default {
       payments: {
         payment_prefix: null
       },
+      items: {
+        units: []
+      },
       currentData: null
     }
   },
+  computed: {
+    ...mapGetters('item', [
+      'itemUnits'
+    ]),
+    ...mapGetters('payment', [
+      'paymentModes'
+    ])
+  },
   watch: {
     activeTab () {
       this.loadData()
@@ -239,6 +372,15 @@ export default {
     this.loadData()
   },
   methods: {
+    ...mapActions('modal', [
+      'openModal'
+    ]),
+    ...mapActions('payment', [
+      'deletePaymentMode'
+    ]),
+    ...mapActions('item', [
+      'deleteItemUnit'
+    ]),
     async setInvoiceSetting () {
       let data = {
         key: 'invoice_auto_generate',
@@ -259,6 +401,78 @@ export default {
         window.toastr['success'](this.$t('general.setting_updated'))
       }
     },
+    async addItemUnit () {
+      this.openModal({
+        'title': 'Add Item Unit',
+        'componentName': 'ItemUnit'
+      })
+      this.$refs.itemTable.refresh()
+    },
+    async editItemUnit (data) {
+      this.openModal({
+        'title': 'Edit Item Unit',
+        'componentName': 'ItemUnit',
+        'id': data.id,
+        'data': data
+      })
+      this.$refs.itemTable.refresh()
+    },
+    async removeItemUnit (id) {
+      swal({
+        title: this.$t('general.are_you_sure'),
+        text: this.$t('settings.customization.items.item_unit_confirm_delete'),
+        icon: '/assets/icon/trash-solid.svg',
+        buttons: true,
+        dangerMode: true
+      }).then(async (value) => {
+        if (value) {
+          let response = await this.deleteItemUnit(id)
+          if (response.data.success) {
+            window.toastr['success'](this.$t('settings.customization.items.deleted_message'))
+            this.id = null
+            this.$refs.itemTable.refresh()
+            return true
+          }
+          window.toastr['error'](this.$t('settings.customization.items.already_in_use'))
+        }
+      })
+    },
+    async addPaymentMode () {
+      this.openModal({
+        'title': 'Add Payment Mode',
+        'componentName': 'PaymentMode'
+      })
+      this.$refs.table.refresh()
+    },
+    async editPaymentMode (data) {
+      this.openModal({
+        'title': 'Edit Payment Mode',
+        'componentName': 'PaymentMode',
+        'id': data.id,
+        'data': data
+      })
+      this.$refs.table.refresh()
+    },
+    removePaymentMode (id) {
+      swal({
+        title: this.$t('general.are_you_sure'),
+        text: this.$t('settings.customization.payments.payment_mode_confirm_delete'),
+        icon: '/assets/icon/trash-solid.svg',
+        buttons: true,
+        dangerMode: true
+      }).then(async (value) => {
+        if (value) {
+          let response = await this.deletePaymentMode(id)
+          if (response.data.success) {
+            window.toastr['success'](this.$t('settings.customization.payments.deleted_message'))
+            this.id = null
+            this.$refs.table.refresh()
+            return true
+          }
+          window.toastr['error'](this.$t('settings.customization.payments.already_in_use'))
+        }
+      })
+    },
     changeToUppercase (currentTab) {
       if (currentTab === 'INVOICES') {
         this.invoices.invoice_prefix = this.invoices.invoice_prefix.toUpperCase()

resources/assets/js/views/settings/MailConfig.vue

@@ -15,7 +15,19 @@
           :mail-drivers="mail_drivers"
           @on-change-driver="(val) => mail_driver = mailConfigData.mail_driver = val"
           @submit-data="saveEmailConfig"
-        />
+        >
+          <base-button
+            :loading="loading"
+            outline
+            class="pull-right mt-4 ml-2"
+            icon="check"
+            color="theme"
+            type="button"
+            @click="openMailTestModal"
+          >
+            {{ $t('general.test_mail_conf') }}
+          </base-button>
+        </component>
       </div>
     </div>
   </div>
@@ -27,6 +39,7 @@ import Smtp from './mailDriver/Smtp'
 import Mailgun from './mailDriver/Mailgun'
 import Ses from './mailDriver/Ses'
 import Basic from './mailDriver/Basic'
+import { mapActions } from 'vuex'
 
 export default {
   components: {
@@ -50,6 +63,9 @@ export default {
     this.loadData()
   },
   methods: {
+    ...mapActions('modal', [
+      'openModal'
+    ]),
     async loadData () {
       this.loading = true
 
@@ -79,6 +95,12 @@ export default {
       } catch (e) {
         window.toastr['error']('Something went wrong')
       }
+    },
+    openMailTestModal () {
+      this.openModal({
+        'title': 'Test Mail Configuration',
+        'componentName': 'MailTestModal'
+      })
     }
   }
 }

resources/assets/js/views/settings/mailDriver/Basic.vue

@@ -73,15 +73,18 @@
         </div>
       </div>
     </div>
-    <base-button
-      :loading="loading"
-      class="pull-right mt-4"
-      icon="save"
-      color="theme"
-      type="submit"
-    >
-      {{ $t('general.save') }}
-    </base-button>
+    <div class="d-flex">
+      <base-button
+        :loading="loading"
+        class="pull-right mt-4"
+        icon="save"
+        color="theme"
+        type="submit"
+      >
+        {{ $t('general.save') }}
+      </base-button>
+      <slot/>
+    </div>
   </form>
 </template>
 <script>

resources/assets/js/views/settings/mailDriver/Mailgun.vue

@@ -167,15 +167,18 @@
         </div>
       </div>
     </div>
-    <base-button
-      :loading="loading"
-      class="pull-right mt-4"
-      icon="save"
-      color="theme"
-      type="submit"
-    >
-      {{ $t('general.save') }}
-    </base-button>
+    <div class="d-flex">
+      <base-button
+        :loading="loading"
+        class="pull-right mt-4"
+        icon="save"
+        color="theme"
+        type="submit"
+      >
+        {{ $t('general.save') }}
+      </base-button>
+      <slot/>
+    </div>
   </form>
 </template>
 <script>

resources/assets/js/views/settings/mailDriver/Ses.vue

@@ -146,15 +146,18 @@
         </div>
       </div>
     </div>
-    <base-button
-      :loading="loading"
-      class="pull-right mt-4"
-      icon="save"
-      color="theme"
-      type="submit"
-    >
-      {{ $t('general.save') }}
-    </base-button>
+    <div class="d-flex">
+      <base-button
+        :loading="loading"
+        class="pull-right mt-4"
+        icon="save"
+        color="theme"
+        type="submit"
+      >
+        {{ $t('general.save') }}
+      </base-button>
+      <slot/>
+    </div>
   </form>
 </template>
 <script>

resources/assets/js/views/settings/mailDriver/Smtp.vue

@@ -146,15 +146,18 @@
         </div>
       </div>
     </div>
-    <base-button
-      :loading="loading"
-      class="pull-right mt-4"
-      icon="save"
-      color="theme"
-      type="submit"
-    >
-      {{ $t('general.save') }}
-    </base-button>
+    <div class="d-flex">
+      <base-button
+        :loading="loading"
+        class="pull-right mt-4"
+        icon="save"
+        color="theme"
+        type="submit"
+      >
+        {{ $t('general.save') }}
+      </base-button>
+      <slot/>
+    </div>
   </form>
 </template>
 <script>