Feat: Added page with basic styling for System Links component

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

@@ -0,0 +1,92 @@
+<template>
+  <div v-if="loading">Loading...</div>
+  <div v-else-if="error">Error: {{ error }}</div>
+  <div v-else class="system-links-container p-3 border overflow-auto" style="max-height: 340px; width: 420px;">
+    <div
+        v-for="(link, index) in links"
+        :key="index"
+        class="mb-2"
+    >
+      <a
+          :href="link.url"
+          class="btn d-flex align-items-center text-start w-100 px-4 py-3"
+          :class="getButtonClass(link.type)"
+          :style="{ borderRadius: buttonRadius }"
+          target="_blank"
+      >
+        <i :class="getIconClass(link.icon)" class="me-2"></i>
+        {{ link.text }}
+      </a>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, defineProps } from 'vue';
+import linkData from '@/mocks/systemLinksMockData.json';
+
+const props = defineProps({
+  elementId: {
+    type: String,
+    required: true
+  },
+  metrics: {
+    type: [String, Object, Array],
+    default: null
+  },
+  buttonRadius: {
+    type: String,
+    default: '0.0rem'
+  },
+  useMockedData: {
+    type: Boolean,
+    default: false
+  }
+});
+
+const links = ref([]);
+const loading = ref(true);
+const error = ref(null);
+
+const getButtonClass = (type) => {
+  switch (type?.toLowerCase()) {
+    case 'internal': return 'btn-secondary opacity-75';
+    case 'external': return 'btn-success opacity-75';
+    case 'admin': return 'btn-warning opacity-75';
+    case 'system': return 'btn-light opacity-75';
+    default: return 'btn-info opacity-75';
+  }
+};
+
+const getIconClass = (icon) => `bi bi-${icon}`;
+
+onMounted(async () => {
+  try {
+    if (props.useMockedData) {
+      // Use mock
+      links.value = linkData;
+      loading.value = false;
+    } else {
+      // Fetch from API - this part should never run when using mock data
+      const response = await fetch(`https://TODO-replace-with-API`);
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+      links.value = await response.json();
+    }
+  } catch (err) {
+    error.value = err.message;
+  } finally {
+    loading.value = false;
+  }
+});
+
+</script>
+
+<style scoped>
+.system-links-container {
+  background-color: #f8f9fa;
+  border: 1px solid #ddd;
+  overflow-y: auto;
+}
+</style>

gca-admin-gurusoft-message-dashboard/src/mocks/systemLinksMockData.json

@@ -0,0 +1,62 @@
+[
+  {
+    "url": "https://report.gurusoft.no/",
+    "text": "Gurusoft hjemmeside",
+    "type": "admin",
+    "icon": "dashboard"
+  },
+  {
+    "url": "https://www.gurusoft.no/ta-kontakt?utm_term=gurusoft&utm_campaign=Search+-+Gurusoft+-+Brand&utm_source=adwords&utm_medium=ppc&hsa_acc=1671275617&hsa_cam=21429497412&hsa_grp=164723437872&hsa_ad=704644852789&hsa_src=g&hsa_tgt=kwd-357983112442&hsa_kw=gurusoft&hsa_mt=b&hsa_net=adwords&hsa_ver=3&gad_source=1&gad_campaignid=21429497412&gbraid=0AAAAAC6-h5QA-Uem3fnf9a8Q7l0FhCFkF&gclid=CjwKCAjw3_PCBhA2EiwAkH_j4oYc5_RLO87_7JXoxRBwBR3sR7mHymCM5WRcyM_ORAb7kcmDvoi-HBoCxR4QAvD_BwE",
+    "text": "Kontakt oss",
+    "type": "internal",
+    "icon": "book"
+  },
+  {
+    "url": "https://open.spotify.com/show/4iPq4aLAWHbsXpg0dKSGnY?si=c9ae69117a5740fd&nd=1&dlsi=328d8504668c4558",
+    "text": "Musikk innslag",
+    "type": "internal",
+    "icon": "support"
+  },
+  {
+    "url": "https://www.company.com/privacy-policy",
+    "text": "Privacy Policy",
+    "type": "external",
+    "icon": "policy"
+  },
+  {
+    "url": "https://www.company.com/terms-of-service",
+    "text": "Terms of Service",
+    "type": "what",
+    "icon": "terms"
+  },
+  {
+    "url": "https://intranet.company.local/dashboard",
+    "text": "Admin Dashboard",
+    "type": "admin",
+    "icon": "dashboard"
+  },
+  {
+    "url": "https://google.com",
+    "text": "Knowledge Base",
+    "type": "internal",
+    "icon": "book"
+  },
+  {
+    "url": "https://intranet.company.local/support",
+    "text": "Support",
+    "type": "internal",
+    "icon": "support"
+  },
+  {
+    "url": "https://www.company.com/privacy-policy",
+    "text": "Privacy Policy",
+    "type": "external",
+    "icon": "policy"
+  },
+  {
+    "url": "https://www.company.com/terms-of-service",
+    "text": "Terms of Service",
+    "type": "what",
+    "icon": "terms"
+  }
+]