@mongoosejs/studio 0.0.38 → 0.0.40

package/backend/actions/Model/index.js

@@ -1,10 +1,9 @@
 'use strict';
 
-exports.createChart = require('./createChart');
 exports.createDocument = require('./createDocument')
 exports.deleteDocument = require('./deleteDocument');
 exports.exportQueryResults = require('./exportQueryResults');
 exports.getDocument = require('./getDocument');
 exports.getDocuments = require('./getDocuments');
 exports.listModels = require('./listModels');
-exports.updateDocument = require('./updateDocument');
+exports.updateDocument = require('./updateDocument');

package/frontend/public/app.js

@@ -165,35 +165,6 @@ module.exports = app => app.component('async-button', {
 
 /***/ }),
 
-/***/ "./frontend/src/charts/charts.js":
-/*!***************************************!*\
-  !*** ./frontend/src/charts/charts.js ***!
-  \***************************************/
-/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
-
-"use strict";
-
-
-const api = __webpack_require__(/*! ../api */ "./frontend/src/api.js");
-const template = __webpack_require__(/*! ./charts.html */ "./frontend/src/charts/charts.html");
-
-const appendCSS = __webpack_require__(/*! ../appendCSS */ "./frontend/src/appendCSS.js");
-
-appendCSS(__webpack_require__(/*! ./charts.css */ "./frontend/src/charts/charts.css"));
-
-module.exports = app => app.component('charts', {
-  template: template,
-  data: () => ({ description: '', code: '' }),
-  methods: {
-    async createChart() {
-      const data = await api.Model.createChart({ description: this.description });
-      this.code = data.content;
-    }
-  }
-});
-
-/***/ }),
-
 /***/ "./frontend/src/create-dashboard/create-dashboard.js":
 /*!***********************************************************!*\
   !*** ./frontend/src/create-dashboard/create-dashboard.js ***!
@@ -753,7 +724,7 @@ module.exports = app => app.component('document-property', {
       dateType: 'picker' // picker, iso
     }
   },
-  props: ['document', 'schemaPaths', 'editting', 'changes', 'invalid'],
+  props: ['path', 'document', 'schemaPaths', 'editting', 'changes', 'invalid'],
   methods: {
     getComponentForPath(schemaPath) {
       if (schemaPath.instance === 'Array') {
@@ -1673,9 +1644,8 @@ module.exports = app => app.component('models', {
       } else {
         this.filter = {};
         delete this.query.search;
-        this.$router.push({ query: this.query });
       }
-      await this.loadMoreDocuments();
+      await this.loadMoreDocuments(true);
     },
     async getDocuments() {
       const { docs, schemaPaths, numDocs } = await api.Model.getDocuments({
@@ -1707,7 +1677,7 @@ module.exports = app => app.component('models', {
       this.filteredPaths = [...this.schemaPaths];
       this.selectedPaths = [...this.schemaPaths];
     },
-    async loadMoreDocuments() {
+    async loadMoreDocuments(updateQuery) {
       const { docs } = await api.Model.getDocuments({
         model: this.currentModel,
         filter: this.filter,
@@ -1718,6 +1688,9 @@ module.exports = app => app.component('models', {
       if (docs.length < limit) {
         this.loadedAllDocs = true;
       }
+      if (updateQuery) {
+        this.$router.push({ query: this.query });
+      }
     },
     addOrRemove(path) {
       const exists = this.selectedPaths.findIndex(x => x.path == path.path);
@@ -1841,11 +1814,6 @@ module.exports = [
     name: 'model',
     component: 'models'
   },
-  {
-    path: '/charts',
-    name: 'charts',
-    component: 'charts'
-  },
   {
     path: '/model/:model/document/:documentId',
     name: 'document',
@@ -2476,28 +2444,6 @@ module.exports = "<button v-bind=\"attrsToBind\" :disabled=\"isDisabled\" @click
 
 /***/ }),
 
-/***/ "./frontend/src/charts/charts.css":
-/*!****************************************!*\
-  !*** ./frontend/src/charts/charts.css ***!
-  \****************************************/
-/***/ ((module) => {
-
-"use strict";
-module.exports = ".charts {\n  padding: 10px;\n}\n\n.charts .chart-description textarea {\n  width: 100%;\n  height: 4em;\n  border-radius: 4px;\n  border: 1px solid #ddd;\n  margin-top: 0.5em;\n  padding: 0.5em;\n  line-height: 1.5em;\n}\n\n.charts .chart-description button {\n  margin-top: 0.5em;\n}";
-
-/***/ }),
-
-/***/ "./frontend/src/charts/charts.html":
-/*!*****************************************!*\
-  !*** ./frontend/src/charts/charts.html ***!
-  \*****************************************/
-/***/ ((module) => {
-
-"use strict";
-module.exports = "<div class=\"charts\">\n  <h1>Charts</h1>\n  <div>\n    Describe your chart\n  </div>\n  <div class=\"chart-description\">\n    <textarea\n      v-model=\"description\"\n      placeholder=\"Please create a bar chart showing users createdAt per day\" />\n    <div>\n      <async-button @click=\"createChart\">Create Chart</async-button>\n    </div>\n  </div>\n</div>";
-
-/***/ }),
-
 /***/ "./frontend/src/create-dashboard/create-dashboard.html":
 /*!*************************************************************!*\
   !*** ./frontend/src/create-dashboard/create-dashboard.html ***!
@@ -2582,7 +2528,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=\"status === 'loading'\" class=\"max-w-5xl mx-auto text-center\">\n    <img src=\"images/loader.gif\" class=\"inline\">\n  </div>\n  <div v-if=\"dashboard && status === 'loaded'\" 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>\n";
+module.exports = "<div class=\"dashboard px-1\">\n  <div v-if=\"status === 'loading'\" class=\"max-w-5xl mx-auto text-center\">\n    <img src=\"images/loader.gif\" class=\"inline mt-10\">\n  </div>\n  <div v-if=\"dashboard && status === 'loaded'\" 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>\n";
 
 /***/ }),
 
