v6 update

resources/scripts/admin/components/estimate-invoice-common/CreateItemRowTax.vue

@@ -0,0 +1,232 @@
+<template>
+  <div class="flex items-center justify-between mb-3">
+    <div class="flex items-center text-base" style="flex: 4">
+      <label class="pr-2 mb-0" align="right">
+        {{ $t('invoices.item.tax') }}
+      </label>
+
+      <BaseMultiselect
+        v-model="selectedTax"
+        value-prop="id"
+        :options="filteredTypes"
+        :placeholder="$t('general.select_a_tax')"
+        open-direction="top"
+        track-by="name"
+        searchable
+        object
+        label="name"
+        @update:modelValue="(val) => onSelectTax(val)"
+      >
+        <template #singlelabel="{ value }">
+          <div class="absolute left-3.5">
+            {{ value.name }} - {{ value.percent }} %
+          </div>
+        </template>
+
+        <template #option="{ option }">
+          {{ option.name }} - {{ option.percent }} %
+        </template>
+
+        <template v-if="userStore.hasAbilities(ability)" #action>
+          <button
+            type="button"
+            class="
+              flex
+              items-center
+              justify-center
+              w-full
+              px-2
+              cursor-pointer
+              py-2
+              bg-gray-200
+              border-none
+              outline-none
+            "
+            @click="openTaxModal"
+          >
+            <BaseIcon name="CheckCircleIcon" class="h-5 text-primary-400" />
+
+            <label
+              class="ml-2 text-sm leading-none text-primary-400 cursor-pointer"
+              >{{ $t('invoices.add_new_tax') }}</label
+            >
+          </button>
+        </template>
+      </BaseMultiselect>
+      <br />
+    </div>
+
+    <div class="text-sm text-right" style="flex: 3">
+      <BaseFormatMoney :amount="taxAmount" :currency="currency" />
+    </div>
+
+    <div class="flex items-center justify-center w-6 h-10 mx-2 cursor-pointer">
+      <BaseIcon
+        v-if="taxes.length && index !== taxes.length - 1"
+        name="TrashIcon"
+        class="h-5 text-gray-700 cursor-pointer"
+        @click="removeTax(index)"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, ref, inject, reactive, watch } from 'vue'
+import { useTaxTypeStore } from '@/scripts/admin/stores/tax-type'
+import { useModalStore } from '@/scripts/stores/modal'
+import { useI18n } from 'vue-i18n'
+import { useUserStore } from '@/scripts/admin/stores/user'
+
+const props = defineProps({
+  ability: {
+    type: String,
+    default: '',
+  },
+  store: {
+    type: Object,
+    default: null,
+  },
+  storeProp: {
+    type: String,
+    default: '',
+  },
+  itemIndex: {
+    type: Number,
+    required: true,
+  },
+  index: {
+    type: Number,
+    required: true,
+  },
+  taxData: {
+    type: Object,
+    required: true,
+  },
+  taxes: {
+    type: Array,
+    default: [],
+  },
+  total: {
+    type: Number,
+    default: 0,
+  },
+  totalTax: {
+    type: Number,
+    default: 0,
+  },
+  currency: {
+    type: [Object, String],
+    required: true,
+  },
+  updateItems: {
+    type: Function,
+    default: () => {},
+  },
+})
+
+const emit = defineEmits(['remove', 'update'])
+
+const taxTypeStore = useTaxTypeStore()
+const modalStore = useModalStore()
+const userStore = useUserStore()
+
+const selectedTax = ref(null)
+const localTax = reactive({ ...props.taxData })
+const utils = inject('utils')
+const { t } = useI18n()
+
+const filteredTypes = computed(() => {
+  const clonedTypes = taxTypeStore.taxTypes.map((a) => ({ ...a }))
+
+  return clonedTypes.map((taxType) => {
+    let found = props.taxes.find((tax) => tax.tax_type_id === taxType.id)
+
+    if (found) {
+      taxType.disabled = true
+    } else {
+      taxType.disabled = false
+    }
+
+    return taxType
+  })
+})
+
+const taxAmount = computed(() => {
+  if (localTax.compound_tax && props.total) {
+    return ((props.total + props.totalTax) * localTax.percent) / 100
+  }
+
+  if (props.total && localTax.percent) {
+    return (props.total * localTax.percent) / 100
+  }
+
+  return 0
+})
+
+watch(
+  () => props.total,
+  () => {
+    updateRowTax()
+  }
+)
+
+watch(
+  () => props.totalTax,
+  () => {
+    updateRowTax()
+  }
+)
+
+// Set SelectedTax
+if (props.taxData.tax_type_id > 0) {
+  selectedTax.value = taxTypeStore.taxTypes.find(
+    (_type) => _type.id === props.taxData.tax_type_id
+  )
+}
+
+updateRowTax()
+
+function onSelectTax(val) {
+  localTax.percent = val.percent
+  localTax.tax_type_id = val.id
+  localTax.compound_tax = val.compound_tax
+  localTax.name = val.name
+
+  updateRowTax()
+}
+
+function updateRowTax() {
+  if (localTax.tax_type_id === 0) {
+    return
+  }
+
+  emit('update', {
+    index: props.index,
+    item: {
+      ...localTax,
+      amount: taxAmount.value,
+    },
+  })
+}
+
+function openTaxModal() {
+  let data = {
+    itemIndex: props.itemIndex,
+    taxIndex: props.index,
+  }
+
+  modalStore.openModal({
+    title: t('settings.tax_types.add_tax'),
+    componentName: 'TaxTypeModal',
+    data: data,
+    size: 'sm',
+  })
+}
+
+function removeTax(index) {
+  props.store.$patch((state) => {
+    state[props.storeProp].items[props.itemIndex].taxes.splice(index, 1)
+  })
+}
+</script>