@mongoosejs/studio 0.0.105 → 0.0.106

package/frontend/public/app.js

@@ -2400,41 +2400,47 @@ module.exports = app => app.component('models', {
     this.currentModel = this.model;
   },
   beforeDestroy() {
-    document.removeEventListener('scroll', () => this.onScroll(), true);
+    document.removeEventListener('scroll', this.onScroll, true);
+    window.removeEventListener('popstate', this.onPopState, true);
   },
   async mounted() {
-    document.addEventListener('scroll', () => this.onScroll(), true);
+    this.onScroll = () => this.checkIfScrolledToBottom();
+    document.addEventListener('scroll', this.onScroll, true);
+    this.onPopState = () => this.initSearchFromUrl();
+    window.addEventListener('popstate', this.onPopState, true);
     this.models = await api.Model.listModels().then(res => res.models);
     if (this.currentModel == null && this.models.length > 0) {
       this.currentModel = this.models[0];
     }
 
-    this.query = Object.assign({}, this.$route.query); // important that this is here before the if statements
-    if (this.$route.query?.search) {
-      this.searchText = this.$route.query.search;
-      this.filter = eval(`(${this.$route.query.search})`);
-      this.filter = EJSON.stringify(this.filter);
-    }
-    if (this.$route.query?.sort) {
-      const sort = eval(`(${this.$route.query.sort})`);
-      const path = Object.keys(sort)[0];
-      const num = Object.values(sort)[0];
-      this.sortDocs(num, path);
-    }
-
-
-    if (this.currentModel != null) {
-      await this.getDocuments();
-    }
-    if (this.$route.query?.fields) {
-      const filter = this.$route.query.fields.split(',');
-      this.filteredPaths = this.filteredPaths.filter(x => filter.includes(x.path));
-    }
-
-
-    this.status = 'loaded';
+    await this.initSearchFromUrl();
   },
   methods: {
+    async initSearchFromUrl() {
+      this.status = 'loading';
+      this.query = Object.assign({}, this.$route.query); // important that this is here before the if statements
+      if (this.$route.query?.search) {
+        this.searchText = this.$route.query.search;
+        this.filter = eval(`(${this.$route.query.search})`);
+        this.filter = EJSON.stringify(this.filter);
+      }
+      if (this.$route.query?.sort) {
+        const sort = eval(`(${this.$route.query.sort})`);
+        const path = Object.keys(sort)[0];
+        const num = Object.values(sort)[0];
+        this.sortDocs(num, path);
+      }
+
+
+      if (this.currentModel != null) {
+        await this.getDocuments();
+      }
+      if (this.$route.query?.fields) {
+        const filter = this.$route.query.fields.split(',');
+        this.filteredPaths = this.filteredPaths.filter(x => filter.includes(x.path));
+      }
+      this.status = 'loaded';
+    },
     async dropIndex(name) {
       const { mongoDBIndexes } = await api.Model.dropIndex({ model: this.currentModel, name });
       this.mongoDBIndexes = mongoDBIndexes;
@@ -2484,7 +2490,7 @@ module.exports = app => app.component('models', {
       }
       return filteredDoc;
     },
-    async onScroll() {
+    async checkIfScrolledToBottom() {
       if (this.status === 'loading' || this.loadedAllDocs) {
         return;
       }
@@ -2527,13 +2533,20 @@ module.exports = app => app.component('models', {
         this.filter = eval(`(${this.searchText})`);
         this.filter = EJSON.stringify(this.filter);
         this.query.search = this.searchText;
-        this.$router.push({ query: this.query });
+        const query = this.query;
+        const newUrl = this.$router.resolve({ query }).href;
+        window.history.pushState(null, '', newUrl);
       } else {
         this.filter = {};
         delete this.query.search;
-        this.$router.push({ query: this.query });
+        const query = this.query;
+        const newUrl = this.$router.resolve({ query }).href;
+        window.history.pushState(null, '', newUrl);
       }
+      this.documents = [];
+      this.status = 'loading';
       await this.loadMoreDocuments();
+      this.status = 'loaded';
     },
     async openIndexModal() {
       this.shouldShowIndexModal = true;
@@ -14673,7 +14686,7 @@ var bson = /*#__PURE__*/Object.freeze({
 /***/ ((module) => {
 
 "use strict";
-module.exports = /*#__PURE__*/JSON.parse('{"name":"@mongoosejs/studio","version":"0.0.105","description":"A sleek, powerful MongoDB UI with built-in dashboarding and auth, seamlessly integrated with your Express, Vercel, or Netlify app.","homepage":"https://studio.mongoosejs.io/","repository":{"type":"git","url":"https://github.com/mongoosejs/studio"},"dependencies":{"archetype":"0.13.1","csv-stringify":"6.3.0","ejson":"^2.2.3","extrovert":"0.0.26","marked":"15.0.12","node-inspect-extracted":"3.x","tailwindcss":"3.4.0","vanillatoasts":"^1.6.0","vue":"3.x","webpack":"5.x"},"peerDependencies":{"bson":"^5.5.1 || 6.x","express":"4.x","mongoose":"7.x || 8.x"},"devDependencies":{"@masteringjs/eslint-config":"0.1.1","axios":"1.2.2","eslint":"9.30.0","express":"4.x","mocha":"10.2.0","mongoose":"8.x"},"scripts":{"lint":"eslint .","tailwind":"tailwindcss -o ./frontend/public/tw.css","tailwind:watch":"tailwindcss -o ./frontend/public/tw.css --watch","test":"mocha test/*.test.js"}}');
+module.exports = /*#__PURE__*/JSON.parse('{"name":"@mongoosejs/studio","version":"0.0.106","description":"A sleek, powerful MongoDB UI with built-in dashboarding and auth, seamlessly integrated with your Express, Vercel, or Netlify app.","homepage":"https://studio.mongoosejs.io/","repository":{"type":"git","url":"https://github.com/mongoosejs/studio"},"dependencies":{"archetype":"0.13.1","csv-stringify":"6.3.0","ejson":"^2.2.3","extrovert":"0.0.26","marked":"15.0.12","node-inspect-extracted":"3.x","tailwindcss":"3.4.0","vanillatoasts":"^1.6.0","vue":"3.x","webpack":"5.x"},"peerDependencies":{"bson":"^5.5.1 || 6.x","express":"4.x","mongoose":"7.x || 8.x"},"devDependencies":{"@masteringjs/eslint-config":"0.1.1","axios":"1.2.2","eslint":"9.30.0","express":"4.x","mocha":"10.2.0","mongoose":"8.x"},"scripts":{"lint":"eslint .","tailwind":"tailwindcss -o ./frontend/public/tw.css","tailwind:watch":"tailwindcss -o ./frontend/public/tw.css --watch","test":"mocha test/*.test.js"}}');
 
 /***/ })
 

package/frontend/src/models/models.js

@@ -58,41 +58,47 @@ module.exports = app => app.component('models', {
     this.currentModel = this.model;
   },
   beforeDestroy() {
-    document.removeEventListener('scroll', () => this.onScroll(), true);
+    document.removeEventListener('scroll', this.onScroll, true);
+    window.removeEventListener('popstate', this.onPopState, true);
   },
   async mounted() {
-    document.addEventListener('scroll', () => this.onScroll(), true);
+    this.onScroll = () => this.checkIfScrolledToBottom();
+    document.addEventListener('scroll', this.onScroll, true);
+    this.onPopState = () => this.initSearchFromUrl();
+    window.addEventListener('popstate', this.onPopState, true);
     this.models = await api.Model.listModels().then(res => res.models);
     if (this.currentModel == null && this.models.length > 0) {
       this.currentModel = this.models[0];
     }
 
-    this.query = Object.assign({}, this.$route.query); // important that this is here before the if statements
-    if (this.$route.query?.search) {
-      this.searchText = this.$route.query.search;
-      this.filter = eval(`(${this.$route.query.search})`);
-      this.filter = EJSON.stringify(this.filter);
-    }
-    if (this.$route.query?.sort) {
-      const sort = eval(`(${this.$route.query.sort})`);
-      const path = Object.keys(sort)[0];
-      const num = Object.values(sort)[0];
-      this.sortDocs(num, path);
-    }
-
-
-    if (this.currentModel != null) {
-      await this.getDocuments();
-    }
-    if (this.$route.query?.fields) {
-      const filter = this.$route.query.fields.split(',');
-      this.filteredPaths = this.filteredPaths.filter(x => filter.includes(x.path));
-    }
-
-
-    this.status = 'loaded';
+    await this.initSearchFromUrl();
   },
   methods: {
+    async initSearchFromUrl() {
+      this.status = 'loading';
+      this.query = Object.assign({}, this.$route.query); // important that this is here before the if statements
+      if (this.$route.query?.search) {
+        this.searchText = this.$route.query.search;
+        this.filter = eval(`(${this.$route.query.search})`);
+        this.filter = EJSON.stringify(this.filter);
+      }
+      if (this.$route.query?.sort) {
+        const sort = eval(`(${this.$route.query.sort})`);
+        const path = Object.keys(sort)[0];
+        const num = Object.values(sort)[0];
+        this.sortDocs(num, path);
+      }
+
+
+      if (this.currentModel != null) {
+        await this.getDocuments();
+      }
+      if (this.$route.query?.fields) {
+        const filter = this.$route.query.fields.split(',');
+        this.filteredPaths = this.filteredPaths.filter(x => filter.includes(x.path));
+      }
+      this.status = 'loaded';
+    },
     async dropIndex(name) {
       const { mongoDBIndexes } = await api.Model.dropIndex({ model: this.currentModel, name });
       this.mongoDBIndexes = mongoDBIndexes;
@@ -142,7 +148,7 @@ module.exports = app => app.component('models', {
       }
       return filteredDoc;
     },
-    async onScroll() {
+    async checkIfScrolledToBottom() {
       if (this.status === 'loading' || this.loadedAllDocs) {
         return;
       }
@@ -185,13 +191,20 @@ module.exports = app => app.component('models', {
         this.filter = eval(`(${this.searchText})`);
         this.filter = EJSON.stringify(this.filter);
         this.query.search = this.searchText;
-        this.$router.push({ query: this.query });
+        const query = this.query;
+        const newUrl = this.$router.resolve({ query }).href;
+        window.history.pushState(null, '', newUrl);
       } else {
         this.filter = {};
         delete this.query.search;
-        this.$router.push({ query: this.query });
+        const query = this.query;
+        const newUrl = this.$router.resolve({ query }).href;
+        window.history.pushState(null, '', newUrl);
       }
+      this.documents = [];
+      this.status = 'loading';
       await this.loadMoreDocuments();
+      this.status = 'loaded';
     },
     async openIndexModal() {
       this.shouldShowIndexModal = true;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mongoosejs/studio",
-  "version": "0.0.105",
+  "version": "0.0.106",
   "description": "A sleek, powerful MongoDB UI with built-in dashboarding and auth, seamlessly integrated with your Express, Vercel, or Netlify app.",
   "homepage": "https://studio.mongoosejs.io/",
   "repository": {