Merge pull request #2084 from brkcvn/line-item-styling

Invoice and Bill 'Add an Item' area styling development
This commit is contained in:
Cüneyt Şentürk 2021-06-08 00:45:09 +03:00 committed by GitHub
commit 04c303477a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 241 additions and 195 deletions

72
public/css/custom.css vendored
View File

@ -1631,4 +1631,74 @@ table .align-items-center td span.badge {
.form-group .el-select .el-select__tags > span {
display: contents !important;
}
/* Select Tag Fixed Content Finish */
/* Select Tag Fixed Content Finish */
/* Line item */
.line-item-link-container {
height: 25px;
}
.line-item-link {
display: flex;
padding-bottom: 10px;
top: -12px;
}
.line-item-area {
display: flex;
justify-content: space-between;
align-items:center;
}
.line-item-content {
position: relative;
width: 100%;
max-width: 242px;
}
.line-item-content .form-group {
position: relative;
}
.line-item-content .badge {
position: absolute !important;
bottom: 12px;
right: 0;
}
.line-item-content-right {
display: flex;
align-items: center;
}
.line-item-content-right-price {
padding-right: 1.5rem;
}
.line-item-content-right-delete {
width:40px;
padding-right: 1.5rem;
/* padding-left: 5px !important; */
}
.line-item-text {
width: 54px;
text-align: right;
}
@media (max-width: 1500px) {
@media not all and (min-resolution:.001dpcm) { @media {
.line-item-content {
max-width:223px;
}
}}
}
@media only screen and (max-width: 600px) {
.line-item-content {
max-width: 133px;
}
}
/* Line item */

View File

@ -128,205 +128,181 @@
</td>
@stack('delete_td_end')
</tr>
<tr>
<td class="border-top-0" colspan="3">
@stack('item_custom_fields')
</td>
<td class="border-top-0 p-0" colspan="4">
<table class="w-100">
<tbody>
@if (!$hideDiscount && in_array(setting('localisation.discount_location'), ['item', 'both']))
<tr v-if="!row.add_tax || !row.add_discount">
<td class="text-left border-0 p-0" style="display: block;">
<div>
<button type="button" class="btn btn-link btn-sm p-0" @click="onAddLineDiscount(index)" v-if="!row.add_discount">
{{ trans('general.title.add', ['type' => trans('invoices.discount')]) }}
</button>
@if (!$hideDiscount && in_array(setting('localisation.discount_location'), ['item', 'both']))
<div v-if="!row.add_tax || !row.add_discount" class="line-item-link-container position-relative">
<div v-if="!row.add_tax || !row.add_discount" class="line-item-link position-absolute">
<div class="text-left border-0 p-0 mr-5">
<div>
<button type="button" class="btn btn-link btn-sm p-0" @click="onAddLineDiscount(index)" v-if="!row.add_discount">
{{ trans('general.title.add', ['type' => trans('invoices.discount')]) }}
</button>
</div>
</div>
<div class="text-right border-0 p-0 pr-4">
<div style="float:left;">
<button type="button" class="btn btn-link btn-sm p-0" @click="onAddTax(index)" v-if="!row.add_tax">
{{ trans('general.title.add', ['type' => trans_choice('general.taxes', 1)]) }}
</button>
</div>
</div>
</div>
</div>
<div v-if="row.add_discount" class="line-item-area pb-3">
<div class="line-item-content">
<div class="long-texts line-item-text" style="float: left; margin-top: 15px; position: absolute; left: -65px;">
{{ trans('invoices.discount') }}
</div>
@stack('discount_input_start')
<div class="form-group mb-0 w-100" style="display: inline-block; position: relative;">
<div class="input-group input-group-merge mb-0 select-tax">
<div class="input-group-prepend">
<span class="input-group-text" id="input-discount">
<i class="fa fa-percent"></i>
</span>
</div>
</td>
<input type="number"
max="100"
min="0"
class="form-control text-center"
:name="'items.' + index + '.discount'"
autocomplete="off"
required="required"
data-item="discount"
v-model="row.discount"
@input="onCalculateTotal"
@change="form.errors.clear('items.' + index + '.discount')">
<td class="text-right border-0 p-0 pr-4" style="display: block;">
<div style="float:left;">
<button type="button" class="btn btn-link btn-sm p-0" @click="onAddTax(index)" v-if="!row.add_tax">
{{ trans('general.title.add', ['type' => trans_choice('general.taxes', 1)]) }}
</button>
<div class="invalid-feedback d-block"
v-if="form.errors.has('items.' + index + '.discount')"
v-html="form.errors.get('items.' + index + '.discount')">
</div>
</td>
<td class="text-right total-column border-0 long-texts">
</td>
<td class="w-1 border-0">
</td>
</tr>
<tr v-if="row.add_discount">
<td colspan="2" class="pl-0 pb-0 border-0" :class="{'pb-2' : !row.add_tax}" style="width:42%;">
<div>
<div style="float: left; margin-top: 15px; margin-left: -65px;">
{{ trans('invoices.discount') }}
</div>
@stack('discount_input_start')
<div class="form-group mb-0 w-100" style="display: inline-block; position: relative;">
<div class="input-group input-group-merge mb-0 select-tax">
<div class="input-group-prepend">
<span class="input-group-text" id="input-discount">
<i class="fa fa-percent"></i>
</span>
</div>
<input type="number"
max="100"
min="0"
class="form-control text-center"
: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="invalid-feedback d-block"
v-if="form.errors.has('items.' + index + '.discount')"
v-html="form.errors.get('items.' + index + '.discount')">
</div>
</div>
</div>
@stack('discount_input_end')
</div>
</td>
</div>
@stack('discount_input_end')
</div>
<div class="line-item-content-right">
<div class="line-item-content-right-price long-texts text-right">
{{ Form::moneyGroup('discount_amount', '', '', ['required' => 'required', 'disabled' => 'true' , 'row-input' => 'true', 'v-model' => 'row.discount_amount', 'data-item' => 'discount_amount', 'currency' => $currency, 'dynamic-currency' => 'currency'], 0.00, 'text-right input-price disabled-money') }}
</div>
<div class="line-item-content-right-delete pl-2">
<button type="button" @click="onDeleteDiscount(index)" class="btn btn-link btn-delete p-0">
<i class="far fa-trash-alt"></i>
</button>
</div>
</div>
</div>
@endif
<div class="line-item-area pb-3" v-for="(row_tax, row_tax_index) in row.tax_ids"
:index="row_tax_index">
<div class="line-item-content">
<div class="long-texts line-item-text" style="float: left; margin-top: 15px; margin-right:2px; position: absolute; left: -63px;">
{{ trans_choice('general.taxes', 1) }}
</div>
<td class="border-0 pb-0 text-right long-texts" :class="{'pb-2' : !row.add_tax}" style="width:231px;">
<div>
{{ Form::moneyGroup('discount_amount', '', '', ['required' => 'required', 'disabled' => 'true' , 'row-input' => 'true', 'v-model' => 'row.discount_amount', 'data-item' => 'discount_amount', 'currency' => $currency, 'dynamic-currency' => 'currency'], 0.00, 'text-right input-price disabled-money') }}
@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')) }}"
:disabled-options="form.items[index].tax_ids"
:value="row_tax.id"
@interface="row_tax.id = $event"
@change="onCalculateTotal()"
@new="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="line-item-content-right">
<div class="line-item-content-right-price long-texts text-right">
{{ Form::moneyGroup('tax', '', '', ['required' => 'required', 'disabled' => 'true' , 'row-input' => 'true', 'v-model' => 'row_tax.price', 'data-item' => 'total', 'currency' => $currency, 'dynamic-currency' => 'currency'], 0.00, 'text-right input-price disabled-money') }}
</div>
<div class="line-item-content-right-delete pl-2">
<button type="button" @click="onDeleteTax(index, row_tax_index)" class="btn btn-link btn-delete p-0">
<i class="far fa-trash-alt"></i>
</button>
</div>
</div>
</div>
<div v-if="row.add_tax" class="line-item-area pb-3" :class="{'pt-2' : row.add_discount}">
<div class="line-item-content">
<div class="long-texts line-item-text" style="float: left; margin-top: 15px; margin-right:2px; position: absolute; left: -63px;">
{{ trans_choice('general.taxes', 1) }}
</div>
@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')) }}"
:disabled-options="form.items[index].tax_ids"
:value="tax_id"
:add-new="{{ json_encode([
'status' => true,
'text' => trans('general.add_new'),
'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' => 'btn-success'
]
]
])}}"
@interface="tax_id = $event"
@visible-change="onSelectedTax(index)"
@new="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="line-item-content-right">
<div class="line-item-content-right-price long-texts text-right">
<div>
<div class="required disabled text-right input-price disabled-money">
<input data-v-27d909ce="" type="tel" class="v-money form-control" name="discount_amount" placeholder="" disabled="disabled" value="__">
</div>
</td>
<td class="pb-3 pl-2 align-bottom border-0" style="max-width:40px;" :class="{'pb-2' : !row.add_tax}">
<button type="button" @click="onDeleteDiscount(index)" class="btn btn-link btn-delete p-0">
<i class="far fa-trash-alt"></i>
</button>
</td>
</tr>
@endif
<tr v-for="(row_tax, row_tax_index) in row.tax_ids"
:index="row_tax_index">
<td colspan="2" class="pl-0 pb-0 border-0" :class="{'pb-2' : !row.add_tax}" style="width:42%;">
<div style="position: relative;">
<div style="float: left; margin-top: 15px; margin-right:2px; position: absolute; left: -33px;">
{{ trans_choice('general.taxes', 1) }}
</div>
@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')) }}"
:disabled-options="form.items[index].tax_ids"
:value="row_tax.id"
@interface="row_tax.id = $event"
@change="onCalculateTotal()"
@new="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>
</td>
<td :class="{'pb-2' : !row.add_tax}" class="border-0 pb-0 text-right long-texts" style="width:231px;">
<div>
{{ Form::moneyGroup('tax', '', '', ['required' => 'required', 'disabled' => 'true' , 'row-input' => 'true', 'v-model' => 'row_tax.price', 'data-item' => 'total', 'currency' => $currency, 'dynamic-currency' => 'currency'], 0.00, 'text-right input-price disabled-money') }}
</div>
</td>
<td class="pb-3 pl-2 align-bottom border-0" :class="{'pb-2' : !row.add_tax}" style="max-width: 40px;" >
<button type="button" @click="onDeleteTax(index, row_tax_index)" class="btn btn-link btn-delete p-0">
<i class="far fa-trash-alt"></i>
</button>
</td>
</tr>
<tr v-if="row.add_tax">
<td colspan="2" class="pl-0 border-0" style="width: 42%;">
<div style="position: relative;">
<div style="float: left; margin-top: 15px; margin-right:2px; position: absolute; left: -33px;" style="width:231px;">
{{ trans_choice('general.taxes', 1) }}
</div>
@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')) }}"
:disabled-options="form.items[index].tax_ids"
:value="tax_id"
:add-new="{{ json_encode([
'status' => true,
'text' => trans('general.add_new'),
'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' => 'btn-success'
]
]
])}}"
@interface="tax_id = $event"
@visible-change="onSelectedTax(index)"
@new="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>
</td>
<td class="border-0 text-right long-texts align-middle;" style="width:231px;">
<div>
__
</div>
</td>
<td class="pb-3 pl-2 align-bottom border-0" style="max-width:40px;" >
@if (!$hideDiscount && in_array(setting('localisation.discount_location'), ['item', 'both']))
<button type="button" @click="onDeleteTax(index, 999)" class="btn btn-link btn-delete p-0">
<i class="far fa-trash-alt"></i>
</button>
@endif
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="line-item-content-right-delete pl-2">
@if (!$hideDiscount && in_array(setting('localisation.discount_location'), ['item', 'both']))
<button type="button" @click="onDeleteTax(index, 999)" class="btn btn-link btn-delete p-0">
<i class="far fa-trash-alt"></i>
</button>
@endif
</div>
</div>
</div>
</td>
<tr>
</tr>
</tbody>
</table>
</td>

