@mongoosejs/studio 0.0.45 → 0.0.47

package/frontend/public/index.html

@@ -11,6 +11,7 @@
     <link rel="stylesheet" href="tw.css">
     <link rel="stylesheet" href="vanillatoasts/vanillatoasts.css">
     <link rel="stylesheet" href="https://unpkg.com/codemirror@5.65.16/lib/codemirror.css">
+    <link rel="icon" href="images/logo.svg" type="image/svg+xml">
     <script src="https://unpkg.com/vue@3.x"></script>
     <script src="https://unpkg.com/vue-router@4.0.10"></script>
     <script src="https://unpkg.com/chart.js@4.2.0/dist/chart.umd.js"></script>
@@ -25,4 +26,4 @@
     <script src="https://unpkg.com/chart.js@4.2.0/dist/chart.umd.js"></script>
     <script src="app.js"></script>
   </body>
-</html>
+</html>

package/frontend/public/tw.css

@@ -654,6 +654,10 @@ video {
   margin-top: 0.25rem;
 }
 
+.mt-10 {
+  margin-top: 2.5rem;
+}
+
 .mt-2 {
   margin-top: 0.5rem;
 }

package/frontend/src/dashboard/dashboard.html

@@ -27,6 +27,18 @@
         @close="showEditor=false;"
         @update="updateCode"></edit-dashboard>
     </div>
+    <div v-if="errorMessage" class="rounded-md bg-red-50 p-4 mt-4">
+      <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" data-slot="icon">
+            <path fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16ZM8.28 7.22a.75.75 0 0 0-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 1 0 1.06 1.06L10 11.06l1.72 1.72a.75.75 0 1 0 1.06-1.06L11.06 10l1.72-1.72a.75.75 0 0 0-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">{{errorMessage}}</h3>
+        </div>
+      </div>
+    </div>
     
   </div>
   <div v-if="!dashboard && status === 'loaded'">

package/frontend/src/dashboard/dashboard.js

