fix: kebab action hide after change status

This commit is contained in:
puriphatt 2024-09-04 15:43:08 +07:00
parent 483859daca
commit 9990b73f4c
3 changed files with 24 additions and 5 deletions

View file

@ -133,7 +133,7 @@ defineEmits<{
<KebabAction <KebabAction
v-if="action && !node.actionDisabled" v-if="action && !node.actionDisabled"
:id-name="node.name" :id-name="node.name"
status="ACTIVE" :status="node.status"
@view="$emit('view', node)" @view="$emit('view', node)"
@edit="$emit('edit', node)" @edit="$emit('edit', node)"
@delete="$emit('delete', node)" @delete="$emit('delete', node)"

View file

@ -1,7 +1,10 @@
<script lang="ts" setup> <script lang="ts" setup>
import { ref } from 'vue';
import ToggleButton from '../button/ToggleButton.vue'; import ToggleButton from '../button/ToggleButton.vue';
import { QMenu } from 'quasar';
import { watch } from 'vue';
withDefaults( const props = withDefaults(
defineProps<{ defineProps<{
idName: string; idName: string;
status: string; status: string;
@ -20,6 +23,17 @@ defineEmits<{
(e: 'delete'): void; (e: 'delete'): void;
(e: 'changeStatus'): void; (e: 'changeStatus'): void;
}>(); }>();
const refMenu = ref<InstanceType<typeof QMenu>>();
watch(
() => props.status,
() => {
setTimeout(() => {
refMenu.value?.hide();
}, 100);
},
);
</script> </script>
<template> <template>
<q-btn <q-btn
@ -31,7 +45,7 @@ defineEmits<{
:id="`btn-kebab-action-${idName}`" :id="`btn-kebab-action-${idName}`"
@click.stop @click.stop
> >
<q-menu class="bordered"> <q-menu class="bordered" ref="refMenu">
<q-list> <q-list>
<q-item <q-item
v-close-popup v-close-popup
@ -107,7 +121,11 @@ defineEmits<{
two-way two-way
:id="`btn-kebab-status-${idName}`" :id="`btn-kebab-status-${idName}`"
:model-value="status !== 'INACTIVE'" :model-value="status !== 'INACTIVE'"
@click="() => $emit('changeStatus')" @click="
() => {
$emit('changeStatus');
}
"
/> />
<span class="q-pl-md"> <span class="q-pl-md">
{{ {{

View file

@ -175,7 +175,8 @@ const treeProductTypeAndGroup = computed(
product: item._count.product, product: item._count.product,
}, },
type: 'group', type: 'group',
actionDisabled: item.status === 'INACTIVE', actionDisabled: false,
// actionDisabled: item.status === 'INACTIVE',
children: [ children: [
{ {
id: 'type', id: 'type',