@mongoosejs/studio 0.0.82 → 0.0.84

package/frontend/public/tw.css

@@ -914,6 +914,10 @@ video {
   max-width: 64rem;
 }
 
+.max-w-\[70vw\] {
+  max-width: 70vw;
+}
+
 .max-w-\[calc\(100\%-6\.5rem\)\] {
   max-width: calc(100% - 6.5rem);
 }
@@ -1231,6 +1235,16 @@ video {
   border-color: rgb(63 83 255 / var(--tw-border-opacity));
 }
 
+.border-red-500 {
+  --tw-border-opacity: 1;
+  border-color: rgb(239 68 68 / var(--tw-border-opacity));
+}
+
+.bg-blue-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(191 219 254 / var(--tw-bg-opacity));
+}
+
 .bg-blue-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(59 130 246 / var(--tw-bg-opacity));
@@ -1326,6 +1340,11 @@ video {
   background-color: rgb(239 68 68 / var(--tw-bg-opacity));
 }
 
+.bg-red-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(220 38 38 / var(--tw-bg-opacity));
+}
+
 .bg-slate-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(241 245 249 / var(--tw-bg-opacity));
@@ -1380,6 +1399,11 @@ video {
   background-color: rgb(253 224 71 / var(--tw-bg-opacity));
 }
 
+.bg-ultramarine-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(63 83 255 / var(--tw-bg-opacity));
+}
+
 .p-1 {
   padding: 0.25rem;
 }
