Browse Source

feat(nc-gui): add useMenuCloseOnEsc to kanban toolbar

pull/4455/head
Wing-Kam Wong 2 years ago
parent
commit
4d4514c7d4
  1. 16
      packages/nc-gui/components/smartsheet/toolbar/KanbanStackEditOrAdd.vue
  2. 11
      packages/nc-gui/components/smartsheet/toolbar/StackedBy.vue

16
packages/nc-gui/components/smartsheet/toolbar/KanbanStackEditOrAdd.vue

@ -1,5 +1,5 @@
<script setup lang="ts">
import { IsLockedInj, IsPublicInj, useKanbanViewStoreOrThrow } from '#imports'
import { IsLockedInj, IsPublicInj, useKanbanViewStoreOrThrow, useMenuCloseOnEsc } from '#imports'
const { isUIAllowed } = useUIPermission()
@ -7,12 +7,14 @@ const { groupingFieldColumn } = useKanbanViewStoreOrThrow()
const isLocked = inject(IsLockedInj, ref(false))
const addOrEditStackDropdown = ref(false)
const IsPublic = inject(IsPublicInj, ref(false))
const open = ref(false)
useMenuCloseOnEsc(open)
const handleSubmit = async () => {
addOrEditStackDropdown.value = false
open.value = false
}
provide(IsKanbanInj, ref(true))
@ -21,7 +23,7 @@ provide(IsKanbanInj, ref(true))
<template>
<a-dropdown
v-if="!IsPublic && isUIAllowed('edit-column')"
v-model:visible="addOrEditStackDropdown"
v-model:visible="open"
:trigger="['click']"
overlay-class-name="nc-dropdown-kanban-add-edit-stack-menu"
>
@ -42,10 +44,10 @@ provide(IsKanbanInj, ref(true))
</div>
<template #overlay>
<LazySmartsheetColumnEditOrAddProvider
v-if="addOrEditStackDropdown"
v-if="open"
:column="groupingFieldColumn"
@submit="handleSubmit"
@cancel="addOrEditStackDropdown = false"
@cancel="open = false"
@click.stop
@keydown.stop
/>

11
packages/nc-gui/components/smartsheet/toolbar/StackedBy.vue

@ -12,6 +12,7 @@ import {
inject,
ref,
useKanbanViewStoreOrThrow,
useMenuCloseOnEsc,
useViewColumns,
watch,
} from '#imports'
@ -30,7 +31,9 @@ const { fields, loadViewColumns, metaColumnById } = useViewColumns(activeView, m
const { kanbanMetaData, loadKanbanMeta, loadKanbanData, updateKanbanMeta, groupingField } = useKanbanViewStoreOrThrow()
const stackedByDropdown = ref(false)
const open = ref(false)
useMenuCloseOnEsc(open)
watch(
() => activeView.value?.id,
@ -68,14 +71,14 @@ const singleSelectFieldOptions = computed<SelectProps['options']>(() => {
})
const handleChange = () => {
stackedByDropdown.value = false
open.value = false
}
</script>
<template>
<a-dropdown
v-if="!IsPublic"
v-model:visible="stackedByDropdown"
v-model:visible="open"
:trigger="['click']"
overlay-class-name="nc-dropdown-kanban-stacked-by-menu"
>
@ -97,7 +100,7 @@ const handleChange = () => {
</div>
<template #overlay>
<div
v-if="stackedByDropdown"
v-if="open"
class="p-3 min-w-[280px] bg-gray-50 shadow-lg nc-table-toolbar-menu max-h-[max(80vh,500px)] overflow-auto !border"
@click.stop
>

Loading…
Cancel
Save