@mongoosejs/studio 0.0.21 → 0.0.23

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

@@ -0,0 +1,48 @@
+'use strict';
+
+const api = require('../../api');
+const template = require('./edit-dashboard.html');
+
+module.exports = app => app.component('edit-dashboard', {
+  template: template,
+  props: ['dashboardId', 'code'],
+  data: function() {
+    return {
+      status: 'loading',
+      editor: null,
+    }
+  },
+  methods: {
+    closeEditor() {
+        this.$emit('close')
+    },
+    async updateCode() {
+      const { doc } = await api.Dashboard.updateDashboard({ dashboardId: this.dashboardId, code: this.editor.getValue() });
+      this.$emit('update', doc.code);
+      this.editor.setValue(doc.code);
+      this.closeEditor();
+    }
+  },
+  mounted: async function() {
+    this.editor = CodeMirror.fromTextArea(this.$refs.codeEditor, {
+      mode: 'javascript',
+      lineNumbers: true,
+      indentUnit: 4,
+      smartIndent: true,
+      tabsize: 4,
+      indentWithTabs: true,
+      cursorBlinkRate: 300,
+      lineWrapping: true,
+      showCursorWhenSelecting: true,
+    });
+    // this.editor.setValue(this.code);
+    // this.editor.setSize(300, 300); // Ensure the editor has a fixed height
+    
+    // this.editor.setCursor(this.editor.lineCount() - 1, this.editor.getLine(this.editor.lineCount() - 1).length);
+   
+    this.editor.focus();
+    // this.editor.refresh(); // if anything weird happens on load, this usually fixes it. However, this breaks it in this case.
+
+    
+  }
+});

package/frontend/src/dashboards/dashboards.html

@@ -0,0 +1,5 @@
+<div class="dashboards">
+  <div v-for="dashboard in dashboards" :key="dashboard._id" @click="$router.push('dashboard?dashboardId=' + dashboard._id)">
+    {{dashboard.name}}, ID: {{ dashboard._id }}
+  </div>
+</div>

package/frontend/src/dashboards/dashboards.js

@@ -0,0 +1,20 @@
+'use strict';
+
+const api = require('../api');
+const template = require('./dashboards.html');
+
+
+module.exports = app => app.component('dashboards', {
+  template: template,
+  data: () => ({
+    dashboards: [],
+  }),
+  async mounted() {
+    const { dashboards } = await api.Dashboard.getDashboards();
+    this.dashboards = dashboards;
+    if (!this.$route.query.dashboardId) {
+      return;
+    }
+    this.status = 'loaded';
+  },
+});

package/frontend/src/document/document.html

@@ -11,12 +11,12 @@
         v-if="!editting"
         @click="editting = true"
         type="button"
-        class="rounded-md bg-puerto-rico-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-puerto-rico-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-puerto-rico-600">
+        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">
         <img src="images/edit.svg" class="inline" /> Edit
       </button>
       <button
         v-if="editting"
-        @click="save"
+        @click="editting = false"
         type="button"
         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">
         &times; Cancel
@@ -42,13 +42,14 @@
         {{path.path}}
         <span class="path-type">
           ({{(path.instance || 'unknown').toLowerCase()}})
-        </span>
+        </span>        
       </div>
       <div v-if="editting && path.path !== '_id'">
         <component
           :is="getEditComponentForPath(path)"
           :value="getEditValueForPath(path)"
-          @input="changes[path.path] = $event;"
+          @input="changes[path.path] = $event; delete invalid[path.path];"
+          @error="invalid[path.path] = $event;"
           >
         </component>
       </div>

package/frontend/src/document/document.js

