@mongoosejs/studio 0.0.32 → 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

@@ -462,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',
@@ -476,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({ dashboardId: dashboardId, evaluate: true });
+    const { dashboard, result } = await api.Dashboard.getDashboard({ dashboardId: this.dashboardId, evaluate: true });
     if (!dashboard) {
       return;
     }
@@ -521,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();
     }
@@ -1775,7 +1779,7 @@ module.exports = [
     component: 'dashboards'
   },
   {
-    path: '/dashboard',
+    path: '/dashboard/:dashboardId',
     name: 'dashboard',
     component: 'dashboard'
   }
@@ -2500,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>";
 
 /***/ }),
 
@@ -2522,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>";
 
 /***/ }),
 

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/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/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.32",
+  "version": "0.0.33",
   "dependencies": {
     "archetype": "0.13.0",
     "csv-stringify": "6.3.0",