144 lines
4.7 KiB
Vue
144 lines
4.7 KiB
Vue
<template>
|
|
<div style="display: flex;
|
|
flex-direction: column; width:80%" class=" mx-2 my-1 mb-3">
|
|
|
|
<v-card
|
|
|
|
ref="menuContainer" elevation="0"
|
|
v-click-outside="{
|
|
handler: onClickOutside,
|
|
include
|
|
}"
|
|
variant="flat">
|
|
<v-list-item class="px-2">
|
|
<!--<template v-slot:prepend>
|
|
<v-avatar class="pl-3" size="48">🎯</v-avatar>
|
|
</template>-->
|
|
|
|
<template v-slot:title>
|
|
<div class="pa-0 pt-2 pb-2 scroll-container horizontal secondary" fluid style="overflow-x: auto; white-space: nowrap">
|
|
<v-text-field
|
|
v-show="listing_menu"
|
|
density="compact"
|
|
label="Search Menu"
|
|
variant="outlined"
|
|
v-model="searchQuery" placeholder="Search menu..." @input="searchItems"
|
|
hide-details
|
|
single-line
|
|
@click:append-inner="onClick"
|
|
ref="searchInput"
|
|
></v-text-field>
|
|
<v-btn
|
|
v-show="!listing_menu"
|
|
class="mr-2"
|
|
size="small"
|
|
:variant="active_menu.id === qmenu.id ? 'tonal' : 'text'"
|
|
v-for="qmenu in qmenus"
|
|
@click="redirect(qmenu)"
|
|
>
|
|
{{ qmenu.name }}
|
|
</v-btn>
|
|
</div>
|
|
</template>
|
|
|
|
<template v-slot:append>
|
|
<v-btn @click="showHideListingMenu()" v-show="listing_menu == false" icon="mdi-magnify" variant="text"></v-btn>
|
|
<v-btn @click="showHideListingMenu()" v-show="listing_menu === true" icon="mdi-close" variant="text"></v-btn>
|
|
</template>
|
|
</v-list-item>
|
|
|
|
|
|
<v-card-text v-if="listing_menu" class="text-medium-emphasis">
|
|
|
|
<v-list variant="text" v-if="listing_menu">
|
|
|
|
<v-list-item
|
|
class="included"
|
|
v-for="(item, i) in limitedMenus"
|
|
:key="i"
|
|
:value="item"
|
|
color="primary"
|
|
@click="redirect(qmenu)"
|
|
|
|
>
|
|
<template v-slot:prepend>
|
|
<v-icon icon="mdi-arrow-forward"></v-icon>
|
|
</template>
|
|
|
|
<v-list-item-title v-text="item.name"></v-list-item-title>
|
|
</v-list-item>
|
|
</v-list>
|
|
|
|
</v-card-text>
|
|
</v-card>
|
|
</div>
|
|
</template>
|
|
|
|
<script type="module">
|
|
export default {
|
|
name: "QuickAccessComponent",
|
|
mounted() {
|
|
this.$store.dispatch('system/loadQuickMenu');
|
|
},
|
|
data() {
|
|
return {
|
|
pressed: false,
|
|
listing_menu:false,
|
|
searchQuery:'',
|
|
clickOutsideEnabled: false,
|
|
}
|
|
},
|
|
computed: {
|
|
qmenus() {
|
|
return this.$store.state.system.quick_menu;
|
|
},
|
|
active_menu: {
|
|
get() {
|
|
return this.$store.state.system.active_menu;
|
|
},
|
|
set(menu) {
|
|
this.$store.commit("system/update_active_menu", menu);
|
|
}
|
|
},
|
|
menus(){
|
|
return this.$store.state.system.quick_menu;
|
|
},
|
|
limitedMenus: {
|
|
get() {
|
|
return this.$store.state.system.active_menu;
|
|
},
|
|
set(menu) {
|
|
this.$store.commit("system/update_active_menu", menu);
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
redirect(item) {
|
|
this.listing_menu = false
|
|
this.active_menu = item;
|
|
//console.log("redirect url ", item.url);
|
|
},
|
|
showHideListingMenu(){
|
|
let xnow = this.listing_menu
|
|
this.listing_menu = xnow?false:true
|
|
this.$nextTick(() => {
|
|
if (this.listing_menu) {
|
|
this.$refs.searchInput.focus(); // Fokuskan input setelah menu ditampilkan
|
|
}
|
|
});
|
|
},
|
|
searchItems() {
|
|
this.limitedMenus = this.menus.filter(item => {
|
|
return item.name.toLowerCase().includes(this.searchQuery.toLowerCase()) ;
|
|
});
|
|
},
|
|
onClickOutside () {
|
|
this.listing_menu = false
|
|
},
|
|
include () {
|
|
return [document.querySelector('.included')]
|
|
},
|
|
|
|
},
|
|
}
|
|
</script> |