Merge pull request #1354 from dodona-edu/fix/webui-server-bugs

Fix bugs in server web UI

Author: rien

api/shell.nix

@@ -1,6 +1,6 @@
 { pkgs ? import <nixpkgs> { }, system ? builtins.currentSystem, ... }:
 let
-  dev = fetchTarball "https://github.com/chvp/devshell/archive/main.tar.gz";
+  dev = fetchTarball "https://github.com/numtide/devshell/archive/main.tar.gz";
   devshell = pkgs.devshell or (import dev { inherit system; });
   ruby = pkgs.ruby_3_2;
 in

flake.lock

@@ -11,8 +11,8 @@
     devshell = {
       url = "github:numtide/devshell";
       inputs = {
-        systems.follows = "systems";
         nixpkgs.follows = "nixpkgs";
+        flake-utils.follows = "flake-utils";
       };
     };
   };

flake.nix

@@ -11,7 +11,7 @@
   },
   "scripts": {
     "dev": "vite",
-    "dev:server": "VITE_MODE=server vite",
+    "dev:server": "VITE_API_URL=http://localhost:3000 VITE_MODE=server vite",
     "build": "vue-tsc --noEmit && vite build",
     "build:server": "VITE_MODE=server vite build",
     "preview": "vite preview",

web/package.json

@@ -68,7 +68,11 @@ export const useApiStore = defineStore("api", () => {
   // Re-hydrate the API stores when the anonymous value changes.
   watch(isAnonymous, () => fileStore.anonymize());
   // Re-hydrate the API stores when the url value changes.
-  watch(dataUrl, () => hydrate());
+  watch(dataUrl, () => {
+    if (dataUrl) {
+      hydrate();
+    }
+  });
 
   return {
     url: dataUrl,

web/src/api/stores/api.store.ts

@@ -123,7 +123,7 @@ const maxWidth = computed(() => {
 
 // When a row is clicked.
 const rowClicked = (e: Event, value: any): void => {
-  router.push({ name: "Cluster", params: { clusterId: value.item.id } });
+  router.push({ name: "Cluster", params: { clusterId: String(value.item.id) } });
 };
 </script>
 

web/src/components/clustering/ClustersTable.vue

@@ -95,13 +95,21 @@ const acceptRules = [
 const uploadProgress = shallowRef(25);
 
 // Report
-const reportActiveId = shallowRef<string>();
-const reportActive = computed(() =>
-  reports.getReportById(reportActiveId.value)
-);
-const reportRoute = computed(() =>
-  reports.getReportRouteById(reportActiveId.value)
-);
+const reportActiveId = shallowRef<string | undefined>();
+const reportActive = computed(() => {
+  if (reportActiveId.value) {
+    return reports.getReportById(reportActiveId.value);
+  } else {
+    return undefined;
+  }
+});
+const reportRoute = computed(() => {
+  if (reportActiveId.value) {
+    return reports.getReportRouteById(reportActiveId.value);
+  } else {
+    return undefined;
+  }
+});
 
 // Clear the form.
 const clearForm = (): void => {
@@ -276,6 +284,7 @@ watch(
   },
   {
     immediate: true,
+    deep: true,
   }
 );
 </script>

web/src/components/upload/UploadFormCard.vue

@@ -47,10 +47,14 @@ const items = computed(() =>
   }))
 );
 
-const selectedReportId = ref<string>();
-const selectedReport = computed(() =>
-  reports.getReportById(selectedReportId.value)
-);
+const selectedReportId = ref<string | undefined>();
+const selectedReport = computed(() => {
+  if (selectedReportId.value) {
+    return reports.getReportById(selectedReportId.value)
+  } else {
+    return undefined;
+  }
+});
 
 const infoDialog = ref(false);
 const deleteDialog = ref(false);

web/src/components/upload/UploadsTable.vue

@@ -13,7 +13,11 @@ export function useAppMode() {
   // URL to the report.
   const reportUrl = computed(() => {
     if (import.meta.env.VITE_MODE === "server") {
-      return reports.getReportUrlById(reports.currentReport?.reportId);
+      if (reports.currentReport) {
+        return reports.getReportUrlById(reports.currentReport.reportId);
+      } else {
+        return undefined;
+      }
     } else {
       return DATA_URL;
     }
@@ -22,7 +26,7 @@ export function useAppMode() {
   // URL to the data.
   const dataUrl = computed(() => {
     if (import.meta.env.VITE_MODE === "server") {
-      return `${reportUrl.value}/data`;
+      return reportUrl.value ? `${reportUrl.value}/data` : undefined;
     } else {
       return DATA_URL;
     }

web/src/composables/useAppMode.ts

@@ -49,7 +49,7 @@ const routes = [
         component: () => import("@/views/analysis/clusters.vue"),
       },
       {
-        path: "/clusters/:clusterId",
+        path: "clusters/:clusterId",
         name: "Cluster",
         component: () => import("@/views/analysis/cluster.vue"),
       },
@@ -85,4 +85,5 @@ const router = createRouter({
   routes,
 });
 
+
 export default router;

web/src/router/index.ts

@@ -1,10 +1,10 @@
-import { UploadReport } from "@/types/uploads/UploadReport";
-import { useLocalStorage } from "@vueuse/core";
-import { defineStore } from "pinia";
-import { computed, onMounted } from "vue";
-import { useRoute } from "vue-router";
+import {UploadReport} from "@/types/uploads/UploadReport";
+import {useLocalStorage} from "@vueuse/core";
+import {defineStore} from "pinia";
+import {computed, onMounted} from "vue";
+import {useRoute} from "vue-router";
 import slugify from "slugify";
-import axios, { AxiosError } from "axios";
+import axios, {AxiosError} from "axios";
 
 export const useReportsStore = defineStore("reports", () => {
   // List of uploaded reports in localstorage.
@@ -41,17 +41,17 @@ export const useReportsStore = defineStore("reports", () => {
   }
 
   // Get a report in the list by reportId.
-  function getReportById(reportId: string | undefined) {
+  function getReportById(reportId: string) {
     return reports.value.find((r) => r.reportId === reportId);
   }
 
   // Get a report in the list by referenceId.
-  function getReportByReferenceId(referenceId: string | undefined) {
+  function getReportByReferenceId(referenceId: string) {
     return reports.value.find((r) => r.referenceId === referenceId);
   }
 
   // Get the route for a given report id.
-  function getReportRouteById(reportId: string | undefined) {
+  function getReportRouteById(reportId: string) {
     const report = getReportById(reportId);
 
     // If no report is found, return the home page.
@@ -64,28 +64,28 @@ export const useReportsStore = defineStore("reports", () => {
     return {
       name: "Overview",
       params: {
-        referenceId: report?.referenceId,
+        referenceId: report.referenceId,
       },
     };
   }
 
   // Get the share route for a given report id.
-  function getReportShareRouteById(reportId: string | undefined) {
+  function getReportShareRouteById(reportId: string) {
     return {
       name: "Share",
       params: {
-        reportId: reportId ?? "",
+        reportId: reportId,
       },
     };
   }
 
   // Delete a report by reportId.
-  function deleteReportById(reportId: string | undefined) {
+  function deleteReportById(reportId: string) {
     reports.value = reports.value.filter((r) => r.reportId !== reportId);
   }
 
   // Get the URL for a given report id.
-  const getReportUrlById = (reportId: string | undefined) => {
+  const getReportUrlById = (reportId: string) => {
     return `${import.meta.env.VITE_API_URL}/reports/${reportId}`;
   };
 
@@ -117,8 +117,14 @@ export const useReportsStore = defineStore("reports", () => {
   const route = useRoute();
   const currentReport = computed(() => {
     const reportId = route.params.reportId as string | undefined;
+    if (reportId) {
+      return getReportById(reportId);
+    }
     const referenceId = route.params.referenceId as string | undefined;
-    return getReportById(reportId) ?? getReportByReferenceId(referenceId);
+    if (referenceId) {
+      return getReportByReferenceId(referenceId);
+    }
+    return undefined;
   });
 
   return {

web/src/stores/reports.store.ts

@@ -19,19 +19,20 @@ onMounted(async () => {
 
   // If the report reference does not exist, generate a new one.
   if (!report) {
+
     try {
       // Fetch the report from the server.
-      const response = await axios.get(reports.getReportUrlById(reportId));
+      const url = reports.getReportUrlById(reportId);
+      const response = await axios.get(url);
       const data = response.data;
-
       // Create the uploaded report.
       const report: Partial<UploadReport> = {
         reportId,
         date: data["created_at"] ?? new Date().toISOString(),
         name: data["name"] ?? "Report",
         status: data["status"],
-        statusUrl: data["url"],
-        response: data["response"],
+        statusUrl: url,
+        response: response,
         isFromSharing: true,
       };
 
@@ -42,9 +43,9 @@ onMounted(async () => {
       return;
     }
   }
-
+  const reportRoute = reports.getReportRouteById(reportId);
   // Go to the report.
-  router.push(reports.getReportRouteById(reportId));
+  router.push(reportRoute);
 });
 </script>