use select item button currency prefix..

This commit is contained in:
Cüneyt Şentürk 2020-12-29 14:12:57 +03:00
parent 8eb020211f
commit 2a6a0a3c2d
4 changed files with 168 additions and 114 deletions

98
public/css/custom.css vendored
View File

@ -1000,11 +1000,11 @@ table .align-items-center td span.badge {
background-color: #fff;
}
.aka-box__content>:last-child {
.aka-box-content>:last-child {
margin-bottom: 0;
}
.aka-box__content>:first-child {
.aka-box-content>:first-child {
margin-top: 0;
}
@ -1208,7 +1208,7 @@ table .align-items-center td span.badge {
font-weight: bold;
}
.aka-select__footer {
.aka-select-footer {
text-align: center;
border-top: 1px solid #b2c2cd;
padding: 8px;
@ -1248,3 +1248,95 @@ table .align-items-center td span.badge {
background-color: #f8f9fe;
}
/* Document Finish */
/* Akaunting Item Button Start */
.aka-select.aka-select--fluid {
min-width: 160px;
}
.aka-select.aka-select--fluid {
max-width: 96%;
min-width: 0;
}
.product-select .aka-select-menu {
width: 100%;
min-width: 0;
padding: 0;
top: 0;
overflow: hidden;
border-top-left-radius: 0;
border-top-right-radius: 0;
border-top-width: 0;
}
.aka-select-menu {
list-style: none;
box-sizing: border-box;
margin: 0;
padding: 0;
text-align: left;
display: block;
visibility: hidden;
position: absolute;
top: 110%;
z-index: 1000;
min-width: 100%;
padding: 8px 0;
border-radius: 4px;
color: #1c252c;
background-color: white;
box-shadow: 0 0 0 1px rgba(77,101,117,0.1), 0 3px 10px 0 rgba(77,101,117,0.2);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
height: 0;
-webkit-transform: translateY(4px);
transform: translateY(4px);
overflow: hidden;
padding: 0;
right: 0;
left: 0;
top: 100%;
border-top: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
-webkit-transform: translateY(0);
transform: translateY(0);
}
.product-select .aka-select.aka-select--fluid.is-open {
position: absolute;
display: block;
}
.item-select {
display: flex;
flex-flow: row nowrap;
}
.item-select-column {
white-space: nowrap;
overflow: hidden;
}
.item-select-price {
width: 135px;
text-align: right;
}
.item-select-info-description, .item-select-info-name {
width: 710px;
display: block;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.item-select-column {
white-space: nowrap;
overflow: hidden;
}
.item-select .v-money.text-right.disabled-money {
color: #8898aa;
}
/* Akaunting Item Button Finish */

View File

@ -1,15 +1,14 @@
<template>
<div :id="'select-contact-card-' + _uid" class="form-group col-md-12 invoice-add__body__top-form__customer">
<div class="invoice-customer" :class="[{'fs-exclude': show.contact_selected}]">
<div :id="'select-contact-card-' + _uid" class="form-group col-md-12 document-add-body-form-contact">
<div class="document-contact" :class="[{'fs-exclude': show.contact_selected}]">
<div class="document-contact-without-contact">
<div v-if="!show.contact_selected" class="document-contact-without-contact-box__customer-select fs-exclude">
<div v-if="!show.contact_selected" class="document-contact-without-contact-box-contact-select fs-exclude">
<div class="aka-select aka-select--medium is-open" tabindex="0">
<div>
<div class="aka-box aka-box--large">
<div class="aka-box__content">
<div class="aka-box-content">
<div class="document-contact-without-contact-box">
<button type="button" class="btn-aka-link aka-btn--fluid document-contact-without-contact-box-btn"
@click="onContactList">
<button type="button" class="btn-aka-link aka-btn--fluid document-contact-without-contact-box-btn" @click="onContactList">
<i class="far fa-user fa-2x"></i> {{ addContactText }}
</button>
</div>
@ -58,7 +57,7 @@
</div>
</ul>
<div class="aka-select__footer" tabindex="0" @click="onContactCreate">
<div class="aka-select-footer" tabindex="0" @click="onContactCreate">
<span>
<i class="fas fa-plus"></i> {{ createNewContactText }}
</span>
@ -67,7 +66,7 @@
</div>
</div>
<div v-else class="invoice-customer__with-customer__bill-to">
<div v-else class="document-contact-with-contact-bill-to">
<div>
<span class="aka-text aka-text--block-label">{{ contactInfoText }}</span>
</div>
@ -104,8 +103,12 @@
</table>
</div>
<button type="button" class="btn btn-link" @click="onContactEdit">{{ editContactText.replace(':contact_name', contact.name) }}</button>&nbsp;&nbsp;
<button type="button" class="btn btn-link" @click="onContactList">{{ chooseDifferentContactText }}</button>
<button type="button" class="btn btn-link" @click="onContactEdit">
{{ editContactText.replace(':contact_name', contact.name) }}
</button>&nbsp;&nbsp;
<button type="button" class="btn btn-link" @click="onContactList">
{{ chooseDifferentContactText }}
</button>
</div>
</div>
@ -613,6 +616,3 @@ export default {
},
};
</script>
<style>
</style>

View File

@ -3,7 +3,7 @@
<div class="aka-select aka-select--fluid" :class="[{'is-open': show.item_list}]" tabindex="-1">
<div>
<button type="button" class="btn btn-link w-100" @click="onItemList">
<i class="fas fa-plus-circle"></i> &nbsp; Add an item
<i class="fas fa-plus-circle"></i> &nbsp; {{ addItemText }}
</button>
</div>
@ -34,28 +34,39 @@
<ul class="aka-select-menu-options">
<div class="aka-select-menu-option" v-for="(item, index) in sortItems" :key="index" @click="onItemSeleted(index, item.id)">
<div class="product-select__product">
<div class="product-select__product__column product-select__product__info">
<b class="product-select__product__info__name"><span>{{ item.name }}</span></b>
<div class="item-select w-100">
<div class="item-select-column item-select-info w-75">
<b class="item-select-info-name"><span>{{ item.name }}</span></b>
</div>
<div class="product-select__product__column product-select__product__price">
{{ item.price }}
<div class="item-select-column item-select-price w-25">
<money
:name="'item-id-' + item.id"
:value="item.price"
v-bind="money"
masked
class="text-right disabled-money"
></money>
</div>
</div>
</div>
<div class="aka-select-menu-option" v-if="!sortItems.length">
<div>
<strong class="text-strong" v-if="!items.length && !search"><span>{{ noDataText }}</span></strong>
<strong class="text-strong" v-if="!items.length && !search">
<span>{{ noDataText }}</span>
</strong>
<strong class="text-strong" v-else><span>{{ noMatchingDataText }}</span></strong>
<strong class="text-strong" v-else>
<span>{{ noMatchingDataText }}</span>
</strong>
</div>
</div>
</ul>
<div class="aka-select__footer" tabindex="0" @click="onItemCreate">
<div class="aka-select-footer" @click="onItemCreate">
<span>
<i class="fas fa-plus"></i> Create a new item
<i class="fas fa-plus"></i> {{ createNewItemText }}
</span>
</div>
</div>
@ -124,6 +135,16 @@ export default {
},
description: "Selectbox Add New Item Feature"
},
addItemText: {
type: String,
default: 'Add an item',
description: ""
},
createNewItemTax:{
type: String,
default: 'Create a new item',
description: ""
},
noDataText: {
type: String,
default: 'No Data',
@ -134,6 +155,19 @@ export default {
default: 'No Matchign Data',
description: "Selectbox search option not found item message"
},
dynamicCurrency: {
type: Object,
default: function () {
return {
decimal_mark: '.',
thousands_separator: ',',
symbol_first: 1,
symbol: '$',
precision: 2,
};
},
description: "Dynamic currency"
},
currency: {
type: Object,
default: function () {
@ -470,6 +504,21 @@ export default {
},
watch: {
dynamicCurrency: function (currency) {
if (!currency) {
return;
}
this.money = {
decimal: currency.decimal_mark,
thousands: currency.thousands_separator,
prefix: (currency.symbol_first) ? currency.symbol : '',
suffix: (!currency.symbol_first) ? currency.symbol : '',
precision: parseInt(currency.precision),
masked: this.masked
};
},
show: {
handler: function(newValue) {
if (newValue) {
@ -481,91 +530,3 @@ export default {
},
};
</script>
<style>
.aka-select.aka-select--fluid {
min-width: 160px;
}
.aka-select.aka-select--fluid {
max-width: 96%;
min-width: 0;
}
.product-select .aka-select-menu {
width: 100%;
min-width: 0;
padding: 0;
top: 0;
overflow: hidden;
border-top-left-radius: 0;
border-top-right-radius: 0;
border-top-width: 0;
}
.aka-select-menu {
list-style: none;
box-sizing: border-box;
margin: 0;
padding: 0;
text-align: left;
display: block;
visibility: hidden;
position: absolute;
top: 110%;
z-index: 1000;
min-width: 100%;
padding: 8px 0;
border-radius: 4px;
color: #1c252c;
background-color: white;
box-shadow: 0 0 0 1px rgba(77,101,117,0.1), 0 3px 10px 0 rgba(77,101,117,0.2);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
height: 0;
-webkit-transform: translateY(4px);
transform: translateY(4px);
overflow: hidden;
padding: 0;
right: 0;
left: 0;
top: 100%;
border-top: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
-webkit-transform: translateY(0);
transform: translateY(0);
}
.product-select .aka-select.aka-select--fluid.is-open {
position: absolute;
display: block;
}
.product-select__product {
display: flex;
flex-flow: row nowrap;
}
.product-select__product__column {
white-space: nowrap;
overflow: hidden;
}
.product-select__product__price {
width: 135px;
text-align: right;
}
.product-select__product__info__description, .product-select__product__info__name {
width: 710px;
display: block;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.product-select__product__column {
white-space: nowrap;
overflow: hidden;
}
</style>

View File

@ -4,6 +4,7 @@
no-matching-data-text="{{ trans('general.no_matching_data') }}"
type="{{ $type }}"
price="{{ $price }}"
:dynamic-currency="currency"
:items="{{ json_encode($items) }}"
@item="onSelectedItem($event)"
></akaunting-item-button>