@mongoosejs/studio 0.1.17 → 0.1.18

package/frontend/src/models/models.js

@@ -3,6 +3,7 @@
 const api = require('../api');
 const template = require('./models.html');
 const mpath = require('mpath');
+const vanillatoasts = require('vanillatoasts');
 
 const appendCSS = require('../appendCSS');
 appendCSS(require('./models.css'));
@@ -34,6 +35,7 @@ module.exports = app => app.component('models', {
     shouldShowCreateModal: false,
     shouldShowFieldModal: false,
     shouldShowIndexModal: false,
+    shouldShowCollectionInfoModal: false,
     shouldShowUpdateMultipleModal: false,
     shouldShowDeleteMultipleModal: false,
     shouldExport: {},
@@ -44,7 +46,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 +57,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) {
@@ -160,6 +175,13 @@ module.exports = app => app.component('models', {
     async dropIndex(name) {
       const { mongoDBIndexes } = await api.Model.dropIndex({ model: this.currentModel, name });
       this.mongoDBIndexes = mongoDBIndexes;
+      vanillatoasts.create({
+        title: 'Index dropped!',
+        type: 'success',
+        timeout: 3000,
+        icon: 'images/success.png',
+        positionClass: 'bottomRight'
+      });
     },
     async closeCreationModal() {
       this.shouldShowCreateModal = false;
@@ -232,11 +254,25 @@ 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;
+    },
     isTTLIndex(index) {
       return index != null && index.expireAfterSeconds != null;
     },
@@ -269,6 +305,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 +507,13 @@ module.exports = app => app.component('models', {
         this.documents[index] = res.doc;
       }
       this.edittingDoc = null;
+      vanillatoasts.create({
+        title: 'Document updated!',
+        type: 'success',
+        timeout: 3000,
+        icon: 'images/success.png',
+        positionClass: 'bottomRight'
+      });
     },
     handleDocumentClick(document, event) {
       if (this.selectMultiple) {
@@ -505,6 +577,13 @@ module.exports = app => app.component('models', {
       this.lastSelectedIndex = null;
       this.shouldShowDeleteMultipleModal = false;
       this.selectMultiple = false;
+      vanillatoasts.create({
+        title: 'Documents deleted!',
+        type: 'success',
+        timeout: 3000,
+        icon: 'images/success.png',
+        positionClass: 'bottomRight'
+      });
     },
     async updateDocuments() {
       await this.getDocuments();

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

@@ -1,6 +1,7 @@
 'use strict';
 
 const api = require('../api');
+const vanillatoasts = require('vanillatoasts');
 
 const { BSON, EJSON } = require('mongodb/lib/bson');
 
@@ -28,35 +29,35 @@ 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(() => {
+          vanillatoasts.create({
+            title: this.multiple ? 'Documents updated!' : 'Document updated!',
+            type: 'success',
+            timeout: 3000,
+            icon: 'images/success.png',
+            positionClass: 'bottomRight'
+          });
         });
+      } 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.18",
   "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": {