108 lines
2.5 KiB
Vue
108 lines
2.5 KiB
Vue
<script setup lang="ts">
|
|
import { onMounted, onUnmounted, ref } from 'vue'
|
|
|
|
import { useTreeDataStore } from '@/stores/tree-data'
|
|
const { createFolder, editFolder } = useTreeDataStore()
|
|
|
|
const input = ref<string>('')
|
|
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
drawer: boolean
|
|
drawerStatus: 'edit' | 'create'
|
|
DEPT_NAME: string[]
|
|
currentDept: number
|
|
editPathname: string
|
|
}>(),
|
|
{
|
|
drawer: false,
|
|
drawerStatus: 'create',
|
|
}
|
|
)
|
|
|
|
let isListenerAdded = false
|
|
const emit = defineEmits(['update:drawer'])
|
|
const handleClose = (event: any) => {
|
|
console.log('key close event')
|
|
if (event.key === 'Escape') {
|
|
emit('update:drawer')
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
if (!isListenerAdded) {
|
|
document.addEventListener('keyup', handleClose)
|
|
isListenerAdded = true
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<q-drawer
|
|
class="q-pa-md"
|
|
side="right"
|
|
v-model="props.drawer"
|
|
bordered
|
|
:width="300"
|
|
:breakpoint="500"
|
|
overlay
|
|
behavior="mobile"
|
|
>
|
|
<q-toolbar class="q-mb-md q-pa-none">
|
|
<q-toolbar-title>
|
|
<span class="text-weight-bold" v-if="props.drawerStatus == 'edit'"
|
|
>แก้ไขชื่อ{{ props.DEPT_NAME[props.currentDept] }}</span
|
|
>
|
|
<span class="text-weight-bold" v-if="props.drawerStatus == 'create'"
|
|
>สร้าง{{ props.DEPT_NAME[props.currentDept] }}</span
|
|
>
|
|
</q-toolbar-title>
|
|
<q-btn
|
|
flat
|
|
round
|
|
dense
|
|
icon="close"
|
|
v-close-popup
|
|
color="red"
|
|
@click="() => $emit('update:drawer')"
|
|
/>
|
|
</q-toolbar>
|
|
<span class="text-weight-bold"
|
|
>ชื่อ{{ props.DEPT_NAME[props.currentDept] }}</span
|
|
>
|
|
<q-input
|
|
class="q-my-md"
|
|
outlined
|
|
v-model="input"
|
|
:placeholder="`กรอกชื่อ${props.DEPT_NAME[props.currentDept]}`"
|
|
dense
|
|
@keyup.enter="
|
|
() => {
|
|
$emit('update:drawer')
|
|
props.drawerStatus === 'create'
|
|
? createFolder(input)
|
|
: editFolder(input, editPathname)
|
|
input = ''
|
|
}
|
|
"
|
|
/>
|
|
<q-btn
|
|
class="q-px-md"
|
|
label="บันทึก"
|
|
type="submit"
|
|
color="primary"
|
|
dense
|
|
@click="
|
|
() => {
|
|
$emit('update:drawer')
|
|
props.drawerStatus === 'create'
|
|
? createFolder(input)
|
|
: editFolder(input, editPathname)
|
|
input = ''
|
|
}
|
|
"
|
|
/>
|
|
</q-drawer>
|
|
</template>
|
|
|
|
<style lang="scss"></style>
|