From 54200860cac6262b57d66207f7b38a7492c55946 Mon Sep 17 00:00:00 2001
From: Mary Salvi <mary.salvi@kitware.com>
Date: Thu, 12 Oct 2023 12:15:25 -0400
Subject: [PATCH] Eliminate extra watch functions and add index to query

---
 .../FileBrowser/FileBrowserPagination.vue          | 14 +++-----------
 web/src/views/FileBrowserView/FileBrowser.vue      | 14 +++++++++-----
 2 files changed, 12 insertions(+), 16 deletions(-)

diff --git a/web/src/components/FileBrowser/FileBrowserPagination.vue b/web/src/components/FileBrowser/FileBrowserPagination.vue
index 382142b38..321e1dcb7 100644
--- a/web/src/components/FileBrowser/FileBrowserPagination.vue
+++ b/web/src/components/FileBrowser/FileBrowserPagination.vue
@@ -31,6 +31,7 @@
       :max="pageCount"
       :maxlength="pageCount"
       :rules="[pageIsValid]"
+      @change="emit('changePage', pageInput)"
     />
     <span>of {{ pageCount }}</span>
     <v-btn
@@ -53,7 +54,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch } from 'vue';
+import { toRefs } from 'vue';
 
 const props = defineProps({
   page: {
@@ -72,15 +73,6 @@ function pageIsValid(page: number): boolean {
 
 const emit = defineEmits(['changePage']);
 
-// Note: the v-textfield `v-model` returns a string value despite its type being 'number', so
-// we have to handle converting back and forth below.
-const pageInput = ref(props.page.toString());
+const { page: pageInput } = toRefs(props);
 
-watch(() => props.page, (newPage) => { pageInput.value = newPage.toString(); });
-watch(pageInput, (newPage) => {
-  const page = Number(newPage);
-  if (page > 0 && page <= props.pageCount) {
-    emit('changePage', page);
-  }
-});
 </script>
diff --git a/web/src/views/FileBrowserView/FileBrowser.vue b/web/src/views/FileBrowserView/FileBrowser.vue
index 247916b5e..dc611b241 100644
--- a/web/src/views/FileBrowserView/FileBrowser.vue
+++ b/web/src/views/FileBrowserView/FileBrowser.vue
@@ -246,7 +246,7 @@
         v-if="currentDandiset.asset_count"
         :page="page"
         :page-count="pages"
-        @changePage="page = $event;"
+        @changePage="changePage($event)"
       />
     </v-container>
   </div>
@@ -502,7 +502,7 @@ watch(location, () => {
   if (existingLocation === location.value) { return; }
   router.push({
     ...route,
-    query: { location: location.value },
+    query: { location: location.value, page: String(page.value) },
   } as RawLocation);
 });
 
@@ -517,9 +517,13 @@ watch(() => route.query, (newRouteQuery) => {
   // Retrieve with new location
   getItems();
 }, { immediate: true });
-
-// fetch new page of items when a new one is selected
-watch(page, getItems);
+const changePage = (newPage: number) => {
+  page.value = newPage;
+  router.push({
+    ...route,
+    query: { location: location.value, page: String(page.value) },
+  } as RawLocation);
+};
 
 // Fetch dandiset if necessary
 onMounted(() => {