@mongoosejs/studio 0.0.35 → 0.0.36

package/backend/db/dashboardSchema.js

@@ -21,9 +21,9 @@ 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) {
+  if (result.$document?.constructor?.modelName) {
     let schemaPaths = {};
-    const Model = this.constructor.db.model(result.$document?.model);
+    const Model = this.constructor.db.model(result.$document?.constructor?.modelName);
     for (const path of Object.keys(Model.schema.paths)) {
       schemaPaths[path] = {
         instance: Model.schema.paths[path].instance,

package/frontend/public/app.js

@@ -43,6 +43,9 @@ if (false) {} else {
     createDashboard: function createDashboard(params) {
       return client.post('/Dashboard/createDashboard', params).then(res => res.data);
     },
+    deleteDashboard: function deleteDashboard(params) {
+      return client.post('/Dashboard/deleteDashboard', params).then(res => res.data)
+    },
     getDashboard: function getDashboard(params) {
       return client.put('/Dashboard/getDashboard', params).then(res => res.data);
     },
@@ -367,7 +370,7 @@ module.exports = app => app.component('dashboard-document', {
       return null;
     },
     schemaPaths() {
-      return Object.keys(this.value.$document.schemaPaths).sort((k1, k2) => {
+      return Object.keys(this.value.$document?.schemaPaths || {}).sort((k1, k2) => {
         if (k1 === '_id' && k2 !== '_id') {
           return -1;
         }
@@ -477,6 +480,8 @@ module.exports = app => app.component('dashboard', {
     return {
       status: 'loading',
       code: '',
+      title: '',
+      description: '',
       showEditor: false,
       dashboard: null,
       result: null
@@ -488,6 +493,8 @@ module.exports = app => app.component('dashboard', {
     },
     async updateCode(update) {
       this.code = update.doc.code;
+      this.title = update.doc.title;
+      this.description = update.doc.description;
       this.result = update.result;
     }
   },
@@ -498,6 +505,8 @@ module.exports = app => app.component('dashboard', {
     }
     this.dashboard = dashboard;
     this.code = this.dashboard.code;
+    this.title = this.dashboard.title;
+    this.description = this.dashboard.description ?? '';
     this.result = result;
     this.status = 'loaded';
   }
@@ -520,11 +529,13 @@ const template = __webpack_require__(/*! ./edit-dashboard.html */ "./frontend/sr
 
 module.exports = app => app.component('edit-dashboard', {
   template: template,
-  props: ['dashboardId', 'code'],
+  props: ['dashboardId', 'code', 'currentDescription', 'currentTitle'],
   data: function() {
     return {
       status: 'loading',
       editor: null,
+      title: '',
+      description: ''
     }
   },
   methods: {
@@ -532,9 +543,12 @@ module.exports = app => app.component('edit-dashboard', {
         this.$emit('close')
     },
     async updateCode() {
+      console.log('this.title', this.title, 'this.description', this.description)
       const { doc, result } = await api.Dashboard.updateDashboard({
         dashboardId: this.dashboardId,
-        code: this.editor.getValue()
+        code: this.editor.getValue(),
+        title: this.title,
+        description: this.description
       });
       this.$emit('update', { doc, result });
       this.editor.setValue(doc.code);
@@ -560,8 +574,8 @@ module.exports = app => app.component('edit-dashboard', {
    
     this.editor.focus();
     // this.editor.refresh(); // if anything weird happens on load, this usually fixes it. However, this breaks it in this case.
-
-    
+    this.description = this.currentDescription;
+    this.title = this.currentTitle;
   }
 });
 
@@ -586,8 +600,24 @@ module.exports = app => app.component('dashboards', {
   data: () => ({
     status: 'loading',
     dashboards: [],
-    showCreateDashboardModal: false
+    showCreateDashboardModal: false,
+    showDeleteDashboardModal: null
   }),
+  methods: {
+    async deleteDashboard(dashboard) {
+      if (!dashboard) {
+        return;
+      }
+      await api.Dashboard.deleteDashboard({ dashboardId: dashboard._id });
+      const removedDashboard = this.dashboards.findIndex(x => x._id.toString() === dashboard._id.toString());
+      this.dashboards.splice(removedDashboard, 1);
+      this.showDeleteDashboardModal = null;
+    },
+    insertNewDashboard(dashboard) {
+      this.dashboards.push(dashboard);
+      this.showCreateDashboardModal = false;
+    }
+  },
   async mounted() {
     const { dashboards } = await api.Dashboard.getDashboards();
     this.dashboards = dashboards;
@@ -674,6 +704,49 @@ const appendCSS = __webpack_require__(/*! ../appendCSS */ "./frontend/src/append
 appendCSS(__webpack_require__(/*! ./document-details.css */ "./frontend/src/document-details/document-details.css"));
 
 module.exports = app => app.component('document-details', {
+  template,
+  props: ['document', 'schemaPaths', 'editting', 'changes', 'invalid'],
+  computed: {
+    virtuals() {
+      if (this.schemaPaths == null) {
+        return [];
+      }
+      if (this.document == null) {
+        return [];
+      }
+      const exists = this.schemaPaths.map(x => x.path);
+      const docKeys = Object.keys(this.document);
+      const result = [];
+      for (let i = 0; i < docKeys.length; i++) {
+        if (!exists.includes(docKeys[i])) {
+          result.push({ name: docKeys[i], value: this.document[docKeys[i]] });
+        }
+      }
+
+      return result;
+    },
+  }
+})
+
+/***/ }),
+
+/***/ "./frontend/src/document-details/document-property/document-property.js":
+/*!******************************************************************************!*\
+  !*** ./frontend/src/document-details/document-property/document-property.js ***!
+  \******************************************************************************/
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+"use strict";
+
+
+const mpath = __webpack_require__(/*! mpath */ "./node_modules/mpath/index.js");
+const template = __webpack_require__(/*! ./document-property.html */ "./frontend/src/document-details/document-property/document-property.html")
+
+const appendCSS = __webpack_require__(/*! ../../appendCSS */ "./frontend/src/appendCSS.js");
+
+appendCSS(__webpack_require__(/*! ./document-property.css */ "./frontend/src/document-details/document-property/document-property.css"));
+
+module.exports = app => app.component('document-property', {
   template,
   data: function() {
     return {
@@ -704,31 +777,20 @@ module.exports = app => app.component('document-details', {
       return 'edit-default';
     },
     getValueForPath(path) {
+      if (this.document == null) {
+        return undefined;
+      }
       return mpath.get(path, this.document);
     },
     getEditValueForPath({ path }) {
       if (!this.changes) {
         return;
       }
+      if (!this.document) {
+        return;
+      }
       return path in this.changes ? this.changes[path] : mpath.get(path, this.document);
     }
-  },
-  computed: {
-    virtuals() {
-      if (this.schemaPaths == null) {
-        return [];
-      }
-      const exists = this.schemaPaths.map(x => x.path);
-      const docKeys = Object.keys(this.document);
-      const result = [];
-      for (let i = 0; i < docKeys.length; i++) {
-        if (!exists.includes(docKeys[i])) {
-          result.push({ name: docKeys[i], value: this.document[docKeys[i]] });
-        }
-      }
-
-      return result;
-    },
   }
 })
 
@@ -2520,7 +2582,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\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>";
+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\">{{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        :currentDescription=\"description\"\n        :currentTitle=\"title\"\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>";
 
 /***/ }),
 
@@ -2531,7 +2593,7 @@ module.exports = "<div class=\"dashboard px-1\">\n  <div v-if=\"dashboard\" clas
 /***/ ((module) => {
 
 "use strict";
-module.exports = "<div>\n    <textarea ref=\"codeEditor\">{{code}}</textarea>\n    <button @click=\"updateCode\" style=\"color: black;margin-right: 0.5em\">Submit</button>\n    <button @click=\"closeEditor\" class=\"gray\" style=\"margin-right: 0.5em\">Cancel</button>\n</div>";
+module.exports = "<div class=\"p-4 bg-gray-100 rounded-lg shadow-lg\">\n    <div>\n        <input v-model=\"title\" class=\"w-full p-2 mb-4 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500\" placeholder=\"Title\"/>\n    </div>\n    <div>\n        <textarea v-model=\"description\" class=\"w-full p-2 mb-4 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500\" rows=\"4\" placeholder=\"Description\">{{description}}</textarea>\n    </div>\n    <div>\n        <textarea ref=\"codeEditor\" class=\"w-full p-2 mb-4 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500\" rows=\"6\">{{code}}</textarea>\n    </div>\n    <div class=\"flex space-x-2\">\n        <button @click=\"updateCode\" class=\"px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500\">Submit</button>\n        <button @click=\"closeEditor\" class=\"px-4 py-2 bg-gray-500 text-white rounded-md hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-500\">Cancel</button>\n    </div>\n</div>";
 
 /***/ }),
 
@@ -2542,7 +2604,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/' + 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>";
+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                <td class=\"relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6 lg:pr-8\">\n                  <button\n                    @click=\"showDeleteDashboardModal=dashboard\"\n                    class=\"text-teal-600 hover:text-teal-900\">\n                    Delete\n                  </button>\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 @close=\"insertNewDashboard\"></create-dashboard>\n    </template>\n  </modal>\n\n  <modal v-if=\"showDeleteDashboardModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"showDeleteDashboardModal = null;\">&times;</div>\n      <h2>Are you sure you want to delete this dashboard titled {{showDeleteDashboardModal.title}}?</h2>\n      <div class=\"flex space-x-2\">\n        <button class=\"px-4 py-2 bg-red-500 text-white rounded-md hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-500\" @click=\"deleteDashboard(showDeleteDashboardModal)\">Yes, delete</button>\n        <button class=\"px-4 py-2 bg-gray-500 text-white rounded-md hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-600\" @click=\"showDeleteDashboardModal=null;\">Cancel</button>\n      </div>\n    </template>\n  </modal>\n</div>";
 
 /***/ }),
 
@@ -2586,7 +2648,29 @@ module.exports = ".document-details {\n  width: 100%;\n}\n\n.document-details .v
 /***/ ((module) => {
 
 "use strict";
-module.exports = "<div class=\"document-details\">\n  <div v-for=\"path in schemaPaths\" class=\"value\">\n    <div class=\"relative path-key p-1 flex\">\n      <div class=\"grow\">\n        {{path.path}}\n        <span class=\"path-type\">\n          ({{(path.instance || 'unknown').toLowerCase()}})\n        </span>\n      </div>\n      <div v-if=\"editting && path.instance === 'Date'\" class=\"flex gap-1.5\">\n        <div\n          @click=\"dateType = 'picker'\"\n          :class=\"dateType === 'picker' ? 'bg-white' : ''\"\n          class=\"self-stretch px-2 py-1 rounded-sm justify-center items-center gap-1.5 flex cursor-pointer\">\n          <div\n            :class=\"dateType === 'picker' ? 'text-sky-600' : 'text-black'\"\n            class=\"text-xs font-medium font-['Lato'] capitalize leading-tight\">\n            Date Picker\n          </div>\n        </div>\n        <div\n          @click=\"dateType = 'iso'\"\n          :class=\"dateType === 'iso' ? 'bg-white' : ''\"\n          class=\"self-stretch px-2 py-1 rounded-sm justify-center items-center gap-1.5 flex cursor-pointer\">\n          <div\n            :class=\"dateType === 'iso' ? 'text-sky-600' : 'text-black'\"\n            class=\"text-xs font-medium font-['Lato'] capitalize leading-tight\">\n            ISO String\n          </div>\n        </div>\n      </div>\n    </div>\n    <div v-if=\"editting && path.path !== '_id'\" class=\"pl-1\">\n      <component\n        :is=\"getEditComponentForPath(path)\"\n        :value=\"getEditValueForPath(path)\"\n        :format=\"dateType\"\n        @input=\"changes[path.path] = $event; delete invalid[path.path];\"\n        @error=\"invalid[path.path] = $event;\"\n        >\n      </component>\n    </div>\n    <div v-else class=\"pl-1\">\n      <component :is=\"getComponentForPath(path)\" :value=\"getValueForPath(path.path)\"></component>\n    </div>\n  </div>\n  <div v-for=\"path in virtuals\" class=\"mb-2\">\n    <div class=\"p-1 mb-1 bg-slate-100\">\n      {{path.name}}\n      <span class=\"path-type\">\n        (virtual)\n      </span>\n    </div>\n    <div v-if=\"path.value == null\" class=\"text-sky-800\">\n      {{'' + path.value}}\n    </div>\n    <div v-else>\n      {{path.value}}\n    </div>\n  </div>\n</div>";
+module.exports = "<div class=\"document-details\">\n  <document-property\n    :document=\"document\"\n    :schemaPaths=\"schemaPaths\"\n    :editting=\"editting\"\n    :changes=\"changes\"\n    :invalid=\"invalid\"></document-property>\n  <div v-for=\"path in virtuals\" class=\"mb-2\">\n    <div class=\"p-1 mb-1 bg-slate-100\">\n      {{path.name}}\n      <span class=\"path-type\">\n        (virtual)\n      </span>\n    </div>\n    <div v-if=\"path.value == null\" class=\"text-sky-800\">\n      {{'' + path.value}}\n    </div>\n    <div v-else>\n      {{path.value}}\n    </div>\n  </div>\n</div>";
+
+/***/ }),
+
+/***/ "./frontend/src/document-details/document-property/document-property.css":
+/*!*******************************************************************************!*\
+  !*** ./frontend/src/document-details/document-property/document-property.css ***!
+  \*******************************************************************************/
+/***/ ((module) => {
+
+"use strict";
+module.exports = ".document-details {\n    width: 100%;\n  }\n  \n  .document-details .value {\n    padding-top: 10px;\n    padding-bottom: 10px;\n  }\n  \n  .document-details .path-key {\n    background-color: #f0f0f0;\n    margin-bottom: 0.5em;\n  }\n  \n  .document-details .path-type {\n    color: rgba(0,0,0,.36);\n    font-size: 0.8em;\n  }\n  \n  .document-details .date-position {\n    float: right;\n    margin-top: -7px;\n  }";
+
+/***/ }),
+
+/***/ "./frontend/src/document-details/document-property/document-property.html":
+/*!********************************************************************************!*\
+  !*** ./frontend/src/document-details/document-property/document-property.html ***!
+  \********************************************************************************/
+/***/ ((module) => {
+
+"use strict";
+module.exports = "<div>\n  <div v-for=\"path in schemaPaths\" class=\"value\">\n    <div class=\"relative path-key p-1 flex\">\n      <div class=\"grow\">\n        {{path.path}}\n        <span class=\"path-type\">\n          ({{(path.instance || 'unknown').toLowerCase()}})\n        </span>\n      </div>\n      <div v-if=\"editting && path.instance === 'Date'\" class=\"flex gap-1.5\">\n        <div\n          @click=\"dateType = 'picker'\"\n          :class=\"dateType === 'picker' ? 'bg-white' : ''\"\n          class=\"self-stretch px-2 py-1 rounded-sm justify-center items-center gap-1.5 flex cursor-pointer\">\n          <div\n            :class=\"dateType === 'picker' ? 'text-sky-600' : 'text-black'\"\n            class=\"text-xs font-medium font-['Lato'] capitalize leading-tight\">\n            Date Picker\n          </div>\n        </div>\n        <div\n          @click=\"dateType = 'iso'\"\n          :class=\"dateType === 'iso' ? 'bg-white' : ''\"\n          class=\"self-stretch px-2 py-1 rounded-sm justify-center items-center gap-1.5 flex cursor-pointer\">\n          <div\n            :class=\"dateType === 'iso' ? 'text-sky-600' : 'text-black'\"\n            class=\"text-xs font-medium font-['Lato'] capitalize leading-tight\">\n            ISO String\n          </div>\n        </div>\n      </div>\n    </div>\n    <div v-if=\"editting && path.path !== '_id'\" class=\"pl-1\">\n      <component\n        :is=\"getEditComponentForPath(path)\"\n        :value=\"getEditValueForPath(path)\"\n        :format=\"dateType\"\n        @input=\"changes[path.path] = $event; delete invalid[path.path];\"\n        @error=\"invalid[path.path] = $event;\"\n        >\n      </component>\n    </div>\n    <div v-else class=\"pl-1\">\n      <component :is=\"getComponentForPath(path)\" :value=\"getValueForPath(path.path)\"></component>\n    </div>\n  </div>\n</div>";
 
 /***/ }),
 
@@ -10577,6 +10661,7 @@ __webpack_require__(/*! ./detail-default/detail-default */ "./frontend/src/detai
 __webpack_require__(/*! ./document/document */ "./frontend/src/document/document.js")(app);
 __webpack_require__(/*! ./document/confirm-changes/confirm-changes */ "./frontend/src/document/confirm-changes/confirm-changes.js")(app);
 __webpack_require__(/*! ./document-details/document-details */ "./frontend/src/document-details/document-details.js")(app);
+__webpack_require__(/*! ./document-details/document-property/document-property */ "./frontend/src/document-details/document-property/document-property.js")(app);
 __webpack_require__(/*! ./edit-array/edit-array */ "./frontend/src/edit-array/edit-array.js")(app);
 __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);

package/frontend/public/tw.css

@@ -582,10 +582,6 @@ video {
   position: fixed;
 }
 
-.absolute {
-  position: absolute;
-}
-
 .relative {
   position: relative;
 }
@@ -642,10 +638,6 @@ video {
   margin-bottom: 1rem;
 }
 
-.mb-\[-1px\] {
-  margin-bottom: -1px;
-}
-
 .ml-3 {
   margin-left: 0.75rem;
 }
@@ -822,6 +814,12 @@ video {
   row-gap: 1.75rem;
 }
 
+.space-x-2 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
+  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
 .space-y-1 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
@@ -874,6 +872,10 @@ video {
   border-radius: 0.25rem;
 }
 
+.rounded-lg {
+  border-radius: 0.5rem;
+}
+
 .rounded-md {
   border-radius: 0.375rem;
 }
@@ -882,10 +884,6 @@ video {
   border-radius: 0px;
 }
 
-.rounded-xl {
-  border-radius: 0.75rem;
-}
-
 .rounded-sm {
   border-radius: 0.125rem;
 }
@@ -944,11 +942,26 @@ video {
   border-color: transparent;
 }
 
+.bg-blue-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(59 130 246 / var(--tw-bg-opacity));
+}
+
+.bg-gray-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
+}
+
 .bg-gray-200 {
   --tw-bg-opacity: 1;
   background-color: rgb(229 231 235 / var(--tw-bg-opacity));
 }
 
+.bg-gray-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(107 114 128 / var(--tw-bg-opacity));
+}
+
 .bg-green-600 {
   --tw-bg-opacity: 1;
   background-color: rgb(22 163 74 / var(--tw-bg-opacity));
@@ -959,6 +972,11 @@ video {
   background-color: rgb(254 242 242 / var(--tw-bg-opacity));
 }
 
+.bg-red-500 {
+  --tw-bg-opacity: 1;
+  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));
@@ -1229,6 +1247,12 @@ video {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+.shadow-lg {
+  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 .shadow-sm {
   --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
   --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
@@ -1309,6 +1333,11 @@ video {
   border-color: rgb(209 213 219 / var(--tw-border-opacity));
 }
 
+.hover\:bg-blue-600:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(37 99 235 / var(--tw-bg-opacity));
+}
+
 .hover\:bg-gray-300:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(209 213 219 / var(--tw-bg-opacity));
@@ -1319,6 +1348,11 @@ video {
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-gray-600:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(75 85 99 / var(--tw-bg-opacity));
+}
+
 .hover\:bg-green-500:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(34 197 94 / var(--tw-bg-opacity));
@@ -1329,6 +1363,11 @@ video {
   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));
+}
+
 .hover\:bg-slate-500:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(100 116 139 / var(--tw-bg-opacity));
@@ -1358,12 +1397,43 @@ video {
   z-index: 10;
 }
 
+.focus\:outline-none:focus {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+
 .focus\:ring-0:focus {
   --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(0px + 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);
 }
 
+.focus\:ring-2:focus {
+  --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);
+}
+
+.focus\:ring-blue-500:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity));
+}
+
+.focus\:ring-gray-500:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(107 114 128 / var(--tw-ring-opacity));
+}
+
+.focus\:ring-gray-600:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(75 85 99 / var(--tw-ring-opacity));
+}
+
+.focus\:ring-red-500:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(239 68 68 / var(--tw-ring-opacity));
+}
+
 .focus-visible\:outline:focus-visible {
   outline-style: solid;
 }

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

@@ -15,7 +15,7 @@ module.exports = app => app.component('dashboard-document', {
       return null;
     },
     schemaPaths() {
-      return Object.keys(this.value.$document.schemaPaths).sort((k1, k2) => {
+      return Object.keys(this.value.$document?.schemaPaths || {}).sort((k1, k2) => {
         if (k1 === '_id' && k2 !== '_id') {
           return -1;
         }

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

@@ -1,49 +1,10 @@
 <div class="document-details">
-  <div v-for="path in schemaPaths" class="value">
-    <div class="relative path-key p-1 flex">
-      <div class="grow">
-        {{path.path}}
-        <span class="path-type">
-          ({{(path.instance || 'unknown').toLowerCase()}})
-        </span>
-      </div>
-      <div v-if="editting && path.instance === 'Date'" class="flex gap-1.5">
-        <div
-          @click="dateType = 'picker'"
-          :class="dateType === 'picker' ? 'bg-white' : ''"
-          class="self-stretch px-2 py-1 rounded-sm justify-center items-center gap-1.5 flex cursor-pointer">
-          <div
-            :class="dateType === 'picker' ? 'text-sky-600' : 'text-black'"
-            class="text-xs font-medium font-['Lato'] capitalize leading-tight">
-            Date Picker
-          </div>
-        </div>
-        <div
-          @click="dateType = 'iso'"
-          :class="dateType === 'iso' ? 'bg-white' : ''"
-          class="self-stretch px-2 py-1 rounded-sm justify-center items-center gap-1.5 flex cursor-pointer">
-          <div
-            :class="dateType === 'iso' ? 'text-sky-600' : 'text-black'"
-            class="text-xs font-medium font-['Lato'] capitalize leading-tight">
-            ISO String
-          </div>
-        </div>
-      </div>
-    </div>
-    <div v-if="editting && path.path !== '_id'" class="pl-1">
-      <component
-        :is="getEditComponentForPath(path)"
-        :value="getEditValueForPath(path)"
-        :format="dateType"
-        @input="changes[path.path] = $event; delete invalid[path.path];"
-        @error="invalid[path.path] = $event;"
-        >
-      </component>
-    </div>
-    <div v-else class="pl-1">
-      <component :is="getComponentForPath(path)" :value="getValueForPath(path.path)"></component>
-    </div>
-  </div>
+  <document-property
+    :document="document"
+    :schemaPaths="schemaPaths"
+    :editting="editting"
+    :changes="changes"
+    :invalid="invalid"></document-property>
   <div v-for="path in virtuals" class="mb-2">
     <div class="p-1 mb-1 bg-slate-100">
       {{path.name}}

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

@@ -9,49 +9,15 @@ appendCSS(require('./document-details.css'));
 
 module.exports = app => app.component('document-details', {
   template,
-  data: function() {
-    return {
-      dateType: 'picker' // picker, iso
-    }
-  },
   props: ['document', 'schemaPaths', 'editting', 'changes', 'invalid'],
-  methods: {
-    getComponentForPath(schemaPath) {
-      if (schemaPath.instance === 'Array') {
-        return 'detail-array';
-      }
-      return 'detail-default';
-    },
-    getEditComponentForPath(path) {
-      if (path.instance == 'Date') {
-        return 'edit-date';
-      }
-      if (path.instance == 'Number') {
-        return 'edit-number';
-      }
-      if (path.instance === 'Array') {
-        return 'edit-array';
-      }
-      if (path.instance === 'Embedded') {
-        return 'edit-subdocument';
-      }
-      return 'edit-default';
-    },
-    getValueForPath(path) {
-      return mpath.get(path, this.document);
-    },
-    getEditValueForPath({ path }) {
-      if (!this.changes) {
-        return;
-      }
-      return path in this.changes ? this.changes[path] : mpath.get(path, this.document);
-    }
-  },
   computed: {
     virtuals() {
       if (this.schemaPaths == null) {
         return [];
       }
+      if (this.document == null) {
+        return [];
+      }
       const exists = this.schemaPaths.map(x => x.path);
       const docKeys = Object.keys(this.document);
       const result = [];

package/frontend/src/document-details/document-property/document-property.css

@@ -0,0 +1,23 @@
+.document-details {
+    width: 100%;
+  }
+  
+  .document-details .value {
+    padding-top: 10px;
+    padding-bottom: 10px;
+  }
+  
+  .document-details .path-key {
+    background-color: #f0f0f0;
+    margin-bottom: 0.5em;
+  }
+  
+  .document-details .path-type {
+    color: rgba(0,0,0,.36);
+    font-size: 0.8em;
+  }
+  
+  .document-details .date-position {
+    float: right;
+    margin-top: -7px;
+  }

package/frontend/src/document-details/document-property/document-property.html

@@ -0,0 +1,47 @@
+<div>
+  <div v-for="path in schemaPaths" class="value">
+    <div class="relative path-key p-1 flex">
+      <div class="grow">
+        {{path.path}}
+        <span class="path-type">
+          ({{(path.instance || 'unknown').toLowerCase()}})
+        </span>
+      </div>
+      <div v-if="editting && path.instance === 'Date'" class="flex gap-1.5">
+        <div
+          @click="dateType = 'picker'"
+          :class="dateType === 'picker' ? 'bg-white' : ''"
+          class="self-stretch px-2 py-1 rounded-sm justify-center items-center gap-1.5 flex cursor-pointer">
+          <div
+            :class="dateType === 'picker' ? 'text-sky-600' : 'text-black'"
+            class="text-xs font-medium font-['Lato'] capitalize leading-tight">
+            Date Picker
+          </div>
+        </div>
+        <div
+          @click="dateType = 'iso'"
+          :class="dateType === 'iso' ? 'bg-white' : ''"
+          class="self-stretch px-2 py-1 rounded-sm justify-center items-center gap-1.5 flex cursor-pointer">
+          <div
+            :class="dateType === 'iso' ? 'text-sky-600' : 'text-black'"
+            class="text-xs font-medium font-['Lato'] capitalize leading-tight">
+            ISO String
+          </div>
+        </div>
+      </div>
+    </div>
+    <div v-if="editting && path.path !== '_id'" class="pl-1">
+      <component
+        :is="getEditComponentForPath(path)"
+        :value="getEditValueForPath(path)"
+        :format="dateType"
+        @input="changes[path.path] = $event; delete invalid[path.path];"
+        @error="invalid[path.path] = $event;"
+        >
+      </component>
+    </div>
+    <div v-else class="pl-1">
+      <component :is="getComponentForPath(path)" :value="getValueForPath(path.path)"></component>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,56 @@
+'use strict';
+
+const mpath = require('mpath');
+const template = require('./document-property.html')
+
+const appendCSS = require('../../appendCSS');
+
+appendCSS(require('./document-property.css'));
+
+module.exports = app => app.component('document-property', {
+  template,
+  data: function() {
+    return {
+      dateType: 'picker' // picker, iso
+    }
+  },
+  props: ['document', 'schemaPaths', 'editting', 'changes', 'invalid'],
+  methods: {
+    getComponentForPath(schemaPath) {
+      if (schemaPath.instance === 'Array') {
+        return 'detail-array';
+      }
+      return 'detail-default';
+    },
+    getEditComponentForPath(path) {
+      if (path.instance == 'Date') {
+        return 'edit-date';
+      }
+      if (path.instance == 'Number') {
+        return 'edit-number';
+      }
+      if (path.instance === 'Array') {
+        return 'edit-array';
+      }
+      if (path.instance === 'Embedded') {
+        return 'edit-subdocument';
+      }
+      return 'edit-default';
+    },
+    getValueForPath(path) {
+      if (this.document == null) {
+        return undefined;
+      }
+      return mpath.get(path, this.document);
+    },
+    getEditValueForPath({ path }) {
+      if (!this.changes) {
+        return;
+      }
+      if (!this.document) {
+        return;
+      }
+      return path in this.changes ? this.changes[path] : mpath.get(path, this.document);
+    }
+  }
+})

package/frontend/src/index.js

@@ -26,6 +26,7 @@ require('./detail-default/detail-default')(app);
 require('./document/document')(app);
 require('./document/confirm-changes/confirm-changes')(app);
 require('./document-details/document-details')(app);
+require('./document-details/document-property/document-property')(app);
 require('./edit-array/edit-array')(app);
 require('./edit-default/edit-default')(app);
 require('./edit-number/edit-number')(app);

package/package.json

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