@mongoosejs/studio 0.0.34 → 0.0.36

package/backend/actions/Dashboard/deleteDashboard.js

@@ -0,0 +1,19 @@
+'use strict';
+
+const Archetype = require('archetype');
+const vm = require('vm');
+
+const DeleteDashboardParams = new Archetype({
+  dashboardId: {
+    $type: 'string',
+    $required: true
+  },
+}).compile('DeleteDashboardParams');
+
+module.exports = ({ db }) => async function deleteDashboard(params) {
+  const { dashboardId } = new DeleteDashboardParams(params);
+  const Dashboard = db.model('__Studio_Dashboard');
+
+  const result = await Dashboard.deleteOne({ _id: dashboardId }).orFail();
+  return { result };
+};

package/backend/actions/Dashboard/index.js

@@ -1,6 +1,7 @@
 'use strict';
 
 exports.createDashboard = require('./createDashboard');
+exports.deleteDashboard = require('./deleteDashboard');
 exports.getDashboard = require('./getDashboard');
 exports.getDashboards = require('./getDashboards');
 exports.updateDashboard = require('./updateDashboard');

package/backend/actions/Dashboard/updateDashboard.js

@@ -10,16 +10,32 @@ const UpdateDashboardParams = new Archetype({
   code: {
     $type: 'string',
     $required: true
+  },
+  title: {
+    $type: 'string'
+  },
+  description: {
+    $type: 'string'
   }
 }).compile('UpdateDashboardParams');
 
 module.exports = ({ db }) => async function updateDashboard(params) {
-  const { dashboardId, code } = new UpdateDashboardParams(params);
+  const { dashboardId, code, title, description } = new UpdateDashboardParams(params);
 
   const Dashboard = db.models[`__Studio_Dashboard`];
 
+  const updateObj = { code };
+  
+  if (title) {
+    updateObj.title = title;
+  }
+
+  if (description) {
+    updateObj.description = description;
+  }
+
   const doc = await Dashboard.
-    findByIdAndUpdate(dashboardId, { code }, { sanitizeFilter: true, returnDocument: 'after', overwriteImmutable: true });
+    findByIdAndUpdate(dashboardId, updateObj, { sanitizeFilter: true, returnDocument: 'after', overwriteImmutable: true });
   
   let result = null;
   try {

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;
@@ -676,6 +706,54 @@ appendCSS(__webpack_require__(/*! ./document-details.css */ "./frontend/src/docu
 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 {
+      dateType: 'picker' // picker, iso
+    }
+  },
+  props: ['document', 'schemaPaths', 'editting', 'changes', 'invalid'],
   methods: {
     getComponentForPath(schemaPath) {
       if (schemaPath.instance === 'Array') {
@@ -699,30 +777,19 @@ 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;
       }
-      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]] });
-        }
+      if (!this.document) {
+        return;
       }
-
-      return result;
+      return path in this.changes ? this.changes[path] : mpath.get(path, this.document);
     }
   }
 })
@@ -927,13 +994,11 @@ const template = __webpack_require__(/*! ./edit-date.html */ "./frontend/src/edi
 
 module.exports = app => app.component('edit-date', {
   template: template,
-  props: ['value'],
+  props: ['value', 'format'],
   emits: ['input'],
-  data: function() {
-    return {
-      inputType: 'picker' // picker, iso
-    }
-  },
+  data: () => ({
+    inputType: ''
+  }),
   computed: {
     valueAsLocalString() {
       if (this.value == null) {
@@ -958,6 +1023,9 @@ module.exports = app => app.component('edit-date', {
       }
       const date = new Date(this.value);
       return date.toISOString();
+    },
+    dateSelection() {
+      return this.format;
     }
   }
 });
@@ -2514,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>";
 
 /***/ }),
 
@@ -2525,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>";
 
 /***/ }),
 
@@ -2536,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>";
 
 /***/ }),
 
@@ -2569,7 +2637,7 @@ module.exports = "<div>\n  {{value}}\n</div>";
 /***/ ((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}";
+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}";
 
 /***/ }),
 
@@ -2580,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=\"path-key p-1\">\n      {{path.path}}\n      <span class=\"path-type\">\n        ({{(path.instance || 'unknown').toLowerCase()}})\n      </span>        \n    </div>\n    <div v-if=\"editting && path.path !== '_id'\" class=\"pl-1\">\n      <component\n        :is=\"getEditComponentForPath(path)\"\n        :value=\"getEditValueForPath(path)\"\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>";
 
 /***/ }),
 
