feat: add overlaypopup, and move components in separate routes

gca-admin-gurusoft-message-dashboard/src/App.vue

@@ -1,7 +1,6 @@
 <template>
   <div class="app">
     <router-view/>
-
   </div>
 </template>
 

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>

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();
 });

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();
 });

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>

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"
+  ]
+}
+
+

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({

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();
 };