@@ -17,11 +17,14 @@ module.exports = app => app.component('document', {
     status: 'init',
     document: null,
     changes: {},
+    invalid: {},
     editting: false,
-    virtuals: []
+    virtuals: [],
   }),
   async mounted() {
+    window.pageState = this;
     const { doc, schemaPaths } = await api.Model.getDocument({ model: this.model, documentId: this.documentId });
+    window.doc = doc;
     this.document = doc;
     this.schemaPaths = await Object.keys(schemaPaths).sort((k1, k2) => {
       if (k1 === '_id' && k2 !== '_id') {
@@ -74,6 +77,9 @@ module.exports = app => app.component('document', {
       this.editting = false;
     },
     async save() {
+      if (Object.keys(this.invalid).length > 0) {
+        throw new Error('Invalid paths: ' + Object.keys(this.invalid).join(', '));
+      }
       const { doc } = await api.Model.updateDocument({
         model: this.model,
         _id: this.document._id,

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

@@ -1,9 +1,3 @@
 <div class="edit-array">
-  <div v-for="(el, i) in currentValue">
-    <input type="text" :value="el" @input="currentValue[i] = $event.target.value; onUpdate()">
-    <span style="cursor: pointer; color: #880000; font-weight: bold;" @click="removeValue(i)">&times;</span>
-  </div>
-  <div>
-    <button @click="currentValue.push(''); onUpdate();">Add</button>
-  </div>
+  <textarea ref="arrayEditor" v-model="currentValue" class="w-full border border-gray-300 p-1 h-[300px]"></textarea>
 </div>

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

@@ -2,6 +2,14 @@
 
 const template = require('./edit-array.html');
 
+const { BSON, EJSON } = require('bson');
+
+const ObjectId = new Proxy(BSON.ObjectId, {
+  apply (target, thisArg, argumentsList) {
+    return new target(...argumentsList);
+  }
+});
+
 const appendCSS = require('../appendCSS');
 appendCSS(require('./edit-array.css'));
 
@@ -10,16 +18,26 @@ module.exports = app => app.component('edit-array', {
   props: ['value'],
   data: () => ({ currentValue: null }),
   mounted() {
-    this.currentValue = this.value;
+    this.currentValue = JSON.stringify(this.value, null, '  ').trim();
+    this.$refs.arrayEditor.value = this.currentValue;
+    this.editor = CodeMirror.fromTextArea(this.$refs.arrayEditor, {
+      mode: 'javascript',
+      lineNumbers: true
+    });
+  },
+  watch: {
+    currentValue() {
+      try {
+        this.$emit('input', eval(this.currentValue));
+      } catch (err) {
+        this.$emit('error', err);
+      }
+    }
   },
-  methods: {
-    onUpdate() {
-      this.$emit('input', this.currentValue);
-    },
-    removeValue(i) {
-      this.currentValue.splice(i, 1);
-      this.$emit('input', this.currentValue);
+  beforeDestroy() {
+    if (this.editor) {
+      this.editor.toTextArea();
     }
   },
-  emits: ['input']
+  emits: ['input', 'error']
 });

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

@@ -1,3 +1,20 @@
 <div>
-  <input type="datetime-local" :value="valueAsLocalString" @input="$emit('input', $event.target.value)">
+  <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)">
 </div>

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

@@ -6,6 +6,11 @@ module.exports = app => app.component('edit-date', {
   template: template,
   props: ['value'],
   emits: ['input'],
+  data: function() {
+    return {
+      inputType: 'picker' // picker, iso
+    }
+  },
   computed: {
     valueAsLocalString() {
       if (this.value == null) {
@@ -23,6 +28,13 @@ module.exports = app => app.component('edit-date', {
         ':',
         date.getMinutes().toString().padStart(2, '0')
       ].join('');
+    },
+    valueAsISOString() {
+      if (this.value == null) {
+        return this.value;
+      }
+      const date = new Date(this.value);
+      return date.toISOString();
     }
   }
 });

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

@@ -1,3 +1,3 @@
 <div>
-  <input type="text" :value="value" @input="$emit('input', $event.target.value)">
+  <input type="text" :value="value" @input="$emit('input', $event.target.value)" class="w-full p-1 border border-gray-300 outline-0">
 </div>

package/frontend/src/index.js

@@ -8,6 +8,10 @@ const app = Vue.createApp({
 
 require('./async-button/async-button')(app);
 require('./charts/charts')(app);
+require('./create-document/create-document')(app);
+require('./dashboards/dashboards')(app);
+require('./dashboard/dashboard')(app);
+require('./dashboard/edit-dashboard/edit-dashboard')(app)
 require('./detail-array/detail-array')(app);
 require('./detail-default/detail-default')(app);
 require('./document/document')(app);
@@ -18,6 +22,7 @@ require('./edit-date/edit-date')(app);
 require('./export-query-results/export-query-results')(app);
 require('./list-array/list-array')(app);
 require('./list-default/list-default')(app);
+require('./list-json/list-json')(app)
 require('./list-mixed/list-mixed')(app);
 require('./list-string/list-string')(app);
 require('./list-subdocument/list-subdocument')(app);

package/frontend/src/list-json/list-json.css

@@ -0,0 +1,3 @@
+.list-json {
+  width: 100%;
+}

package/frontend/src/list-json/list-json.html

@@ -0,0 +1,4 @@
+<div class="list-json tooltip">
+  <pre><code ref="JSONCode" class="language-javascript">{{shortenValue}}</code></pre>
+</div>
+  

package/frontend/src/list-json/list-json.js

@@ -0,0 +1,40 @@
+'use strict';
+
+const api = require('../api');
+const template = require('./list-json.html');
+
+const vanillatoast = require('vanillatoasts');
+
+require('../appendCSS')(require('./list-json.css'));
+
+module.exports = app => app.component('list-json', {
+  template: template,
+  props: ['value'],
+  computed: {
+    shortenValue() {
+      return JSON.stringify(this.value, null, 4);
+    }
+  },
+  methods: {
+    copyText(value) {
+      const storage = document.createElement('textarea');
+      storage.value = JSON.stringify(value);
+      const elem = this.$refs.JSONCode;
+      elem.appendChild(storage);
+      storage.select();
+      storage.setSelectionRange(0, 99999);
+      document.execCommand('copy');
+      elem.removeChild(storage);
+      vanillatoast.create({
+        title: 'Text copied!',
+        type: 'success',
+        timeout: 3000,
+        icon: 'images/success.png',
+        positionClass: 'bottomRight'
+      });
+    }
+  },
+  mounted: function() {
+    Prism.highlightElement(this.$refs.JSONCode);
+  }
+});

package/frontend/src/models/models.css

@@ -27,10 +27,6 @@
   max-height: calc(100vh - 56px);
 }
 
-.models .documents .documents-container {
-  margin-top: 60px;
-}
-
 .models .documents table {
   /* max-width: -moz-fit-content;
   max-width: fit-content; */
@@ -84,8 +80,6 @@
 }
 
 .models textarea {
-  width: 100%;
-  height: 600px;
   font-size: 1.2em;
 }
 
@@ -97,12 +91,12 @@
 .models .documents-menu {
   display: flex;
   margin: 0.25em;
-  position: fixed;
   width: calc(100vw - 220px);
 }
 
 .models .documents-menu .search-input {
   flex-grow: 1;
+  align-items: center;
 }
 
 .models .search-input input {
@@ -130,5 +124,5 @@
 .models .documents .buttons {
   display: inline-flex;
   justify-content: space-around;
-  align-items: baseline;
+  align-items: center;
 }

package/frontend/src/models/models.html

@@ -12,7 +12,7 @@
                 <router-link
                   :to="'/model/' + model"
                   class="block rounded-md py-2 pr-2 pl-2 text-sm font-semibold text-gray-700"
-                  :class="model === currentModel ? 'bg-puerto-rico-100 font-bold' : 'hover:bg-puerto-rico-100'">
+                  :class="model === currentModel ? 'bg-teal-100 font-bold' : 'hover:bg-teal-100'">
                   {{model}}
                 </router-link>
               </li>
@@ -26,33 +26,53 @@
   <div class="documents" ref="documentsList">
     <div>
       <div class="documents-menu">
-        <div class="search-input">
-          <form @submit.prevent="search">
-            <input class="search-text" type="text" placeholder="Filter or text" v-model="searchText" />
+        <div class="flex flex-row items-center w-full gap-2">
+          <form @submit.prevent="search" class="flex-grow m-0">
+            <input class="w-full rounded-md p-1 outline-gray-300 text-lg" type="text" placeholder="Filter or text" v-model="searchText" />
           </form>
-        </div>
-        <div class="buttons">
-          <div class="mr-2">
+          <div>
             <span v-if="status === 'loading'">Loading ...</span>
             <span v-if="status === 'loaded'">{{numDocuments === 1 ? numDocuments+ ' document' : numDocuments + ' documents'}}</span>
           </div>
           <button
             @click="shouldShowExportModal = true"
             type="button"
-            class="mr-2 rounded bg-puerto-rico-600 px-2 py-1 text-sm font-semibold text-white shadow-sm hover:bg-puerto-rico-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-puerto-rico-600">
+            class="rounded bg-teal-600 px-2 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">
             Export
           </button>
+          <button
+            @click="shouldShowCreateModal = true;"
+            type="button"
+            class="rounded bg-teal-600 px-2 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">
+            Create
+          </button>
           <button
             @click="shouldShowFieldModal = true"
             type="button"
-            class="rounded bg-puerto-rico-600 px-2 py-1 text-sm font-semibold text-white shadow-sm hover:bg-puerto-rico-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-puerto-rico-600">
+            class="rounded bg-teal-600 px-2 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">
             Fields
           </button>
+          <span class="isolate inline-flex rounded-md shadow-sm">
+            <button
+              @click="outputType = 'table'"
+              type="button"
+              class="relative inline-flex items-center rounded-none rounded-l-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10"
+              :class="outputType === 'table' ? 'bg-gray-200' : 'bg-white'">
+              <img class="h-5 w-5" src="images/table.svg">
+            </button>
+            <button
+              @click="outputType = 'json'"
+              type="button"
+              class="relative -ml-px inline-flex items-center rounded-none rounded-r-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10"
+              :class="outputType === 'json' ? 'bg-gray-200' : 'bg-white'">
+              <img class="h-5 w-5" src="images/json.svg">
+            </button>
+          </span>
         </div>
       </div>
     </div>
     <div class="documents-container">
-      <table>
+      <table v-if="outputType === 'table'">
         <thead>
           <th v-for="path in filteredPaths">
             {{path.path}}
@@ -75,6 +95,12 @@
           </tr>
         </tbody>
       </table>
+      <div v-if="outputType === 'json'">
+        <div v-for="document in documents" @click="$router.push('/model/' + currentModel + '/document/' + document._id)" :key="document._id">
+          <list-json :value="filterDocument(document)">
+          </list-json>
+        </div>
+      </div>
       <div v-if="status === 'loading'" class="loader">
         <img src="images/loader.gif">
       </div>
@@ -105,5 +131,11 @@
         </div>
       </template>
     </modal>
+    <modal v-if="shouldShowCreateModal">
+      <template v-slot:body>
+        <div class="modal-exit" @click="shouldShowCreateModal = false;">&times;</div>
+        <create-document :currentModel="currentModel" :paths="schemaPaths" @close="closeCreationModal"></create-document>
+      </template>
+    </modal>
   </div>
 </div>

package/frontend/src/models/models.js

@@ -5,6 +5,8 @@ const template = require('./models.html');
 const mpath = require('mpath');
 const { BSON, EJSON } = require('bson');
 
+
+
 const ObjectId = new Proxy(BSON.ObjectId, {
   apply (target, thisArg, argumentsList) {
     return new target(...argumentsList);
@@ -13,6 +15,7 @@ const ObjectId = new Proxy(BSON.ObjectId, {
 
 const appendCSS = require('../appendCSS');
 
+
 appendCSS(require('./models.css'));
 
 const limit = 50;
@@ -35,12 +38,14 @@ module.exports = app => app.component('models', {
     filter: null,
     searchText: '',
     shouldShowExportModal: false,
+    shouldShowCreateModal: false,
     shouldShowFieldModal: false,
     shouldExport: {},
     sortBy: {},
     query: {},
     scrollHeight: 0,
-    interval: null
+    interval: null,
+    outputType: 'table' // json, table
   }),
   created() {
     this.currentModel = this.model;
@@ -77,9 +82,25 @@ module.exports = app => app.component('models', {
       this.filteredPaths = this.filteredPaths.filter(x => filter.includes(x.path))
     }
 
+
     this.status = 'loaded';
   },
   methods: {
+    async closeCreationModal() {
+      this.shouldShowCreateModal = false;
+      await this.getDocuments();
+    },
+    initializeDocumentData() {
+      this.shouldShowCreateModal = true;
+    },
+    filterDocument(doc) {
+      const filteredDoc = {};
+      console.log(doc, this.filteredPaths)
+      for (let i = 0; i < this.filteredPaths.length; i++) {
+        filteredDoc[this.filteredPaths[i].path] = doc[this.filteredPaths[i].path];
+      }
+      return filteredDoc;
+    },
     async onScroll() {
       if (this.status === 'loading' || this.loadedAllDocs) {
         return;

package/frontend/src/navbar/navbar.css

@@ -3,6 +3,14 @@
   background-color: #eee;
 }
 
+.active {
+  text-decoration: underline;
+}
+
+.spacing {
+  margin-right: 10px;
+}
+
 .navbar .nav-left {
   float: left;
   line-height: 54px;
@@ -30,6 +38,7 @@
   float: right;
   display: flex;
   flex-direction: row;
+  justify-content: space-between;
   font-size: 16px;
   line-height: 54px;
   padding-right: 20px;

package/frontend/src/navbar/navbar.html

@@ -4,9 +4,17 @@
       <img src="images/logo.svg" alt="Mongoose Studio Logo" />
     </router-link>
   </div>
-  <div class="nav-right">
-    <!--- <router-link to="/">Models</router-link>
-    <router-link to="/charts">Charts</router-link> -->
+  <div class="nav-right h-full">
+    <div class="sm:ml-6 sm:flex sm:space-x-8 h-full">
+      <a
+        href="#/"
+        class="inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"
+        :class="routeName === 'root' ? 'text-gray-900 border-teal-500' : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700'">Documents</a>
+      <a
+        href="#/dashboards"
+        class="inline-flex items-center border-b-2 px-1 pt-1 text-sm font-medium"
+        :class="routeName === 'dashboards' ? 'text-gray-900 border-teal-500' : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700'">Dashboards</a>
+    </div>
   </div>
   <div style="clear: both"></div>
 </div>

package/frontend/src/navbar/navbar.js

@@ -7,5 +7,10 @@ const appendCSS = require('../appendCSS');
 appendCSS(require('./navbar.css'));
 
 module.exports = app => app.component('navbar', {
-  template: template
+  template: template,
+  computed: {
+    routeName() {
+      return this.$route.name;
+    }
+  }
 });

package/frontend/src/routes.js

@@ -20,5 +20,15 @@ module.exports = [
     path: '/model/:model/document/:documentId',
     name: 'document',
     component: 'document'
+  },
+  {
+    path: '/dashboards',
+    name: 'dashboards',
+    component: 'dashboards'
+  },
+  {
+    path: '/dashboard',
+    name: 'dashboard',
+    component: 'dashboard'
   }
 ];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mongoosejs/studio",
-  "version": "0.0.21",
+  "version": "0.0.23",
   "dependencies": {
     "archetype": "0.13.0",
     "csv-stringify": "6.3.0",
@@ -18,7 +18,7 @@
     "axios": "1.2.2",
     "express": "4.x",
     "mocha": "10.2.0",
-    "mongoose": "7.x",
+    "mongoose": "8.x",
     "tailwindcss": "3.4.0",
     "vue": "3.x",
     "webpack": "5.75.0"

package/tailwind.config.js

@@ -22,7 +22,33 @@ module.exports = {
           '800': '#08675f',
           '900': '#0c554e',
           '950': '#003432',
-        } 
+        },
+        'teal': {
+          '50': '#eefffc',
+          '100': '#c5fffa',
+          '200': '#8bfff5',
+          '300': '#4afef0',
+          '400': '#15ece2',
+          '500': '#00d0c9',
+          '600': '#00a8a5',
+          '700': '#008888',
+          '800': '#066769',
+          '900': '#0a5757',
+          '950': '#003235',
+        },
+        'navy-blue': {
+          '50': '#f1f4ff',
+          '100': '#e5e8ff',
+          '200': '#ced5ff',
+          '300': '#a7b1ff',
+          '400': '#767fff',
+          '500': '#3f42ff',
+          '600': '#2118ff',
+          '700': '#1007fa',
+          '800': '#0d05d2',
+          '900': '#0c06ac',
+          '950': '#000088',
+        },
       } 
     }
   }