From bbcf22f35ae969fc3b3494b2f10424e098e95fc5 Mon Sep 17 00:00:00 2001
From: Thomas Haaf <thomas@smart-sign.com>
Date: Mon, 24 Jun 2024 15:16:13 +0200
Subject: [PATCH 1/2] fix multiple backdrops

---
 client/src/components/AiSummaryDialog.vue | 24 +++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/client/src/components/AiSummaryDialog.vue b/client/src/components/AiSummaryDialog.vue
index 2c6ecda..55750f1 100644
--- a/client/src/components/AiSummaryDialog.vue
+++ b/client/src/components/AiSummaryDialog.vue
@@ -1,5 +1,6 @@
 <template>
-  <div class="modal fade modal-lg" id="aiModal" tabindex="-1" role="dialog" aria-labelledby="aiModalLabel" aria-hidden="true">
+  <div class="modal fade modal-lg" id="aiModal" tabindex="-1" role="dialog" aria-labelledby="aiModalLabel"
+    aria-hidden="true">
     <div class="modal-dialog modal-dialog-centered" role="document">
       <div class="modal-content">
         <div class="modal-header">
@@ -7,13 +8,8 @@
         </div>
         <div class="modal-body">
           <div v-for="(d, i) in data" v-bind:key="i" class="summary-container">
-            <ai-summary
-              :summary-data="d"
-              @add-tag="addTag($event)"
-              @update-description="acceptDescription($event)"
-              @remove-ai-summary="$emit('removeAiSummary', d)"
-              @set-keyvisual="setKeyvisual($event)"
-            ></ai-summary>
+            <ai-summary :summary-data="d" @add-tag="addTag($event)" @update-description="acceptDescription($event)"
+              @remove-ai-summary="$emit('removeAiSummary', d)" @set-keyvisual="setKeyvisual($event)"></ai-summary>
           </div>
         </div>
         <div class="modal-footer">
@@ -32,7 +28,7 @@ import { t } from "@client/plugins/i18n.js";
 import type { AiSummaryData } from "@fumix/fu-blog-common";
 import { Modal } from "bootstrap";
 import type { PropType } from "vue";
-import { watch } from "vue";
+import { ref, watch } from "vue";
 
 const props = defineProps({
   show: {
@@ -43,12 +39,16 @@ const props = defineProps({
   },
 });
 
+const modalOpen = ref<boolean>(false);
+
 const emits = defineEmits(["acceptDescription", "canceled", "addTag", "removeAiSummary", "setKeyvisual"]);
 
 watch(props, () => {
-  const myModal = new Modal(document.getElementById("aiModal") || "", {});
-  const show = props.show;
-  show ? myModal?.show() : myModal.hide();
+  if (modalOpen.value != props.show) {
+    const myModal = new Modal(document.getElementById("aiModal") || "", { backdrop : "static" });
+    props.show ? myModal?.show() : myModal.hide();
+    modalOpen.value = props.show || false;
+  }
 });
 
 const acceptDescription = (description: string) => {

From 2c41e343ec636045a48d9cc2d7a6a6d020945ad8 Mon Sep 17 00:00:00 2001
From: Thomas Haaf <thomas@smart-sign.com>
Date: Mon, 24 Jun 2024 15:22:12 +0200
Subject: [PATCH 2/2] fix lint issues

---
 client/src/components/AiSummaryDialog.vue | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/client/src/components/AiSummaryDialog.vue b/client/src/components/AiSummaryDialog.vue
index 55750f1..2c3516f 100644
--- a/client/src/components/AiSummaryDialog.vue
+++ b/client/src/components/AiSummaryDialog.vue
@@ -1,6 +1,5 @@
 <template>
-  <div class="modal fade modal-lg" id="aiModal" tabindex="-1" role="dialog" aria-labelledby="aiModalLabel"
-    aria-hidden="true">
+  <div class="modal fade modal-lg" id="aiModal" tabindex="-1" role="dialog" aria-labelledby="aiModalLabel" aria-hidden="true">
     <div class="modal-dialog modal-dialog-centered" role="document">
       <div class="modal-content">
         <div class="modal-header">
@@ -8,8 +7,13 @@
         </div>
         <div class="modal-body">
           <div v-for="(d, i) in data" v-bind:key="i" class="summary-container">
-            <ai-summary :summary-data="d" @add-tag="addTag($event)" @update-description="acceptDescription($event)"
-              @remove-ai-summary="$emit('removeAiSummary', d)" @set-keyvisual="setKeyvisual($event)"></ai-summary>
+            <ai-summary
+              :summary-data="d"
+              @add-tag="addTag($event)"
+              @update-description="acceptDescription($event)"
+              @remove-ai-summary="$emit('removeAiSummary', d)"
+              @set-keyvisual="setKeyvisual($event)"
+            ></ai-summary>
           </div>
         </div>
         <div class="modal-footer">
@@ -45,7 +49,7 @@ const emits = defineEmits(["acceptDescription", "canceled", "addTag", "removeAiS
 
 watch(props, () => {
   if (modalOpen.value != props.show) {
-    const myModal = new Modal(document.getElementById("aiModal") || "", { backdrop : "static" });
+    const myModal = new Modal(document.getElementById("aiModal") || "", { backdrop: "static" });
     props.show ? myModal?.show() : myModal.hide();
     modalOpen.value = props.show || false;
   }