View File

@ -6,7 +6,7 @@
<col class="document-total-50">
<col class="document-total-30">
<col class="document-total-25">
<col class="document-total-40-px">
<col class="document-total-50-px">
</colgroup>
<tbody id="invoice-total-rows" class="table-padding-05">
@stack('sub_total_td_start')
@ -20,7 +20,7 @@
{{ Form::moneyGroup('sub_total', '', '', ['disabled' => 'true' , 'row-input' => 'true', 'v-model' => 'totals.sub', 'currency' => $currency, 'dynamic-currency' => 'currency', 'money-class' => 'text-right disabled-money'], 0.00, 'text-right disabled-money') }}
</div>
</td>
<td class="border-bottom-0 pb-0" style="max-width: 40px"></td>
<td class="border-bottom-0 pb-0" style="max-width: 50px"></td>
</tr>
@stack('sub_total_td_end')
@ -36,7 +36,7 @@
{{ Form::moneyGroup('item_discount', '', '', ['disabled' => 'true' , 'row-input' => 'true', 'v-model' => 'totals.item_discount', 'currency' => $currency, 'dynamic-currency' => 'currency', 'money-class' => 'text-right disabled-money'], 0.00, 'text-right disabled-money') }}
</div>
</td>
<td class="border-top-0 pt-0 pb-0" style="max-width: 40px"></td>
<td class="border-top-0 pt-0 pb-0" style="max-width: 50px"></td>
</tr>
@stack('item_discount_td_end')
@endif
@ -92,7 +92,7 @@
</div>
{!! Form::hidden('discount', null, ['id' => 'discount', 'class' => 'form-control text-right', 'v-model' => 'form.discount']) !!}
</td>
<td class="border-top-0 pt-0 pb-0" style="max-width: 40px"></td>
<td class="border-top-0 pt-0 pb-0" style="max-width: 50px"></td>
</tr>
@stack('add_discount_td_end')
@endif
@ -109,7 +109,7 @@
{{ Form::moneyGroup('tax_total', '', '', ['disabled' => 'true' , 'row-input' => 'true', 'v-model' => 'tax.total', 'currency' => $currency, 'dynamic-currency' => 'currency', 'money-class' => 'text-right disabled-money'], 0.00, 'text-right disabled-money') }}
</div>
</td>
<td class="border-top-0 pt-0 pb-0" style="max-width: 40px"></td>
<td class="border-top-0 pt-0 pb-0" style="max-width: 50px"></td>
</tr>
@stack('tax_total_td_end')
@ -126,7 +126,7 @@
{{ Form::moneyGroup('grand_total', '', '', ['disabled' => 'true' , 'row-input' => 'true', 'v-model' => 'totals.total', 'currency' => $currency, 'dynamic-currency' => 'currency', 'money-class' => 'text-right disabled-money'], 0.00, 'text-right disabled-money') }}
</div>
</td>
<td class="border-top-0 pt-0 pb-0" style="max-width: 40px"></td>
<td class="border-top-0 pt-0 pb-0" style="max-width: 50px"></td>
</tr>
@stack('grand_total_td_end')
@ -141,7 +141,7 @@
:currency-rate="form.currency_rate"
></akaunting-currency-conversion>
</td>
<td class="border-top-0 pt-0 pb-0" style="max-width: 40px"></td>
<td class="border-top-0 pt-0 pb-0" style="max-width: 50px"></td>
</tr>
@stack('currency_conversion_td_end')
</tbody>