shihaam/akaunting
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #2200 from bengu-thon-mai-mochi/item-input-search

Browse Source 
Fetch items only after default character limit is reached
This commit is contained in:
Cüneyt Şentürk 2021-07-27 18:10:39 +03:00 committed by GitHub
commit 1689c9139e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 69 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
app/Abstracts/View/Components/DocumentForm.php
View File

@ -207,6 +207,9 @@ abstract class DocumentForm extends Base
/** @var bool */
public $isPurchasePrice;
/** @var int */
public $searchCharLimit;
/** Items Component End */
/**
@ -240,7 +243,7 @@ abstract class DocumentForm extends Base
bool $hideItems = false, bool $hideName = false, bool $hideDescription = false, bool $hideQuantity = false,
bool $hidePrice = false, bool $hideDiscount = false, bool $hideAmount = false,
bool $hideEditItemColumns = false,
bool $isSalePrice = false, bool $isPurchasePrice = false
bool $isSalePrice = false, bool $isPurchasePrice = false, int $searchCharLimit = 0
/** Items Component End */
) {
$this->type = $type;
@ -325,6 +328,7 @@ abstract class DocumentForm extends Base
$this->hideEditItemColumns = $hideEditItemColumns;
$this->isSalePrice = $isSalePrice;
$this->isPurchasePrice = $isPurchasePrice;
$this->searchCharLimit = $this->getSearchCharLimit($type, $searchCharLimit);
/** Items Component End */
}
@ -1020,4 +1024,25 @@ abstract class DocumentForm extends Base
return setting($this->getSettingKey($this->type, 'notes'));
}
protected function getSearchCharLimit($type, $searchCharLimit)
{
if (!empty($searchCharLimit)) {
return $searchCharLimit;
}
// if you use settting translation
if ($settingCharLimit = setting($this->getSettingKey($type, 'item_search_chart_limit'), false)) {
return $settingCharLimit;
}
$hide = $this->getHideFromConfig($type, 'item_search_char_limit');
if ($hide) {
return $hide;
}
// @todo what return value invoice or always false??
return setting('invoice.item_search_char_limit', $searchCharLimit);
}
}

6
app/View/Components/SelectItemButton.php
View File