@@ -2646,7 +2736,7 @@ module.exports = "<div class=\"edit-array\">\n  <textarea\n    ref=\"arrayEditor
 /***/ ((module) => {
 
 "use strict";
-module.exports = "<div>\n  <div class=\"flex mb-[-1px] w-64 justify-end\">\n    <button\n      @click=\"inputType = 'picker'\"\n      type=\"button\"\n      class=\"relative inline-flex items-center rounded-none p-1 rounded-tl-md text-sm text-gray-800 ring-1 ring-inset ring-gray-300 hover:bg-gray-200 focus:z-10\"\n      :class=\"inputType === 'picker' ? 'bg-gray-200' : 'bg-white'\">\n      Date Picker\n    </button>\n    <button\n      @click=\"inputType = 'iso'\"\n      type=\"button\"\n      class=\"relative -ml-px inline-flex items-center p-1 rounded-none rounded-tr-md text-sm text-gray-800 ring-1 ring-inset ring-gray-300 hover:bg-gray-200 focus:z-10\"\n      :class=\"inputType === 'iso' ? 'bg-gray-200' : 'bg-white'\">\n      ISO String Input\n    </button>\n  </div>\n  <input v-if=\"inputType == 'picker'\" class=\"w-64 h-8 border border-gray-300 outline-0\" type=\"datetime-local\" :value=\"valueAsLocalString\" @input=\"$emit('input', $event.target.value)\">\n  <input v-if=\"inputType == 'iso'\" type=\"text\" class=\"w-64 h-8 border border-gray-300 outline-0\" :value=\"valueAsISOString\" @input=\"$emit('input', $event.target.value)\">\n</div>";
+module.exports = "<div>\n  <input v-if=\"dateSelection == 'picker'\" class=\"w-64 h-8 border border-gray-300 outline-0\" type=\"datetime-local\" :value=\"valueAsLocalString\" @input=\"$emit('input', $event.target.value)\">\n  <input v-if=\"dateSelection == 'iso'\" type=\"text\" class=\"w-64 h-8 border border-gray-300 outline-0\" :value=\"valueAsISOString\" @input=\"$emit('input', $event.target.value)\">\n</div>";
 
 /***/ }),
 
@@ -10571,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

@@ -638,10 +638,6 @@ video {
   margin-bottom: 1rem;
 }
 
-.mb-\[-1px\] {
-  margin-bottom: -1px;
-}
-
 .ml-3 {
   margin-left: 0.75rem;
 }
@@ -774,6 +770,10 @@ video {
   flex-grow: 1;
 }
 
+.cursor-pointer {
+  cursor: pointer;
+}
+
 .list-disc {
   list-style-type: disc;
 }
@@ -790,8 +790,16 @@ video {
   align-items: center;
 }
 
-.justify-end {
-  justify-content: flex-end;
+.justify-center {
+  justify-content: center;
+}
+
+.gap-1 {
+  gap: 0.25rem;
+}
+
+.gap-1\.5 {
+  gap: 0.375rem;
 }
 
 .gap-2 {
@@ -806,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)));
@@ -828,6 +842,10 @@ video {
   border-color: rgb(209 213 219 / var(--tw-divide-opacity));
 }
 
+.self-stretch {
+  align-self: stretch;
+}
+
 .overflow-auto {
   overflow: auto;
 }
@@ -854,6 +872,10 @@ video {
   border-radius: 0.25rem;
 }
 
+.rounded-lg {
+  border-radius: 0.5rem;
+}
+
 .rounded-md {
   border-radius: 0.375rem;
 }
@@ -862,6 +884,10 @@ video {
   border-radius: 0px;
 }
 
+.rounded-sm {
+  border-radius: 0.125rem;
+}
+
 .rounded-l-md {
   border-top-left-radius: 0.375rem;
   border-bottom-left-radius: 0.375rem;
@@ -872,14 +898,6 @@ video {
   border-bottom-right-radius: 0.375rem;
 }
 
-.rounded-tl-md {
-  border-top-left-radius: 0.375rem;
-}
-
-.rounded-tr-md {
-  border-top-right-radius: 0.375rem;
-}
-
 .border {
   border-width: 1px;
 }
@@ -924,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));
@@ -939,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));
@@ -1096,6 +1134,10 @@ video {
   vertical-align: middle;
 }
 
