Open URL on new tab on click in a row

Author: epou

src/components/annotations/AnnotationDataTable.vue

@@ -4,10 +4,12 @@
       <template #body="slotProps">
         <Button asChild variant="link">
           <RouterLink
-            :to="{ name: 'identification_task', params: { observationUuid: slotProps.data.observation_uuid } }"
-            class="flex gap-2">
-            <span class="hover:underline">{{ slotProps.data.observation_uuid }}</span>
-            <i class="pi pi-link" />
+            :to="{ name: 'identification_task', params: { observationUuid: slotProps.data.observation_uuid } }" custom
+            v-slot="{ href }">
+            <a :href="href" target="_blank" class="flex items-center gap-2">
+              <span class="hover:underline">{{ slotProps.data.observation_uuid }}</span>
+              <i class="pi pi-external-link" style="font-size: 0.8rem" />
+            </a>
           </RouterLink>
         </Button>
       </template>

src/components/identificationTasks/IdentificationTaskList.vue

@@ -1,14 +1,23 @@
 <template>
-  <DataTable :value="tasks" ref="dt" stripedRows :loading="loading" data-key="observation.uuid" row-hover
-    selectionMode="single" @rowClick="goToAnnotation">
+  <DataTable :value="tasks" ref="dt" stripedRows :loading="loading" data-key="observation.uuid">
     <!-- <template #header>
       <div style="text-align:left">
         <MultiSelect id="column_select" :modelValue="selectedColumns" :options="columns" optionLabel="header"
           @update:modelValue="onSelectColumn" display="chip" :maxSelectedLabels="0" filter selectedItemsLabel="Columns"
           placeholder="Columns" />
       </div>
     </template> -->
-    <Column field="observation.uuid" header="UUID" />
+    <Column field="observation.uuid" header="UUID">
+      <template #body="slotProps">
+        <RouterLink :to="{ name: 'identification_task', params: { observationUuid: slotProps.data.observation.uuid } }"
+          custom v-slot="{ href }">
+          <a :href="href" target="_blank" class="flex items-center gap-2">
+            <span class="hover:underline">{{ slotProps.data.observation.uuid }}</span>
+            <i class="pi pi-external-link" style="font-size: 0.8rem" />
+          </a>
+        </RouterLink>
+      </template>
+    </Column>
     <Column header="Status">
       <template #body="slotProps">
         <IdentificationTaskStatusTag :status="slotProps.data.status" />
@@ -108,10 +117,6 @@ const onSelectColumn = (value: Partial<ColumnProps>[]) => {
   selectedColumns.value = columns.value.filter(col => value.includes(col));
 };
 
-function goToAnnotation(event: DataTableRowClickEvent) {
-  router.push({ name: 'identification_task', params: { observationUuid: event.data.observation.uuid } });
-}
-
 
 defineExpose({
   exportCSV,