@mongoosejs/studio 0.0.104 → 0.0.106

package/frontend/public/app.js

@@ -330,7 +330,17 @@ const vanillatoasts = __webpack_require__(/*! vanillatoasts */ "./node_modules/v
 module.exports = app => app.component('chat-message-script', {
   template,
   props: ['message', 'script', 'language'],
-  data: () => ({ activeTab: 'code', showDetailModal: false }),
+  data() {
+    return {
+      activeTab: 'code',
+      showDetailModal: false,
+      showCreateDashboardModal: false,
+      newDashboardTitle: '',
+      dashboardCode: '',
+      createError: null,
+      dashboardEditor: null
+    };
+  },
   computed: {
     styleForMessage() {
       return this.message.role === 'user' ? 'bg-gray-100' : '';
@@ -348,6 +358,42 @@ module.exports = app => app.component('chat-message-script', {
     openDetailModal() {
       this.showDetailModal = true;
     },
+    openCreateDashboardModal() {
+      this.newDashboardTitle = '';
+      this.dashboardCode = this.script;
+      this.createErrors = [];
+      this.showCreateDashboardModal = true;
+      this.$nextTick(() => {
+        if (this.dashboardEditor) {
+          this.dashboardEditor.toTextArea();
+        }
+        this.$refs.dashboardCodeEditor.value = this.dashboardCode;
+        this.dashboardEditor = CodeMirror.fromTextArea(this.$refs.dashboardCodeEditor, {
+          mode: 'javascript',
+          lineNumbers: true
+        });
+        this.dashboardEditor.on('change', () => {
+          this.dashboardCode = this.dashboardEditor.getValue();
+        });
+      });
+    },
+    async createDashboardFromScript() {
+      this.dashboardCode = this.dashboardEditor.getValue();
+      const { dashboard } = await api.Dashboard.createDashboard({
+        code: this.dashboardCode,
+        title: this.newDashboardTitle
+      }).catch(err => {
+        if (err.response?.data?.message) {
+          const message = err.response.data.message.split(': ').slice(1).join(': ');
+          this.createError = message;
+          throw new Error(err.response?.data?.message);
+        }
+        throw err;
+      });
+      this.createError = null;
+      this.showCreateDashboardModal = false;
+      this.$router.push('/dashboard/' + dashboard._id);
+    },
     async copyOutput() {
       await navigator.clipboard.writeText(this.message.executionResult.output);
       vanillatoasts.create({
@@ -359,6 +405,14 @@ module.exports = app => app.component('chat-message-script', {
       });
     }
   },
+  watch: {
+    showCreateDashboardModal(val) {
+      if (!val && this.dashboardEditor) {
+        this.dashboardEditor.toTextArea();
+        this.dashboardEditor = null;
+      }
+    }
+  },
   mounted() {
     Prism.highlightElement(this.$refs.code);
     if (this.message.executionResult?.output) {
@@ -2346,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;
@@ -2430,7 +2490,7 @@ module.exports = app => app.component('models', {
       }
       return filteredDoc;
     },
-    async onScroll() {
+    async checkIfScrolledToBottom() {
       if (this.status === 'loading' || this.loadedAllDocs) {
         return;
       }
@@ -2473,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;
@@ -3962,7 +4029,7 @@ module.exports = "<button v-bind=\"attrsToBind\" :disabled=\"isDisabled\" @click
 /***/ ((module) => {
 
 "use strict";
-module.exports = "<div class=\"relative border rounded bg-gray-100 text-black text-sm overflow-hidden\">\n  <div class=\"flex border-b pt-[1px] text-xs font-medium bg-gray-200\">\n    <button\n      class=\"px-3 py-1 border-r border-gray-300 hover:bg-green-300\"\n      :class=\"{'bg-gray-300': activeTab === 'code', 'bg-green-300': activeTab === 'code'}\"\n      @click=\"activeTab = 'code'\">\n      Code\n    </button>\n    <button\n      class=\"px-3 py-1 hover:bg-green-300\"\n      :class=\"{'bg-green-300': activeTab === 'output'}\"\n      @click=\"activeTab = 'output'\">\n      Output\n    </button>\n    <div class=\"ml-auto mr-1 flex\">\n      <button\n        v-if=\"activeTab === 'output'\"\n        class=\"px-2 py-1 mr-1 text-xs bg-gray-500 text-white border-none rounded cursor-pointer hover:bg-gray-600 transition-colors flex items-center\"\n        @click=\"copyOutput\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-3 w-3\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3\" />\n        </svg>\n      </button>\n      <button\n        v-if=\"activeTab === 'output'\"\n        class=\"px-2 py-1 mr-1 text-xs bg-blue-500 text-white border-none rounded cursor-pointer hover:bg-blue-600 transition-colors flex items-center\"\n        @click=\"openDetailModal\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-3 w-3\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 1v4m0 0h-4m4 0l-5-5\" />\n        </svg>\n      </button>\n      <async-button\n        class=\"px-2 py-1 text-xs bg-green-500 text-white border-none rounded cursor-pointer hover:bg-green-600 transition-colors disabled:bg-gray-400\"\n        @click=\"executeScript(message, script)\">\n        Execute\n      </async-button>\n    </div>\n  </div>\n\n  <pre class=\"p-3 whitespace-pre-wrap max-h-[50vh] max-w-[calc(100vw-4rem)] lg:max-w-[calc(100vw-20rem)] overflow-y-auto\" v-show=\"activeTab === 'code'\"><code v-text=\"script\" ref=\"code\" :class=\"'language-' + language\"></code></pre>\n\n  <div class=\"p-3 whitespace-pre-wrap max-h-[50vh] overflow-y-auto bg-white border-t max-w-[calc(100vw-4rem)] lg:max-w-[calc(100vw-20rem)] relative\" v-show=\"activeTab === 'output'\">\n    <dashboard-chart v-if=\"message.executionResult?.output?.$chart\" :value=\"message.executionResult?.output\" />\n    <pre v-else>{{ message.executionResult?.output || 'No output' }}</pre>\n  </div>\n\n  <modal ref=\"outputModal\" v-if=\"showDetailModal\" containerClass=\"!h-[90vh] !w-[90vw]\">\n    <template #body>\n      <div class=\"absolute font-mono right-1 top-1 cursor-pointer text-xl\" @click=\"showDetailModal = false;\">&times;</div>\n      <div class=\"h-full overflow-auto\">\n        <dashboard-chart v-if=\"message.executionResult?.output?.$chart\" :value=\"message.executionResult?.output\" :responsive=\"true\" />\n        <pre v-else class=\"whitespace-pre-wrap\">{{ message.executionResult?.output || 'No output' }}</pre>\n      </div>\n    </template>\n  </modal>\n</div>\n";
+module.exports = "<div class=\"relative border rounded bg-gray-100 text-black text-sm overflow-hidden\">\n  <div class=\"flex border-b pt-[1px] text-xs font-medium bg-gray-200\">\n    <button\n      class=\"px-3 py-1 border-r border-gray-300 hover:bg-green-300\"\n      :class=\"{'bg-gray-300': activeTab === 'code', 'bg-green-300': activeTab === 'code'}\"\n      @click=\"activeTab = 'code'\">\n      Code\n    </button>\n    <button\n      class=\"px-3 py-1 hover:bg-green-300\"\n      :class=\"{'bg-green-300': activeTab === 'output'}\"\n      @click=\"activeTab = 'output'\">\n      Output\n    </button>\n    <div class=\"ml-auto mr-1 flex\">\n      <button\n        v-if=\"activeTab === 'output'\"\n        class=\"px-2 py-1 mr-1 text-xs bg-gray-500 text-white border-none rounded cursor-pointer hover:bg-gray-600 transition-colors flex items-center\"\n        @click=\"copyOutput\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-3 w-3\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3\" />\n        </svg>\n      </button>\n      <button\n        v-if=\"activeTab === 'output'\"\n        class=\"px-2 py-1 mr-1 text-xs bg-blue-500 text-white border-none rounded cursor-pointer hover:bg-blue-600 transition-colors flex items-center\"\n        @click=\"openDetailModal\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-3 w-3\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 1v4m0 0h-4m4 0l-5-5\" />\n        </svg>\n      </button>\n      <button\n        class=\"px-2 py-1 mr-1 text-xs bg-ultramarine-500 text-white border-none rounded cursor-pointer hover:bg-ultramarine-600 transition-colors flex items-center\"\n        @click=\"openCreateDashboardModal\">\n        Create Dashboard\n      </button>\n      <async-button\n        class=\"px-2 py-1 text-xs bg-green-500 text-white border-none rounded cursor-pointer hover:bg-green-600 transition-colors disabled:bg-gray-400\"\n        @click=\"executeScript(message, script)\">\n        Execute\n      </async-button>\n    </div>\n  </div>\n\n  <pre class=\"p-3 whitespace-pre-wrap max-h-[50vh] max-w-[calc(100vw-4rem)] lg:max-w-[calc(100vw-20rem)] overflow-y-auto\" v-show=\"activeTab === 'code'\"><code v-text=\"script\" ref=\"code\" :class=\"'language-' + language\"></code></pre>\n\n  <div class=\"p-3 whitespace-pre-wrap max-h-[50vh] overflow-y-auto bg-white border-t max-w-[calc(100vw-4rem)] lg:max-w-[calc(100vw-20rem)] relative\" v-show=\"activeTab === 'output'\">\n    <dashboard-chart v-if=\"message.executionResult?.output?.$chart\" :value=\"message.executionResult?.output\" />\n    <pre v-else>{{ message.executionResult?.output || 'No output' }}</pre>\n  </div>\n\n  <modal ref=\"outputModal\" v-if=\"showDetailModal\" containerClass=\"!h-[90vh] !w-[90vw]\">\n    <template #body>\n      <div class=\"absolute font-mono right-1 top-1 cursor-pointer text-xl\" @click=\"showDetailModal = false;\">&times;</div>\n      <div class=\"h-full overflow-auto\">\n        <dashboard-chart v-if=\"message.executionResult?.output?.$chart\" :value=\"message.executionResult?.output\" :responsive=\"true\" />\n        <pre v-else class=\"whitespace-pre-wrap\">{{ message.executionResult?.output || 'No output' }}</pre>\n      </div>\n    </template>\n  </modal>\n  <modal v-if=\"showCreateDashboardModal\">\n    <template #body>\n      <div class=\"modal-exit\" @click=\"showCreateDashboardModal = false\">&times;</div>\n      <div>\n        <div class=\"mt-4 text-gray-900 font-semibold\">Create Dashboard</div>\n        <div class=\"mt-4\">\n          <label class=\"block text-sm font-medium leading-6 text-gray-900\">Title</label>\n          <div class=\"mt-2\">\n            <div class=\"w-full flex rounded-md shadow-sm ring-1 ring-inset ring-gray-300 focus-within:ring-2 focus-within:ring-inset focus-within:ring-teal-600\">\n              <input type=\"text\" v-model=\"newDashboardTitle\" class=\"outline-none block flex-1 border-0 bg-transparent py-1.5 pl-1 text-gray-900 placeholder:text-gray-400 focus:ring-0 sm:text-sm sm:leading-6\" placeholder=\"My Dashboard\">\n            </div>\n          </div>\n        </div>\n        <div class=\"my-4\">\n          <label class=\"block text-sm font-medium leading-6 text-gray-900\">Code</label>\n          <div class=\"border border-gray-200\">\n            <textarea class=\"p-2 h-[300px] w-full\" ref=\"dashboardCodeEditor\"></textarea>\n          </div>\n        </div>\n        <async-button\n          @click=\"createDashboardFromScript\"\n          class=\"rounded-md bg-teal-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-teal-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-600\">\n          Submit\n        </async-button>\n        <div v-if=\"createErrors.length > 0\" class=\"rounded-md bg-red-50 p-4 mt-1\">\n          <div class=\"flex\">\n            <div class=\"flex-shrink-0\">\n              <svg class=\"h-5 w-5 text-red-400\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n                <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z\" clip-rule=\"evenodd\" />\n              </svg>\n            </div>\n            <div class=\"ml-3\">\n              <h3 class=\"text-sm font-medium text-red-800\">Error</h3>\n              <div class=\"mt-2 text-sm text-red-700\">\n                {{createError}}\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </template>\n  </modal>\n</div>\n";
 
 /***/ }),
 
@@ -14619,7 +14686,7 @@ var bson = /*#__PURE__*/Object.freeze({
 /***/ ((module) => {
 
 "use strict";
-module.exports = /*#__PURE__*/JSON.parse('{"name":"@mongoosejs/studio","version":"0.0.104","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/chat/chat-message-script/chat-message-script.html

@@ -29,6 +29,11 @@
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 1v4m0 0h-4m4 0l-5-5" />
         </svg>
       </button>
+      <button
+        class="px-2 py-1 mr-1 text-xs bg-ultramarine-500 text-white border-none rounded cursor-pointer hover:bg-ultramarine-600 transition-colors flex items-center"
+        @click="openCreateDashboardModal">
+        Create Dashboard
+      </button>
       <async-button
         class="px-2 py-1 text-xs bg-green-500 text-white border-none rounded cursor-pointer hover:bg-green-600 transition-colors disabled:bg-gray-400"
         @click="executeScript(message, script)">
@@ -53,4 +58,46 @@
       </div>
     </template>
   </modal>
+  <modal v-if="showCreateDashboardModal">
+    <template #body>
+      <div class="modal-exit" @click="showCreateDashboardModal = false">&times;</div>
+      <div>
+        <div class="mt-4 text-gray-900 font-semibold">Create Dashboard</div>
+        <div class="mt-4">
+          <label class="block text-sm font-medium leading-6 text-gray-900">Title</label>
+          <div class="mt-2">
+            <div class="w-full flex rounded-md shadow-sm ring-1 ring-inset ring-gray-300 focus-within:ring-2 focus-within:ring-inset focus-within:ring-teal-600">
+              <input type="text" v-model="newDashboardTitle" class="outline-none block flex-1 border-0 bg-transparent py-1.5 pl-1 text-gray-900 placeholder:text-gray-400 focus:ring-0 sm:text-sm sm:leading-6" placeholder="My Dashboard">
+            </div>
+          </div>
+        </div>
+        <div class="my-4">
+          <label class="block text-sm font-medium leading-6 text-gray-900">Code</label>
+          <div class="border border-gray-200">
+            <textarea class="p-2 h-[300px] w-full" ref="dashboardCodeEditor"></textarea>
+          </div>
+        </div>
+        <async-button
+          @click="createDashboardFromScript"
+          class="rounded-md bg-teal-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-teal-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-600">
+          Submit
+        </async-button>
+        <div v-if="createErrors.length > 0" class="rounded-md bg-red-50 p-4 mt-1">
+          <div class="flex">
+            <div class="flex-shrink-0">
+              <svg class="h-5 w-5 text-red-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z" clip-rule="evenodd" />
+              </svg>
+            </div>
+            <div class="ml-3">
+              <h3 class="text-sm font-medium text-red-800">Error</h3>
+              <div class="mt-2 text-sm text-red-700">
+                {{createError}}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </modal>
 </div>

package/frontend/src/chat/chat-message-script/chat-message-script.js

@@ -7,7 +7,17 @@ const vanillatoasts = require('vanillatoasts');
 module.exports = app => app.component('chat-message-script', {
   template,
   props: ['message', 'script', 'language'],
-  data: () => ({ activeTab: 'code', showDetailModal: false }),
+  data() {
+    return {
+      activeTab: 'code',
+      showDetailModal: false,
+      showCreateDashboardModal: false,
+      newDashboardTitle: '',
+      dashboardCode: '',
+      createError: null,
+      dashboardEditor: null
+    };
+  },
   computed: {
     styleForMessage() {
       return this.message.role === 'user' ? 'bg-gray-100' : '';
@@ -25,6 +35,42 @@ module.exports = app => app.component('chat-message-script', {
     openDetailModal() {
       this.showDetailModal = true;
     },
+    openCreateDashboardModal() {
+      this.newDashboardTitle = '';
+      this.dashboardCode = this.script;
+      this.createErrors = [];
+      this.showCreateDashboardModal = true;
+      this.$nextTick(() => {
+        if (this.dashboardEditor) {
+          this.dashboardEditor.toTextArea();
+        }
+        this.$refs.dashboardCodeEditor.value = this.dashboardCode;
+        this.dashboardEditor = CodeMirror.fromTextArea(this.$refs.dashboardCodeEditor, {
+          mode: 'javascript',
+          lineNumbers: true
+        });
+        this.dashboardEditor.on('change', () => {
+          this.dashboardCode = this.dashboardEditor.getValue();
+        });
+      });
+    },
+    async createDashboardFromScript() {
+      this.dashboardCode = this.dashboardEditor.getValue();
+      const { dashboard } = await api.Dashboard.createDashboard({
+        code: this.dashboardCode,
+        title: this.newDashboardTitle
+      }).catch(err => {
+        if (err.response?.data?.message) {
+          const message = err.response.data.message.split(': ').slice(1).join(': ');
+          this.createError = message;
+          throw new Error(err.response?.data?.message);
+        }
+        throw err;
+      });
+      this.createError = null;
+      this.showCreateDashboardModal = false;
+      this.$router.push('/dashboard/' + dashboard._id);
+    },
     async copyOutput() {
       await navigator.clipboard.writeText(this.message.executionResult.output);
       vanillatoasts.create({
@@ -36,6 +82,14 @@ module.exports = app => app.component('chat-message-script', {
       });
     }
   },
+  watch: {
+    showCreateDashboardModal(val) {
+      if (!val && this.dashboardEditor) {
+        this.dashboardEditor.toTextArea();
+        this.dashboardEditor = null;
+      }
+    }
+  },
   mounted() {
     Prism.highlightElement(this.$refs.code);
     if (this.message.executionResult?.output) {

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.104",
+  "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": {