+.font-\[\'Lato\'\] {
+  font-family: 'Lato';
+}
+
 .text-base {
   font-size: 1rem;
   line-height: 1.5rem;
@@ -1116,6 +1158,11 @@ video {
   line-height: 1.75rem;
 }
 
+.text-xs {
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
+
 .font-bold {
   font-weight: 700;
 }
@@ -1128,10 +1175,18 @@ video {
   font-weight: 600;
 }
 
+.capitalize {
+  text-transform: capitalize;
+}
+
 .leading-6 {
   line-height: 1.5rem;
 }
 
+.leading-tight {
+  line-height: 1.25;
+}
+
 .text-black {
   --tw-text-opacity: 1;
   color: rgb(0 0 0 / var(--tw-text-opacity));
@@ -1152,11 +1207,6 @@ video {
   color: rgb(55 65 81 / var(--tw-text-opacity));
 }
 
-.text-gray-800 {
-  --tw-text-opacity: 1;
-  color: rgb(31 41 55 / var(--tw-text-opacity));
-}
-
 .text-gray-900 {
   --tw-text-opacity: 1;
   color: rgb(17 24 39 / var(--tw-text-opacity));
@@ -1177,6 +1227,11 @@ video {
   color: rgb(153 27 27 / var(--tw-text-opacity));
 }
 
+.text-sky-600 {
+  --tw-text-opacity: 1;
+  color: rgb(2 132 199 / var(--tw-text-opacity));
+}
+
 .text-sky-800 {
   --tw-text-opacity: 1;
   color: rgb(7 89 133 / var(--tw-text-opacity));
@@ -1192,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);
@@ -1272,9 +1333,9 @@ video {
   border-color: rgb(209 213 219 / var(--tw-border-opacity));
 }
 
-.hover\:bg-gray-200:hover {
+.hover\:bg-blue-600:hover {
   --tw-bg-opacity: 1;
-  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
+  background-color: rgb(37 99 235 / var(--tw-bg-opacity));
 }
 
 .hover\:bg-gray-300:hover {
@@ -1287,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));
@@ -1297,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));
@@ -1326,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/api.js

@@ -74,6 +74,9 @@ if (config__isLambda) {
     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);
     },

package/frontend/src/dashboard/dashboard.html

@@ -1,7 +1,7 @@
 <div class="dashboard px-1">
   <div v-if="dashboard" class="max-w-5xl mx-auto">
     <div class="flex items-center w-full">
-      <h2 class="mt-4 mb-4 text-gray-900 font-semibold text-xl grow shrink">{{dashboard.title}}</h2>
+      <h2 class="mt-4 mb-4 text-gray-900 font-semibold text-xl grow shrink">{{title}}</h2>
       <div>
         <button
           v-if="!showEditor"
@@ -19,6 +19,8 @@
       <edit-dashboard
         :dashboardId="dashboard._id"
         :code="code"
+        :currentDescription="description"
+        :currentTitle="title"
         @close="showEditor=false;"
         @update="updateCode"></edit-dashboard>
     </div>

package/frontend/src/dashboard/dashboard.js

@@ -10,6 +10,8 @@ module.exports = app => app.component('dashboard', {
     return {
       status: 'loading',
       code: '',
+      title: '',
+      description: '',
       showEditor: false,
       dashboard: null,
       result: null
@@ -21,6 +23,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;
     }
   },
@@ -31,6 +35,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';
   }

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

@@ -1,5 +1,15 @@
-<div>
-    <textarea ref="codeEditor">{{code}}</textarea>
-    <button @click="updateCode" style="color: black;margin-right: 0.5em">Submit</button>
-    <button @click="closeEditor" class="gray" style="margin-right: 0.5em">Cancel</button>
+<div class="p-4 bg-gray-100 rounded-lg shadow-lg">
+    <div>
+        <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"/>
+    </div>
+    <div>
+        <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>
+    </div>
+    <div>
+        <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>
+    </div>
+    <div class="flex space-x-2">
+        <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>
+        <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>
+    </div>
 </div>

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

@@ -5,11 +5,13 @@ const template = require('./edit-dashboard.html');
 
 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: {
@@ -17,9 +19,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);
@@ -45,7 +50,7 @@ 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;
   }
 });

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/dashboards/dashboards.html

