[MS] Scroll selected element into view

client/src/components/files/FileGridDisplay.vue

@@ -11,6 +11,7 @@
     <div class="scroll">
       <div class="folders-container-grid">
         <file-card
+          ref="folderItems"
           class="folder-grid-item"
           v-for="folder in folders.getEntries()"
           :key="folder.id"
@@ -23,6 +24,7 @@
           :is-workspace-reader="ownRole === WorkspaceRole.Reader"
         />
         <file-card
+          ref="fileItems"
           class="folder-grid-item"
           v-for="file in files.getEntries()"
           :key="file.id"
@@ -63,13 +65,19 @@ const props = defineProps<{
 }>();
 
 const fileDropZoneRef = ref();
+const fileItems = ref();
+const folderItems = ref();
 
 const emits = defineEmits<{
   (e: 'click', entry: EntryModel, event: Event): void;
   (e: 'menuClick', event: Event, entry: EntryModel, onFinished: () => void): void;
   (e: 'filesAdded', imports: FileImportTuple[]): void;
 }>();
 
+defineExpose({
+  scrollToSelected,
+});
+
 function onFilesAdded(imports: FileImportTuple[]): void {
   fileDropZoneRef.value.reset();
   emits('filesAdded', imports);
@@ -78,6 +86,28 @@ function onFilesAdded(imports: FileImportTuple[]): void {
 function hasSelected(): boolean {
   return props.files.hasSelected() || props.folders.hasSelected();
 }
+
+async function scrollToSelected(): Promise<void> {
+  let selectedItem: any = undefined;
+
+  for (const item of folderItems.value) {
+    if (item.props.entry.isSelected) {
+      selectedItem = item;
+      break;
+    }
+  }
+  if (!selectedItem) {
+    for (const item of fileItems.value) {
+      if (item.props.entry.isSelected) {
+        selectedItem = item;
+        break;
+      }
+    }
+  }
+  if (selectedItem) {
+    selectedItem.$el.scrollIntoView();
+  }
+}
 </script>
 
 <style scoped lang="scss">

client/src/components/files/FileListDisplay.vue

@@ -41,6 +41,7 @@
           </ion-list-header>
           <div>
             <file-list-item
+              ref="folderItems"
               v-for="folder in folders.getEntries()"
               :key="folder.id"
               :entry="folder"
@@ -53,6 +54,7 @@
               :is-workspace-reader="ownRole === WorkspaceRole.Reader"
             />
             <file-list-item
+              ref="fileItems"
               v-for="file in files.getEntries()"
               :key="file.id"
               :entry="file"
@@ -101,7 +103,13 @@ const emits = defineEmits<{
   (e: 'filesAdded', imports: FileImportTuple[]): void;
 }>();
 
+defineExpose({
+  scrollToSelected,
+});
+
 const fileDropZoneRef = ref();
+const folderItems = ref();
+const fileItems = ref();
 
 const allSelected = computed(() => {
   const selectedCount = props.files.selectedCount() + props.folders.selectedCount();
@@ -119,6 +127,29 @@ function onFilesAdded(imports: FileImportTuple[]): void {
   emits('filesAdded', imports);
 }
 
+async function scrollToSelected(): Promise<void> {
+  let selectedItem: any = undefined;
+
+  for (const item of folderItems.value) {
+    console.log(item.props.entry);
+    if (item.props.entry.isSelected) {
+      selectedItem = item;
+      break;
+    }
+  }
+  if (!selectedItem) {
+    for (const item of fileItems.value) {
+      if (item.props.entry.isSelected) {
+        selectedItem = item;
+        break;
+      }
+    }
+  }
+  if (selectedItem) {
+    selectedItem.$el.scrollIntoView();
+  }
+}
+
 async function selectAll(selected: boolean): Promise<void> {
   props.files.selectAll(selected);
   props.folders.selectAll(selected);

client/src/views/files/FoldersPage.vue

@@ -160,6 +160,7 @@
               @menu-click="openEntryContextMenu"
               @files-added="startImportFiles"
               :own-role="ownRole"
+              ref="fileDisplay"
             />
           </div>
           <div v-if="displayView === DisplayState.Grid">
@@ -172,6 +173,7 @@
               @menu-click="openEntryContextMenu"
               @files-added="startImportFiles"
               :own-role="ownRole"
+              ref="fileDisplay"
             />
           </div>
         </div>
@@ -251,7 +253,7 @@ import FileContextMenu, { FileAction } from '@/views/files/FileContextMenu.vue';
 import FileDetailsModal from '@/views/files/FileDetailsModal.vue';
 import { IonContent, IonPage, IonText, modalController, popoverController } from '@ionic/vue';
 import { arrowRedo, copy, folderOpen, informationCircle, link, pencil, trashBin } from 'ionicons/icons';
-import { Ref, computed, inject, onMounted, onUnmounted, ref } from 'vue';
+import { Ref, computed, inject, onMounted, onUnmounted, ref, nextTick } from 'vue';
 import { EntrySyncedData, EventData, EventDistributor, EventDistributorKey, Events } from '@/services/eventDistributor';
 
 interface FoldersPageSavedData {
@@ -311,6 +313,7 @@ const folders = ref(new EntryCollection<FolderModel>());
 const files = ref(new EntryCollection<FileModel>());
 const displayView = ref(DisplayState.List);
 const workspaceInfo: Ref<parsec.StartedWorkspaceInfo | null> = ref(null);
+const fileDisplay = ref();
 
 const fileInputsRef = ref();
 let eventCbId: string | null = null;
@@ -740,6 +743,10 @@ async function listFolder(): Promise<void> {
     files.value.smartUpdate(newFiles);
     folders.value.sort(sortProperty.value, sortAsc.value);
     files.value.sort(sortProperty.value, sortAsc.value);
+    if (query.selectFile) {
+      await nextTick();
+      await fileDisplay.value.scrollToSelected();
+    }
   } else {
     // This happens when the handle becomes invalid (if we're logging out for example) and the app tries to refresh at the same
     // time. Logging out while importing files is a good example of that: logging out will cancel the imports which will trigger