From bd0d5501a189f09a1cdec2ba4f4a2ca0b67c251d Mon Sep 17 00:00:00 2001
From: ken <ken.vnguyen1@gmail.com>
Date: Fri, 27 Jun 2025 12:48:14 +0200
Subject: [PATCH] feat: add overlaypopup, and move components in separate
 routes

---
 .../src/App.vue                               |  1 -
 .../src/components/OverlayPopup.vue           | 43 +++++++++++++++++++
 .../src/components/SystemMessagesPage.vue     | 10 +----
 .../src/components/SystemMesssages.vue        | 12 +-----
 .../src/components/TestPage.vue               | 21 +++++++++
 .../src/mocks/overlay_popup.json              | 12 ++++++
 .../src/router/index.js                       |  7 +--
 .../src/utils/api.js                          |  8 +++-
 8 files changed, 90 insertions(+), 24 deletions(-)
 create mode 100644 gca-admin-gurusoft-message-dashboard/src/components/OverlayPopup.vue
 create mode 100644 gca-admin-gurusoft-message-dashboard/src/components/TestPage.vue
 create mode 100644 gca-admin-gurusoft-message-dashboard/src/mocks/overlay_popup.json

diff --git a/gca-admin-gurusoft-message-dashboard/src/App.vue b/gca-admin-gurusoft-message-dashboard/src/App.vue
index 02d8986..d11d61a 100644
--- a/gca-admin-gurusoft-message-dashboard/src/App.vue
+++ b/gca-admin-gurusoft-message-dashboard/src/App.vue
@@ -1,7 +1,6 @@
 <template>
   <div class="app">
     <router-view/>
-
   </div>
 </template>
 
diff --git a/gca-admin-gurusoft-message-dashboard/src/components/OverlayPopup.vue b/gca-admin-gurusoft-message-dashboard/src/components/OverlayPopup.vue
new file mode 100644
index 0000000..42d9a6a
--- /dev/null
+++ b/gca-admin-gurusoft-message-dashboard/src/components/OverlayPopup.vue
@@ -0,0 +1,43 @@
+<template>
+  <!-- Button trigger modal -->
+  <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#overlayPopup">
+    Launch DEMO modal
+  </button>
+
+  <!-- Modal -->
+  <div class="modal" id="overlayPopup" tabindex="-1" aria-hidden="true">
+    <div class="modal-dialog modal-lg modal-dialog-centered">
+      <div class="modal-content rounded-0">
+        <div class="modal-header justify-content-center text-center w-100 border-0">
+          <h1 class="modal-title fs-4 fw-bold w-100">{{ overlayInfo.title }}</h1>
+          <button type="button" class="btn-close position-absolute end-0 me-3" data-bs-dismiss="modal"
+                  aria-label="Close"></button>
+        </div>
+        <div class="modal-body text-center">
+          {{ overlayInfo.description }}
+        </div>
+        <ul class="list-unstyled text-center pt-4">
+          <li v-for="(item, index) in overlayInfo.info" :key="index">
+            {{ item }}
+          </li>
+        </ul>
+        <div class="d-flex justify-content-center modal-footer border-0 pt-0">
+          <button type="button" class="btn btn-dark btn-lg w-25 rounded-0" data-bs-dismiss="modal">LUKK</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {ref, onMounted} from 'vue';
+import {initializeApi} from '@/utils/api';
+
+const api = initializeApi();
+const overlayInfo = ref({});
+
+onMounted(async () => {
+  overlayInfo.value = await api.getOverlayPopup();
+});
+
+</script>
\ No newline at end of file
diff --git a/gca-admin-gurusoft-message-dashboard/src/components/SystemMessagesPage.vue b/gca-admin-gurusoft-message-dashboard/src/components/SystemMessagesPage.vue
index 631aa33..0e211a8 100644
--- a/gca-admin-gurusoft-message-dashboard/src/components/SystemMessagesPage.vue
+++ b/gca-admin-gurusoft-message-dashboard/src/components/SystemMessagesPage.vue
@@ -50,17 +50,9 @@
 import {onMounted, ref} from 'vue';
 import {initializeApi} from '../utils/api.js';
 
-const api = initializeApi(true);
+const api = initializeApi();
 const messages = ref([]);
 
-const useMockedData = import.meta.env.VITE_USE_MOCK === "true";
-
-if (useMockedData) {
-  import('bootstrap/dist/css/bootstrap.min.css')
-      .then(() => console.log('Bootstrap CSS loaded!'))
-      .catch(err => console.error('Error loading Bootstrap CSS:', err));
-}
-
 onMounted(async () => {
   messages.value = await api.getAllMessages();
 });
diff --git a/gca-admin-gurusoft-message-dashboard/src/components/SystemMesssages.vue b/gca-admin-gurusoft-message-dashboard/src/components/SystemMesssages.vue
index ddd259b..d1b5a6d 100644
--- a/gca-admin-gurusoft-message-dashboard/src/components/SystemMesssages.vue
+++ b/gca-admin-gurusoft-message-dashboard/src/components/SystemMesssages.vue
@@ -7,7 +7,7 @@
       <div class="card-body">
         <ul v-if="messages.length" class="list-group list-group-flush pad gap-3">
           <li
