From 1d768acf09d6196c81250130ce5adf2633f1b5d2 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Thu, 27 Jul 2023 11:31:56 +0530
Subject: [PATCH] fix: make list row link to its child component using
 router-link

---
 frontend/src/components/ListView.vue | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/ListView.vue b/frontend/src/components/ListView.vue
index f620d267..23f7acaa 100644
--- a/frontend/src/components/ListView.vue
+++ b/frontend/src/components/ListView.vue
@@ -60,9 +60,10 @@
         </div>
       </div>
       <div id="list-rows" class="h-full overflow-y-auto">
-        <div
+        <router-link
           v-for="row in rows"
           :key="row[rowKey]"
+          :to="$router.currentRoute.value.path + '/' + row[rowKey]"
           class="flex space-x-4 items-center mx-2 px-3 py-2 border-b cursor-pointer transition-all duration-200 ease-in-out"
           :class="
             selections.has(row[rowKey])
@@ -72,7 +73,7 @@
         >
           <Checkbox
             :modelValue="selections.has(row[rowKey])"
-            @click="toggleRow(row[rowKey])"
+            @click.stop="toggleRow(row[rowKey])"
             class="[&>input]:duration-300 [&>input]:cursor-pointer"
           />
           <div
@@ -107,7 +108,7 @@
               {{ getValue(row[column.key]).label }}
             </div>
           </div>
-        </div>
+        </router-link>
       </div>
       <transition
         enter-active-class="duration-300 ease-out"