Fix navigation from RMO status page on report table

ts/rmo/components/TableReport.vue

@@ -141,7 +141,7 @@ const props = withDefaults(defineProps<Props>(), {
 
 // Define emits
 const emit = defineEmits<{
-	(e: "row-clicked", reportId: string): void;
+	(e: "rowClicked", reportId: string): void;
 }>();
 
 /**
@@ -191,7 +191,8 @@ const formatId = (id: string): string => {
 /**
  * Handle row click event
  */
-const handleRowClick = (reportId: string): void => {
-	emit("row-clicked", reportId);
+const handleRowClick = (report_id: string): void => {
+	console.log("row clicked", report_id);
+	emit("rowClicked", report_id);
 };
 </script>

ts/rmo/content/Status.vue

@@ -161,7 +161,10 @@
 			</div>
 			<div class="card-body p-0">
 				<div class="table-responsive">
-					<TableReport :reports="renderedReports" />
+					<TableReport
+						:reports="renderedReports"
+						@rowClicked="doReportClicked"
+					/>
 				</div>
 			</div>
 			<!--
@@ -197,6 +200,8 @@ import { apiClient } from "@/client";
 import Map from "@/map/Map.vue";
 import Layer, { Feature, MouseEvent } from "@/map/Layer.vue";
 import Source from "@/map/Source.vue";
+import { router } from "@/rmo/route/config";
+import { useRoutes } from "@/rmo/route/use";
 import { useStoreAPI } from "@/store/api";
 
 const paintConfigNuisance = {
@@ -212,6 +217,7 @@ const paintConfigWater = {
 	"circle-stroke-width": 2,
 };
 const renderedReportsNuisance = ref<Feature[]>([]);
+const routes = useRoutes();
 const storeAPI = useStoreAPI();
 const tegola = ref<string | null>(null);
 
@@ -229,6 +235,9 @@ const renderedReports = computed((): Report[] => {
 	});
 	return reports;
 });
+function doReportClicked(report_id: string) {
+	router.push(routes.StatusByID(report_id));
+}
 onMounted(() => {
 	const a = storeAPI.get().then((a) => {
 		tegola.value = a.tegola.rmo;