-              v-for="msg in messages.slice(0, 5)"
+              v-for="msg in messages.slice(0, 3)"
               :key="msg.id"
               class="list-group-item d-flex flex-column border border-1 border-dark"
               :class="typeClass(msg.type)">
@@ -50,17 +50,9 @@
 import {ref, onMounted} from 'vue';
 import {initializeApi} from '../utils/api.js';
 
-const api = initializeApi(true);
+const api = initializeApi();
 const messages = ref([]);
 
-const useMockedData = import.meta.env.VITE_USE_MOCK === "true";
-
-if (useMockedData) {
-  import('bootstrap/dist/css/bootstrap.min.css')
-      .then(() => console.log('Bootstrap CSS loaded!'))
-      .catch(err => console.error('Error loading Bootstrap CSS:', err));
-}
-
 onMounted(async () => {
   messages.value = await api.getAllMessages();
 });
diff --git a/gca-admin-gurusoft-message-dashboard/src/components/TestPage.vue b/gca-admin-gurusoft-message-dashboard/src/components/TestPage.vue
new file mode 100644
index 0000000..b0d6838
--- /dev/null
+++ b/gca-admin-gurusoft-message-dashboard/src/components/TestPage.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import OverlayPopup from "./OverlayPopup.vue";
+</script>
+
+<style scoped>
+
+</style>
+
+<template>
+  <div class="list-group w-25 gap-3 p-3" style="margin: auto">
+    <OverlayPopup></OverlayPopup>
+    <router-link to="/systemmessage" class="btn btn-secondary">
+      System messages
+    </router-link>
+    <router-link to="/systemmessagelist" class="btn btn-secondary">
+      System messages
+    </router-link>
+  </div>
+
+
+</template>
diff --git a/gca-admin-gurusoft-message-dashboard/src/mocks/overlay_popup.json b/gca-admin-gurusoft-message-dashboard/src/mocks/overlay_popup.json
new file mode 100644
index 0000000..56a530b
--- /dev/null
+++ b/gca-admin-gurusoft-message-dashboard/src/mocks/overlay_popup.json
@@ -0,0 +1,12 @@
+{
+  "title": "Driftsmelding e-handel",
+  "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
+  "footer": "Vennlig hilsen",
+  "info": [
+    "Gurusoft AS",
+    "+47 123 45 678",
+    "support.ecommerce@gurusoft.no"
+  ]
+}
+
+
diff --git a/gca-admin-gurusoft-message-dashboard/src/router/index.js b/gca-admin-gurusoft-message-dashboard/src/router/index.js
index a05cafc..2e303de 100644
--- a/gca-admin-gurusoft-message-dashboard/src/router/index.js
+++ b/gca-admin-gurusoft-message-dashboard/src/router/index.js
@@ -1,11 +1,12 @@
 import {createRouter, createWebHistory} from 'vue-router';
 import SystemMessagesPage from '../components/SystemMessagesPage.vue';
 import SystemMessages from '../components/SystemMesssages.vue';
-
+import TestPage from '../components/TestPage.vue';
 
 const routes = [
-    {path: '/', name: 'Home', component: SystemMessages},
-    {path: '/systemmessagelist', name: 'MessagesPage', component: SystemMessagesPage}
+    {path: '/systemmessage', name: 'SystemMessage', component: SystemMessages},
+    {path: '/systemmessagelist', name: 'SystemMessageList', component: SystemMessagesPage},
+    {path: '/', name: 'TestPage', component: TestPage}
 ];
 
 const router = createRouter({
diff --git a/gca-admin-gurusoft-message-dashboard/src/utils/api.js b/gca-admin-gurusoft-message-dashboard/src/utils/api.js
index 7e50f70..529b5c2 100644
--- a/gca-admin-gurusoft-message-dashboard/src/utils/api.js
+++ b/gca-admin-gurusoft-message-dashboard/src/utils/api.js
@@ -1,4 +1,5 @@
 import mockSystemMessages from '../mocks/system_message.json';
+import mockOverlay from '../mocks/overlay_popup.json';
 
 const createMockApi = () => {
     return {
@@ -8,6 +9,11 @@ const createMockApi = () => {
             return mockSystemMessages;
         },
 
+        getOverlayPopup: async () => {
+            await new Promise(resolve => setTimeout(resolve, 300));
+            return mockOverlay;
+        },
+
         // Get a single message by ID
         getMessageById: async (id) => {
             await new Promise(resolve => setTimeout(resolve, 200));
@@ -22,6 +28,6 @@ const createMockApi = () => {
     };
 };
 
-export const initializeApi = (useMockedData = true) => {
+export const initializeApi = () => {
     return createMockApi();
 };