@@ -14,7 +14,8 @@ module.exports = app => app.component('dashboard', {
       description: '',
       showEditor: false,
       dashboard: null,
-      result: null
+      result: null,
+      errorMessage: null
     }
   },
   methods: {
@@ -25,15 +26,22 @@ module.exports = app => app.component('dashboard', {
       this.code = update.doc.code;
       this.title = update.doc.title;
       this.description = update.doc.description;
-      this.result = update.result;
+      if (update.result) {
+        this.result = update.result;
+      } else {
+        this.errorMessage = update.error.message;
+      }
     }
   },
   mounted: async function() {
-    const { dashboard, result } = await api.Dashboard.getDashboard({ dashboardId: this.dashboardId, evaluate: true });
+    const { dashboard, result, error } = await api.Dashboard.getDashboard({ dashboardId: this.dashboardId, evaluate: true });
     if (!dashboard) {
       return;
     }
     this.dashboard = dashboard;
+    if (error) {
+      this.errorMessage = error.message;
+    }
     this.code = this.dashboard.code;
     this.title = this.dashboard.title;
     this.description = this.dashboard.description ?? '';

package/frontend/src/dashboard/edit-dashboard/edit-dashboard.js

@@ -20,13 +20,13 @@ module.exports = app => app.component('edit-dashboard', {
     },
     async updateCode() {
       console.log('this.title', this.title, 'this.description', this.description)
-      const { doc, result } = await api.Dashboard.updateDashboard({
+      const { doc, result, error } = await api.Dashboard.updateDashboard({
         dashboardId: this.dashboardId,
         code: this.editor.getValue(),
         title: this.title,
         description: this.description
       });
-      this.$emit('update', { doc, result });
+      this.$emit('update', { doc, result, error });
       this.editor.setValue(doc.code);
       this.closeEditor();
     }

package/frontend/src/dashboard-result/dashboard-result.js

@@ -24,6 +24,9 @@ module.exports = app => app.component('dashboard-result', {
       if (value.$document) {
         return 'dashboard-document';
       }
+      if (value.$text) {
+        return 'dashboard-text';
+      }
     }
   }
 });

package/frontend/src/dashboard-result/dashboard-text/dashboard-text.html

@@ -0,0 +1,8 @@
+<div class="py-2">
+  <div v-if="header" class="border-b border-gray-100 px-2 pb-2 text-xl font-bold">
+    {{header}}
+  </div>
+  <div class="text-xl p-2">
+    <pre v-text="value.$text"></pre>
+  </div>
+</div>

package/frontend/src/dashboard-result/dashboard-text/dashboard-text.js

@@ -0,0 +1,8 @@
+'use strict';
+
+const template = require('./dashboard-text.html');
+
+module.exports = app => app.component('dashboard-text', {
+  template: template,
+  props: ['value']
+});

package/frontend/src/document/confirm-delete/confirm-delete.html

@@ -0,0 +1,18 @@
+<div>
+    <h2>
+        Are you sure you want to delete the following document?
+    </h2>
+    <pre class="max-h-[50vh] overflow-auto"><code ref="code" class="language-javascript" v-text="displayValue"></code></pre>
+    <div class="flex gap-2 mt-2">
+    <async-button
+        class="rounded-md bg-green-600 px-2.5 py-1.5 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"
+        @click="startDelete">
+        Confirm
+    </async-button>
+    <button 
+        class="rounded-md bg-gray-200 px-2.5 py-1.5 text-sm font-semibold text-black shadow-sm hover:bg-gray-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-300"
+        @click="closeDelete">
+        Cancel
+    </button>
+    </div>
+</div>

package/frontend/src/document/confirm-delete/confirm-delete.js

@@ -0,0 +1,24 @@
+'use strict';
+
+const template = require('./confirm-delete.html');
+
+module.exports = app => app.component('confirm-delete', {
+  template: template,
+  props: ['value'],
+  computed: {
+    displayValue() {
+      return JSON.stringify(this.value, null, '  ').trim();
+    }
+  },
+  methods: {
+    closeDelete() {
+        this.$emit('close')
+    },
+    startDelete() {
+        this.$emit('remove');
+    }
+  },
+  mounted() {
+    Prism.highlightElement(this.$refs.code);
+  }
+});

package/frontend/src/document/document.html

@@ -29,7 +29,7 @@
         <img src="images/save.svg" class="inline" /> Save
       </button>
       <button
-        @click="remove"
+        @click="shouldShowDeleteModal=true;"
         type="button"
         class="rounded-md bg-red-600 px-2.5 py-1.5 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-600">
         <img src="images/delete.svg" class="inline" /> Delete
@@ -49,5 +49,11 @@
         <confirm-changes @close="shouldShowConfirmModal = false;" @save="save" :value="changes"></confirm-changes>
       </template>
     </modal>
+    <modal v-if="shouldShowDeleteModal">
+      <template v-slot:body>
+        <div class="modal-exit" @click="shouldShowConfirmModal = false;">&times;</div>
+        <confirm-delete @close="shouldShowConfirmModal = false;" @remove="remove" :value="document"></confirm-delete>
+      </template>
+    </modal>
   </div>
 </div>

package/frontend/src/document/document.js

@@ -20,7 +20,8 @@ module.exports = app => app.component('document', {
     invalid: {},
     editting: false,
     virtuals: [],
-    shouldShowConfirmModal: false
+    shouldShowConfirmModal: false,
+    shouldShowDeleteModal: false
   }),
   async mounted() {
     window.pageState = this;

package/frontend/src/edit-array/edit-array.js

@@ -2,7 +2,7 @@
 
 const template = require('./edit-array.html');
 
-const { BSON, EJSON } = require('bson');
+const { BSON } = require('bson');
 
 const ObjectId = new Proxy(BSON.ObjectId, {
   apply (target, thisArg, argumentsList) {
@@ -29,15 +29,17 @@ module.exports = app => app.component('edit-array', {
     this.editor.on('change', ev => {
       this.currentValue = this.editor.getValue();
     });
-    this.status = 'loaded';
   },
   watch: {
-    currentValue() {
+    currentValue(newValue, oldValue) {
+      // Hacky way of skipping initial trigger because `immediate: false` doesn't work in Vue 3
       if (this.status === 'init') {
         return;
       }
+      this.status = 'loaded';
       try {
-        this.$emit('input', eval(`(${this.currentValue})`));
+        const array = eval(`(${this.currentValue})`);
+        this.$emit('input', array);
       } catch (err) {
         this.$emit('error', err);
       }

package/frontend/src/index.js

@@ -19,11 +19,13 @@ require('./dashboard-result/dashboard-result')(app);
 require('./dashboard-result/dashboard-chart/dashboard-chart')(app);
 require('./dashboard-result/dashboard-document/dashboard-document')(app);
 require('./dashboard-result/dashboard-primitive/dashboard-primitive')(app);
+require('./dashboard-result/dashboard-text/dashboard-text')(app);
 require('./dashboard/edit-dashboard/edit-dashboard')(app)
 require('./detail-array/detail-array')(app);
 require('./detail-default/detail-default')(app);
 require('./document/document')(app);
 require('./document/confirm-changes/confirm-changes')(app);
+require('./document/confirm-delete/confirm-delete')(app);
 require('./document-details/document-details')(app);
 require('./document-details/document-property/document-property')(app);
 require('./edit-array/edit-array')(app);
@@ -73,4 +75,4 @@ const router = VueRouter.createRouter({
 
 app.use(router);
 
-app.mount('#content');
+app.mount('#content');

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@mongoosejs/studio",
-  "version": "0.0.45",
+  "version": "0.0.47",
   "dependencies": {
-    "archetype": "0.13.0",
+    "archetype": "0.13.1",
     "csv-stringify": "6.3.0",
     "ejson": "^2.2.3",
     "extrovert": "0.0.24",