@mongoosejs/studio 0.0.30 → 0.0.32

package/frontend/public/app.js

@@ -34,10 +34,10 @@ if (false) {} else {
       return client.post('/Dashboard/createDashboard', params).then(res => res.data);
     },
     getDashboard: function getDashboard(params) {
-      return client.get('/Dashboard/getDashboard', params).then(res => res.data);
+      return client.put('/Dashboard/getDashboard', params).then(res => res.data);
     },
     getDashboards: function getDashboards(params) {
-      return client.get('/Dashboard/getDashboards', params).then(res => res.data);
+      return client.put('/Dashboard/getDashboards', params).then(res => res.data);
     },
     updateDashboard: function updateDashboard(params) {
       return client.post('/Dashboard/updateDashboard', params).then(res => res.data);
@@ -429,7 +429,6 @@ module.exports = app => app.component('dashboard-result', {
   },
   methods: {
     getComponentForValue(value) {
-      console.log('X', value);
       if (typeof value !== 'object' || value == null) {
         return 'dashboard-primitive';
       }
@@ -482,7 +481,7 @@ module.exports = app => app.component('dashboard', {
   },
   mounted: async function() {
     const dashboardId = this.$route.query.dashboardId;
-    const { dashboard, result } = await api.Dashboard.getDashboard({ params: { dashboardId: dashboardId, evaluate: true } });
+    const { dashboard, result } = await api.Dashboard.getDashboard({ dashboardId: dashboardId, evaluate: true });
     if (!dashboard) {
       return;
     }
@@ -662,7 +661,7 @@ appendCSS(__webpack_require__(/*! ./document-details.css */ "./frontend/src/docu
 
 module.exports = app => app.component('document-details', {
   template,
-  props: ['document', 'schemaPaths', 'editting', 'changes'],
+  props: ['document', 'schemaPaths', 'editting', 'changes', 'invalid'],
   methods: {
     getComponentForPath(schemaPath) {
       if (schemaPath.instance === 'Array') {
@@ -680,6 +679,9 @@ module.exports = app => app.component('document-details', {
       if (path.instance === 'Array') {
         return 'edit-array';
       }
+      if (path.instance === 'Embedded') {
+        return 'edit-subdocument';
+      }
       return 'edit-default';
     },
     getValueForPath(path) {
@@ -860,19 +862,28 @@ appendCSS(__webpack_require__(/*! ./edit-array.css */ "./frontend/src/edit-array
 module.exports = app => app.component('edit-array', {
   template: template,
   props: ['value'],
-  data: () => ({ currentValue: null }),
+  data: () => ({ currentValue: null, status: 'init' }),
   mounted() {
-    this.currentValue = JSON.stringify(this.value, null, '  ').trim();
+    this.currentValue = this.value == null
+      ? '' + this.value
+      : JSON.stringify(this.value, null, '  ').trim();
     this.$refs.arrayEditor.value = this.currentValue;
     this.editor = CodeMirror.fromTextArea(this.$refs.arrayEditor, {
       mode: 'javascript',
       lineNumbers: true
     });
+    this.editor.on('change', ev => {
+      this.currentValue = this.editor.getValue();
+    });
+    this.status = 'loaded';
   },
   watch: {
     currentValue() {
+      if (this.status === 'init') {
+        return;
+      }
       try {
-        this.$emit('input', eval(this.currentValue));
+        this.$emit('input', eval(`(${this.currentValue})`));
       } catch (err) {
         this.$emit('error', err);
       }
@@ -998,6 +1009,67 @@ module.exports = app => app.component('edit-number', {
   }
 });
 
+/***/ }),
+
+/***/ "./frontend/src/edit-subdocument/edit-subdocument.js":
+/*!***********************************************************!*\
+  !*** ./frontend/src/edit-subdocument/edit-subdocument.js ***!
+  \***********************************************************/
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+"use strict";
+
+
+const template = __webpack_require__(/*! ./edit-subdocument.html */ "./frontend/src/edit-subdocument/edit-subdocument.html");
+
+const { BSON, EJSON } = __webpack_require__(/*! bson */ "./node_modules/bson/lib/bson.cjs");
+
+const ObjectId = new Proxy(BSON.ObjectId, {
+  apply (target, thisArg, argumentsList) {
+    return new target(...argumentsList);
+  }
+});
+
+module.exports = app => app.component('edit-subdocument', {
+  template: template,
+  props: ['value'],
+  data: () => ({ currentValue: null, status: 'init' }),
+  mounted() {
+    this.currentValue = this.value == null
+      ? '' + this.value
+      : JSON.stringify(this.value, null, '  ').trim();
+    this.$refs.editor.value = this.currentValue;
+    this.editor = CodeMirror.fromTextArea(this.$refs.editor, {
+      mode: 'javascript',
+      lineNumbers: true
+    });
+    this.editor.on('change', ev => {
+      this.currentValue = this.editor.getValue();
+    });
+    this.status = 'loaded';
+  },
+  watch: {
+    currentValue() {
+      if (this.status === 'init') {
+        return;
+      }
+      try {
+        this.$emit('input', eval(`(${this.currentValue})`));
+      } catch (err) {
+        console.log('Error', err);
+        this.$emit('error', err);
+      }
+    }
+  },
+  beforeDestroy() {
+    if (this.editor) {
+      this.editor.toTextArea();
+    }
+  },
+  emits: ['input', 'error']
+});
+
+
 /***/ }),
 
 /***/ "./frontend/src/export-query-results/export-query-results.js":
@@ -2505,7 +2577,7 @@ module.exports = "<div class=\"document-details\">\n  <div v-for=\"path in schem
 /***/ ((module) => {
 
 "use strict";
-module.exports = "<div>\n    <h2>\n        Are you sure you want to save the following changes?\n    </h2>\n    <pre><code ref=\"code\" class=\"language-javascript\" v-text=\"displayValue\"></code></pre>\n    <div class=\"flex gap-2 mt-2\">\n    <async-button\n        class=\"rounded-md bg-green-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-green-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600\"\n        @click=\"startSave\">\n        Confirm\n    </async-button>\n    <button \n        class=\"rounded-md bg-gray-200 px-2.5 py-1.5 text-sm font-semibold text-black shadow-sm hover:bg-gray-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-300\"\n        @click=\"closeConfirm\">\n        Cancel\n    </button>\n    </div>\n</div>\n";
+module.exports = "<div>\n    <h2>\n        Are you sure you want to save the following changes?\n    </h2>\n    <pre class=\"max-h-[50vh] overflow-auto\"><code ref=\"code\" class=\"language-javascript\" v-text=\"displayValue\"></code></pre>\n    <div class=\"flex gap-2 mt-2\">\n    <async-button\n        class=\"rounded-md bg-green-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-green-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600\"\n        @click=\"startSave\">\n        Confirm\n    </async-button>\n    <button \n        class=\"rounded-md bg-gray-200 px-2.5 py-1.5 text-sm font-semibold text-black shadow-sm hover:bg-gray-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-300\"\n        @click=\"closeConfirm\">\n        Cancel\n    </button>\n    </div>\n</div>";
 
 /***/ }),
 
@@ -2527,7 +2599,7 @@ module.exports = ".document {\n  max-width: 1200px;\n  margin-left: auto;\n  mar
 /***/ ((module) => {
 
 "use strict";
-module.exports = "<div class=\"document\">\n  <div class=\"document-menu\">\n    <div class=\"left\">\n      <button @click=\"$router.push('/model/' + this.model)\">\n        &lsaquo; Back\n      </button>\n    </div>\n\n    <div class=\"right\">\n      <button\n        v-if=\"!editting\"\n        @click=\"editting = true\"\n        type=\"button\"\n        class=\"rounded-md bg-teal-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-teal-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-600\">\n        <img src=\"images/edit.svg\" class=\"inline\" /> Edit\n      </button>\n      <button\n        v-if=\"editting\"\n        @click=\"editting = false\"\n        type=\"button\"\n        class=\"rounded-md bg-slate-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-slate-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-slate-600\">\n        &times; Cancel\n      </button>\n      <button\n        v-if=\"editting\"\n        @click=\"shouldShowConfirmModal=true;\"\n        type=\"button\"\n        class=\"rounded-md bg-green-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-green-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600\">\n        <img src=\"images/save.svg\" class=\"inline\" /> Save\n      </button>\n      <button\n        @click=\"remove\"\n        type=\"button\"\n        class=\"rounded-md bg-red-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-red-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600\">\n        <img src=\"images/delete.svg\" class=\"inline\" /> Delete\n      </button>\n    </div>\n  </div>\n  <div v-if=\"status === 'loaded'\">\n    <document-details\n      :document=\"document\"\n      :schemaPaths=\"schemaPaths\"\n      :editting=\"editting\"\n      :changes=\"changes\"></document-details>\n    <modal v-if=\"shouldShowConfirmModal\">\n      <template v-slot:body>\n        <div class=\"modal-exit\" @click=\"shouldShowConfirmModal = false;\">&times;</div>\n        <confirm-changes @close=\"shouldShowConfirmModal = false;\" @save=\"save\" :value=\"changes\"></confirm-changes>\n      </template>\n    </modal>\n  </div>\n</div>\n";
+module.exports = "<div class=\"document\">\n  <div class=\"document-menu\">\n    <div class=\"left\">\n      <button @click=\"$router.push('/model/' + this.model)\">\n        &lsaquo; Back\n      </button>\n    </div>\n\n    <div class=\"right\">\n      <button\n        v-if=\"!editting\"\n        @click=\"editting = true\"\n        type=\"button\"\n        class=\"rounded-md bg-teal-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-teal-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-600\">\n        <img src=\"images/edit.svg\" class=\"inline\" /> Edit\n      </button>\n      <button\n        v-if=\"editting\"\n        @click=\"editting = false\"\n        type=\"button\"\n        class=\"rounded-md bg-slate-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-slate-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-slate-600\">\n        &times; Cancel\n      </button>\n      <button\n        v-if=\"editting\"\n        @click=\"shouldShowConfirmModal=true;\"\n        type=\"button\"\n        class=\"rounded-md bg-green-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-green-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600\">\n        <img src=\"images/save.svg\" class=\"inline\" /> Save\n      </button>\n      <button\n        @click=\"remove\"\n        type=\"button\"\n        class=\"rounded-md bg-red-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-red-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600\">\n        <img src=\"images/delete.svg\" class=\"inline\" /> Delete\n      </button>\n    </div>\n  </div>\n  <div v-if=\"status === 'loaded'\">\n    <document-details\n      :document=\"document\"\n      :schemaPaths=\"schemaPaths\"\n      :editting=\"editting\"\n      :changes=\"changes\"\n      :invalid=\"invalid\"></document-details>\n    <modal v-if=\"shouldShowConfirmModal\">\n      <template v-slot:body>\n        <div class=\"modal-exit\" @click=\"shouldShowConfirmModal = false;\">&times;</div>\n        <confirm-changes @close=\"shouldShowConfirmModal = false;\" @save=\"save\" :value=\"changes\"></confirm-changes>\n      </template>\n    </modal>\n  </div>\n</div>\n";
 
 /***/ }),
 
@@ -2549,7 +2621,7 @@ module.exports = ".edit-array button {\n  margin-top: 0.5em;\n}";
 /***/ ((module) => {
 
 "use strict";
-module.exports = "<div class=\"edit-array\">\n  <textarea ref=\"arrayEditor\" v-model=\"currentValue\" class=\"w-full border border-gray-300 p-1 h-[300px]\"></textarea>\n</div>";
+module.exports = "<div class=\"edit-array\">\n  <textarea\n    ref=\"arrayEditor\"\n    class=\"w-full border border-gray-300 p-1 h-[300px]\"></textarea>\n</div>";
 
 /***/ }),
 
@@ -2586,6 +2658,17 @@ module.exports = "<div>\n  <input type=\"number\" :value=\"value\" @input=\"$emi
 
 /***/ }),
 
+/***/ "./frontend/src/edit-subdocument/edit-subdocument.html":
+/*!*************************************************************!*\
+  !*** ./frontend/src/edit-subdocument/edit-subdocument.html ***!
+  \*************************************************************/
+/***/ ((module) => {
+
+"use strict";
+module.exports = "<div class=\"edit-subdocument\">\n  <textarea\n    ref=\"editor\"\n    v-model=\"currentValue\"\n    class=\"w-full border border-gray-300 p-1 h-[300px]\"></textarea>\n</div>";
+
+/***/ }),
+
 /***/ "./frontend/src/export-query-results/export-query-results.css":
 /*!********************************************************************!*\
   !*** ./frontend/src/export-query-results/export-query-results.css ***!
@@ -10478,6 +10561,7 @@ __webpack_require__(/*! ./edit-array/edit-array */ "./frontend/src/edit-array/ed
 __webpack_require__(/*! ./edit-default/edit-default */ "./frontend/src/edit-default/edit-default.js")(app);
 __webpack_require__(/*! ./edit-number/edit-number */ "./frontend/src/edit-number/edit-number.js")(app);
 __webpack_require__(/*! ./edit-date/edit-date */ "./frontend/src/edit-date/edit-date.js")(app);
+__webpack_require__(/*! ./edit-subdocument/edit-subdocument */ "./frontend/src/edit-subdocument/edit-subdocument.js")(app);
 __webpack_require__(/*! ./export-query-results/export-query-results */ "./frontend/src/export-query-results/export-query-results.js")(app);
 __webpack_require__(/*! ./list-array/list-array */ "./frontend/src/list-array/list-array.js")(app);
 __webpack_require__(/*! ./list-default/list-default */ "./frontend/src/list-default/list-default.js")(app);

package/frontend/public/tw.css

@@ -726,6 +726,10 @@ video {
   height: 100%;
 }
 
+.max-h-\[50vh\] {
+  max-height: 50vh;
+}
+
 .w-5 {
   width: 1.25rem;
 }
@@ -824,6 +828,10 @@ video {
   border-color: rgb(209 213 219 / var(--tw-divide-opacity));
 }
 
+.overflow-auto {
+  overflow: auto;
+}
+
 .overflow-x-auto {
   overflow-x: auto;
 }

package/frontend/src/api.js

@@ -65,10 +65,10 @@ if (config__isLambda) {
       return client.post('/Dashboard/createDashboard', params).then(res => res.data);
     },
     getDashboard: function getDashboard(params) {
-      return client.get('/Dashboard/getDashboard', params).then(res => res.data);
+      return client.put('/Dashboard/getDashboard', params).then(res => res.data);
     },
     getDashboards: function getDashboards(params) {
-      return client.get('/Dashboard/getDashboards', params).then(res => res.data);
+      return client.put('/Dashboard/getDashboards', params).then(res => res.data);
     },
     updateDashboard: function updateDashboard(params) {
       return client.post('/Dashboard/updateDashboard', params).then(res => res.data);

package/frontend/src/dashboard/dashboard.js

@@ -24,7 +24,7 @@ module.exports = app => app.component('dashboard', {
   },
   mounted: async function() {
     const dashboardId = this.$route.query.dashboardId;
-    const { dashboard, result } = await api.Dashboard.getDashboard({ params: { dashboardId: dashboardId, evaluate: true } });
+    const { dashboard, result } = await api.Dashboard.getDashboard({ dashboardId: dashboardId, evaluate: true });
     if (!dashboard) {
       return;
     }

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

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

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

@@ -2,7 +2,7 @@
     <h2>
         Are you sure you want to save the following changes?
     </h2>
-    <pre><code ref="code" class="language-javascript" v-text="displayValue"></code></pre>
+    <pre class="max-h-[50vh] overflow-auto"><code ref="code" class="language-javascript" v-text="displayValue"></code></pre>
     <div class="flex gap-2 mt-2">
     <async-button
         class="rounded-md bg-green-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-green-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600"
@@ -15,4 +15,4 @@
         Cancel
     </button>
     </div>
-</div>
+</div>

package/frontend/src/document/document.html

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

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

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

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

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

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

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

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

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

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

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

package/frontend/src/index.js

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

package/package.json

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

package/tailwind.config.js

@@ -2,7 +2,7 @@
 
 module.exports = {
   mode: 'jit',
-  content: ['./frontend/src/**/*.html', './frontend/src/**/*.js'],
+  content: ['./frontend/src/**/*.html', './frontend/src/**/*.js', './frontend/src/**/**/*.html', './frontend/src/**/**/*.js'],
   corePlugins: {
     container: true
   },