Feat: Added pop-up which is executed when toggled/page load if wanted

gca-admin-gurusoft-message-dashboard/src/components/MarkedPopUp.vue

@@ -27,7 +27,6 @@ onMounted(async () => {
       popups.value = popupData;
       if (popups.value.length > 0) {
         currentPopup.value = popups.value[4]; // Display first popup
-        showPopup.value = true;
       }
       loading.value = false;
     } else {
@@ -39,7 +38,6 @@ onMounted(async () => {
       popups.value = await response.json();
       if (popups.value.length > 0) {
         currentPopup.value = popups.value[0];
-        showPopup.value = true;
       }
       loading.value = false;
     }
@@ -49,6 +47,10 @@ onMounted(async () => {
   }
 });
 
+const togglePopup = () => {
+  showPopup.value = !showPopup.value;
+};
+
 const closePopup = () => {
   showPopup.value = false;
 };
@@ -62,6 +64,12 @@ const handleAction = () => {
 </script>
 
 <template>
+
+  <button v-if="!showPopup" @click="togglePopup" class="btn btn-primary">
+    Show Popup
+  </button>
+
+
   <div v-if="loading">Loading...</div>
   <div v-else-if="error">Error: {{ error }}</div>
   <div v-else-if="showPopup && currentPopup"