Feat/overview of organization page

src/components/NegotiationOrganizationCard.vue

@@ -52,6 +52,13 @@
             </label>
           </div>
         </div>
+        <div class="d-inline-flex align-items-center mx-2">
+            <i
+              class="bi bi-info-circle cursor-pointer"
+              :style="{'color': uiConfiguration?.primaryTextColor, opacity: '0.7'}"
+              @click="redirectToOrganizationOverviewPage(org.resources[0].organization.id)"
+            />
+        </div>
         <div class="ms-2 mx-2 ms-auto d-flex flex-column">
           <div
             class="ms-2 mx-2 ms-auto d-inline-flex align-items-center status-box p-1 cursor-pointer"
@@ -175,6 +182,7 @@ import {
 import CopyTextButton from "@/components/CopyTextButton.vue";
 import FormViewModal from "@/components/modals/FormViewModal.vue";
 import FormSubmissionModal from "@/components/modals/FormSubmissionModal.vue";
+import { useRouter } from "vue-router"
 
 const props = defineProps({
   orgId: {
@@ -211,6 +219,7 @@ const negotiationPageStore = useNegotiationPageStore();
 const submittedForm = ref(undefined);
 const formViewModal = ref(null);
 const emit = defineEmits(["reloadResources"]);
+const router = useRouter()
 
 const uiConfiguration = computed(() => {
   return uiConfigurationStore.uiConfiguration?.theme;
@@ -337,6 +346,11 @@ async function updateOrganization() {
   await negotiationPageStore.addResources(data, negotiationId);
   emit("reloadResources");
 }
+
+function redirectToOrganizationOverviewPage (id){
+  if(id)
+  router.push("/organization/" + id)
+} 
 </script>
 
 <style scoped>

src/router/index.js

@@ -9,6 +9,7 @@ import AdminSettingsPage from "../views/AdminSettingsPage.vue"
 import AdminUiConfigurationPage from "../views/AdminUiConfigurationPage.vue"
 import UserPage from "@/views/UserPage.vue"
 import ErrorPage from "@/views/ErrorPage.vue"
+import OrganizationOverviewPage from "@/views/OrganizationOverviewPage.vue"
 import { ROLES } from "@/config/consts"
 import { useUserStore } from "../store/user.js"
 import hasUser from "@/middlewares/hasUser.js"
@@ -113,6 +114,13 @@ const router = createRouter({
     props: true,
     meta: { isPublic: false }
   },
+  {
+    path: "/organization/:organizationId",
+    name: "organization-overview-page",
+    component: OrganizationOverviewPage,
+    props: true,
+    meta: { isPublic: false }
+  },
   {
     path: "/:pathMatch(.*)*",
     name: "error-page",

src/store/organizations.js

@@ -0,0 +1,30 @@
+import { defineStore } from "pinia"
+import axios from "axios"
+import { apiPaths, getBearerHeaders } from "../config/apiPaths"
+import { useNotificationsStore } from "./notifications"
+
+export const useOrganizationsStore = defineStore("organizations", () => {
+  const notifications = useNotificationsStore()
+
+  function retrieveOrganizations () {
+    return axios.get(`${apiPaths.BASE_API_PATH}/organizations`, { headers: getBearerHeaders() })
+      .then((response) => {
+        return response.data._embedded
+      })
+      .catch(() => {
+        notifications.setNotification("Error getting all organizations data from server", 'warning')
+      })
+  }
+
+  function retrieveOrganizationById (organizationsId) {
+    return axios.get(`${apiPaths.BASE_API_PATH}/organizations/${organizationsId}`, { headers: getBearerHeaders() })
+      .then((response) => {
+        return response.data
+      })
+      .catch(() => {
+        notifications.setNotification("Error getting organization data from server", 'warning')
+      })
+  }
+
+  return { retrieveOrganizations, retrieveOrganizationById }
+})

src/views/OrganizationOverviewPage.vue

@@ -0,0 +1,32 @@
+<template>
+    <div class="container">
+        <div>Name: {{ organization.name }}</div>
+        <div>Id: {{ organization.id }}</div>
+        <div>External id: {{ organization.externalId }}</div>
+    </div>
+</template>
+
+<script setup>
+import { onMounted, ref } from "vue"
+import { useUserStore } from "../store/user.js"
+import { useOrganizationsStore } from "../store/organizations.js"
+
+const props = defineProps({
+    organizationId: {
+    type: Number,
+    default: undefined
+  }
+})
+
+const userStore = useUserStore()
+const organizationsStore = useOrganizationsStore()
+const organization = ref({})
+
+onMounted(async () => {
+  if (Object.keys(userStore.userInfo).length === 0) {
+    await userStore.retrieveUser()
+  }
+
+  organization.value = await organizationsStore.retrieveOrganizationById(props.organizationId)
+})
+</script>