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 1/4] 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(() => {

From 3f855a665c1eb729716d9dce05382b29080606b6 Mon Sep 17 00:00:00 2001
From: Mary Salvi <mary.salvi@kitware.com>
Date: Thu, 12 Oct 2023 12:16:42 -0400
Subject: [PATCH 2/4] Add page value from route to call

---
 web/src/views/FileBrowserView/FileBrowser.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/web/src/views/FileBrowserView/FileBrowser.vue b/web/src/views/FileBrowserView/FileBrowser.vue
index dc611b241..8f9bba8d6 100644
--- a/web/src/views/FileBrowserView/FileBrowser.vue
+++ b/web/src/views/FileBrowserView/FileBrowser.vue
@@ -437,9 +437,10 @@ function showDelete(item: AssetPath) {
 async function getItems() {
   updating.value = true;
   let resp;
+  const currentPage = Number(route.query.page) || page.value;
   try {
     resp = await dandiRest.assetPaths(
-      props.identifier, props.version, location.value, page.value, FILES_PER_PAGE,
+      props.identifier, props.version, location.value, currentPage, FILES_PER_PAGE,
     );
   } catch (e) {
     if (axios.isAxiosError(e) && e.response?.status === 404) {

From 6e781533347d93266375292b4def17674a7f1236 Mon Sep 17 00:00:00 2001
From: Mary Salvi <mary.salvi@kitware.com>
Date: Mon, 16 Oct 2023 17:59:49 -0400
Subject: [PATCH 3/4] Fix text field to update from url when available

---
 .../components/FileBrowser/FileBrowserPagination.vue  | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/web/src/components/FileBrowser/FileBrowserPagination.vue b/web/src/components/FileBrowser/FileBrowserPagination.vue
index 321e1dcb7..6b110251e 100644
--- a/web/src/components/FileBrowser/FileBrowserPagination.vue
+++ b/web/src/components/FileBrowser/FileBrowserPagination.vue
@@ -19,10 +19,9 @@
       <v-icon>mdi-chevron-left</v-icon>
     </v-btn>
     <v-text-field
-      v-model="pageInput"
+      v-model.number="pageInput"
       hide-details
       single-line
-      type="number"
       dense
       style="max-width: 5%;"
       class="pa-0 mx-2 my-0"
@@ -33,6 +32,7 @@
       :rules="[pageIsValid]"
       @change="emit('changePage', pageInput)"
     />
+
     <span>of {{ pageCount }}</span>
     <v-btn
       class="mx-2"
@@ -54,7 +54,8 @@
 </template>
 
 <script setup lang="ts">
-import { toRefs } from 'vue';
+import { toRef } from 'vue';
+import { useRoute } from 'vue-router/composables';
 
 const props = defineProps({
   page: {
@@ -67,12 +68,14 @@ const props = defineProps({
   },
 });
 
+const route = useRoute();
+
 function pageIsValid(page: number): boolean {
   return page > 0 && page <= props.pageCount;
 }
 
 const emit = defineEmits(['changePage']);
 
-const { page: pageInput } = toRefs(props);
+const pageInput = Number(route.query.page) || toRef(props, 'page');
 
 </script>

From 6a6e4bd9384c40ab89938a3e099b1f013dcdfd9d Mon Sep 17 00:00:00 2001
From: Mary Salvi <mary.salvi@kitware.com>
Date: Mon, 16 Oct 2023 18:04:28 -0400
Subject: [PATCH 4/4] Change function syntax to match existing code

---
 web/src/views/FileBrowserView/FileBrowser.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/web/src/views/FileBrowserView/FileBrowser.vue b/web/src/views/FileBrowserView/FileBrowser.vue
index 8f9bba8d6..aec7e9d48 100644
--- a/web/src/views/FileBrowserView/FileBrowser.vue
+++ b/web/src/views/FileBrowserView/FileBrowser.vue
@@ -518,13 +518,14 @@ watch(() => route.query, (newRouteQuery) => {
   // Retrieve with new location
   getItems();
 }, { immediate: true });
-const changePage = (newPage: number) => {
+
+function changePage(newPage: number) {
   page.value = newPage;
   router.push({
     ...route,
     query: { location: location.value, page: String(page.value) },
   } as RawLocation);
-};
+}
 
 // Fetch dandiset if necessary
 onMounted(() => {