소스 검색

fix: consolidate lifecycle hooks and ensure ESC works in material modals

unknown 2 달 전
부모
커밋
3892dd062a
1개의 변경된 파일18개의 추가작업 그리고 8개의 파일을 삭제
  1. 18 8
      src/pages/Admin.vue

+ 18 - 8
src/pages/Admin.vue

@@ -137,7 +137,7 @@
     </main>
 
     <!-- DEDICATED ORDER EDIT MODAL -->
-    <div v-if="showOrderEditModal" class="fixed inset-0 z-[99999] flex items-center justify-center p-4">
+    <div v-if="showOrderEditModal" class="fixed inset-0 z-[99999] flex items-center justify-center p-4" @keydown.esc="closeModals">
       <div class="absolute inset-0 bg-background/90 backdrop-blur-md" @click="showOrderEditModal = false" />
       <div class="relative w-full max-w-2xl bg-card border border-primary/30 rounded-3xl p-8 shadow-2xl overflow-y-auto max-h-[90vh]">
          <div class="flex justify-between items-center mb-6">
@@ -281,7 +281,7 @@
     </div>
 
     <!-- Global Modals -->
-    <div v-if="showAddModal" class="fixed inset-0 z-[99999] flex items-center justify-center p-4">
+    <div v-if="showAddModal" class="fixed inset-0 z-[99999] flex items-center justify-center p-4" @keydown.esc="closeModals">
       <div class="absolute inset-0 bg-background/80 backdrop-blur-sm" @click="closeModals" />
       <div class="relative w-full max-w-lg bg-card border border-border/50 rounded-3xl p-8 shadow-2xl overflow-y-auto max-h-[90vh]">
          <h3 class="text-xl font-bold font-display mb-6">{{ editingMaterial || editingService || editingPost ? t('admin.actions.edit') : t("admin.addNew") }}</h3>
@@ -513,14 +513,19 @@ const handleEditOrder = (order: any) => {
   showOrderEditModal.value = true;
 };
 
-onMounted(() => {
-  window.addEventListener('admin-edit-order', (e: any) => {
-    if (e.detail) handleEditOrder(e.detail);
-  });
-});
+const handleEditOrderEvent = (e: any) => {
+  if (e.detail) handleEditOrder(e.detail);
+};
+
+const handleGlobalEsc = (e: KeyboardEvent) => {
+  if (e.key === 'Escape') {
+    closeModals();
+  }
+};
 
 onUnmounted(() => {
-  window.removeEventListener('admin-edit-order', (e: any) => {});
+  window.removeEventListener('admin-edit-order', handleEditOrderEvent);
+  window.removeEventListener('keydown', handleGlobalEsc);
 });
 
 const newColor = ref("");
@@ -700,6 +705,7 @@ const handleAddNew = () => { closeModals(); showAddModal.value = true; };
 function closeModals() {
   showAddModal.value = false;
   showOrderEditModal.value = false;
+  adminChatId.value = null;
   editingMaterial.value = null;
   editingService.value = null; 
   editingPost.value = null; 
@@ -774,6 +780,10 @@ async function handleSaveUser() { try { await adminCreateUser(userForm); closeMo
 // Lifecycle
 onMounted(async () => {
   if (!authStore.user || authStore.user.role !== "admin") { router.push("/auth"); return; }
+  
+  window.addEventListener('admin-edit-order', handleEditOrderEvent);
+  window.addEventListener('keydown', handleGlobalEsc);
+  
   await loadAdminTranslations();
   fetchData();
   // Ensure materials are loaded for order edit selectors