refactor: send iframe

src/pages/06_edm/MainPage.vue

@@ -1,13 +1,28 @@
 <script setup lang="ts">
 import { onMounted, ref, watch } from 'vue';
 import { getInstance } from 'src/services/keycloak';
-import useUtilsStore, { dialog, notify } from 'stores/utils';
+import useUtilsStore from 'stores/utils';
+import { useI18n } from 'vue-i18n';
+import { useQuasar } from 'quasar';
 
+const $q = useQuasar();
+const { locale } = useI18n();
 const utilsStore = useUtilsStore();
 const EDM_SERVICE = import.meta.env.VITE_EDM_MICRO_FRONTEND_URL;
 const kc = getInstance();
 const at = ref(kc.token);
 const rt = ref(kc.refreshToken);
+const iframe = ref<InstanceType<typeof HTMLIFrameElement>>();
+
+function sendMessage() {
+  iframe?.value?.contentWindow?.postMessage(
+    {
+      i18n: locale.value,
+      darkMode: $q.dark.isActive,
+    },
+    '*',
+  );
+}
 
 onMounted(() => {
   utilsStore.currentTitle.title = 'menu.dms';
@@ -18,6 +33,7 @@ onMounted(() => {
       handler: () => {},
     },
   ];
+  sendMessage();
 });
 
 watch(
@@ -27,10 +43,15 @@ watch(
     rt.value = kc.refreshToken;
   },
 );
+
+watch([locale, $q.dark], () => {
+  sendMessage();
+});
 </script>
 
 <template>
   <iframe
+    ref="iframe"
     :src="`${EDM_SERVICE}/?at=${at}&rt=${rt}`"
     frameborder="0"
     class="full-width full-height rounded"