@@ -2648,7 +2594,7 @@ module.exports = ".document-details {\n  width: 100%;\n}\n\n.document-details .v
 /***/ ((module) => {
 
 "use strict";
-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>";
+module.exports = "<div class=\"document-details\">\n  <div v-for=\"path in schemaPaths\" class=\"value\">\n    <document-property\n      :path=\"path\"\n      :document=\"document\"\n      :schemaPaths=\"schemaPaths\"\n      :editting=\"editting\"\n      :changes=\"changes\"\n      :invalid=\"invalid\"></document-property>\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>";
 
 /***/ }),
 
@@ -2670,7 +2616,7 @@ module.exports = ".document-details {\n    width: 100%;\n  }\n  \n  .document-de
 /***/ ((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>";
+module.exports = "<div>\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-teal-600' : ''\"\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-white' : ''\"\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-teal-600' : ''\"\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-white' : ''\"\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>";
 
 /***/ }),
 
@@ -10646,7 +10592,6 @@ const app = Vue.createApp({
 });
 
 __webpack_require__(/*! ./async-button/async-button */ "./frontend/src/async-button/async-button.js")(app);
-__webpack_require__(/*! ./charts/charts */ "./frontend/src/charts/charts.js")(app);
 __webpack_require__(/*! ./create-dashboard/create-dashboard */ "./frontend/src/create-dashboard/create-dashboard.js")(app);
 __webpack_require__(/*! ./create-document/create-document */ "./frontend/src/create-document/create-document.js")(app);
 __webpack_require__(/*! ./dashboards/dashboards */ "./frontend/src/dashboards/dashboards.js")(app);
@@ -10689,7 +10634,7 @@ app.component('app-component', {
   `,
   errorCaptured(err) {
     vanillatoasts.create({
-      title: `Error: ${err.message}`,
+      title: `Error: ${err.response?.data?.message || err.message}`,
       icon: 'images/failure.jpg',
       timeout: 10000,
       positionClass: 'bottomRight'

package/frontend/src/index.js

@@ -11,7 +11,6 @@ const app = Vue.createApp({
 });
 
 require('./async-button/async-button')(app);
-require('./charts/charts')(app);
 require('./create-dashboard/create-dashboard')(app);
 require('./create-document/create-document')(app);
 require('./dashboards/dashboards')(app);

package/frontend/src/routes.js

@@ -11,11 +11,6 @@ module.exports = [
     name: 'model',
     component: 'models'
   },
-  {
-    path: '/charts',
-    name: 'charts',
-    component: 'charts'
-  },
   {
     path: '/model/:model/document/:documentId',
     name: 'document',

package/index.d.ts

@@ -0,0 +1,7 @@
+declare module '@mongoosejs/studio' {
+  import { RequestHandler } from 'express';
+
+  const express: (path: string) => RequestHandler;
+
+  export express;
+}

package/index.js

@@ -0,0 +1,3 @@
+'use strict';
+  
+exports.express = require('./express');

package/package.json

@@ -1,13 +1,16 @@
 {
   "name": "@mongoosejs/studio",
-  "version": "0.0.38",
+  "version": "0.0.40",
   "dependencies": {
     "archetype": "0.13.0",
     "csv-stringify": "6.3.0",
     "ejson": "^2.2.3",
     "extrovert": "0.0.24",
     "node-inspect-extracted": "3.x",
-    "vanillatoasts": "^1.6.0"
+    "tailwindcss": "3.4.0",
+    "vanillatoasts": "^1.6.0",
+    "vue": "3.x",
+    "webpack": "5.x"
   },
   "peerDependencies": {
     "bson": "^5.5.1 || 6.x",
@@ -18,10 +21,7 @@
     "axios": "1.2.2",
     "express": "4.x",
     "mocha": "10.2.0",
-    "mongoose": "8.x",
-    "tailwindcss": "3.4.0",
-    "vue": "3.x",
-    "webpack": "5.75.0"
+    "mongoose": "8.x"
   },
   "scripts": {
     "tailwind": "tailwindcss -o ./frontend/public/tw.css",