fix(admin): prevent tinymce dialogs being disabled (V4-1201)

- event issue propagation between vuetify & tinymce dialogs - extract some common logic to composable
MRC-Epid-it24 · Jun 25, 2024 · 91ee3cb · 91ee3cb
1 parent b053119
commit 91ee3cb
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 41 deletions.
diff --git a/apps/admin/src/components/editors/index.ts b/apps/admin/src/components/editors/index.ts
@@ -1,6 +1,7 @@
 export { default as HtmlEditor } from './html-editor.vue';
 export { default as JsonEditor } from './json-editor.vue';
 export { default as JsonEditorDialog } from './json-editor-dialog.vue';
+export * from './use-tinymce';
 
 // export const JsonEditor = await import('./json-editor.vue');
 // export const Tinymce = await import('./tinymce.vue');
diff --git a/apps/admin/src/components/editors/use-tinymce.ts b/apps/admin/src/components/editors/use-tinymce.ts
@@ -0,0 +1,21 @@
+import { onBeforeMount, onBeforeUnmount } from 'vue';
+
+export function useTinymce() {
+  const focusInTox = (event: FocusEvent) => {
+    const toxDialog = (event.target as HTMLElement).closest('.tox');
+    if (!toxDialog)
+      return;
+
+    event.stopImmediatePropagation();
+  };
+
+  onBeforeMount(() => {
+    document.addEventListener('focusin', focusInTox, true);
+  });
+
+  onBeforeUnmount(() => {
+    document.removeEventListener('focusin', focusInTox, true);
+  });
+
+  return { focusInTox };
+}
diff --git a/apps/admin/src/components/feedback/cards/card-selector.vue b/apps/admin/src/components/feedback/cards/card-selector.vue
@@ -179,6 +179,7 @@ import { defineComponent, ref } from 'vue';
 
 import type { RuleCallback } from '@intake24/admin/types';
 import type { Card } from '@intake24/common/feedback';
+import { useTinymce } from '@intake24/admin/components/editors';
 import { LanguageSelector } from '@intake24/admin/components/forms';
 import { cardDefaults, images as characterTypesRef } from '@intake24/common/feedback';
 import { copy, merge, randomString } from '@intake24/common/util';