@@ -1722,6 +1746,12 @@ video {
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 
+.ring-2 {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
 .ring-inset {
   --tw-ring-inset: inset;
 }
@@ -1747,6 +1777,16 @@ video {
   --tw-ring-color: rgb(22 163 74 / 0.2);
 }
 
+.ring-yellow-800 {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(133 77 14 / var(--tw-ring-opacity));
+}
+
+.ring-yellow-300 {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(253 224 71 / var(--tw-ring-opacity));
+}
+
 .filter {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
@@ -1850,6 +1890,11 @@ video {
   background-color: rgb(22 163 74 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-red-500:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(239 68 68 / var(--tw-bg-opacity));
+}
+
 .hover\:bg-red-600:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(220 38 38 / var(--tw-bg-opacity));
@@ -1895,6 +1940,11 @@ video {
   background-color: rgb(220 73 73 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-ultramarine-600:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(24 35 255 / var(--tw-bg-opacity));
+}
+
 .hover\:text-gray-700:hover {
   --tw-text-opacity: 1;
   color: rgb(55 65 81 / var(--tw-text-opacity));
@@ -2033,6 +2083,10 @@ video {
   outline-color: #fb923c;
 }
 
+.focus-visible\:outline-red-500:focus-visible {
+  outline-color: #ef4444;
+}
+
 .focus-visible\:outline-red-600:focus-visible {
   outline-color: #dc2626;
 }
@@ -2053,6 +2107,14 @@ video {
   outline-color: #1823ff;
 }
 
+.focus-visible\:outline-gray-600:focus-visible {
+  outline-color: #4b5563;
+}
+
+.focus-visible\:outline-gray-500:focus-visible {
+  outline-color: #6b7280;
+}
+
 .disabled\:cursor-not-allowed:disabled {
   cursor: not-allowed;
 }

package/frontend/src/api.js

@@ -75,6 +75,9 @@ if (window.MONGOOSE_STUDIO_CONFIG.isLambda) {
     deleteDocument(params) {
       return client.post('', { action: 'Model.deleteDocument', ...params}).then(res => res.data);
     },
+    deleteDocuments(params) {
+      return client.post('', { action: 'Model.deleteDocuments', ...params}).then(res => res.data);
+    },
     exportQueryResults(params) {
       const accessToken = window.localStorage.getItem('_mongooseStudioAccessToken') || null;
 
@@ -113,6 +116,9 @@ if (window.MONGOOSE_STUDIO_CONFIG.isLambda) {
     },
     updateDocument: function updateDocument(params) {
       return client.post('', { action: 'Model.updateDocument', ...params }).then(res => res.data);
+    },
+    updateDocuments: function updateDocuments(params) {
+      return client.post('', { action: 'Model.updateDocuments', ...params }).then(res => res.data);
     }
   };
 } else {
@@ -165,6 +171,9 @@ if (window.MONGOOSE_STUDIO_CONFIG.isLambda) {
     deleteDocument: function (params) {
       return client.post('/Model/deleteDocument', params).then(res => res.data);
     },
+    deleteDocuments: function(params) {
+      return client.post('/Model/deleteDocuments', params).then(res => res.data);
+    },
     exportQueryResults(params) {
       const accessToken = window.localStorage.getItem('_mongooseStudioAccessToken') || null;
 
@@ -206,6 +215,9 @@ if (window.MONGOOSE_STUDIO_CONFIG.isLambda) {
     },
     updateDocument: function updateDocument(params) {
       return client.post('/Model/updateDocument', params).then(res => res.data);
+    },
+    updateDocuments: function updateDocument(params) {
+      return client.post('/Model/updateDocuments', params).then(res => res.data);
     }
   };
 }

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

@@ -13,6 +13,14 @@
       Output
     </button>
     <div class="ml-auto mr-1 flex">
+      <button
+        v-if="activeTab === 'output'"
+        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"
+        @click="copyOutput">
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <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" />
+        </svg>
+      </button>
       <button
         v-if="activeTab === 'output'"
         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"
@@ -31,19 +39,17 @@
 
   <pre class="p-3 whitespace-pre-wrap max-h-[30vh] overflow-y-auto" v-show="activeTab === 'code'"><code v-text="script" ref="code" :class="'language-' + language"></code></pre>
 
-  <pre class="p-3 whitespace-pre-wrap max-h-[30vh] overflow-y-auto bg-white border-t" v-show="activeTab === 'output'">
+  <div class="p-3 whitespace-pre-wrap max-h-[30vh] overflow-y-auto bg-white border-t max-w-[70vw] relative" v-show="activeTab === 'output'">
     <dashboard-chart v-if="message.executionResult?.output?.$chart" :value="message.executionResult?.output" />
-    <div v-else>{{ message.executionResult?.output ? JSON.stringify(message.executionResult.output, null, 2) : 'No output' }}</div>
-  </pre>
+    <pre v-else>{{ message.executionResult?.output || 'No output' }}</pre>
+  </div>
 
   <modal ref="outputModal" v-if="showDetailModal" containerClass="!h-[90vh] !w-[90vw]">
     <template #body>
       <div class="absolute font-mono right-1 top-1 cursor-pointer text-xl" @click="showDetailModal = false;">&times;</div>
       <div class="h-full overflow-auto">
         <dashboard-chart v-if="message.executionResult?.output?.$chart" :value="message.executionResult?.output" />
-        <pre v-else class="whitespace-pre-wrap">
-          {{ message.executionResult?.output ? JSON.stringify(message.executionResult.output, null, 2) : 'No output' }}
-        </pre>
+        <pre v-else class="whitespace-pre-wrap">{{ message.executionResult?.output || 'No output' }}</pre>
       </div>
     </template>
   </modal>

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

@@ -3,6 +3,7 @@
 const api = require('../../api');
 const marked = require('marked').marked;
 const template = require('./chat-message-script.html');
+const vanillatoasts = require('vanillatoasts');
 
 module.exports = app => app.component('chat-message-script', {
   template: template,
@@ -24,6 +25,16 @@ module.exports = app => app.component('chat-message-script', {
     },
     openDetailModal() {
       this.showDetailModal = true;
+    },
+    async copyOutput() {
+      await navigator.clipboard.writeText(this.message.executionResult.output);
+      vanillatoasts.create({
+        title: 'Text copied!',
+        type: 'success',
+        timeout: 3000,
+        icon: 'images/success.png',
+        positionClass: 'bottomRight'
+      });
     }
   },
   mounted() {

package/frontend/src/models/models.html

@@ -28,7 +28,7 @@
       <div class="documents-menu">
         <div class="flex flex-row items-center w-full gap-2">
           <form @submit.prevent="search" class="flex-grow m-0">
-            <input ref="searchInput" class="w-full font-mono rounded-md p-1 border border-gray-300 outline-gray-300 text-lg focus:ring-1 focus:ring-ultramarine-200 focus:ring-offset-0 focus:outline-none" type="text" placeholder="Filter or text" v-model="searchText" />
+            <input ref="searchInput" class="w-full font-mono rounded-md p-1 border border-gray-300 outline-gray-300 text-lg focus:ring-1 focus:ring-ultramarine-200 focus:ring-offset-0 focus:outline-none" type="text" placeholder="Filter" v-model="searchText" @click="initFilter" />
           </form>
           <div>
             <span v-if="status === 'loading'">Loading ...</span>
@@ -37,24 +37,52 @@
           <button
             @click="shouldShowExportModal = true"
             type="button"
+            v-show="!selectMultiple"
             class="rounded bg-ultramarine-600 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600">
             Export
           </button>
+          <button
+            @click="stagingSelect"
+            type="button"
+            :class="{ 'bg-ultramarine-500 ring-inset ring-2 ring-gray-300 hover:bg-ultramarine-600': selectMultiple }"
+            class="rounded bg-ultramarine-600 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600"
+          >
+            Select
+          </button>
+          <button
+            v-show="selectMultiple"
+            @click="shouldShowUpdateMultipleModal=true;"
+            type="button"
+            class="rounded bg-green-600 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-green-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600"
+            >
+            Update
+          </button>
+          <button
+            @click="shouldShowDeleteMultipleModal=true;"
+            type="button"
+            v-show="selectMultiple"
+            class="rounded bg-red-600 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-500"
+            >
+            Delete
+          </button>
           <button
             @click="openIndexModal"
             type="button"
+            v-show="!selectMultiple"
             class="rounded bg-ultramarine-600 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600">
             Indexes
           </button>
           <button
             @click="shouldShowCreateModal = true;"
             type="button"
+            v-show="!selectMultiple"
             class="rounded bg-ultramarine-600 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600">
             Create
           </button>
           <button
             @click="openFieldSelection"
             type="button"
+            v-show="!selectMultiple"
             class="rounded bg-ultramarine-600 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600">
             Fields
           </button>
@@ -90,8 +118,8 @@
           </th>
         </thead>
         <tbody>
-          <tr v-for="document in documents" @click="$router.push('/model/' + currentModel + '/document/' + document._id)" :key="document._id">
-            <td v-for="schemaPath in filteredPaths">
+          <tr v-for="document in documents" @click="handleDocumentClick(document)" :key="document._id">
+            <td v-for="schemaPath in filteredPaths" :class="{ 'bg-blue-200': selectedDocuments.some(x => x._id.toString() === document._id.toString()) }">
               <component
                 :is="getComponentForPath(schemaPath)"
                 :value="getValueForPath(document, schemaPath.path)"
@@ -102,7 +130,7 @@
         </tbody>
       </table>
       <div v-if="outputType === 'json'">
-        <div v-for="document in documents" @click="$router.push('/model/' + currentModel + '/document/' + document._id)" :key="document._id">
+        <div v-for="document in documents" @click="handleDocumentClick(document)" :key="document._id" :class="{ 'bg-blue-200': selectedDocuments.some(x => x._id.toString() === document._id.toString()) }">
           <list-json :value="filterDocument(document)">
           </list-json>
         </div>
@@ -162,4 +190,27 @@
       <create-document :currentModel="currentModel" :paths="schemaPaths" @close="closeCreationModal"></create-document>
     </template>
   </modal>
+  <modal v-if="shouldShowUpdateMultipleModal">
+    <template v-slot:body>
+      <div class="modal-exit" @click="shouldShowUpdateMultipleModal = false;">&times;</div>
+      <update-document :currentModel="currentModel" :document="selectedDocuments" :multiple="true" @update="updateDocuments" @close="shouldShowUpdateMultipleModal=false;"></update-document>
+    </template>
+  </modal>
+  <modal v-if="shouldShowDeleteMultipleModal">
+    <template v-slot:body>
+      <div class="modal-exit" @click="shouldShowDeleteMultipleModal = false;">&times;</div>
+      <h2>Are you sure you want to delete {{selectedDocuments.length}} documents?</h2>
+      <div>
+        <list-json :value="selectedDocuments"></list-json>
+      </div>
+      <div class="flex gap-4">
+        <async-button @click="deleteDocuments" class="rounded bg-red-500 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600">
+          Confirm
+        </async-button>
+        <button @click="shouldShowDeleteMultipleModal = false;" class="rounded bg-gray-400 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-gray-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500">
+          Cancel
+        </button>
+      </div>
+    </template>
+  </modal>
 </div>

package/frontend/src/models/models.js

@@ -38,11 +38,15 @@ module.exports = app => app.component('models', {
     edittingDoc: null,
     docEdits: null,
     filter: null,
+    selectMultiple: false,
+    selectedDocuments: [],
     searchText: '',
     shouldShowExportModal: false,
     shouldShowCreateModal: false,
     shouldShowFieldModal: false,
     shouldShowIndexModal: false,
+    shouldShowUpdateMultipleModal: false,
+    shouldShowDeleteMultipleModal: false,
     shouldExport: {},
     sortBy: {},
     query: {},
@@ -89,6 +93,14 @@ module.exports = app => app.component('models', {
     this.status = 'loaded';
   },
   methods: {
+    initFilter(ev) {
+      if (!this.searchText) {
+        this.searchText = '{}';
+        this.$nextTick(() => {
+          ev.target.setSelectionRange(1, 1);
+        });
+      }
+    },
     clickFilter(path) {
       if (this.searchText) {
         if (this.searchText.endsWith('}')) {
@@ -319,6 +331,46 @@ module.exports = app => app.component('models', {
         this.documents[index] = res.doc;
       }
       this.edittingDoc = null;
+    },
+    handleDocumentClick(document) {
+      console.log(this.selectedDocuments);
+      if (this.selectMultiple) {
+        const exists = this.selectedDocuments.find(x => x._id.toString() == document._id.toString())
+        if (exists) {
+          const index = this.selectedDocuments.findIndex(x => x._id.toString() == document._id.toString());
+          if (index !== -1) {
+            this.selectedDocuments.splice(index, 1);
+          }
+        } else {
+          this.selectedDocuments.push(document);
+        }
+      } else {
+       this.$router.push('/model/' + this.currentModel + '/document/' + document._id)
+      }
+    },
+    async deleteDocuments() {
+      const documentIds = this.selectedDocuments.map(x => x._id);
+      await api.Model.deleteDocuments({
+        documentIds,
+        model: this.currentModel
+      });
+      await this.getDocuments();
+      this.selectedDocuments.length = 0;
+      this.shouldShowDeleteMultipleModal = false;
+      this.selectMultiple = false;
+    },
+    async updateDocuments() {
+      await this.getDocuments();
+      this.selectedDocuments.length = 0;
+      this.selectMultiple = false;
+    },
+    stagingSelect() {
+      if (this.selectMultiple) {
+        this.selectMultiple = false;
+        this.selectedDocuments.length = 0;
+      } else {
+        this.selectMultiple = true;
+      }
     }
   }
 });

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

@@ -0,0 +1,25 @@
+<div>
+    <div class="mb-2">
+      <textarea class="border border-gray-200 p-2 h-[300px] w-full" ref="codeEditor"></textarea>
+    </div>
+    <button @click="updateDocument()" class="rounded-md bg-ultramarine-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-600">Submit</button>
+    <div v-if="errors.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">There were {{errors.length}} errors with your submission</h3>
+          <div class="mt-2 text-sm text-red-700">
+            <ul role="list" class="list-disc space-y-1 pl-5">
+              <li v-for="error in errors">
+                {{error}}
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>

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

@@ -0,0 +1,70 @@
+'use strict';
+
+const api = require('../api');
+
+const { BSON, EJSON } = require('bson');
+
+const ObjectId = new Proxy(BSON.ObjectId, {
+  apply (target, thisArg, argumentsList) {
+    return new target(...argumentsList);
+  }
+});
+
+const appendCSS = require('../appendCSS');
+
+appendCSS(require('./update-document.css'));
+
+const template = require('./update-document.html')
+
+module.exports = app => app.component('update-document', {
+  props: ['currentModel', 'document', 'multiple'],
+  template,
+  data: function() {
+    return {
+      editor: null,
+      errors: []
+    }
+  },
+  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;
+        });
+      }
+      this.errors.length = 0;
+      this.$emit('update');
+      this.$emit('close');
+    },
+  },
+  mounted: function() {
+    this.$refs.codeEditor.value = `{\n    \n}`
+    this.editor = CodeMirror.fromTextArea(this.$refs.codeEditor, {
+      mode: 'javascript',
+      lineNumbers: true,
+      smartIndent: false
+    });
+  },
+})

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mongoosejs/studio",
-  "version": "0.0.82",
+  "version": "0.0.84",
   "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": {