From add2ba0713c476489d67b19e7c3a41a63e6b7c2f Mon Sep 17 00:00:00 2001
From: ken <ken.vnguyen1@gmail.com>
Date: Fri, 27 Jun 2025 15:20:50 +0200
Subject: [PATCH] feat: add remaining components to dashboard

---
 .../src/App.vue                               | 43 +---------------
 .../src/components/Dashboard.vue              | 51 -------------------
 .../src/components/ElementWrapper.Vue         | 18 -------
 .../src/components/MarkedsBanner.vue          |  8 +--
 .../src/components/MarkedsBannerPage.vue      |  6 +--
 .../{MarkedPopUp.vue => MarkedsPopUp.vue}     |  0
 .../src/components/SystemBanner.vue           |  8 +--
 .../src/components/SystemBannerPage.vue       |  4 +-
 .../src/components/SystemMessagesPage.vue     |  2 +-
 ...{MarkedsBanner.json => markedsBanner.json} |  0
 .../{mockdata.json => systemBanner.json}      |  0
 .../src/router/index.js                       | 26 ++--------
 .../src/views/Dashboard.vue                   | 41 +++++++++++++++
 package-lock.json                             | 38 ++++++++++++++
 14 files changed, 99 insertions(+), 146 deletions(-)
 delete mode 100644 gca-admin-gurusoft-message-dashboard/src/components/Dashboard.vue
 delete mode 100644 gca-admin-gurusoft-message-dashboard/src/components/ElementWrapper.Vue
 rename gca-admin-gurusoft-message-dashboard/src/components/{MarkedPopUp.vue => MarkedsPopUp.vue} (100%)
 rename gca-admin-gurusoft-message-dashboard/src/mocks/{MarkedsBanner.json => markedsBanner.json} (100%)
 rename gca-admin-gurusoft-message-dashboard/src/mocks/{mockdata.json => systemBanner.json} (100%)
 create mode 100644 gca-admin-gurusoft-message-dashboard/src/views/Dashboard.vue

diff --git a/gca-admin-gurusoft-message-dashboard/src/App.vue b/gca-admin-gurusoft-message-dashboard/src/App.vue
index 228002d..78c8f2c 100644
--- a/gca-admin-gurusoft-message-dashboard/src/App.vue
+++ b/gca-admin-gurusoft-message-dashboard/src/App.vue
@@ -3,47 +3,6 @@
 
 <template>
   <div class="app">
-    <SystemBanner />
     <router-view/>
   </div>
