Skip to content

Commit

Permalink
Focus the first matched item && enter event adds existing item that i…
Browse files Browse the repository at this point in the history 
…s matched
  • Loading branch information
benguozakinci@gmail.com authored and benguozakinci@gmail.com committed Aug 24, 2021
1 parent fe4190c commit 0820b70
Show file tree
Hide file tree
Showing 3 changed files with 41 additions and 136 deletions.
105 changes: 37 additions & 68 deletions resources/assets/js/components/AkauntingItemButton.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -202,6 +208,7 @@ export default {
item_selected: false,
item_list: false,
},
isItemMatched: false,
form: {},
add_new: {
text: this.addNew.text,
Expand All @@ -221,6 +228,10 @@ export default {
};
},
created() {
this.setItemList(this.items);
},
mounted() {
if (this.dynamicCurrency.code != this.currency.code) {
if (!this.dynamicCurrency.decimal) {
Expand Down Expand Up @@ -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;
Expand All @@ -297,9 +310,17 @@ export default {
return;
}
this.onItemMatchedSearchQuery()
this.fetchMatchedItems();
this.item_list.length > 0
? this.isItemMatched = true
: {}
window.axios.get(url + '/common/items?search="' + this.search + '" limit:10')
this.$emit('input', this.search);
},
async fetchMatchedItems() {
await window.axios.get(url + '/common/items?search="' + this.search + '" limit:10')
.then(response => {
this.item_list = [];
Expand All @@ -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 };
Expand All @@ -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,
Expand All @@ -361,60 +377,11 @@ export default {
tax_ids: [],
};
this.newItems.push(newItem);
this.addItem(newItem);
this.item_list.length === 1
? item = this.item_list[0]
: this.newItems.push(item)
/*
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) {
Expand Down Expand Up @@ -541,10 +508,6 @@ export default {
},
},
created() {
this.setItemList(this.items);
},
computed: {
sortedItems() {
return this.sortItems();
Expand Down Expand Up @@ -581,3 +544,9 @@ export default {
},
};
</script>

<style scoped>
.highlightItem:first-child {
background-color: #F5F7FA;
}
</style>
12 changes: 1 addition & 11 deletions resources/views/install/language/create.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
60 changes: 3 additions & 57 deletions resources/views/layouts/install.blade.php
View file
Original file line number Diff line number Diff line change
@@ -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>

0 comments on commit 0820b70

Please sign in to comment.