@mongoosejs/studio 0.0.31 → 0.0.33

package/backend/actions/Dashboard/getDashboard.js

@@ -19,23 +19,9 @@ module.exports = ({ db }) => async function getDashboard(params) {
 
   const dashboard = await Dashboard.findOne({ _id: dashboardId });
   if (evaluate) {
-    const context = vm.createContext({ db });
     let result = null;
     try {
-      result = await vm.runInContext(formatFunction(dashboard.code), context);
-      if (result.$document?.model) {
-        let schemaPaths = {};
-        const Model = Dashboard.db.model(result.$document?.model);
-        for (const path of Object.keys(Model.schema.paths)) {
-          schemaPaths[path] = {
-            instance: Model.schema.paths[path].instance,
-            path,
-            ref: Model.schema.paths[path].options?.ref,
-            required: Model.schema.paths[path].options?.required
-          };
-        }
-        result.$document.schemaPaths = schemaPaths;
-      }
+      result = await dashboard.evaluate();
     } catch (error) {
       return { dashboard, error: { message: error.message } };
     }
@@ -44,8 +30,4 @@ module.exports = ({ db }) => async function getDashboard(params) {
   }
 
   return { dashboard };
-};
-
-const formatFunction = code => `(async function() {
-  ${code}
-})();`
+};

package/backend/actions/Dashboard/updateDashboard.js

@@ -3,23 +3,30 @@
 const Archetype = require('archetype');
 
 const UpdateDashboardParams = new Archetype({
-    dashboardId: {
-      $type: 'string',
-      $required: true
-    },
-    code: {
-      $type: 'string',
-      $required: true
-    }
-  }).compile('UpdateDashboardParams');
-  
-  module.exports = ({ db }) => async function updateDashboard(params) {
-    const { dashboardId, code } = new UpdateDashboardParams(params);
+  dashboardId: {
+    $type: 'string',
+    $required: true
+  },
+  code: {
+    $type: 'string',
+    $required: true
+  }
+}).compile('UpdateDashboardParams');
+
+module.exports = ({ db }) => async function updateDashboard(params) {
+  const { dashboardId, code } = new UpdateDashboardParams(params);
+
+  const Dashboard = db.models[`__Studio_Dashboard`];
+
+  const doc = await Dashboard.
+    findByIdAndUpdate(dashboardId, { code }, { sanitizeFilter: true, returnDocument: 'after', overwriteImmutable: true });
   
-    const Dashboard = db.models[`__Studio_Dashboard`];
- 
-    const doc = await Dashboard.
-      findByIdAndUpdate(dashboardId, { code }, { sanitizeFilter: true, returnDocument: 'after', overwriteImmutable: true });
-    
-    return { doc };
-  };
+  let result = null;
+  try {
+    result = await doc.evaluate();
+  } catch (error) {
+    return { doc, error: { message: error.message } };
+  }
+
+  return { doc, result };
+};

package/backend/db/dashboardSchema.js

@@ -1,6 +1,7 @@
 'use strict';
 
 const mongoose = require('mongoose');
