Merge pull request #30 from redlink-gmbh/MORE-Platform#442-jump-to-participant-from-clinician

MORE-Platform#442: add logic for direct jump to participant info dialog

Author: janoliver20

src/components/ParticipantList.vue

@@ -5,6 +5,7 @@ Oesterreichische Vereinigung zur Foerderung der wissenschaftlichen Forschung).
 Licensed under the Elastic License 2.0. */
 <script setup lang="ts">
   import { computed, ref, watch } from 'vue';
+  import { useRoute } from 'vue-router';
   import { useImportExportApi } from '@/composable/useApi';
 
   import {
@@ -64,6 +65,7 @@ Licensed under the Elastic License 2.0. */
   const { t } = useI18n();
   const { handleIndividualError } = useErrorHandling();
   const dialog = useDialog();
+  const route = useRoute();
   const moreTableRef = ref();
 
   const studyStore = useStudyStore();
@@ -259,6 +261,25 @@ Licensed under the Elastic License 2.0. */
     },
   );
 
+  const hasOpenedInitialDialog = ref(false);
+  watch(
+    [(): MoreParticipantListTableRow[] => participantsList.value, (): any => route.query.id],
+    ([newList, participantIdFromUrl]): void => {
+      if (
+        participantIdFromUrl &&
+        newList.length > 0 &&
+        !hasOpenedInitialDialog.value
+      ) {
+        openParticipantInfoDialog(participantIdFromUrl as string);
+        hasOpenedInitialDialog.value = true;
+        setTimeout(() => {
+          moreTableRef.value?.scrollToRow(participantIdFromUrl as string);
+        }, 500);
+      }
+    },
+    { immediate: true },
+  );
+
   function getObservationGroupItem(id: number): MoreTableChoice | undefined {
     return observationGroupStatuses?.find(
       (groupStatus) => groupStatus.value === id.toString(),

src/components/shared/MoreTable.vue

@@ -319,8 +319,17 @@ Licensed under the Elastic License 2.0. */
       }
     }
   }
+
+  function scrollToRow(id: string | number): void {
+    const element = document.getElementById(`row-${id}`);
+    if (element) {
+      element.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    }
+  }
+
   defineExpose({
     setRowToEditMode,
+    scrollToRow,
   });
 </script>
 
@@ -338,7 +347,7 @@ Licensed under the Elastic License 2.0. */
     </div>
 
     <div
-      class="actions table-actions ml-2.5 flex flex-row items-center justify-end gap-2 mb-2"
+      class="actions table-actions mb-2 ml-2.5 flex flex-row items-center justify-end gap-2"
     >
       <slot
         name="tableActions"
@@ -518,7 +527,7 @@ Licensed under the Elastic License 2.0. */
           <div v-if="(data as any)[field] === null" class="placeholder">
             {{ column.placeholder ?? $t('global.labels.noValue') }}
           </div>
-          <div v-else>
+          <div v-else :id="rowId === field ? `row-${data[rowId]}` : ''">
             <span
               v-if="field === 'title'"
               class="align-center flex flex-row gap-1.5"