#470: Change behavior on table row hover.

* Do not highlight row on hover, when row is not clickable.

src/components/InterventionsList.vue

@@ -24,6 +24,7 @@ Licensed under the Elastic License 2.0. */
     MoreTableRowActionResult,
     MoreTableChoice,
     MoreTableSortOptions,
+    RowSelectionMode,
   } from '../models/MoreTableModel';
   import ConfirmDialog from 'primevue/confirmdialog';
   import DynamicDialog from 'primevue/dynamicdialog';
@@ -462,6 +463,7 @@ Licensed under the Elastic License 2.0. */
       :sort-options="sortOptions"
       :loading="loader.isLoading.value"
       :editable-access="actionsVisible"
+      :enable-row-selection="RowSelectionMode.Single"
       :editable-user-roles="[StudyRole.Admin, StudyRole.Operator]"
       :empty-message="$t('intervention.interventionList.emptyListMsg')"
       class="table-title-width table-btn-min-height"

src/components/ObservationList.vue

@@ -23,6 +23,7 @@ Licensed under the Elastic License 2.0. */
     MoreTableFieldType,
     MoreTableRowActionResult,
     MoreTableSortOptions,
+    RowSelectionMode,
   } from '../models/MoreTableModel';
   import ConfirmDialog from 'primevue/confirmdialog';
   import DynamicDialog from 'primevue/dynamicdialog';
@@ -471,6 +472,7 @@ Licensed under the Elastic License 2.0. */
       :editable-user-roles="[StudyRole.Admin, StudyRole.Operator]"
       :empty-message="$t('observation.observationList.emptyListMsg')"
       :component-factory="factories"
+      :enable-row-selection="RowSelectionMode.Single"
       class="table-title-width"
       @on-select="openEditObservation($event)"
       @on-action="executeAction($event)"

src/components/StudyList.vue

@@ -11,6 +11,7 @@ Licensed under the Elastic License 2.0. */
     MoreTableFieldType,
     MoreTableRowActionResult,
     MoreTableSortOptions,
+    RowSelectionMode,
   } from '../models/MoreTableModel';
   import { Study, StudyRole, StudyStatus } from '../generated-sources/openapi';
   import MoreTable from './shared/MoreTable.vue';
@@ -299,6 +300,7 @@ Licensed under the Elastic License 2.0. */
       :end-row-actions="endRowActions"
       :front-row-actions="frontRowActions"
       :sort-options="sortOptions"
+      :enable-row-selection="RowSelectionMode.Single"
       :editable="
         (data: Study) => {
           return (

src/components/forms/InterventionTriggerConditionTable.vue

@@ -310,7 +310,6 @@ Licensed under the Elastic License 2.0. */
   <div class="trigger-condition-row">
     <DataTable
       v-model:editingRows="editingRows"
-      selection-mode="single"
       :value="rows"
       edit-mode="row"
       table-class="editable-cells-table"
@@ -320,7 +319,6 @@ Licensed under the Elastic License 2.0. */
         :key="column.field"
         :field="column.field"
         :header="column.header"
-        :row-hover="true"
       >
         <template #body="{ data, field }">
           <span v-if="field === 'observationId'">
@@ -385,7 +383,7 @@ Licensed under the Elastic License 2.0. */
           />
         </template>
       </Column>
-      <Column key="action" row-hover="true" class="row-action text-end">
+      <Column key="action" class="row-action text-end">
         <template #body="slotProps">
           <div v-if="!slotProps.data.editMode" class="text-end">
             <span class="mr-1.5"></span>

src/components/shared/MoreTable.vue

@@ -13,6 +13,7 @@ Licensed under the Elastic License 2.0. */
     MoreTableFieldType,
     MoreTableRowActionResult,
     MoreTableSortOptions,
+    RowSelectionMode,
   } from '../../models/MoreTableModel';
   import DataTable, {
     DataTableFilterMeta,
@@ -57,6 +58,7 @@ Licensed under the Elastic License 2.0. */
     editAccessRoles?: StudyRole[];
     paginatorRows?: number;
     componentFactory?: ComponentFactory[];
+    enableRowSelection?: RowSelectionMode;
   }
 
   const props = withDefaults(defineProps<MoreTableProps>(), {
@@ -75,6 +77,7 @@ Licensed under the Elastic License 2.0. */
     editAccessRoles: (): StudyRole[] => [],
     paginatorRows: undefined,
     componentFactory: undefined,
+    enableRowSelection: undefined,
   });
 
   const emit = defineEmits<{
@@ -289,7 +292,7 @@ Licensed under the Elastic License 2.0. */
       :edit-mode="enableEditMode ? 'row' : undefined"
       :loading="loading"
       filter-display="menu"
-      selection-mode="single"
+      :selection-mode="enableRowSelection"
       :scrolable="false"
       :frozen-columns="2"
       :paginator="!!paginatorRows && rows.length > paginatorRows"
@@ -299,7 +302,6 @@ Licensed under the Elastic License 2.0. */
       <Column
         v-if="frontRowActions.length"
         key="actions"
-        :row-hover="true"
         class="row-actions"
         :frozen="true"
       >
@@ -322,7 +324,6 @@ Licensed under the Elastic License 2.0. */
         :field="column.field"
         :header="column.header"
         :data-key="column.field"
-        :row-hover="true"
         :sortable="column.sortable"
         :filter="tableFilter"
         :show-filter-match-modes="false"
@@ -539,12 +540,7 @@ Licensed under the Elastic License 2.0. */
         </template>
       </Column>
 
-      <Column
-        key="actions"
-        :row-hover="true"
-        class="row-actions"
-        :frozen="true"
-      >
+      <Column key="actions" class="row-actions" :frozen="true">
         <template #body="slotProps">
           <div v-if="!isRowInEditMode(slotProps.data)">
             <div v-for="action in rowActions" :key="action.id">
@@ -634,6 +630,10 @@ Licensed under the Elastic License 2.0. */
       background-color: #ffffff99;
     }
 
+    :deep(.p-datatable .p-datatable-tbody > tr:focus) {
+      outline: none;
+    }
+
     :deep(.pi-exclamation-circle.big:before) {
       font-size: 30px;
     }

src/models/MoreTableModel.ts

@@ -126,3 +126,8 @@ export interface MoreStudyGroupTableMap {
   created?: string;
   modified?: string;
 }
+
+export enum RowSelectionMode {
+  Single = 'single',
+  Multiple = 'multiple',
+}