Merge pull request #2849 from brkcvn/drag
Sortable development for items in Document pages
This commit is contained in:
Cüneyt Şentürk
GitHub
commit
5c4b8f04f3
29
package-lock.json
generated
29
package-lock.json
generated
@ -43,7 +43,8 @@
|
||||
"vue-flatpickr-component": "^8.1.3",
|
||||
"vue-router": "^3.1.3",
|
||||
"vue2-editor": "^2.10.3",
|
||||
"vue2-transitions": "^0.3.0"
|
||||
"vue2-transitions": "^0.3.0",
|
||||
"vuedraggable": "^2.24.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.15.5",
|
||||
@ -23415,6 +23416,11 @@
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/sortablejs": {
|
||||
"version": "1.10.2",
|
||||
"resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.10.2.tgz",
|
||||
"integrity": "sha512-YkPGufevysvfwn5rfdlGyrGjt7/CRHwvRPogD/lC+TnvcN29jDpCifKP+rBqf+LRldfXSTh+0CGLcSg0VIxq3A=="
|
||||
},
|
||||
"node_modules/source-list-map": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz",
|
||||
@ -25861,6 +25867,14 @@
|
||||
"resolved": "https://registry.npmjs.org/vue2-transitions/-/vue2-transitions-0.3.0.tgz",
|
||||
"integrity": "sha512-m1ad8K8kufqiEhj5gXHkkqOioI5sW0FaMbRiO0Tv2WFfGbO2eIKrfkFiO3HPQtMJboimaLCN4p/zL81clLbG4w=="
|
||||
},
|
||||
"node_modules/vuedraggable": {
|
||||
"version": "2.24.3",
|
||||
"resolved": "https://registry.npmjs.org/vuedraggable/-/vuedraggable-2.24.3.tgz",
|
||||
"integrity": "sha512-6/HDXi92GzB+Hcs9fC6PAAozK1RLt1ewPTLjK0anTYguXLAeySDmcnqE8IC0xa7shvSzRjQXq3/+dsZ7ETGF3g==",
|
||||
"dependencies": {
|
||||
"sortablejs": "1.10.2"
|
||||
}
|
||||
},
|
||||
"node_modules/watchpack": {
|
||||
"version": "2.4.0",
|
||||
"resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",
|
||||
@ -46042,6 +46056,11 @@
|
||||
"is-plain-obj": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"sortablejs": {
|
||||
"version": "1.10.2",
|
||||
"resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.10.2.tgz",
|
||||
"integrity": "sha512-YkPGufevysvfwn5rfdlGyrGjt7/CRHwvRPogD/lC+TnvcN29jDpCifKP+rBqf+LRldfXSTh+0CGLcSg0VIxq3A=="
|
||||
},
|
||||
"source-list-map": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz",
|
||||
@ -47994,6 +48013,14 @@
|
||||
"resolved": "https://registry.npmjs.org/vue2-transitions/-/vue2-transitions-0.3.0.tgz",
|
||||
"integrity": "sha512-m1ad8K8kufqiEhj5gXHkkqOioI5sW0FaMbRiO0Tv2WFfGbO2eIKrfkFiO3HPQtMJboimaLCN4p/zL81clLbG4w=="
|
||||
},
|
||||
"vuedraggable": {
|
||||
"version": "2.24.3",
|
||||
"resolved": "https://registry.npmjs.org/vuedraggable/-/vuedraggable-2.24.3.tgz",
|
||||
"integrity": "sha512-6/HDXi92GzB+Hcs9fC6PAAozK1RLt1ewPTLjK0anTYguXLAeySDmcnqE8IC0xa7shvSzRjQXq3/+dsZ7ETGF3g==",
|
||||
"requires": {
|
||||
"sortablejs": "1.10.2"
|
||||
}
|
||||
},
|
||||
"watchpack": {
|
||||
"version": "2.4.0",
|
||||
"resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",
|
||||
|
||||
@ -47,7 +47,8 @@
|
||||
"vue-flatpickr-component": "^8.1.3",
|
||||
"vue-router": "^3.1.3",
|
||||
"vue2-editor": "^2.10.3",
|
||||
"vue2-transitions": "^0.3.0"
|
||||
"vue2-transitions": "^0.3.0",
|
||||
"vuedraggable": "^2.24.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.15.5",
|
||||
|
||||
16
resources/assets/js/views/common/documents.js
vendored
16
resources/assets/js/views/common/documents.js
vendored
@ -14,6 +14,7 @@ import Global from './../../mixins/global';
|
||||
|
||||
import Form from './../../plugins/form';
|
||||
import BulkAction from './../../plugins/bulk-action';
|
||||
import draggable from 'vuedraggable';
|
||||
|
||||
// plugin setup
|
||||
Vue.use(DashboardPlugin);
|
||||
@ -25,6 +26,10 @@ const app = new Vue({
|
||||
Global
|
||||
],
|
||||
|
||||
components: {
|
||||
draggable
|
||||
},
|
||||
|
||||
data: function () {
|
||||
return {
|
||||
form: new Form('document'),
|
||||
@ -77,6 +82,7 @@ const app = new Vue({
|
||||
],
|
||||
email_template: false,
|
||||
send_to: false,
|
||||
drag: false
|
||||
}
|
||||
},
|
||||
|
||||
@ -111,6 +117,16 @@ const app = new Vue({
|
||||
},
|
||||
|
||||
methods: {
|
||||
onEnd() {
|
||||
this.dragging = false;
|
||||
},
|
||||
|
||||
onUpdate(event) {
|
||||
let fromIndex = this.form.items.indexOf(this.form.items[event.oldIndex]);
|
||||
let element = this.form.items.splice(fromIndex, 1)[0];
|
||||
this.form.items.splice(event.newIndex, 0, element);
|
||||
},
|
||||
|
||||
onRefFocus(ref) {
|
||||
let index = this.form.items.length - 1;
|
||||
|
||||
|
||||
@ -1,427 +1,430 @@
|
||||
<tr v-for="(row, index) in items" :index="index">
|
||||
@stack('name_td_start')
|
||||
<tbody is="draggable" tag="tbody" handle=".handle" @start="dragging = true" @end="dragging = false" @update="onUpdate">
|
||||
<tr v-for="(row, index) in items" :index="index">
|
||||
@stack('name_td_start')
|
||||
|
||||
<td class="border-r-0 border-b-0 p-0"
|
||||
:class="[{'has-error': form.errors.has('items.' + index + '.name') }]"
|
||||
colspan="7">
|
||||
<table class="w-full border-b pb-3">
|
||||
<colgroup>
|
||||
<col class="small-col" style="width: 24px;">
|
||||
<col class="small-col" style="width: 20%;">
|
||||
<col class="small-col description-col" style="width: 30%;">
|
||||
<col class="small-col" style="width: 12%;">
|
||||
<col class="small-col" style="width: 15%;">
|
||||
<col class="small-col amount-col" style="width: 20%;">
|
||||
<col class="small-col" style="width: 24px;">
|
||||
</colgroup>
|
||||
<td class="border-r-0 border-b-0 p-0"
|
||||
:class="[{'has-error': form.errors.has('items.' + index + '.name') }]"
|
||||
colspan="7">
|
||||
<table class="w-full border-b pb-3">
|
||||
<colgroup>
|
||||
<col class="small-col" style="width: 24px;">
|
||||
<col class="small-col" style="width: 20%;">
|
||||
<col class="small-col description-col" style="width: 30%;">
|
||||
<col class="small-col" style="width: 12%;">
|
||||
<col class="small-col" style="width: 15%;">
|
||||
<col class="small-col amount-col" style="width: 20%;">
|
||||
<col class="small-col" style="width: 24px;">
|
||||
</colgroup>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
@stack('move_td_start')
|
||||
<td class="align-middle border-b-0 flex items-center justify-center" style="width:24px; height:100px; color: #8898aa;">
|
||||
<span class="w-6 material-icons">list</span>
|
||||
</td>
|
||||
@stack('move_td_end')
|
||||
|
||||
@stack('items_td_start')
|
||||
|
||||
@if (! $hideItems || (! $hideItemName && ! $hideItemDescription))
|
||||
@stack('name_td_start')
|
||||
|
||||
<td class="px-3 py-3 ltr:pl-2 rtl:pr-2 ltr:text-left rtl:text-right align-middle border-b-0 name">
|
||||
@if (! $hideItemName)
|
||||
<span class="flex items-center text-sm" tabindex="0" v-if="row.item_id">
|
||||
<div v-html="row.name"></div>
|
||||
</span>
|
||||
|
||||
<div v-else>
|
||||
@stack('name_input_start')
|
||||
|
||||
<input
|
||||
type="text"
|
||||
:ref="'items-' + index + '-name'"
|
||||
class="w-full text-sm px-3 py-2.5 mt-0 rounded-lg border border-light-gray text-black placeholder-light-gray bg-white disabled:bg-gray-200 focus:outline-none focus:ring-transparent focus:border-purple mt-0"
|
||||
:name="'items.' + index + '.name'"
|
||||
autocomplete="off"
|
||||
required="required"
|
||||
data-item="name"
|
||||
v-model="row.name"
|
||||
@input="onBindingItemField(index, 'name')"
|
||||
@change="form.errors.clear('items.' + index + '.name')"
|
||||
/>
|
||||
|
||||
<div class="text-red text-sm mt-1 block"
|
||||
v-if="form.errors.has('items.' + index + '.name')"
|
||||
v-html="form.errors.get('items.' + index + '.name')"
|
||||
></div>
|
||||
|
||||
@stack('name_input_end')
|
||||
</div>
|
||||
@endif
|
||||
<tbody>
|
||||
<tr>
|
||||
@stack('move_td_start')
|
||||
<td class="align-middle border-b-0 flex items-center justify-center" style="width:24px; height:100px; color: #8898aa;">
|
||||
<div class="handle mt-2 hidden lg:block cursor-move">
|
||||
<span class="w-6 material-icons">list</span>
|
||||
</div>
|
||||
</td>
|
||||
@stack('move_td_end')
|
||||
|
||||
@stack('name_td_end')
|
||||
@stack('items_td_start')
|
||||
|
||||
@stack('description_td_start')
|
||||
@if (! $hideItems || (! $hideItemName && ! $hideItemDescription))
|
||||
@stack('name_td_start')
|
||||
<td class="px-3 py-3 ltr:pl-2 rtl:pr-2 ltr:text-left rtl:text-right align-middle border-b-0 name">
|
||||
@if (! $hideItemName)
|
||||
<span class="flex items-center text-sm" tabindex="0" v-if="row.item_id">
|
||||
<div v-html="row.name"></div>
|
||||
</span>
|
||||
|
||||
<td class="px-3 py-3 border-b-0 description">
|
||||
@if (! $hideItemDescription)
|
||||
<textarea
|
||||
class="w-full text-sm px-3 py-2.5 mt-1.5 rounded-lg border border-light-gray text-black placeholder-light-gray bg-white disabled:bg-gray-200 focus:outline-none focus:ring-transparent focus:border-purple"
|
||||
style="height:42px;"
|
||||
:ref="'items-' + index + '-description'"
|
||||
placeholder="{{ trans('items.enter_item_description') }}"
|
||||
:name="'items.' + index + '.description'"
|
||||
v-model="row.description"
|
||||
data-item="description"
|
||||
resize="none"
|
||||
@input="onBindingItemField(index, 'description')"
|
||||
></textarea>
|
||||
@endif
|
||||
</td>
|
||||
<div v-else>
|
||||
@stack('name_input_start')
|
||||
|
||||
@stack('description_td_end')
|
||||
@endif
|
||||
<input
|
||||
type="text"
|
||||
:ref="'items-' + index + '-name'"
|
||||
class="w-full text-sm px-3 py-2.5 mt-0 rounded-lg border border-light-gray text-black placeholder-light-gray bg-white disabled:bg-gray-200 focus:outline-none focus:ring-transparent focus:border-purple mt-0"
|
||||
:name="'items.' + index + '.name'"
|
||||
autocomplete="off"
|
||||
required="required"
|
||||
data-item="name"
|
||||
v-model="row.name"
|
||||
@input="onBindingItemField(index, 'name')"
|
||||
@change="form.errors.clear('items.' + index + '.name')"
|
||||
/>
|
||||
|
||||
@stack('items_td_end')
|
||||
<div class="text-red text-sm mt-1 block"
|
||||
v-if="form.errors.has('items.' + index + '.name')"
|
||||
v-html="form.errors.get('items.' + index + '.name')"
|
||||
></div>
|
||||
|
||||
@stack('quantity_td_start')
|
||||
|
||||
<td class="px-3 py-3 border-b-0 quantity">
|
||||
@if (! $hideItemQuantity)
|
||||
<div>
|
||||
@stack('quantity_input_start')
|
||||
|
||||
<input
|
||||
type="number"
|
||||
min="0"
|
||||
:ref="'items-' + index + '-quantity'"
|
||||
class="w-full text-sm px-3 py-2.5 mt-0 text-right rounded-lg border border-light-gray text-black placeholder-light-gray bg-white disabled:bg-gray-200 focus:outline-none focus:ring-transparent focus:border-purple input-number-disabled"
|
||||
:name="'items.' + index + '.quantity'"
|
||||
autocomplete="off"
|
||||
required="required"
|
||||
data-item="quantity"
|
||||
v-model="row.quantity"
|
||||
@input="onCalculateTotal"
|
||||
@change="form.errors.clear('items.' + index + '.quantity')"
|
||||
/>
|
||||
|
||||
<div class="text-red text-sm mt-1 block"
|
||||
v-if="form.errors.has('items.' + index + '.quantity')"
|
||||
v-html="form.errors.get('items.' + index + '.quantity')">
|
||||
</div>
|
||||
|
||||
@stack('quantity_input_end')
|
||||
</div>
|
||||
@endif
|
||||
</td>
|
||||
|
||||
@stack('quantity_td_end')
|
||||
|
||||
@stack('price_td_start')
|
||||
|
||||
<td class="px-3 py-3 pr-1 border-b-0 price">
|
||||
@if (! $hideItemPrice)
|
||||
<div>
|
||||
@stack('price_input_start')
|
||||
|
||||
<x-form.input.money
|
||||
name="price"
|
||||
value="0"
|
||||
row-input
|
||||
data-item="price"
|
||||
v-model="row.price"
|
||||
v-error="form.errors.get('items.' + index + '.price')"
|
||||
v-error-message="form.errors.get('items.' + index + '.price')"
|
||||
change="row.price = $event; form.errors.clear('items.' + index + '.price'); onCalculateTotal"
|
||||
:currency="$currency"
|
||||
dynamicCurrency="currency"
|
||||
money-class="text-right mt-0"
|
||||
form-group-class="text-right"
|
||||
/>
|
||||
|
||||
@stack('price_input_end')
|
||||
</div>
|
||||
@endif
|
||||
</td>
|
||||
|
||||
@stack('price_td_end')
|
||||
|
||||
@stack('total_td_start')
|
||||
|
||||
<td class="px-3 py-3 text-right border-b-0 total">
|
||||
@if (! $hideItemAmount)
|
||||
<div>
|
||||
<x-form.input.money
|
||||
name="total"
|
||||
value="0"
|
||||
disabled
|
||||
row-input
|
||||
data-item="total"
|
||||
v-model="row.total"
|
||||
:currency="$currency"
|
||||
dynamicCurrency="currency"
|
||||
money-class="ltr:text-right rtl:text-left mt-0 disabled-money px-0"
|
||||
form-group-class="ltr:text-right rtl:text-left disabled-money"
|
||||
/>
|
||||
</div>
|
||||
@endif
|
||||
</td>
|
||||
|
||||
@stack('total_td_end')
|
||||
|
||||
@stack('delete_td_start')
|
||||
|
||||
<td class="text-right group">
|
||||
<button type="button" @click="onDeleteItem(index)" class="w-6 h-7 flex items-center rounded-lg p-0 group-hover:bg-gray-100">
|
||||
<span class="w-full material-icons-outlined text-lg text-gray-300 group-hover:text-gray-500">delete</span>
|
||||
</button>
|
||||
</td>
|
||||
|
||||
@stack('delete_td_end')
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td colspan="3">
|
||||
@stack('item_custom_fields')
|
||||
</td>
|
||||
|
||||
<td colspan="4" class="px-0 pb-3">
|
||||
<div class="relative">
|
||||
<div class="absolute -top-6 ltr:left-3 rtl:right-3 flex items-center">
|
||||
@if (! $hideDiscount && in_array(setting('localisation.discount_location'), ['item', 'both']))
|
||||
<div class="text-left border-0 p-0 mr-16" v-if="!row.add_discount">
|
||||
<x-button type="button" class="text-xs text-purple" @click="onAddLineDiscount(index)" override="class">
|
||||
<x-button.hover color="to-purple">
|
||||
{{ trans('general.title.add', ['type' => trans('invoices.discount')]) }}
|
||||
</x-button.hover>
|
||||
</x-button>
|
||||
@stack('name_input_end')
|
||||
</div>
|
||||
@endif
|
||||
</td>
|
||||
|
||||
<div class="text-right border-0 p-0 pr-4">
|
||||
<x-button type="button" class="text-xs text-purple" @click="onAddTax(index)" override="class">
|
||||
<x-button.hover color="to-purple">
|
||||
{{ trans('general.title.add', ['type' => trans_choice('general.taxes', 1)]) }}
|
||||
</x-button.hover>
|
||||
</x-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@stack('name_td_end')
|
||||
|
||||
<div v-if="row.add_discount" class="flex items-center justify-between pb-3 ml-2">
|
||||
@stack('discount_input_start')
|
||||
@stack('description_td_start')
|
||||
|
||||
<div class="mb-0" style="display: inline-block; position: relative;">
|
||||
<div class="flex items-center">
|
||||
<div class="w-16 flex items-center bg-gray-200 p-1 ltr:mr-2 rtl:ml-2 rounded-lg">
|
||||
<button type="button"
|
||||
class="w-7 flex justify-center px-2"
|
||||
:class="[{'btn-outline-primary' : row.discount_type !== 'percentage'}, {'bg-white rounded-lg' : row.discount_type === 'percentage'}]"
|
||||
@click="onChangeLineDiscountType(index, 'percentage')"
|
||||
>
|
||||
<span class="material-icons text-lg">percent</span>
|
||||
</button>
|
||||
<td class="px-3 py-3 border-b-0 description">
|
||||
@if (! $hideItemDescription)
|
||||
<textarea
|
||||
class="w-full text-sm px-3 py-2.5 mt-1.5 rounded-lg border border-light-gray text-black placeholder-light-gray bg-white disabled:bg-gray-200 focus:outline-none focus:ring-transparent focus:border-purple"
|
||||
style="height:42px;"
|
||||
:ref="'items-' + index + '-description'"
|
||||
placeholder="{{ trans('items.enter_item_description') }}"
|
||||
:name="'items.' + index + '.description'"
|
||||
v-model="row.description"
|
||||
data-item="description"
|
||||
resize="none"
|
||||
@input="onBindingItemField(index, 'description')"
|
||||
></textarea>
|
||||
@endif
|
||||
</td>
|
||||
|
||||
<button type="button"
|
||||
class="w-7 px-2"
|
||||
:class="[{'btn-outline-primary' : row.discount_type !== 'fixed'}, {'bg-white rounded-lg' : row.discount_type === 'fixed'}]"
|
||||
@click="onChangeLineDiscountType(index, 'fixed')"
|
||||
>
|
||||
<span class="text-base">{{ $currency->symbol }}</span>
|
||||
</button>
|
||||
</div>
|
||||
@stack('description_td_end')
|
||||
@endif
|
||||
|
||||
<input type="number"
|
||||
@stack('items_td_end')
|
||||
|
||||
@stack('quantity_td_start')
|
||||
|
||||
<td class="px-3 py-3 border-b-0 quantity">
|
||||
@if (! $hideItemQuantity)
|
||||
<div>
|
||||
@stack('quantity_input_start')
|
||||
|
||||
<input
|
||||
type="number"
|
||||
min="0"
|
||||
placeholder="Discount"
|
||||
class="w-full text-sm px-3 py-2.5 mt-0 text-center rounded-lg border border-light-gray text-black placeholder-light-gray bg-white disabled:bg-gray-200 focus:outline-none focus:ring-transparent focus:border-purple"
|
||||
:name="'items.' + index + '.discount'"
|
||||
:ref="'items-' + index + '-quantity'"
|
||||
class="w-full text-sm px-3 py-2.5 mt-0 text-right rounded-lg border border-light-gray text-black placeholder-light-gray bg-white disabled:bg-gray-200 focus:outline-none focus:ring-transparent focus:border-purple input-number-disabled"
|
||||
:name="'items.' + index + '.quantity'"
|
||||
autocomplete="off"
|
||||
required="required"
|
||||
data-item="discount"
|
||||
v-model="row.discount"
|
||||
data-item="quantity"
|
||||
v-model="row.quantity"
|
||||
@input="onCalculateTotal"
|
||||
@change="form.errors.clear('items.' + index + '.discount')"
|
||||
@change="form.errors.clear('items.' + index + '.quantity')"
|
||||
/>
|
||||
|
||||
<div class="text-red text-sm mt-1 block"
|
||||
v-if="form.errors.has('items.' + index + '.discount')"
|
||||
v-html="form.errors.get('items.' + index + '.discount')">
|
||||
v-if="form.errors.has('items.' + index + '.quantity')"
|
||||
v-html="form.errors.get('items.' + index + '.quantity')">
|
||||
</div>
|
||||
|
||||
@stack('quantity_input_end')
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
</td>
|
||||
|
||||
@stack('discount_input_end')
|
||||
@stack('quantity_td_end')
|
||||
|
||||
@stack('price_td_start')
|
||||
|
||||
<td class="px-3 py-3 pr-1 border-b-0 price">
|
||||
@if (! $hideItemPrice)
|
||||
<div>
|
||||
@stack('price_input_start')
|
||||
|
||||
<div class="flex items-center lg:absolute ltr:right-0 rtl:left-0">
|
||||
<div class="text-right">
|
||||
<x-form.input.money
|
||||
name="discount_amount"
|
||||
name="price"
|
||||
value="0"
|
||||
disabled
|
||||
row-input
|
||||
data-item="discount_amount"
|
||||
v-model="row.discount_amount"
|
||||
data-item="price"
|
||||
v-model="row.price"
|
||||
v-error="form.errors.get('items.' + index + '.price')"
|
||||
v-error-message="form.errors.get('items.' + index + '.price')"
|
||||
change="row.price = $event; form.errors.clear('items.' + index + '.price'); onCalculateTotal"
|
||||
:currency="$currency"
|
||||
dynamicCurrency="currency"
|
||||
money-class="ltr:text-right rtl:text-left disabled-money px-0"
|
||||
form-group-class="ltr:text-right rtl:text-left disabled-money"
|
||||
money-class="text-right mt-0"
|
||||
form-group-class="text-right"
|
||||
/>
|
||||
|
||||
@stack('price_input_end')
|
||||
</div>
|
||||
@endif
|
||||
</td>
|
||||
|
||||
<div class="pl-2 group">
|
||||
<button type="button" @click="onDeleteDiscount(index)" class="w-6 h-7 flex items-center rounded-lg p-0 group-hover:bg-gray-100">
|
||||
<span class="w-full material-icons-outlined text-lg text-gray-300 group-hover:text-gray-500">delete</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@stack('price_td_end')
|
||||
|
||||
<div class="flex items-center justify-between h-10 ml-3 my-3" v-for="(row_tax, row_tax_index) in row.tax_ids"
|
||||
:index="row_tax_index"
|
||||
>
|
||||
<span class="absolute text-sm ltr:-ml-7 rtl:-mr-7">{{ trans_choice('general.taxes', 1) }}</span>
|
||||
@stack('total_td_start')
|
||||
|
||||
<div class="lg:w-1/4 lg:absolute">
|
||||
@stack('taxes_input_start')
|
||||
|
||||
<akaunting-select
|
||||
class="mb-0 select-tax"
|
||||
:form-classes="[{'has-error': form.errors.has('items.' + index + '.taxes') }]"
|
||||
:icon="''"
|
||||
:title="''"
|
||||
:placeholder="'{{ trans('general.form.select.field', ['field' => trans_choice('general.taxes', 1)]) }}'"
|
||||
:name="'items.' + index + '.taxes.' + row_tax_index"
|
||||
:options="{{ json_encode($taxes->pluck('title', 'id')) }}"
|
||||
:dynamic-options="dynamic_taxes"
|
||||
:disabled-options="form.items[index].tax_ids"
|
||||
:value="row_tax.id"
|
||||
:add-new="{{ json_encode([
|
||||
'status' => true,
|
||||
'text' => trans('general.title.new', ['type' => trans_choice('general.taxes', 1)]),
|
||||
'path' => route('modals.taxes.create'),
|
||||
'type' => 'modal',
|
||||
'field' => [
|
||||
'key' => 'id',
|
||||
'value' => 'title'
|
||||
],
|
||||
'new_text' => trans('modules.new'),
|
||||
'buttons' => [
|
||||
'cancel' => [
|
||||
'text' => trans('general.cancel'),
|
||||
'class' => 'btn-outline-secondary'
|
||||
],
|
||||
'confirm' => [
|
||||
'text' => trans('general.save'),
|
||||
'class' => 'disabled:bg-green-100'
|
||||
]
|
||||
]
|
||||
])}}"
|
||||
@interface="row_tax.id = $event"
|
||||
@change="onCalculateTotal()"
|
||||
@new="dynamic_taxes.push($event)"
|
||||
:form-error="form.errors.get('items.' + index + '.taxes')"
|
||||
:no-data-text="'{{ trans('general.no_data') }}'"
|
||||
:no-matching-data-text="'{{ trans('general.no_matching_data') }}'"
|
||||
></akaunting-select>
|
||||
|
||||
@stack('taxes_input_end')
|
||||
</div>
|
||||
|
||||
<div class="flex items-center lg:absolute ltr:right-0 rtl:left-0">
|
||||
<div class="text-right">
|
||||
<td class="px-3 py-3 text-right border-b-0 total">
|
||||
@if (! $hideItemAmount)
|
||||
<div>
|
||||
<x-form.input.money
|
||||
name="tax"
|
||||
name="total"
|
||||
value="0"
|
||||
disabled
|
||||
row-input
|
||||
data-item="total"
|
||||
v-model="row_tax.price"
|
||||
v-model="row.total"
|
||||
:currency="$currency"
|
||||
dynamicCurrency="currency"
|
||||
money-class="text-right disabled-money px-0"
|
||||
form-group-class="text-right disabled-money"
|
||||
money-class="ltr:text-right rtl:text-left mt-0 disabled-money px-0"
|
||||
form-group-class="ltr:text-right rtl:text-left disabled-money"
|
||||
/>
|
||||
</div>
|
||||
@endif
|
||||
</td>
|
||||
|
||||
<div class="pl-2 group">
|
||||
<button type="button" @click="onDeleteTax(index, row_tax_index)" class="w-6 h-7 flex items-center rounded-lg p-0 group-hover:bg-gray-100">
|
||||
<span class="w-full material-icons-outlined text-lg text-gray-300 group-hover:text-gray-500">delete</span>
|
||||
</button>
|
||||
@stack('total_td_end')
|
||||
|
||||
@stack('delete_td_start')
|
||||
|
||||
<td class="text-right group">
|
||||
<button type="button" @click="onDeleteItem(index)" class="w-6 h-7 flex items-center rounded-lg p-0 group-hover:bg-gray-100">
|
||||
<span class="w-full material-icons-outlined text-lg text-gray-300 group-hover:text-gray-500">delete</span>
|
||||
</button>
|
||||
</td>
|
||||
|
||||
@stack('delete_td_end')
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td colspan="3">
|
||||
@stack('item_custom_fields')
|
||||
</td>
|
||||
|
||||
<td colspan="4" class="px-0 pb-3">
|
||||
<div class="relative">
|
||||
<div class="absolute -top-6 ltr:left-3 rtl:right-3 flex items-center">
|
||||
@if (! $hideDiscount && in_array(setting('localisation.discount_location'), ['item', 'both']))
|
||||
<div class="text-left border-0 p-0 mr-16" v-if="!row.add_discount">
|
||||
<x-button type="button" class="text-xs text-purple" @click="onAddLineDiscount(index)" override="class">
|
||||
<x-button.hover color="to-purple">
|
||||
{{ trans('general.title.add', ['type' => trans('invoices.discount')]) }}
|
||||
</x-button.hover>
|
||||
</x-button>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<div class="text-right border-0 p-0 pr-4">
|
||||
<x-button type="button" class="text-xs text-purple" @click="onAddTax(index)" override="class">
|
||||
<x-button.hover color="to-purple">
|
||||
{{ trans('general.title.add', ['type' => trans_choice('general.taxes', 1)]) }}
|
||||
</x-button.hover>
|
||||
</x-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="row.add_tax" class="flex items-center justify-between h-10 ml-3 my-3" :class="{'pt-2' : row.add_discount}">
|
||||
<span class="absolute text-sm ltr:-ml-7 rtl:-mr-7">{{ trans_choice('general.taxes', 1) }}</span>
|
||||
<div v-if="row.add_discount" class="flex items-center justify-between pb-3 ml-2">
|
||||
@stack('discount_input_start')
|
||||
|
||||
<div class="lg:w-1/4 lg:absolute">
|
||||
@stack('taxes_input_start')
|
||||
<div class="mb-0" style="display: inline-block; position: relative;">
|
||||
<div class="flex items-center">
|
||||
<div class="w-16 flex items-center bg-gray-200 p-1 ltr:mr-2 rtl:ml-2 rounded-lg">
|
||||
<button type="button"
|
||||
class="w-7 flex justify-center px-2"
|
||||
:class="[{'btn-outline-primary' : row.discount_type !== 'percentage'}, {'bg-white rounded-lg' : row.discount_type === 'percentage'}]"
|
||||
@click="onChangeLineDiscountType(index, 'percentage')"
|
||||
>
|
||||
<span class="material-icons text-lg">percent</span>
|
||||
</button>
|
||||
|
||||
<akaunting-select
|
||||
class="mb-0 select-tax"
|
||||
style="margin-left: 1px; margin-right: -2px;"
|
||||
:form-classes="[{'has-error': form.errors.has('items.' + index + '.taxes') }]"
|
||||
:icon="''"
|
||||
:title="''"
|
||||
:placeholder="'{{ trans('general.form.select.field', ['field' => trans_choice('general.taxes', 1)]) }}'"
|
||||
:name="'items.' + index + '.taxes.999'"
|
||||
:options="{{ json_encode($taxes->pluck('title', 'id')) }}"
|
||||
:dynamic-options="dynamic_taxes"
|
||||
:disabled-options="form.items[index].tax_ids"
|
||||
:value="tax_id"
|
||||
:add-new="{{ json_encode([
|
||||
'status' => true,
|
||||
'text' => trans('general.title.new', ['type' => trans_choice('general.taxes', 1)]),
|
||||
'path' => route('modals.taxes.create'),
|
||||
'type' => 'modal',
|
||||
'field' => [
|
||||
'key' => 'id',
|
||||
'value' => 'title'
|
||||
],
|
||||
'new_text' => trans('modules.new'),
|
||||
'buttons' => [
|
||||
'cancel' => [
|
||||
'text' => trans('general.cancel'),
|
||||
'class' => 'btn-outline-secondary'
|
||||
],
|
||||
'confirm' => [
|
||||
'text' => trans('general.save'),
|
||||
'class' => 'disabled:bg-green-100'
|
||||
]
|
||||
]
|
||||
])}}"
|
||||
@interface="tax_id = $event"
|
||||
@visible-change="onSelectedTax(index)"
|
||||
@new="dynamic_taxes.push($event)"
|
||||
:form-error="form.errors.get('items.' + index + '.taxes')"
|
||||
:no-data-text="'{{ trans('general.no_data') }}'"
|
||||
:no-matching-data-text="'{{ trans('general.no_matching_data') }}'"
|
||||
></akaunting-select>
|
||||
<button type="button"
|
||||
class="w-7 px-2"
|
||||
:class="[{'btn-outline-primary' : row.discount_type !== 'fixed'}, {'bg-white rounded-lg' : row.discount_type === 'fixed'}]"
|
||||
@click="onChangeLineDiscountType(index, 'fixed')"
|
||||
>
|
||||
<span class="text-base">{{ $currency->symbol }}</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@stack('taxes_input_end')
|
||||
</div>
|
||||
<input type="number"
|
||||
min="0"
|
||||
placeholder="Discount"
|
||||
class="w-full text-sm px-3 py-2.5 mt-0 text-center rounded-lg border border-light-gray text-black placeholder-light-gray bg-white disabled:bg-gray-200 focus:outline-none focus:ring-transparent focus:border-purple"
|
||||
:name="'items.' + index + '.discount'"
|
||||
autocomplete="off"
|
||||
required="required"
|
||||
data-item="discount"
|
||||
v-model="row.discount"
|
||||
@input="onCalculateTotal"
|
||||
@change="form.errors.clear('items.' + index + '.discount')"
|
||||
/>
|
||||
|
||||
<div class="flex items-center lg:absolute ltr:right-0 rtl:left-0">
|
||||
<div class="text-right">
|
||||
<div class="required disabled text-right input-price disabled-money">
|
||||
<input type="tel" class="v-money form-control ltr:text-right rtl:text-left" name="discount_amount" disabled="disabled" value="__">
|
||||
<div class="text-red text-sm mt-1 block"
|
||||
v-if="form.errors.has('items.' + index + '.discount')"
|
||||
v-html="form.errors.get('items.' + index + '.discount')">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pl-2 group">
|
||||
<button type="button" @click="onDeleteTax(index, 999)" class="w-6 h-7 flex items-center rounded-lg p-0 group-hover:bg-gray-100">
|
||||
<span class="w-full material-icons-outlined text-lg text-gray-300 group-hover:text-gray-500">delete</span>
|
||||
</button>
|
||||
@stack('discount_input_end')
|
||||
|
||||
<div class="flex items-center lg:absolute ltr:right-0 rtl:left-0">
|
||||
<div class="text-right">
|
||||
<x-form.input.money
|
||||
name="discount_amount"
|
||||
value="0"
|
||||
disabled
|
||||
row-input
|
||||
data-item="discount_amount"
|
||||
v-model="row.discount_amount"
|
||||
:currency="$currency"
|
||||
dynamicCurrency="currency"
|
||||
money-class="ltr:text-right rtl:text-left disabled-money px-0"
|
||||
form-group-class="ltr:text-right rtl:text-left disabled-money"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="pl-2 group">
|
||||
<button type="button" @click="onDeleteDiscount(index)" class="w-6 h-7 flex items-center rounded-lg p-0 group-hover:bg-gray-100">
|
||||
<span class="w-full material-icons-outlined text-lg text-gray-300 group-hover:text-gray-500">delete</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</td>
|
||||
|
||||
@stack('name_td_end')
|
||||
</tr>
|
||||
<div class="flex items-center justify-between h-10 ml-3 my-3" v-for="(row_tax, row_tax_index) in row.tax_ids"
|
||||
:index="row_tax_index"
|
||||
>
|
||||
<span class="absolute text-sm ltr:-ml-7 rtl:-mr-7">{{ trans_choice('general.taxes', 1) }}</span>
|
||||
|
||||
<div class="lg:w-1/4 lg:absolute">
|
||||
@stack('taxes_input_start')
|
||||
|
||||
<akaunting-select
|
||||
class="mb-0 select-tax"
|
||||
:form-classes="[{'has-error': form.errors.has('items.' + index + '.taxes') }]"
|
||||
:icon="''"
|
||||
:title="''"
|
||||
:placeholder="'{{ trans('general.form.select.field', ['field' => trans_choice('general.taxes', 1)]) }}'"
|
||||
:name="'items.' + index + '.taxes.' + row_tax_index"
|
||||
:options="{{ json_encode($taxes->pluck('title', 'id')) }}"
|
||||
:dynamic-options="dynamic_taxes"
|
||||
:disabled-options="form.items[index].tax_ids"
|
||||
:value="row_tax.id"
|
||||
:add-new="{{ json_encode([
|
||||
'status' => true,
|
||||
'text' => trans('general.title.new', ['type' => trans_choice('general.taxes', 1)]),
|
||||
'path' => route('modals.taxes.create'),
|
||||
'type' => 'modal',
|
||||
'field' => [
|
||||
'key' => 'id',
|
||||
'value' => 'title'
|
||||
],
|
||||
'new_text' => trans('modules.new'),
|
||||
'buttons' => [
|
||||
'cancel' => [
|
||||
'text' => trans('general.cancel'),
|
||||
'class' => 'btn-outline-secondary'
|
||||
],
|
||||
'confirm' => [
|
||||
'text' => trans('general.save'),
|
||||
'class' => 'disabled:bg-green-100'
|
||||
]
|
||||
]
|
||||
])}}"
|
||||
@interface="row_tax.id = $event"
|
||||
@change="onCalculateTotal()"
|
||||
@new="dynamic_taxes.push($event)"
|
||||
:form-error="form.errors.get('items.' + index + '.taxes')"
|
||||
:no-data-text="'{{ trans('general.no_data') }}'"
|
||||
:no-matching-data-text="'{{ trans('general.no_matching_data') }}'"
|
||||
></akaunting-select>
|
||||
|
||||
@stack('taxes_input_end')
|
||||
</div>
|
||||
|
||||
<div class="flex items-center lg:absolute ltr:right-0 rtl:left-0">
|
||||
<div class="text-right">
|
||||
<x-form.input.money
|
||||
name="tax"
|
||||
value="0"
|
||||
disabled
|
||||
row-input
|
||||
data-item="total"
|
||||
v-model="row_tax.price"
|
||||
:currency="$currency"
|
||||
dynamicCurrency="currency"
|
||||
money-class="text-right disabled-money px-0"
|
||||
form-group-class="text-right disabled-money"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="pl-2 group">
|
||||
<button type="button" @click="onDeleteTax(index, row_tax_index)" class="w-6 h-7 flex items-center rounded-lg p-0 group-hover:bg-gray-100">
|
||||
<span class="w-full material-icons-outlined text-lg text-gray-300 group-hover:text-gray-500">delete</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="row.add_tax" class="flex items-center justify-between h-10 ml-3 my-3" :class="{'pt-2' : row.add_discount}">
|
||||
<span class="absolute text-sm ltr:-ml-7 rtl:-mr-7">{{ trans_choice('general.taxes', 1) }}</span>
|
||||
|
||||
<div class="lg:w-1/4 lg:absolute">
|
||||
@stack('taxes_input_start')
|
||||
|
||||
<akaunting-select
|
||||
class="mb-0 select-tax"
|
||||
style="margin-left: 1px; margin-right: -2px;"
|
||||
:form-classes="[{'has-error': form.errors.has('items.' + index + '.taxes') }]"
|
||||
:icon="''"
|
||||
:title="''"
|
||||
:placeholder="'{{ trans('general.form.select.field', ['field' => trans_choice('general.taxes', 1)]) }}'"
|
||||
:name="'items.' + index + '.taxes.999'"
|
||||
:options="{{ json_encode($taxes->pluck('title', 'id')) }}"
|
||||
:dynamic-options="dynamic_taxes"
|
||||
:disabled-options="form.items[index].tax_ids"
|
||||
:value="tax_id"
|
||||
:add-new="{{ json_encode([
|
||||
'status' => true,
|
||||
'text' => trans('general.title.new', ['type' => trans_choice('general.taxes', 1)]),
|
||||
'path' => route('modals.taxes.create'),
|
||||
'type' => 'modal',
|
||||
'field' => [
|
||||
'key' => 'id',
|
||||
'value' => 'title'
|
||||
],
|
||||
'new_text' => trans('modules.new'),
|
||||
'buttons' => [
|
||||
'cancel' => [
|
||||
'text' => trans('general.cancel'),
|
||||
'class' => 'btn-outline-secondary'
|
||||
],
|
||||
'confirm' => [
|
||||
'text' => trans('general.save'),
|
||||
'class' => 'disabled:bg-green-100'
|
||||
]
|
||||
]
|
||||
])}}"
|
||||
@interface="tax_id = $event"
|
||||
@visible-change="onSelectedTax(index)"
|
||||
@new="dynamic_taxes.push($event)"
|
||||
:form-error="form.errors.get('items.' + index + '.taxes')"
|
||||
:no-data-text="'{{ trans('general.no_data') }}'"
|
||||
:no-matching-data-text="'{{ trans('general.no_matching_data') }}'"
|
||||
></akaunting-select>
|
||||
|
||||
@stack('taxes_input_end')
|
||||
</div>
|
||||
|
||||
<div class="flex items-center lg:absolute ltr:right-0 rtl:left-0">
|
||||
<div class="text-right">
|
||||
<div class="required disabled text-right input-price disabled-money">
|
||||
<input type="tel" class="v-money form-control ltr:text-right rtl:text-left" name="discount_amount" disabled="disabled" value="__">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pl-2 group">
|
||||
<button type="button" @click="onDeleteTax(index, 999)" class="w-6 h-7 flex items-center rounded-lg p-0 group-hover:bg-gray-100">
|
||||
<span class="w-full material-icons-outlined text-lg text-gray-300 group-hover:text-gray-500">delete</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</td>
|
||||
|
||||
@stack('name_td_end')
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user