Add simple DashboardPersonsPage which loads data

client/src/composables.ts

@@ -5,8 +5,10 @@ import { COURSE_QUERY, COURSE_SESSION_DETAIL_QUERY } from "@/graphql/queries";
 import {
   circleFlatChildren,
   circleFlatLearningContents,
-  circleFlatLearningUnits,
+  circleFlatLearningUnits
 } from "@/services/circle";
+import type { DashboardPersonType } from "@/services/dashboard";
+import { fetchDashboardPersons } from "@/services/dashboard";
 import { presignUpload, uploadFile } from "@/services/files";
 import { useCompletionStore } from "@/stores/completion";
 import { useCourseSessionsStore } from "@/stores/courseSessions";
@@ -23,7 +25,7 @@ import type {
   LearningMentor,
   LearningPathType,
   LearningUnitPerformanceCriteria,
-  PerformanceCriteria,
+  PerformanceCriteria
 } from "@/types";
 import { useQuery } from "@urql/vue";
 import orderBy from "lodash/orderBy";
@@ -487,3 +489,24 @@ export function useMyLearningMentors() {
     loading,
   };
 }
+
+export function useDashboardPersons() {
+  const dashboardPersons = ref<DashboardPersonType[]>([]);
+  const loading = ref(false);
+
+  const fetchData = async () => {
+    loading.value = true;
+    try {
+      dashboardPersons.value = await fetchDashboardPersons();
+    } finally {
+      loading.value = false;
+    }
+  };
+
+  onMounted(fetchData);
+
+  return {
+    dashboardPersons,
+    loading,
+  };
+}

client/src/fetchHelpers.ts

@@ -20,7 +20,11 @@ export const itFetch = (url: RequestInfo, options: RequestInit) => {
   });
 };
 
-export const itPost = (url: RequestInfo, data: unknown, options: RequestInit = {}) => {
+export const itPost = <T>(
+  url: RequestInfo,
+  data: unknown,
+  options: RequestInit = {}
+) => {
   options = Object.assign({}, options);
 
   const headers = Object.assign(
@@ -56,11 +60,11 @@ export const itPost = (url: RequestInfo, data: unknown, options: RequestInit = {
     return response.json().catch(() => {
       return Promise.resolve(null);
     });
-  });
+  }) as Promise<T>;
 };
 
-export const itGet = (url: RequestInfo) => {
+export const itGet = <T>(url: RequestInfo) => {
-  return itPost(url, {}, { method: "GET" });
+  return itPost<T>(url, {}, { method: "GET" });
 };
 
 export const itDelete = (url: RequestInfo) => {
@@ -81,17 +85,17 @@ export function bustItGetCache(key?: string) {
   }
 }
 
-export const itGetCached = (
+export const itGetCached = <T>(
   url: RequestInfo,
   options = {
     reload: false,
   }
-): Promise<any> => {
+): Promise<T> => {
   if (!itGetPromiseCache.has(url.toString()) || options.reload) {
-    itGetPromiseCache.set(url.toString(), itGet(url));
+    itGetPromiseCache.set(url.toString(), itGet<T>(url));
   }
 
-  return itGetPromiseCache.get(url.toString()) as Promise<any>;
+  return itGetPromiseCache.get(url.toString()) as Promise<T>;
 };
 
 export const useCSRFFetch = createFetch({

client/src/pages/dashboard/DashboardPersonsPage.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import LoadingSpinner from "@/components/ui/LoadingSpinner.vue";
+import log from "loglevel";
+import { useDashboardPersons } from "@/composables";
+
+log.debug("DashboardPersonsPage created");
+
+const { loading: loadingPersons, dashboardPersons } = useDashboardPersons();
+</script>
+
+<template>
+  <div>
+    <div v-if="loadingPersons" class="m-8 flex justify-center">
+      <LoadingSpinner />
+    </div>
+    <div v-else class="bg-gray-200">
+      <div class="container-large">
+        {{ dashboardPersons }}
+      </div>
+    </div>
+  </div>
+</template>

client/src/router/index.ts

@@ -60,6 +60,10 @@ const router = createRouter({
       name: "home",
       component: DashboardPage,
     },
+    {
+      path: "/dashboard/persons",
+      component: () => import("@/pages/dashboard/DashboardPersonsPage.vue"),
+    },
     {
       path: "/course/:courseSlug/media",
       props: true,

client/src/services/dashboard.ts

@@ -5,12 +5,37 @@ import {
   DASHBOARD_COURSE_STATISTICS,
 } from "@/graphql/queries";
 
+import { itGetCached } from "@/fetchHelpers";
 import type {
   CourseProgressType,
   CourseStatisticsType,
   DashboardConfigType,
 } from "@/gql/graphql";
 
+export type DashboardPersonRoleType =
+  | "SUPERVISOR"
+  | "EXPERT"
+  | "MEMBER"
+  | "LEARNING_MENTOR"
+  | "LEARNING_MENTEE";
+
+export type DashboardPersonCourseSessionType = {
+  id: number;
+  session_title: string;
+  course_id: number;
+  course_title: string;
+  user_role: DashboardPersonRoleType;
+  my_role: DashboardPersonRoleType;
+};
+
+export type DashboardPersonType = {
+  user_id: string;
+  first_name: string;
+  last_name: string;
+  email: string;
+  course_sessions: DashboardPersonCourseSessionType[];
+};
+
 export const fetchStatisticData = async (
   courseId: string
 ): Promise<CourseStatisticsType | null> => {
@@ -47,6 +72,7 @@ export const fetchProgressData = async (
     return null;
   }
 };
+
 export const fetchDashboardConfig = async (): Promise<DashboardConfigType[] | null> => {
   try {
     const res = await graphqlClient.query(DASHBOARD_CONFIG, {});
@@ -61,3 +87,7 @@ export const fetchDashboardConfig = async (): Promise<DashboardConfigType[] | nu
     return null;
   }
 };
+
+export async function fetchDashboardPersons() {
+  return await itGetCached<DashboardPersonType[]>("/api/dashboard/persons/");
+}