-  <header>
-    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
-
-    <div class="wrapper">
-      <HelloWorld msg="You did it!" />
-    </div>
-  </header>
-
-  <main>
-    <TheWelcome />
-  </main>
-</template>
-
-<style scoped>
-header {
-  line-height: 1.5;
-}
-
-.logo {
-  display: block;
-  margin: 0 auto 2rem;
-}
-
-@media (min-width: 1024px) {
-  header {
-    display: flex;
-    place-items: center;
-    padding-right: calc(var(--section-gap) / 2);
-  }
-
-  .logo {
-    margin: 0 2rem 0 0;
-  }
-
-  header .wrapper {
-    display: flex;
-    place-items: flex-start;
-    flex-wrap: wrap;
-  }
-}
-</style>
+</template>
\ No newline at end of file
diff --git a/gca-admin-gurusoft-message-dashboard/src/components/Dashboard.vue b/gca-admin-gurusoft-message-dashboard/src/components/Dashboard.vue
deleted file mode 100644
index 16dbd58..0000000
--- a/gca-admin-gurusoft-message-dashboard/src/components/Dashboard.vue
+++ /dev/null
@@ -1,51 +0,0 @@
-<script setup lang="ts">
-import OverlayPopup from "./OverlayPopup.vue";
-import SystemMesssages from "./SystemMesssages.vue";
-import SystemLinks from "@/components/SystemLinks.vue";
-import MarkedPopUp from "@/components/MarkedPopUp.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>-->
-
-<template>
-  <div class="container-fluid text-center border border-3 border-dark">
-    <div class="row border">
-      <div class="col">
-        1 of 1
-      </div>
-    </div>
-    <div class="row">
-      <div class="col border">
-        1 of 2
-      </div>
-      <div class="col border">
-        <div class="row">
-          <div class="col">
-            <SystemMesssages/>
-          </div>
-          <div class="col border border-warning">
-            <SystemLinks/>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <OverlayPopup/>
-  <MarkedPopUp/>
-
-
-</template>
\ No newline at end of file
diff --git a/gca-admin-gurusoft-message-dashboard/src/components/ElementWrapper.Vue b/gca-admin-gurusoft-message-dashboard/src/components/ElementWrapper.Vue
deleted file mode 100644
index 2abcc88..0000000
--- a/gca-admin-gurusoft-message-dashboard/src/components/ElementWrapper.Vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-  <div>
-    <h3>{{ banner.title }}</h3>
-    <p>{{ banner.text }}</p>
-    <a :href="banner.link" target="_blank">{{ banner.link }}</a>
-  </div>
-</template>
-
-
-<script setup>
-import { computed } from 'vue'
-import mockData from '../mocks/mockdata.json'
-const props = defineProps(['elementId'])
-
-const banner = computed(() => mockData.find(item => item.id.toString() === props.elementId))
-</script>
-
-
diff --git a/gca-admin-gurusoft-message-dashboard/src/components/MarkedsBanner.vue b/gca-admin-gurusoft-message-dashboard/src/components/MarkedsBanner.vue
index a5ff384..ca03008 100644
--- a/gca-admin-gurusoft-message-dashboard/src/components/MarkedsBanner.vue
+++ b/gca-admin-gurusoft-message-dashboard/src/components/MarkedsBanner.vue
@@ -26,7 +26,6 @@
                 :href="banner.url"
                 class="btn btn-outline-primary btn-sm"
                 target="_blank"
-                @click.stop
             >
               Gå til kampanje
             </a>
@@ -38,9 +37,9 @@
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue'
-import { useRouter } from 'vue-router'
-import mockdata from '../mocks/MarkedsBanner.json'
+import {ref, onMounted} from 'vue'
+import {useRouter} from 'vue-router'
+import mockdata from '../mocks/markedsBanner.json'
 
 const banners = ref([])
 const router = useRouter()
