@mongoosejs/studio 0.1.17 → 0.1.19

package/frontend/src/models/models.js

@@ -34,6 +34,7 @@ module.exports = app => app.component('models', {
     shouldShowCreateModal: false,
     shouldShowFieldModal: false,
     shouldShowIndexModal: false,
+    shouldShowCollectionInfoModal: false,
     shouldShowUpdateMultipleModal: false,
     shouldShowDeleteMultipleModal: false,
     shouldExport: {},
@@ -44,7 +45,9 @@ module.exports = app => app.component('models', {
     outputType: 'table', // json, table
     hideSidebar: null,
     lastSelectedIndex: null,
-    error: null
+    error: null,
+    showActionsMenu: false,
+    collectionInfo: null
   }),
   created() {
     this.currentModel = this.model;
@@ -53,12 +56,23 @@ module.exports = app => app.component('models', {
   beforeDestroy() {
     document.removeEventListener('scroll', this.onScroll, true);
     window.removeEventListener('popstate', this.onPopState, true);
+    document.removeEventListener('click', this.onOutsideActionsMenuClick, true);
   },
   async mounted() {
     this.onScroll = () => this.checkIfScrolledToBottom();
     document.addEventListener('scroll', this.onScroll, true);
     this.onPopState = () => this.initSearchFromUrl();
     window.addEventListener('popstate', this.onPopState, true);
+    this.onOutsideActionsMenuClick = event => {
+      if (!this.showActionsMenu) {
+        return;
+      }
+      const actionsMenu = this.$refs.actionsMenuContainer;
+      if (actionsMenu && !actionsMenu.contains(event.target)) {
+        this.closeActionsMenu();
+      }
+    };
+    document.addEventListener('click', this.onOutsideActionsMenuClick, true);
     const { models, readyState } = await api.Model.listModels();
     this.models = models;
     if (this.currentModel == null && this.models.length > 0) {
@@ -71,7 +85,7 @@ module.exports = app => app.component('models', {
         this.error = 'No models found and Mongoose is not connected. Check our documentation for more information.';
       }
     }
-
+  
     await this.initSearchFromUrl();
   },
   computed: {
@@ -160,6 +174,7 @@ module.exports = app => app.component('models', {
     async dropIndex(name) {
       const { mongoDBIndexes } = await api.Model.dropIndex({ model: this.currentModel, name });
       this.mongoDBIndexes = mongoDBIndexes;
+      this.$toast.success('Index dropped!');
     },
     async closeCreationModal() {
       this.shouldShowCreateModal = false;
@@ -232,11 +247,38 @@ module.exports = app => app.component('models', {
       }
     },
     async openIndexModal() {
+      this.closeActionsMenu();
       this.shouldShowIndexModal = true;
       const { mongoDBIndexes, schemaIndexes } = await api.Model.getIndexes({ model: this.currentModel });
       this.mongoDBIndexes = mongoDBIndexes;
       this.schemaIndexes = schemaIndexes;
     },
+    toggleActionsMenu() {
+      this.showActionsMenu = !this.showActionsMenu;
+    },
+    closeActionsMenu() {
+      this.showActionsMenu = false;
+    },
+    async openCollectionInfo() {
+      this.closeActionsMenu();
+      this.shouldShowCollectionInfoModal = true;
+      this.collectionInfo = null;
+      const { info } = await api.Model.getCollectionInfo({ model: this.currentModel });
+      this.collectionInfo = info;
+    },
+    async findOldestDocument() {
+      this.closeActionsMenu();
+      const { docs } = await api.Model.getDocuments({
+        model: this.currentModel,
+        limit: 1,
+        sortKey: '_id',
+        sortDirection: 1
+      });
+      if (!Array.isArray(docs) || docs.length === 0) {
+        throw new Error('No documents found');
+      }
+      this.openDocument(docs[0]);
+    },
     isTTLIndex(index) {
       return index != null && index.expireAfterSeconds != null;
     },
@@ -269,6 +311,35 @@ module.exports = app => app.component('models', {
 
       return parts.join(', ');
     },
+    formatCollectionSize(size) {
+      if (typeof size !== 'number') {
+        return 'Unknown';
+      }
+
+      const KB = 1024;
+      const MB = KB * 1024;
+      const GB = MB * 1024;
+      const TB = GB * 1024;
+
+      if (size >= TB) {
+        return `${(size / TB).toFixed(3)} TB`;
+      } else if (size >= GB) {
+        return `${(size / GB).toFixed(3)} GB`;
+      } else if (size >= MB) {
+        return `${(size / MB).toFixed(3)} MB`;
+      } else if (size >= KB) {
+        return `${(size / KB).toFixed(3)} KB`;
+      } else {
+        return `${size.toLocaleString()} bytes`;
+      }
+    },
+    formatNumber(value) {
+      if (typeof value !== 'number') {
+        return 'Unknown';
+      }
+
+      return value.toLocaleString();
+    },
     checkIndexLocation(indexName) {
       if (this.schemaIndexes.find(x => x.name == indexName) && this.mongoDBIndexes.find(x => x.name == indexName)) {
         return 'text-gray-500';
@@ -442,6 +513,7 @@ module.exports = app => app.component('models', {
         this.documents[index] = res.doc;
       }
       this.edittingDoc = null;
+      this.$toast.success('Document updated!');
     },
     handleDocumentClick(document, event) {
       if (this.selectMultiple) {
@@ -505,6 +577,7 @@ module.exports = app => app.component('models', {
       this.lastSelectedIndex = null;
       this.shouldShowDeleteMultipleModal = false;
       this.selectMultiple = false;
+      this.$toast.success('Documents deleted!');
     },
     async updateDocuments() {
       await this.getDocuments();

package/frontend/src/update-document/update-document.js

@@ -28,35 +28,29 @@ module.exports = app => app.component('update-document', {
   methods: {
     async updateDocument() {
       const data = EJSON.serialize(eval(`(${this.editor.getValue()})`));
-      if (this.multiple) {
-        const ids = this.document.map(x => x._id);
-        await api.Model.updateDocuments({ model: this.currentModel, _id: ids, update: data }).catch(err => {
-          if (err.response?.data?.message) {
-            console.log(err.response.data);
-            const message = err.response.data.message.split(': ').slice(1).join(': ');
-            this.errors = message.split(',').map(error => {
-              return error.split(': ').slice(1).join(': ').trim();
-            });
-            throw new Error(err.response?.data?.message);
-          }
-          throw err;
-        });
-      } else {
-        await api.Model.updateDocument({ model: this.currentModel, _id: this.document._id, update: data }).catch(err => {
-          if (err.response?.data?.message) {
-            console.log(err.response.data);
-            const message = err.response.data.message.split(': ').slice(1).join(': ');
-            this.errors = message.split(',').map(error => {
-              return error.split(': ').slice(1).join(': ').trim();
-            });
-            throw new Error(err.response?.data?.message);
-          }
-          throw err;
+      try {
+        if (this.multiple) {
+          const ids = this.document.map(x => x._id);
+          await api.Model.updateDocuments({ model: this.currentModel, _id: ids, update: data });
+        } else {
+          await api.Model.updateDocument({ model: this.currentModel, _id: this.document._id, update: data });
+        }
+        this.errors.length = 0;
+        this.$emit('update');
+        this.$emit('close');
+        this.$nextTick(() => {
+          this.$toast.success(this.multiple ? 'Documents updated!' : 'Document updated!');
         });
+      } catch (err) {
+        if (err.response?.data?.message) {
+          console.log(err.response.data);
+          const message = err.response.data.message.split(': ').slice(1).join(': ');
+          this.errors = message.split(',').map(error => {
+            return error.split(': ').slice(1).join(': ').trim();
+          });
+        }
+        throw err;
       }
-      this.errors.length = 0;
-      this.$emit('update');
-      this.$emit('close');
     }
   },
   mounted: function() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mongoosejs/studio",
-  "version": "0.1.17",
+  "version": "0.1.19",
   "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": {
@@ -9,9 +9,9 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
+    "@ai-sdk/anthropic": "2.x",
     "@ai-sdk/google": "2.x",
     "@ai-sdk/openai": "2.x",
-    "@ai-sdk/anthropic": "2.x",
     "ai": "5.x",
     "archetype": "0.13.1",
     "csv-stringify": "6.3.0",
@@ -20,8 +20,8 @@
     "marked": "15.0.12",
     "node-inspect-extracted": "3.x",
     "tailwindcss": "3.4.0",
-    "vanillatoasts": "^1.6.0",
     "vue": "3.x",
+    "vue-toastification": "^2.0.0-rc.5",
     "webpack": "5.x"
   },
   "peerDependencies": {