@@ -209,6 +210,7 @@ export default defineComponent({
   emits: ['save'],
 
   setup() {
+    useTinymce();
     const { i18n } = useI18n();
     const form = ref<InstanceType<typeof HTMLFormElement>>();
 
@@ -232,7 +234,7 @@ export default defineComponent({
       newDialog: dialog,
       cardDefaults,
       cardSettings,
-      tab: 0,
+      tab: 'general',
     };
   },
 
@@ -244,23 +246,7 @@ export default defineComponent({
     },
   },
 
-  mounted() {
-    document.addEventListener('focusin', this.focusInTox, true);
-  },
-
-  beforeDestroy() {
-    document.removeEventListener('focusin', this.focusInTox, true);
-  },
-
   methods: {
-    focusInTox(event: FocusEvent) {
-      const toxDialog = (event.target as HTMLElement).closest('.tox');
-      if (!toxDialog)
-        return;
-
-      event.stopImmediatePropagation();
-    },
-
     updateCardProps() {
       const {
         show,
@@ -306,7 +292,7 @@ export default defineComponent({
     },
 
     reset() {
-      this.tab = 0;
+      this.tab = 'general';
       this.dialog = this.newDialog();
       this.form?.resetValidation();
     },

diff --git a/apps/admin/src/components/feedback/demographic-groups/demographic-group-list.vue b/apps/admin/src/components/feedback/demographic-groups/demographic-group-list.vue
@@ -114,7 +114,7 @@
           <template #extension>
             <v-container>
               <v-tabs v-model="tab" background-color="secondary" dark>
-                <v-tab v-for="item in ['general', 'sectors', 'json']" :key="item">
+                <v-tab v-for="item in ['general', 'sectors', 'json']" :key="item" :tab-value="item">
                   {{ $t(`feedback-schemes.demographic-groups.tabs.${item}`) }}
                 </v-tab>
               </v-tabs>
@@ -124,7 +124,7 @@
         <v-form ref="form" @submit.prevent="save">
           <v-container>
             <v-tabs-items v-model="tab" class="pt-1">
-              <v-tab-item key="general">
+              <v-tab-item key="general" value="general">
                 <v-container>
                   <v-row>
                     <v-col cols="12" md="6">
@@ -203,14 +203,14 @@
                   </v-row>
                 </v-container>
               </v-tab-item>
-              <v-tab-item key="sectors">
+              <v-tab-item key="sectors" value="sectors">
                 <v-container>
                   <demographic-group-sectors
                     v-model="dialog.item.scaleSectors"
                   />
                 </v-container>
               </v-tab-item>
-              <v-tab-item key="json">
+              <v-tab-item key="json" value="json">
                 <v-container>
                   <json-editor v-model="dialog.item" />
                 </v-container>
@@ -245,7 +245,7 @@ import type { DemographicGroup } from '@intake24/common/feedback';
 import type { NutrientTypeResponse } from '@intake24/common/types/http/admin';
 import type { PhysicalActivityLevelAttributes } from '@intake24/db';
 import { OptionsMenu, SelectResource } from '@intake24/admin/components/dialogs';
-import { JsonEditor, JsonEditorDialog } from '@intake24/admin/components/editors';
+import { JsonEditor, JsonEditorDialog, useTinymce } from '@intake24/admin/components/editors';
 import { useListWithDialog } from '@intake24/admin/composables';
 import { useEntry } from '@intake24/admin/stores';
 import { cardTypes as cardTypesRef, nutrientRuleTypes, sexes } from '@intake24/common/feedback';
@@ -282,11 +282,12 @@ export default defineComponent({
   },
 
   setup(props, context) {
+    useTinymce();
     const { i18n } = useI18n();
-    const { dialog, form, items, newDialog, add, edit, load, remove, reset, save, update }
+    const { dialog, form, items, newDialog, add, edit, load, remove, reset: resetItem, save, update }
       = useListWithDialog(props, context, { newItem: getDemographicGroupDefaults });
 
-    const tab = ref(0);
+    const tab = ref('general');
 
     const cardTypes = computed(() =>
       cardTypesRef.map(value => ({
@@ -295,6 +296,11 @@ export default defineComponent({
       })),
     );
 
+    const reset = () => {
+      tab.value = 'general';
+      resetItem();
+    };
+
     return {
       cardTypes,
       dialog,

diff --git a/apps/admin/src/components/prompts/prompt-selector.vue b/apps/admin/src/components/prompts/prompt-selector.vue
@@ -185,6 +185,7 @@ import {
 } from '@intake24/common/prompts';
 import { copy, merge } from '@intake24/common/util';
 
+import { useTinymce } from '../editors';
 import {
   PromptActions,
   PromptConditions,
@@ -236,6 +237,7 @@ export default defineComponent({
   emits: ['save'],
 
   setup() {
+    useTinymce();
     const form = ref<InstanceType<typeof HTMLFormElement>>();
 
     return { form };
@@ -296,14 +298,6 @@ export default defineComponent({
     },
   },
 
-  mounted() {
-    document.addEventListener('focusin', this.focusInTox, true);
-  },
-
-  beforeDestroy() {
-    document.removeEventListener('focusin', this.focusInTox, true);
-  },
-
   methods: {
     newDialog(show = false): PromptDialog {
       return {
@@ -313,14 +307,6 @@ export default defineComponent({
       };
     },
 
-    focusInTox(event: FocusEvent) {
-      const toxDialog = (event.target as HTMLElement).closest('.tox-dialog');
-      if (!toxDialog)
-        return;
-
-      event.stopImmediatePropagation();
-    },
-
     updatePromptProps() {
       const { show, index, prompt } = this.dialog;
       const { component } = prompt;