@ -16,16 +16,20 @@ class SelectItemButton extends Component
/** @var bool */
public $isPurchase;
/** @var int */
public $searchCharLimit;
/**
* Create a new component instance.
*
* @return void
*/
public function __construct(string $type = 'sale', bool $isSale = false, bool $isPurchase = false)
public function __construct(string $type = 'sale', bool $isSale = false, bool $isPurchase = false, int $searchCharLimit = 3)
{
$this->type = $type;
$this->isSale = $isSale;
$this->isPurchase = $isPurchase;
$this->searchCharLimit = $searchCharLimit;
}
/**

2
config/setting.php
View File

@ -122,6 +122,7 @@ return [
'color' => env('SETTING_FALLBACK_INVOICE_COLOR', '#55588b'),
'logo_size_width' => env('SETTING_FALLBACK_INVOICE_LOGO_SIZE_WIDTH', 128),
'logo_size_height' => env('SETTING_FALLBACK_INVOICE_LOGO_SIZE_HEIGHT', 128),
'item_search_char_limit' => env('SETTING_FALLBACK_INVOICE_ITEM_SEARCH_CHAR_LIMIT', 3),
],
'bill' => [
'number_prefix' => env('SETTING_FALLBACK_BILL_NUMBER_PREFIX', 'BILL-'),
@ -133,6 +134,7 @@ return [
'payment_terms' => env('SETTING_FALLBACK_BILL_PAYMENT_TERMS', '0'),
'template' => env('SETTING_FALLBACK_BILL_TEMPLATE', 'default'),
'color' => env('SETTING_FALLBACK_BILL_COLOR', '#55588b'),
'item_search_char_limit' => env('SETTING_FALLBACK_BILL_ITEM_SEARCH_CHAR_LIMIT', 3),
],
'default' => [
'currency' => env('SETTING_FALLBACK_DEFAULT_CURRENCY', 'USD'),

47
resources/assets/js/components/AkauntingItemButton.vue
View File

@ -33,7 +33,7 @@
</div>
<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="aka-select-menu-option" v-for="(item, index) in sortedItems" :key="index" @click="onItemSeleted(index, item.id)">
<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>
@ -52,7 +52,7 @@
</div>
</div>
<div class="aka-select-menu-option" v-if="!sortItems.length">
<div class="aka-select-menu-option" v-if="!sortedItems.length">
<div>
<strong class="text-strong" v-if="!items.length && !search">
<span>{{ noDataText }}</span>
@ -128,7 +128,6 @@ export default {
default: () => [],
description: 'List of Items'
},
addNew: {
type: Object,
default: function () {
@ -187,18 +186,22 @@ export default {
},
description: "Default currency"
},
searchCharLimit: {
type: Number,
default: 3,
description: "Character limit for item search input"
}
},
data() {
return {
item_list: [],
selected_items: [],
search: '', // search cloumn model
search: '', // search column model
show: {
item_selected: false,
item_list: false,
},
form: {},
add_new: {
text: this.addNew.text,
@ -266,9 +269,18 @@ export default {
},
onInput() {
//to optimize performance we kept the condition that checks for if search exists or not
if (!this.search) {
return;
}
//condition that checks if input is below the given character limit
if (this.search.length < this.searchCharLimit) {
this.setItemList(this.items); //once the user deletes the search input, we show the overall item list
this.sortItems(); // we order it as wanted
this.$emit('input', this.search); // keep the input binded to v-model
return;
}
window.axios.get(url + '/common/items?search="' + this.search + '" limit:10')
.then(response => {
@ -496,13 +508,6 @@ export default {
this.setItemList(this.items);
}
},
},
created() {
this.setItemList(this.items);
},
computed: {
sortItems() {
this.item_list.sort(function (a, b) {
var nameA = a.value.toUpperCase(); // ignore upper and lowercase
@ -520,9 +525,21 @@ export default {
return 0;
});
return this.item_list.filter(item => {
return item.value.toLowerCase().includes(this.search.toLowerCase())
});
const sortedItemList = this.item_list.filter(item =>
item.value.toLowerCase().includes(this.search.toLowerCase())
);
return sortedItemList;
},
},
created() {
this.setItemList(this.items);
},
computed: {
sortedItems() {
return this.sortItems();
},
},

1
resources/views/components/documents/form/content.blade.php
View File

@ -68,6 +68,7 @@
text-amount="{{ $textAmount }}"
is-sale-price="{{ $isSalePrice }}"
is-purchase-price="{{ $isPurchasePrice }}"
search-char-limit="{{ $searchCharLimit }}"
notes-setting="{{ $notesSetting }}"
/>

1
resources/views/components/documents/form/items.blade.php
View File

@ -77,6 +77,7 @@
type="{{ $type }}"
is-sale="{{ $isSalePrice }}"
is-purchase="{{ $isPurchasePrice }}"
search-char-limit="{{ $searchCharLimit }}"
/>
</td>
</tr>

1
resources/views/components/documents/form/main.blade.php
View File

@ -44,6 +44,7 @@
text-amount="{{ $textAmount }}"
is-sale-price="{{ $isSalePrice }}"
is-purchase-price="{{ $isPurchasePrice }}"
search-char-limit="{{ $searchCharLimit }}"
/>
<x-documents.form.totals

1
resources/views/components/select-item-button.blade.php
View File

@ -6,6 +6,7 @@
price="{{ $price }}"
:dynamic-currency="currency"
:items="{{ json_encode($items) }}"
:search-char-limit="{{ $searchCharLimit }}"
@item="onSelectedItem($event)"
add-item-text="{{ trans('general.form.add_an', ['field' => trans_choice('general.items', 1)]) }}"
create-new-item-text="{{ trans('general.title.create', ['type' => trans_choice('general.items', 1)]) }}"