Focus the first matched item && enter event adds existing item that is matched
This commit is contained in:
benguozakinci@gmail.com
parent
fe4190c680
commit
0820b70a78
@ -33,7 +33,13 @@
|
||||
</div>
|
||||
|
||||
<ul class="aka-select-menu-options">
|
||||
<div class="aka-select-menu-option" v-for="(item, index) in sortedItems" :key="index" @click="onItemSelected(item)">
|
||||
<div
|
||||
class="aka-select-menu-option"
|
||||
v-for="(item, index) in sortedItems"
|
||||
:key="index"
|
||||
:class="isItemMatched ? 'highlightItem' : ''"
|
||||
@click="onItemSelected(item)"
|
||||
>
|
||||
<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>
|
||||
@ -202,6 +208,7 @@ export default {
|
||||
item_selected: false,
|
||||
item_list: false,
|
||||
},
|
||||
isItemMatched: false,
|
||||
form: {},
|
||||
add_new: {
|
||||
text: this.addNew.text,
|
||||
@ -221,6 +228,10 @@ export default {
|
||||
};
|
||||
},
|
||||
|
||||
created() {
|
||||
this.setItemList(this.items);
|
||||
},
|
||||
|
||||
mounted() {
|
||||
if (this.dynamicCurrency.code != this.currency.code) {
|
||||
if (!this.dynamicCurrency.decimal) {
|
||||
@ -283,6 +294,8 @@ export default {
|
||||
},
|
||||
|
||||
onInput() {
|
||||
this.isItemMatched = false; //to remove the style from first item on input change (option)
|
||||
|
||||
//to optimize performance we kept the condition that checks for if search exists or not
|
||||
if (!this.search) {
|
||||
return;
|
||||
@ -297,9 +310,17 @@ export default {
|
||||
return;
|
||||
}
|
||||
|
||||
this.onItemMatchedSearchQuery()
|
||||
this.fetchMatchedItems();
|
||||
|
||||
window.axios.get(url + '/common/items?search="' + this.search + '" limit:10')
|
||||
this.item_list.length > 0
|
||||
? this.isItemMatched = true
|
||||
: {}
|
||||
|
||||
this.$emit('input', this.search);
|
||||
},
|
||||
|
||||
async fetchMatchedItems() {
|
||||
await window.axios.get(url + '/common/items?search="' + this.search + '" limit:10')
|
||||
.then(response => {
|
||||
this.item_list = [];
|
||||
|
||||
@ -319,15 +340,9 @@ export default {
|
||||
});
|
||||
}, this);
|
||||
})
|
||||
.catch(error => {
|
||||
|
||||
});
|
||||
|
||||
this.$emit('input', this.search);
|
||||
.catch(error => {});
|
||||
},
|
||||
|
||||
onItemMatchedSearchQuery() {},
|
||||
|
||||
onItemSelected(item) {
|
||||
const indexeditem = { ...item, index: this.currentIndex };
|
||||
|
||||
@ -344,12 +359,13 @@ export default {
|
||||
this.show.item_list = false;
|
||||
|
||||
this.search = '';
|
||||
|
||||
// Set default item list
|
||||
this.setItemList(this.items);
|
||||
},
|
||||
|
||||
onItemCreate() {
|
||||
const newItem = {
|
||||
let item = {
|
||||
index: this.newItems.length,
|
||||
key: 0,
|
||||
value: this.search,
|
||||
@ -361,60 +377,11 @@ export default {
|
||||
tax_ids: [],
|
||||
};
|
||||
|
||||
this.newItems.push(newItem);
|
||||
this.item_list.length === 1
|
||||
? item = this.item_list[0]
|
||||
: this.newItems.push(item)
|
||||
|
||||
this.addItem(newItem);
|
||||
|
||||
/*
|
||||
let add_new = this.add_new;
|
||||
|
||||
window.axios.get(this.createRoute)
|
||||
.then(response => {
|
||||
add_new.show = true;
|
||||
add_new.html = response.data.html;
|
||||
|
||||
this.add_new_html = Vue.component('add-new-component', function (resolve, reject) {
|
||||
resolve({
|
||||
template: '<div><akaunting-modal-add-new :show="add_new.show" @submit="onSubmit" @cancel="onCancel" :buttons="add_new.buttons" :title="add_new.text" :is_component=true :message="add_new.html"></akaunting-modal-add-new></div>',
|
||||
|
||||
components: {
|
||||
[Select.name]: Select,
|
||||
[Option.name]: Option,
|
||||
[OptionGroup.name]: OptionGroup,
|
||||
[ColorPicker.name]: ColorPicker,
|
||||
AkauntingModalAddNew,
|
||||
AkauntingModal,
|
||||
AkauntingMoney,
|
||||
AkauntingRadioGroup,
|
||||
AkauntingSelect,
|
||||
AkauntingDate,
|
||||
},
|
||||
|
||||
data: function () {
|
||||
return {
|
||||
add_new: add_new,
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onSubmit(event) {
|
||||
this.$emit('submit', event);
|
||||
},
|
||||
|
||||
onCancel(event) {
|
||||
this.$emit('cancel', event);
|
||||
}
|
||||
}
|
||||
})
|
||||
});
|
||||
})
|
||||
.catch(e => {
|
||||
console.log(e);
|
||||
})
|
||||
.finally(function () {
|
||||
// always executed
|
||||
});
|
||||
*/
|
||||
this.addItem(item);
|
||||
},
|
||||
|
||||
onSubmit(event) {
|
||||
@ -541,10 +508,6 @@ export default {
|
||||
},
|
||||
},
|
||||
|
||||
created() {
|
||||
this.setItemList(this.items);
|
||||
},
|
||||
|
||||
computed: {
|
||||
sortedItems() {
|
||||
return this.sortItems();
|
||||
@ -581,3 +544,9 @@ export default {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.highlightItem:first-child {
|
||||
background-color: #F5F7FA;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -3,15 +3,5 @@
|
||||
@section('header', trans('install.steps.language'))
|
||||
|
||||
@section('content')
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="form-group mb-0">
|
||||
<select name="lang" id="lang" size="14" class="col-xl-12 form-control-label">
|
||||
@foreach (language()->allowed() as $code => $name)
|
||||
<option value="{{ $code }}" @if ($code == 'en-GB') {{ 'selected="selected"' }} @endif>{{ $name }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@endsection
|
||||
|
||||
@ -1,69 +1,15 @@
|
||||
<html>
|
||||
@include('partials.install.head')
|
||||
|
||||
@stack('body_start')
|
||||
<body class="installation-page">
|
||||
|
||||
<div class="main-content">
|
||||
<div class="header pt-3 pb-2">
|
||||
<div class="container">
|
||||
<div class="header-body text-center mb-5">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-8 col-lg-6 col-xl-5">
|
||||
<img class="pb-6" src="{{ asset('public/img/akaunting-logo-white.svg') }}" width="22%" alt="Akaunting"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container mt--7 pb-5">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-5 col-md-7">
|
||||
<div id="app">
|
||||
{!! Form::open([
|
||||
'url' => url()->current(),
|
||||
'role' => 'form',
|
||||
'id' => 'form-install',
|
||||
'@submit.prevent' => 'onSubmit',
|
||||
'@keydown' => 'form.errors.clear($event.target.name)',
|
||||
]) !!}
|
||||
<div class="card-body">
|
||||
<div class="text-center text-muted mt-2 mb-4">
|
||||
<small>@yield('header')</small>
|
||||
</div>
|
||||
|
||||
@include('flash::message')
|
||||
|
||||
@yield('content')
|
||||
</div>
|
||||
|
||||
<div class="card-footer">
|
||||
<div class="float-right">
|
||||
@if (Request::is('install/requirements'))
|
||||
<a href="{{ route('install.requirements') }}" class="btn btn-success"> {{ trans('install.refresh') }}</a>
|
||||
@else
|
||||
{!! Form::button(
|
||||
'<i v-if="loading" :class="(loading) ? \'show \' : \'\'" class="fas fa-spinner fa-spin d-none"></i> ' .
|
||||
trans('install.next'),
|
||||
[
|
||||
':disabled' => 'loading',
|
||||
'type' => 'submit',
|
||||
'id' => 'next-button',
|
||||
'class' => 'btn btn-success'
|
||||
]
|
||||
) !!}
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
{!! Form::close() !!}
|
||||
</div>
|
||||
</div>
|
||||
@stack('body_start')
|
||||
<div id="app"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@include('partials.install.scripts')
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user