@@ -59,6 +59,13 @@
                     View
                   </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">
+                  <button
+                    @click="showDeleteDashboardModal=dashboard"
+                    class="text-teal-600 hover:text-teal-900">
+                    Delete
+                  </button>
+                </td>
               </tr>
   
               <!-- More people... -->
@@ -73,7 +80,18 @@
     <template v-slot:body>
       <div class="modal-exit" @click="showCreateDashboardModal = false;">&times;</div>
       
-      <create-dashboard></create-dashboard>
+      <create-dashboard @close="insertNewDashboard"></create-dashboard>
+    </template>
+  </modal>
+
+  <modal v-if="showDeleteDashboardModal">
+    <template v-slot:body>
+      <div class="modal-exit" @click="showDeleteDashboardModal = null;">&times;</div>
+      <h2>Are you sure you want to delete this dashboard titled {{showDeleteDashboardModal.title}}?</h2>
+      <div class="flex space-x-2">
+        <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>
+        <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>
+      </div>
     </template>
   </modal>
 </div>

package/frontend/src/dashboards/dashboards.js

@@ -9,8 +9,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;

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

@@ -15,4 +15,9 @@
 .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-details.html

@@ -1,24 +1,10 @@
 <div class="document-details">
-  <div v-for="path in schemaPaths" class="value">
-    <div class="path-key p-1">
-      {{path.path}}
-      <span class="path-type">
-        ({{(path.instance || 'unknown').toLowerCase()}})
-      </span>        
-    </div>
-    <div v-if="editting && path.path !== '_id'" class="pl-1">
-      <component
-        :is="getEditComponentForPath(path)"
-        :value="getEditValueForPath(path)"
-        @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

@@ -10,43 +10,14 @@ appendCSS(require('./document-details.css'));
 module.exports = app => app.component('document-details', {
   template,
   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 = [];
@@ -57,6 +28,6 @@ module.exports = app => app.component('document-details', {
       }
 
       return 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/edit-date/edit-date.html

@@ -1,20 +1,4 @@
 <div>
-  <div class="flex mb-[-1px] w-64 justify-end">
-    <button
-      @click="inputType = 'picker'"
-      type="button"
-      class="relative inline-flex items-center rounded-none p-1 rounded-tl-md text-sm text-gray-800 ring-1 ring-inset ring-gray-300 hover:bg-gray-200 focus:z-10"
-      :class="inputType === 'picker' ? 'bg-gray-200' : 'bg-white'">
-      Date Picker
-    </button>
-    <button
-      @click="inputType = 'iso'"
-      type="button"
-      class="relative -ml-px inline-flex items-center p-1 rounded-none rounded-tr-md text-sm text-gray-800 ring-1 ring-inset ring-gray-300 hover:bg-gray-200 focus:z-10"
-      :class="inputType === 'iso' ? 'bg-gray-200' : 'bg-white'">
-      ISO String Input
-    </button>
-  </div>
-  <input v-if="inputType == 'picker'" class="w-64 h-8 border border-gray-300 outline-0" type="datetime-local" :value="valueAsLocalString" @input="$emit('input', $event.target.value)">
-  <input v-if="inputType == 'iso'" type="text" class="w-64 h-8 border border-gray-300 outline-0" :value="valueAsISOString" @input="$emit('input', $event.target.value)">
+  <input v-if="dateSelection == 'picker'" class="w-64 h-8 border border-gray-300 outline-0" type="datetime-local" :value="valueAsLocalString" @input="$emit('input', $event.target.value)">
+  <input v-if="dateSelection == 'iso'" type="text" class="w-64 h-8 border border-gray-300 outline-0" :value="valueAsISOString" @input="$emit('input', $event.target.value)">
 </div>

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

@@ -4,13 +4,11 @@ const template = require('./edit-date.html');
 
 module.exports = app => app.component('edit-date', {
   template: template,
-  props: ['value'],
+  props: ['value', 'format'],
   emits: ['input'],
-  data: function() {
-    return {
-      inputType: 'picker' // picker, iso
-    }
-  },
+  data: () => ({
+    inputType: ''
+  }),
   computed: {
     valueAsLocalString() {
       if (this.value == null) {
@@ -35,6 +33,9 @@ module.exports = app => app.component('edit-date', {
       }
       const date = new Date(this.value);
       return date.toISOString();
+    },
+    dateSelection() {
+      return this.format;
     }
   }
 });

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