scinote-web/app/javascript/vue/repository_search/container.vue

105 lines
2.8 KiB
Vue
Raw Normal View History

2023-05-11 17:21:50 +08:00
<template>
<div class="flex items-center">
<button v-if="!searchOpened" class="btn btn-light icon-btn" @click="openSearch">
<i class="fas fa-search"></i>
</button>
<div v-if="searchOpened || barcodeSearchOpened" class="w-52">
<div v-if="searchOpened" class="sci-input-container right-icon">
<input
ref="searchInput"
class="sci-input-field"
type="text"
:placeholder="i18n.t('repositories.show.filter_inventory_items')"
@keyup="setValue"
@blur="closeSearch"
/>
<i class="fas fa-search"></i>
</div>
<div v-if="barcodeSearchOpened" class="sci-input-container right-icon ml-2">
<input
ref="barcodeSearchInput"
class="sci-input-field"
type="text"
:placeholder="i18n.t('repositories.show.filter_inventory_items_with_ean')"
@change="setBarcodeValue"
@blur="closeBarcodeSearch"
/>
<img class="barcode-scanner" src="/images/icon_small/barcode.png"/>
</div>
</div>
<button v-if="!barcodeSearchOpened" class="btn btn-light icon-btn ml-2" @click="openBarcodeSearch">
<img class="barcode-scanner" src="/images/icon_small/barcode.png"/>
</button>
</div>
</template>
<script>
export default {
name: 'RepositorySearchContainer',
data() {
return {
barcodeSearchOpened: false,
barcodeValue: '',
searchOpened: false,
value: ''
}
},
watch: {
barcodeValue() {
this.updateRepositoySearch();
},
value() {
this.updateRepositoySearch();
}
},
computed: {
activeValue() {
return this.value.length > 0 ? this.value : this.barcodeValue;
}
},
methods: {
setValue(e) {
this.value = e.target.value;
},
setBarcodeValue(e) {
this.barcodeValue = e.target.value;
},
openBarcodeSearch() {
this.clearValues();
this.closeSearch();
this.barcodeSearchOpened = true;
this.$nextTick(() => {
this.$refs.barcodeSearchInput.focus();
});
},
openSearch() {
this.clearValues();
this.closeBarcodeSearch();
this.searchOpened = true;
this.$nextTick(() => {
this.$refs.searchInput.focus();
});
},
closeBarcodeSearch() {
if (this.barcodeValue.length == 0) {
this.barcodeSearchOpened = false;
}
},
closeSearch() {
if (this.value.length == 0) {
this.searchOpened = false;
}
},
updateRepositoySearch() {
$('.dataTables_filter input').val(this.activeValue).trigger('keyup');
},
clearValues() {
this.value = '';
this.barcodeValue = '';
if (this.$refs.searchInput) this.$refs.searchInput.value = '';
if (this.$refs.barcodeSearchInput) this.$refs.barcodeSearchInput.value = '';
}
}
}
</script>