+const vm = require('vm');
 
 const dashboardSchema = new mongoose.Schema({
   title: {
@@ -16,4 +17,29 @@ const dashboardSchema = new mongoose.Schema({
   }
 });
 
-module.exports = dashboardSchema;
+dashboardSchema.methods.evaluate = async function evaluate() {
+  const context = vm.createContext({ db: this.constructor.db });
+  let result = null;
+  result = await vm.runInContext(formatFunction(this.code), context);
+  if (result.$document?.model) {
+    let schemaPaths = {};
+    const Model = this.constructor.db.model(result.$document?.model);
+    for (const path of Object.keys(Model.schema.paths)) {
+      schemaPaths[path] = {
+        instance: Model.schema.paths[path].instance,
+        path,
+        ref: Model.schema.paths[path].options?.ref,
+        required: Model.schema.paths[path].options?.required
+      };
+    }
+    result.$document.schemaPaths = schemaPaths;
+  }
+
+  return result;
+};
+
+module.exports = dashboardSchema;
+
+const formatFunction = code => `(async function() {
+  ${code}
+})();`

package/frontend/public/app.js

@@ -34,10 +34,10 @@ if (false) {} else {
       return client.post('/Dashboard/createDashboard', params).then(res => res.data);
     },
     getDashboard: function getDashboard(params) {
-      return client.get('/Dashboard/getDashboard', params).then(res => res.data);
+      return client.put('/Dashboard/getDashboard', params).then(res => res.data);
     },
     getDashboards: function getDashboards(params) {
-      return client.get('/Dashboard/getDashboards', params).then(res => res.data);
+      return client.put('/Dashboard/getDashboards', params).then(res => res.data);
     },
     updateDashboard: function updateDashboard(params) {
       return client.post('/Dashboard/updateDashboard', params).then(res => res.data);
@@ -429,7 +429,6 @@ module.exports = app => app.component('dashboard-result', {
   },
   methods: {
     getComponentForValue(value) {
-      console.log('X', value);
       if (typeof value !== 'object' || value == null) {
         return 'dashboard-primitive';
       }
@@ -463,6 +462,7 @@ const template = __webpack_require__(/*! ./dashboard.html */ "./frontend/src/das
 
 module.exports = app => app.component('dashboard', {
   template: template,
+  props: ['dashboardId'],
   data: function() {
     return {
       status: 'loading',
@@ -477,12 +477,12 @@ module.exports = app => app.component('dashboard', {
       this.showEditor = !this.showEditor;
     },
     async updateCode(update) {
-      this.code = update;
+      this.code = update.doc.code;
+      this.result = update.result;
     }
   },
   mounted: async function() {
-    const dashboardId = this.$route.query.dashboardId;
-    const { dashboard, result } = await api.Dashboard.getDashboard({ params: { dashboardId: dashboardId, evaluate: true } });
+    const { dashboard, result } = await api.Dashboard.getDashboard({ dashboardId: this.dashboardId, evaluate: true });
     if (!dashboard) {
       return;
     }
@@ -522,8 +522,11 @@ module.exports = app => app.component('edit-dashboard', {
         this.$emit('close')
     },
     async updateCode() {
-      const { doc } = await api.Dashboard.updateDashboard({ dashboardId: this.dashboardId, code: this.editor.getValue() });
-      this.$emit('update', doc.code);
+      const { doc, result } = await api.Dashboard.updateDashboard({
+        dashboardId: this.dashboardId,
+        code: this.editor.getValue()
+      });
+      this.$emit('update', { doc, result });
       this.editor.setValue(doc.code);
       this.closeEditor();
     }
@@ -662,7 +665,7 @@ appendCSS(__webpack_require__(/*! ./document-details.css */ "./frontend/src/docu
 
 module.exports = app => app.component('document-details', {
   template,
-  props: ['document', 'schemaPaths', 'editting', 'changes'],
+  props: ['document', 'schemaPaths', 'editting', 'changes', 'invalid'],
   methods: {
     getComponentForPath(schemaPath) {
       if (schemaPath.instance === 'Array') {
@@ -680,6 +683,9 @@ module.exports = app => app.component('document-details', {
       if (path.instance === 'Array') {
         return 'edit-array';
       }
+      if (path.instance === 'Embedded') {
+        return 'edit-subdocument';
+      }
       return 'edit-default';
     },
     getValueForPath(path) {
@@ -860,19 +866,28 @@ appendCSS(__webpack_require__(/*! ./edit-array.css */ "./frontend/src/edit-array
 module.exports = app => app.component('edit-array', {
   template: template,
   props: ['value'],
-  data: () => ({ currentValue: null }),
+  data: () => ({ currentValue: null, status: 'init' }),
   mounted() {
-    this.currentValue = JSON.stringify(this.value, null, '  ').trim();
+    this.currentValue = this.value == null
+      ? '' + this.value
+      : JSON.stringify(this.value, null, '  ').trim();
     this.$refs.arrayEditor.value = this.currentValue;
     this.editor = CodeMirror.fromTextArea(this.$refs.arrayEditor, {
       mode: 'javascript',
       lineNumbers: true
     });
+    this.editor.on('change', ev => {
+      this.currentValue = this.editor.getValue();
+    });
+    this.status = 'loaded';
   },
   watch: {
     currentValue() {
+      if (this.status === 'init') {
+        return;
+      }
       try {
-        this.$emit('input', eval(this.currentValue));
+        this.$emit('input', eval(`(${this.currentValue})`));
       } catch (err) {
         this.$emit('error', err);
       }
@@ -998,6 +1013,67 @@ module.exports = app => app.component('edit-number', {
   }
 });
 
+/***/ }),
+
+/***/ "./frontend/src/edit-subdocument/edit-subdocument.js":
+/*!***********************************************************!*\
+  !*** ./frontend/src/edit-subdocument/edit-subdocument.js ***!
+  \***********************************************************/
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+"use strict";
+
+
+const template = __webpack_require__(/*! ./edit-subdocument.html */ "./frontend/src/edit-subdocument/edit-subdocument.html");
+
+const { BSON, EJSON } = __webpack_require__(/*! bson */ "./node_modules/bson/lib/bson.cjs");
+
+const ObjectId = new Proxy(BSON.ObjectId, {
+  apply (target, thisArg, argumentsList) {
+    return new target(...argumentsList);
+  }
+});
+
+module.exports = app => app.component('edit-subdocument', {
+  template: template,
+  props: ['value'],
+  data: () => ({ currentValue: null, status: 'init' }),
+  mounted() {
+    this.currentValue = this.value == null
+      ? '' + this.value
+      : JSON.stringify(this.value, null, '  ').trim();
+    this.$refs.editor.value = this.currentValue;
+    this.editor = CodeMirror.fromTextArea(this.$refs.editor, {
+      mode: 'javascript',
+      lineNumbers: true
+    });
+    this.editor.on('change', ev => {
+      this.currentValue = this.editor.getValue();
+    });
+    this.status = 'loaded';
+  },
+  watch: {
+    currentValue() {
+      if (this.status === 'init') {
+        return;
+      }
+      try {
+        this.$emit('input', eval(`(${this.currentValue})`));
+      } catch (err) {
+        console.log('Error', err);
+        this.$emit('error', err);
+      }
+    }
+  },
+  beforeDestroy() {
+    if (this.editor) {
+      this.editor.toTextArea();
+    }
+  },
+  emits: ['input', 'error']
+});
+
+
 /***/ }),
 
 /***/ "./frontend/src/export-query-results/export-query-results.js":
@@ -1703,7 +1779,7 @@ module.exports = [
     component: 'dashboards'
   },
   {
-    path: '/dashboard',
+    path: '/dashboard/:dashboardId',
     name: 'dashboard',
     component: 'dashboard'
   }
@@ -2428,7 +2504,7 @@ module.exports = "<div>\n  <div v-if=\"Array.isArray(result)\">\n    <div v-for=
 /***/ ((module) => {
 
 "use strict";
-module.exports = "<div class=\"dashboard px-1\">\n  <div v-if=\"dashboard\" class=\"max-w-5xl mx-auto\">\n    <div class=\"flex items-center w-full\">\n      <h2 class=\"mt-4 mb-4 text-gray-900 font-semibold text-xl grow shrink\">{{dashboard.title}}</h2>\n      <div>\n        <button\n          v-if=\"!showEditor\"\n          @click=\"showEditor = true\"\n          type=\"button\"\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          <img src=\"images/edit.svg\" class=\"inline h-[1em]\" /> Edit\n        </button>\n      </div>\n    </div>\n    <div v-if=\"!showEditor\" class=\"mt-4 mb-4\">\n      <dashboard-result :result=\"result\"></dashboard-result>\n    </div>\n    <div v-if=\"showEditor\">\n      <edit-dashboard :dashboardId=\"dashboard._id\" :code=\"code\" @close=\"showEditor=false;\" @update=\"updateCode\"></edit-dashboard>\n    </div>\n    \n  </div>\n  <div v-if=\"!dashboard && status === 'loaded'\">\n    No dashboard with the given id could be found.\n  </div>\n</div>";
+module.exports = "<div class=\"dashboard px-1\">\n  <div v-if=\"dashboard\" class=\"max-w-5xl mx-auto\">\n    <div class=\"flex items-center w-full\">\n      <h2 class=\"mt-4 mb-4 text-gray-900 font-semibold text-xl grow shrink\">{{dashboard.title}}</h2>\n      <div>\n        <button\n          v-if=\"!showEditor\"\n          @click=\"showEditor = true\"\n          type=\"button\"\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          <img src=\"images/edit.svg\" class=\"inline h-[1em]\" /> Edit\n        </button>\n      </div>\n    </div>\n    <div v-if=\"!showEditor\" class=\"mt-4 mb-4\">\n      <dashboard-result :result=\"result\"></dashboard-result>\n    </div>\n    <div v-if=\"showEditor\">\n      <edit-dashboard\n        :dashboardId=\"dashboard._id\"\n        :code=\"code\"\n        @close=\"showEditor=false;\"\n        @update=\"updateCode\"></edit-dashboard>\n    </div>\n    \n  </div>\n  <div v-if=\"!dashboard && status === 'loaded'\">\n    No dashboard with the given id could be found.\n  </div>\n</div>";
 
 /***/ }),
 
@@ -2450,7 +2526,7 @@ module.exports = "<div>\n    <textarea ref=\"codeEditor\">{{code}}</textarea>\n
 /***/ ((module) => {
 
 "use strict";
-module.exports = "<div class=\"dashboards max-w-5xl mx-auto mt-8\">\n  <div v-if=\"status === 'loaded' && dashboards.length === 0\">\n    <div class=\"text-center\">\n      <h3 class=\"mt-2 text-sm font-semibold text-gray-900\">No dashboards yet</h3>\n      <p class=\"mt-1 text-sm text-gray-500\">Get started by creating a new dashboard.</p>\n      <div class=\"mt-6\">\n        <button type=\"button\" class=\"inline-flex items-center rounded-md bg-teal-600 px-3 py-2 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          <svg class=\"-ml-0.5 mr-1.5 h-5 w-5\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n            <path d=\"M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z\" />\n          </svg>\n          New Dashboard\n        </button>\n      </div>\n    </div>\n  </div>\n\n\n  <div class=\"px-4 sm:px-6 lg:px-8\">\n    <div class=\"sm:flex sm:items-center\">\n      <div class=\"sm:flex-auto\">\n        <h1 class=\"text-base font-semibold leading-6 text-gray-900\">Dashboards</h1>\n      </div>\n      <div class=\"mt-4 sm:ml-16 sm:mt-0 sm:flex-none\">\n        <button\n          type=\"button\"\n          @click=\"showCreateDashboardModal = true\"\n          class=\"block rounded-md bg-teal-600 px-3 py-2 text-center 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\">Create New Dashboard</button>\n      </div>\n    </div>\n    <div class=\"mt-8 flow-root\">\n      <div class=\"-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8\">\n        <div class=\"inline-block min-w-full py-2 align-middle\">\n          <table class=\"min-w-full divide-y divide-gray-300\">\n            <thead>\n              <tr>\n                <th scope=\"col\" class=\"py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6 lg:pl-8\">Title</th>\n                <th scope=\"col\" class=\"px-3 py-3.5 text-left text-sm font-semibold text-gray-900 w-[50%]\">Description</th>\n                <th scope=\"col\" class=\"relative py-3.5 pl-3 pr-4 sm:pr-6 lg:pr-8\">\n                </th>\n                <th scope=\"col\" class=\"relative py-3.5 pl-3 pr-4 sm:pr-6 lg:pr-8\">\n                </th>\n              </tr>\n            </thead>\n            <tbody class=\"divide-y divide-gray-200 bg-white\">\n              <tr v-for=\"dashboard in dashboards\">\n                <td class=\"whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6 lg:pl-8\">{{dashboard.title}}</td>\n                <td class=\"whitespace-nowrap px-3 py-4 text-sm text-gray-500 truncate w-[50%]\">{{dashboard.description}}</td>\n                <td class=\"relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6 lg:pr-8\">\n                  <router-link\n                    :to=\"'dashboard?edit=true&dashboardId=' + dashboard._id\"\n                    class=\"text-teal-600 hover:text-teal-900\">\n                    Edit\n                  </router-link>\n                </td>\n                <td class=\"relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6 lg:pr-8\">\n                  <router-link\n                    :to=\"'dashboard?edit=true&dashboardId=' + dashboard._id\"\n                    class=\"text-teal-600 hover:text-teal-900\">\n                    View\n                  </router-link>\n                </td>\n              </tr>\n  \n              <!-- More people... -->\n            </tbody>\n          </table>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <modal v-if=\"showCreateDashboardModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"showCreateDashboardModal = false;\">&times;</div>\n      \n      <create-dashboard></create-dashboard>\n    </template>\n  </modal>\n</div>";
+module.exports = "<div class=\"dashboards max-w-5xl mx-auto mt-8\">\n  <div v-if=\"status === 'loaded' && dashboards.length === 0\">\n    <div class=\"text-center\">\n      <h3 class=\"mt-2 text-sm font-semibold text-gray-900\">No dashboards yet</h3>\n      <p class=\"mt-1 text-sm text-gray-500\">Get started by creating a new dashboard.</p>\n      <div class=\"mt-6\">\n        <button type=\"button\" class=\"inline-flex items-center rounded-md bg-teal-600 px-3 py-2 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          <svg class=\"-ml-0.5 mr-1.5 h-5 w-5\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n            <path d=\"M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z\" />\n          </svg>\n          New Dashboard\n        </button>\n      </div>\n    </div>\n  </div>\n\n\n  <div class=\"px-4 sm:px-6 lg:px-8\">\n    <div class=\"sm:flex sm:items-center\">\n      <div class=\"sm:flex-auto\">\n        <h1 class=\"text-base font-semibold leading-6 text-gray-900\">Dashboards</h1>\n      </div>\n      <div class=\"mt-4 sm:ml-16 sm:mt-0 sm:flex-none\">\n        <button\n          type=\"button\"\n          @click=\"showCreateDashboardModal = true\"\n          class=\"block rounded-md bg-teal-600 px-3 py-2 text-center 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\">Create New Dashboard</button>\n      </div>\n    </div>\n    <div class=\"mt-8 flow-root\">\n      <div class=\"-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8\">\n        <div class=\"inline-block min-w-full py-2 align-middle\">\n          <table class=\"min-w-full divide-y divide-gray-300\">\n            <thead>\n              <tr>\n                <th scope=\"col\" class=\"py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6 lg:pl-8\">Title</th>\n                <th scope=\"col\" class=\"px-3 py-3.5 text-left text-sm font-semibold text-gray-900 w-[50%]\">Description</th>\n                <th scope=\"col\" class=\"relative py-3.5 pl-3 pr-4 sm:pr-6 lg:pr-8\">\n                </th>\n                <th scope=\"col\" class=\"relative py-3.5 pl-3 pr-4 sm:pr-6 lg:pr-8\">\n                </th>\n              </tr>\n            </thead>\n            <tbody class=\"divide-y divide-gray-200 bg-white\">\n              <tr v-for=\"dashboard in dashboards\">\n                <td class=\"whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6 lg:pl-8\">{{dashboard.title}}</td>\n                <td class=\"whitespace-nowrap px-3 py-4 text-sm text-gray-500 truncate w-[50%]\">{{dashboard.description}}</td>\n                <td class=\"relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6 lg:pr-8\">\n                  <router-link\n                    :to=\"'/dashboard/' + dashboard._id + '?edit=true'\"\n                    class=\"text-teal-600 hover:text-teal-900\">\n                    Edit\n                  </router-link>\n                </td>\n                <td class=\"relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6 lg:pr-8\">\n                  <router-link\n                    :to=\"'/dashboard/' + dashboard._id\"\n                    class=\"text-teal-600 hover:text-teal-900\">\n                    View\n                  </router-link>\n                </td>\n              </tr>\n  \n              <!-- More people... -->\n            </tbody>\n          </table>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <modal v-if=\"showCreateDashboardModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"showCreateDashboardModal = false;\">&times;</div>\n      \n      <create-dashboard></create-dashboard>\n    </template>\n  </modal>\n</div>";
 
 /***/ }),
 
@@ -2527,7 +2603,7 @@ module.exports = ".document {\n  max-width: 1200px;\n  margin-left: auto;\n  mar
 /***/ ((module) => {
 
 "use strict";
-module.exports = "<div class=\"document\">\n  <div class=\"document-menu\">\n    <div class=\"left\">\n      <button @click=\"$router.push('/model/' + this.model)\">\n        &lsaquo; Back\n      </button>\n    </div>\n\n    <div class=\"right\">\n      <button\n        v-if=\"!editting\"\n        @click=\"editting = true\"\n        type=\"button\"\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        <img src=\"images/edit.svg\" class=\"inline\" /> Edit\n      </button>\n      <button\n        v-if=\"editting\"\n        @click=\"editting = false\"\n        type=\"button\"\n        class=\"rounded-md bg-slate-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-slate-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-slate-600\">\n        &times; Cancel\n      </button>\n      <button\n        v-if=\"editting\"\n        @click=\"shouldShowConfirmModal=true;\"\n        type=\"button\"\n        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\">\n        <img src=\"images/save.svg\" class=\"inline\" /> Save\n      </button>\n      <button\n        @click=\"remove\"\n        type=\"button\"\n        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\">\n        <img src=\"images/delete.svg\" class=\"inline\" /> Delete\n      </button>\n    </div>\n  </div>\n  <div v-if=\"status === 'loaded'\">\n    <document-details\n      :document=\"document\"\n      :schemaPaths=\"schemaPaths\"\n      :editting=\"editting\"\n      :changes=\"changes\"></document-details>\n    <modal v-if=\"shouldShowConfirmModal\">\n      <template v-slot:body>\n        <div class=\"modal-exit\" @click=\"shouldShowConfirmModal = false;\">&times;</div>\n        <confirm-changes @close=\"shouldShowConfirmModal = false;\" @save=\"save\" :value=\"changes\"></confirm-changes>\n      </template>\n    </modal>\n  </div>\n</div>\n";
+module.exports = "<div class=\"document\">\n  <div class=\"document-menu\">\n    <div class=\"left\">\n      <button @click=\"$router.push('/model/' + this.model)\">\n        &lsaquo; Back\n      </button>\n    </div>\n\n    <div class=\"right\">\n      <button\n        v-if=\"!editting\"\n        @click=\"editting = true\"\n        type=\"button\"\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        <img src=\"images/edit.svg\" class=\"inline\" /> Edit\n      </button>\n      <button\n        v-if=\"editting\"\n        @click=\"editting = false\"\n        type=\"button\"\n        class=\"rounded-md bg-slate-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-slate-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-slate-600\">\n        &times; Cancel\n      </button>\n      <button\n        v-if=\"editting\"\n        @click=\"shouldShowConfirmModal=true;\"\n        type=\"button\"\n        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\">\n        <img src=\"images/save.svg\" class=\"inline\" /> Save\n      </button>\n      <button\n        @click=\"remove\"\n        type=\"button\"\n        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\">\n        <img src=\"images/delete.svg\" class=\"inline\" /> Delete\n      </button>\n    </div>\n  </div>\n  <div v-if=\"status === 'loaded'\">\n    <document-details\n      :document=\"document\"\n      :schemaPaths=\"schemaPaths\"\n      :editting=\"editting\"\n      :changes=\"changes\"\n      :invalid=\"invalid\"></document-details>\n    <modal v-if=\"shouldShowConfirmModal\">\n      <template v-slot:body>\n        <div class=\"modal-exit\" @click=\"shouldShowConfirmModal = false;\">&times;</div>\n        <confirm-changes @close=\"shouldShowConfirmModal = false;\" @save=\"save\" :value=\"changes\"></confirm-changes>\n      </template>\n    </modal>\n  </div>\n</div>\n";
 
 /***/ }),
 
@@ -2549,7 +2625,7 @@ module.exports = ".edit-array button {\n  margin-top: 0.5em;\n}";
 /***/ ((module) => {
 
 "use strict";
-module.exports = "<div class=\"edit-array\">\n  <textarea ref=\"arrayEditor\" v-model=\"currentValue\" class=\"w-full border border-gray-300 p-1 h-[300px]\"></textarea>\n</div>";
+module.exports = "<div class=\"edit-array\">\n  <textarea\n    ref=\"arrayEditor\"\n    class=\"w-full border border-gray-300 p-1 h-[300px]\"></textarea>\n</div>";
 
 /***/ }),
 
@@ -2586,6 +2662,17 @@ module.exports = "<div>\n  <input type=\"number\" :value=\"value\" @input=\"$emi
 
 /***/ }),
 
+/***/ "./frontend/src/edit-subdocument/edit-subdocument.html":
+/*!*************************************************************!*\
+  !*** ./frontend/src/edit-subdocument/edit-subdocument.html ***!
+  \*************************************************************/
+/***/ ((module) => {
+
+"use strict";
+module.exports = "<div class=\"edit-subdocument\">\n  <textarea\n    ref=\"editor\"\n    v-model=\"currentValue\"\n    class=\"w-full border border-gray-300 p-1 h-[300px]\"></textarea>\n</div>";
+
+/***/ }),
+
 /***/ "./frontend/src/export-query-results/export-query-results.css":
 /*!********************************************************************!*\
   !*** ./frontend/src/export-query-results/export-query-results.css ***!
@@ -10478,6 +10565,7 @@ __webpack_require__(/*! ./edit-array/edit-array */ "./frontend/src/edit-array/ed
 __webpack_require__(/*! ./edit-default/edit-default */ "./frontend/src/edit-default/edit-default.js")(app);
 __webpack_require__(/*! ./edit-number/edit-number */ "./frontend/src/edit-number/edit-number.js")(app);
 __webpack_require__(/*! ./edit-date/edit-date */ "./frontend/src/edit-date/edit-date.js")(app);
+__webpack_require__(/*! ./edit-subdocument/edit-subdocument */ "./frontend/src/edit-subdocument/edit-subdocument.js")(app);
 __webpack_require__(/*! ./export-query-results/export-query-results */ "./frontend/src/export-query-results/export-query-results.js")(app);
 __webpack_require__(/*! ./list-array/list-array */ "./frontend/src/list-array/list-array.js")(app);
 __webpack_require__(/*! ./list-default/list-default */ "./frontend/src/list-default/list-default.js")(app);

package/frontend/src/dashboard/dashboard.html

@@ -16,7 +16,11 @@
       <dashboard-result :result="result"></dashboard-result>
     </div>
     <div v-if="showEditor">
-      <edit-dashboard :dashboardId="dashboard._id" :code="code" @close="showEditor=false;" @update="updateCode"></edit-dashboard>
+      <edit-dashboard
+        :dashboardId="dashboard._id"
+        :code="code"
+        @close="showEditor=false;"
+        @update="updateCode"></edit-dashboard>
     </div>
     
   </div>

package/frontend/src/dashboard/dashboard.js

@@ -5,6 +5,7 @@ const template = require('./dashboard.html');
 
 module.exports = app => app.component('dashboard', {
   template: template,
+  props: ['dashboardId'],
   data: function() {
     return {
       status: 'loading',
@@ -19,12 +20,12 @@ module.exports = app => app.component('dashboard', {
       this.showEditor = !this.showEditor;
     },
     async updateCode(update) {
-      this.code = update;
+      this.code = update.doc.code;
+      this.result = update.result;
     }
   },
   mounted: async function() {
-    const dashboardId = this.$route.query.dashboardId;
-    const { dashboard, result } = await api.Dashboard.getDashboard({ dashboardId: dashboardId, evaluate: true });
+    const { dashboard, result } = await api.Dashboard.getDashboard({ dashboardId: this.dashboardId, evaluate: true });
     if (!dashboard) {
       return;
     }

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

@@ -17,8 +17,11 @@ module.exports = app => app.component('edit-dashboard', {
         this.$emit('close')
     },
     async updateCode() {
-      const { doc } = await api.Dashboard.updateDashboard({ dashboardId: this.dashboardId, code: this.editor.getValue() });
-      this.$emit('update', doc.code);
+      const { doc, result } = await api.Dashboard.updateDashboard({
+        dashboardId: this.dashboardId,
+        code: this.editor.getValue()
+      });
+      this.$emit('update', { doc, result });
       this.editor.setValue(doc.code);
       this.closeEditor();
     }

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

@@ -12,7 +12,6 @@ module.exports = app => app.component('dashboard-result', {
   },
   methods: {
     getComponentForValue(value) {
-      console.log('X', value);
       if (typeof value !== 'object' || value == null) {
         return 'dashboard-primitive';
       }

package/frontend/src/dashboards/dashboards.html

@@ -47,14 +47,14 @@
                 <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 truncate w-[50%]">{{dashboard.description}}</td>
                 <td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6 lg:pr-8">
                   <router-link
-                    :to="'dashboard?edit=true&dashboardId=' + dashboard._id"
+                    :to="'/dashboard/' + dashboard._id + '?edit=true'"
                     class="text-teal-600 hover:text-teal-900">
                     Edit
                   </router-link>
                 </td>
                 <td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6 lg:pr-8">
                   <router-link
-                    :to="'dashboard?edit=true&dashboardId=' + dashboard._id"
+                    :to="'/dashboard/' + dashboard._id"
                     class="text-teal-600 hover:text-teal-900">
                     View
                   </router-link>

package/frontend/src/document/document.html

@@ -41,7 +41,8 @@
       :document="document"
       :schemaPaths="schemaPaths"
       :editting="editting"
-      :changes="changes"></document-details>
+      :changes="changes"
+      :invalid="invalid"></document-details>
     <modal v-if="shouldShowConfirmModal">
       <template v-slot:body>
         <div class="modal-exit" @click="shouldShowConfirmModal = false;">&times;</div>

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

@@ -9,7 +9,7 @@ appendCSS(require('./document-details.css'));
 
 module.exports = app => app.component('document-details', {
   template,
-  props: ['document', 'schemaPaths', 'editting', 'changes'],
+  props: ['document', 'schemaPaths', 'editting', 'changes', 'invalid'],
   methods: {
     getComponentForPath(schemaPath) {
       if (schemaPath.instance === 'Array') {
@@ -27,6 +27,9 @@ module.exports = app => app.component('document-details', {
       if (path.instance === 'Array') {
         return 'edit-array';
       }
+      if (path.instance === 'Embedded') {
+        return 'edit-subdocument';
+      }
       return 'edit-default';
     },
     getValueForPath(path) {

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

@@ -1,3 +1,5 @@
 <div class="edit-array">
-  <textarea ref="arrayEditor" v-model="currentValue" class="w-full border border-gray-300 p-1 h-[300px]"></textarea>
+  <textarea
+    ref="arrayEditor"
+    class="w-full border border-gray-300 p-1 h-[300px]"></textarea>
 </div>

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

@@ -16,19 +16,28 @@ appendCSS(require('./edit-array.css'));
 module.exports = app => app.component('edit-array', {
   template: template,
   props: ['value'],
-  data: () => ({ currentValue: null }),
+  data: () => ({ currentValue: null, status: 'init' }),
   mounted() {
-    this.currentValue = JSON.stringify(this.value, null, '  ').trim();
+    this.currentValue = this.value == null
+      ? '' + this.value
+      : JSON.stringify(this.value, null, '  ').trim();
     this.$refs.arrayEditor.value = this.currentValue;
     this.editor = CodeMirror.fromTextArea(this.$refs.arrayEditor, {
       mode: 'javascript',
       lineNumbers: true
     });
+    this.editor.on('change', ev => {
+      this.currentValue = this.editor.getValue();
+    });
+    this.status = 'loaded';
   },
   watch: {
     currentValue() {
+      if (this.status === 'init') {
+        return;
+      }
       try {
-        this.$emit('input', eval(this.currentValue));
+        this.$emit('input', eval(`(${this.currentValue})`));
       } catch (err) {
         this.$emit('error', err);
       }

package/frontend/src/edit-subdocument/edit-subdocument.html

@@ -0,0 +1,6 @@
+<div class="edit-subdocument">
+  <textarea
+    ref="editor"
+    v-model="currentValue"
+    class="w-full border border-gray-300 p-1 h-[300px]"></textarea>
+</div>

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

@@ -0,0 +1,50 @@
+'use strict';
+
+const template = require('./edit-subdocument.html');
+
+const { BSON, EJSON } = require('bson');
+
+const ObjectId = new Proxy(BSON.ObjectId, {
+  apply (target, thisArg, argumentsList) {
+    return new target(...argumentsList);
+  }
+});
+
+module.exports = app => app.component('edit-subdocument', {
+  template: template,
+  props: ['value'],
+  data: () => ({ currentValue: null, status: 'init' }),
+  mounted() {
+    this.currentValue = this.value == null
+      ? '' + this.value
+      : JSON.stringify(this.value, null, '  ').trim();
+    this.$refs.editor.value = this.currentValue;
+    this.editor = CodeMirror.fromTextArea(this.$refs.editor, {
+      mode: 'javascript',
+      lineNumbers: true
+    });
+    this.editor.on('change', ev => {
+      this.currentValue = this.editor.getValue();
+    });
+    this.status = 'loaded';
+  },
+  watch: {
+    currentValue() {
+      if (this.status === 'init') {
+        return;
+      }
+      try {
+        this.$emit('input', eval(`(${this.currentValue})`));
+      } catch (err) {
+        console.log('Error', err);
+        this.$emit('error', err);
+      }
+    }
+  },
+  beforeDestroy() {
+    if (this.editor) {
+      this.editor.toTextArea();
+    }
+  },
+  emits: ['input', 'error']
+});

package/frontend/src/index.js

@@ -30,6 +30,7 @@ require('./edit-array/edit-array')(app);
 require('./edit-default/edit-default')(app);
 require('./edit-number/edit-number')(app);
 require('./edit-date/edit-date')(app);
+require('./edit-subdocument/edit-subdocument')(app);
 require('./export-query-results/export-query-results')(app);
 require('./list-array/list-array')(app);
 require('./list-default/list-default')(app);

package/frontend/src/routes.js

@@ -27,7 +27,7 @@ module.exports = [
     component: 'dashboards'
   },
   {
-    path: '/dashboard',
+    path: '/dashboard/:dashboardId',
     name: 'dashboard',
     component: 'dashboard'
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mongoosejs/studio",
-  "version": "0.0.31",
+  "version": "0.0.33",
   "dependencies": {
     "archetype": "0.13.0",
     "csv-stringify": "6.3.0",