@@ -69,6 +68,7 @@ const goToPage = () => {
 .scroll-box::-webkit-scrollbar {
   height: 8px;
 }
+
 .scroll-box::-webkit-scrollbar-thumb {
   background-color: #ccc;
   border-radius: 4px;
diff --git a/gca-admin-gurusoft-message-dashboard/src/components/MarkedsBannerPage.vue b/gca-admin-gurusoft-message-dashboard/src/components/MarkedsBannerPage.vue
index d873f2b..9c4e168 100644
--- a/gca-admin-gurusoft-message-dashboard/src/components/MarkedsBannerPage.vue
+++ b/gca-admin-gurusoft-message-dashboard/src/components/MarkedsBannerPage.vue
@@ -3,7 +3,7 @@
     <h2 class="mb-4">Alle markedsbannere</h2>
     <div v-for="banner in banners" :key="banner.id" class="mb-4 border-bottom pb-3">
       <h4>{{ banner.title }}</h4>
-      <img :src="banner.image" alt="banner" class="img-fluid" style="max-width: 300px" />
+      <img :src="banner.image" alt="banner" class="img-fluid" style="max-width: 300px"/>
       <p class="text-muted">Type: {{ banner.type }}</p>
       <a :href="banner.url" target="_blank" class="btn btn-sm btn-outline-secondary mt-2">Besøk kampanje</a>
     </div>
@@ -11,8 +11,8 @@
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue'
-import mockdata from '../mocks/MarkedsBanner.json'
+import {ref, onMounted} from 'vue'
+import mockdata from '../mocks/markedsBanner.json'
 
 const banners = ref([])
 
diff --git a/gca-admin-gurusoft-message-dashboard/src/components/MarkedPopUp.vue b/gca-admin-gurusoft-message-dashboard/src/components/MarkedsPopUp.vue
similarity index 100%
rename from gca-admin-gurusoft-message-dashboard/src/components/MarkedPopUp.vue
rename to gca-admin-gurusoft-message-dashboard/src/components/MarkedsPopUp.vue
diff --git a/gca-admin-gurusoft-message-dashboard/src/components/SystemBanner.vue b/gca-admin-gurusoft-message-dashboard/src/components/SystemBanner.vue
index a2cced4..cd79d22 100644
--- a/gca-admin-gurusoft-message-dashboard/src/components/SystemBanner.vue
+++ b/gca-admin-gurusoft-message-dashboard/src/components/SystemBanner.vue
@@ -3,7 +3,7 @@
     <div class="container">
       <div class="alert-wrapper">
         <div
-            v-for="banner in activeBanners"
+            v-for="banner in activeBanners.slice(0,1)"
             :key="banner.id"
             class="alert alert-danger border-danger banner-drop d-flex justify-content-between align-items-start shadow-sm small-banner"
             role="alert"
@@ -46,9 +46,9 @@
 
 
 <script setup>
-import { ref, onMounted, computed } from 'vue'
-import { useRouter } from 'vue-router'
-import mockdata from '../mocks/mockdata.json'
+import {ref, onMounted, computed} from 'vue'
+import {useRouter} from 'vue-router'
+import mockdata from '../mocks/systemBanner.json'
 
 const banners = ref([])
 const router = useRouter()
diff --git a/gca-admin-gurusoft-message-dashboard/src/components/SystemBannerPage.vue b/gca-admin-gurusoft-message-dashboard/src/components/SystemBannerPage.vue
index ac56e9a..bef1bc4 100644
--- a/gca-admin-gurusoft-message-dashboard/src/components/SystemBannerPage.vue
+++ b/gca-admin-gurusoft-message-dashboard/src/components/SystemBannerPage.vue
@@ -34,8 +34,8 @@
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue'
-import mockdata from '../mocks/mockdata.json'
+import {ref, onMounted} from 'vue'
+import mockdata from '../mocks/systemBanner.json'
 
 const banners = ref([])
 
diff --git a/gca-admin-gurusoft-message-dashboard/src/components/SystemMessagesPage.vue b/gca-admin-gurusoft-message-dashboard/src/components/SystemMessagesPage.vue
index 0cb66e7..5c00382 100644
--- a/gca-admin-gurusoft-message-dashboard/src/components/SystemMessagesPage.vue
+++ b/gca-admin-gurusoft-message-dashboard/src/components/SystemMessagesPage.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="container-sm py-4">
     <div class="mb-3">
-      <router-link to="/dashboard" class="btn btn-sm btn-outline-primary">
+      <router-link to="/" class="btn btn-sm btn-outline-primary">
         ← Tilbake
       </router-link>
     </div>
diff --git a/gca-admin-gurusoft-message-dashboard/src/mocks/MarkedsBanner.json b/gca-admin-gurusoft-message-dashboard/src/mocks/markedsBanner.json
similarity index 100%
rename from gca-admin-gurusoft-message-dashboard/src/mocks/MarkedsBanner.json
rename to gca-admin-gurusoft-message-dashboard/src/mocks/markedsBanner.json
diff --git a/gca-admin-gurusoft-message-dashboard/src/mocks/mockdata.json b/gca-admin-gurusoft-message-dashboard/src/mocks/systemBanner.json
similarity index 100%
rename from gca-admin-gurusoft-message-dashboard/src/mocks/mockdata.json
rename to gca-admin-gurusoft-message-dashboard/src/mocks/systemBanner.json
diff --git a/gca-admin-gurusoft-message-dashboard/src/router/index.js b/gca-admin-gurusoft-message-dashboard/src/router/index.js
index fb78225..6bc189f 100644
--- a/gca-admin-gurusoft-message-dashboard/src/router/index.js
+++ b/gca-admin-gurusoft-message-dashboard/src/router/index.js
@@ -1,7 +1,7 @@
 import {createRouter, createWebHistory} from 'vue-router';
 import SystemMessagesPage from '../components/SystemMessagesPage.vue';
 import SystemMessages from '../components/SystemMesssages.vue';
-import Dashboard from '../components/Dashboard.vue';
+import Dashboard from '../views/Dashboard.vue';
 import SystemLinks from '../components/SystemLinks.vue'
 import SystemBannerPage from '../components/SystemBannerPage.vue'
 import SystemBanner from '../components/SystemBanner.vue'
@@ -13,26 +13,10 @@ const routes = [
     {path: '/systemmessagelist', name: 'SystemMessageList', component: SystemMessagesPage},
     {path: '/systemlinks', name: 'SystemLinks', component: SystemLinks},
     {path: '/', name: 'Dashboard', component: Dashboard},
-    {
-        path: '/systembanner',
-        name: 'Home',
-        component: SystemBanner
-    },
-    {
-        path: '/SystemBannerPage',
-        name: 'BannerPage',
-        component: SystemBannerPage
-    },
-    {
-        path: '/markedsbanners',
-        name: 'MarkedsPage',
-        component: MarkedsBannerPage
-    },
-    {
-        path: '/markedsbanner',
-        name: 'MarkedsStart',
-        component: MarkedsBanner
-    }
+    {path: '/systembanner', name: 'Home', component: SystemBanner},
+    {path: '/systembannerpage', name: 'BannerPage', component: SystemBannerPage},
+    {path: '/markedsbanners', name: 'MarkedsPage', component: MarkedsBannerPage},
+    {path: '/markedsbanner', name: 'MarkedsStart', component: MarkedsBanner}
 ];
 
 const router = createRouter({
diff --git a/gca-admin-gurusoft-message-dashboard/src/views/Dashboard.vue b/gca-admin-gurusoft-message-dashboard/src/views/Dashboard.vue
new file mode 100644
index 0000000..ddcb12f
--- /dev/null
+++ b/gca-admin-gurusoft-message-dashboard/src/views/Dashboard.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import OverlayPopup from "../components/OverlayPopup.vue";
+import SystemMesssages from "../components/SystemMesssages.vue";
+import SystemLinks from "../components/SystemLinks.vue";
+import MarkedsPopUp from "../components/MarkedsPopUp.vue";
+import SystemBanner from "@/components/SystemBanner.vue";
+import MarkedsBanner from "@/components/MarkedsBanner.vue";
+</script>
+
+<style scoped>
+
+</style>
+
+<template>
+  <div class="container-fluid text-center border border-3 border-dark">
+    <div class="row border">
+      <div class="col">
+        <SystemBanner/>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col border">
+        <MarkedsBanner/>
+      </div>
+      <div class="col border">
+        <div class="row">
+          <div class="col">
+            <SystemMesssages/>
+          </div>
+          <div class="col border border-warning">
+            <SystemLinks/>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <OverlayPopup/>
+  <MarkedsPopUp/>
+
+
+</template>
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 12330fd..2664eba 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,4 +1,42 @@
 {
+  "name": "sommer2025",
   "lockfileVersion": 3,
   "requires": true,
+  "packages": {
+    "": {
+      "dependencies": {
+        "bootstrap": "^5.3.7"
+      }
+    },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+      "license": "MIT",
+      "peer": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
+    "node_modules/bootstrap": {
+      "version": "5.3.7",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.7.tgz",
+      "integrity": "sha512-7KgiD8UHjfcPBHEpDNg+zGz8L3LqR3GVwqZiBRFX04a1BCArZOz1r2kjly2HQ0WokqTO0v1nF+QAt8dsW4lKlw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/twbs"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/bootstrap"
+        }
+      ],
+      "license": "MIT",
+      "peerDependencies": {
+        "@popperjs/core": "^2.11.8"
+      }
+    }
+  }
 }