@mongoosejs/studio 0.0.20 → 0.0.22

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; */
@@ -97,12 +93,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 +126,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,12 @@ const template = require('./models.html');
 const mpath = require('mpath');
 const { BSON, EJSON } = require('bson');
 
+const { EditorState } = require('@codemirror/state');
+const { lineNumbers } = require('@codemirror/view')
+const { EditorView, basicSetup } = require('codemirror');
+const { javascript } = require('@codemirror/lang-javascript');
+
+
 const ObjectId = new Proxy(BSON.ObjectId, {
   apply (target, thisArg, argumentsList) {
     return new target(...argumentsList);
@@ -13,6 +19,7 @@ const ObjectId = new Proxy(BSON.ObjectId, {
 
 const appendCSS = require('../appendCSS');
 
+
 appendCSS(require('./models.css'));
 
 const limit = 50;
@@ -35,12 +42,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 +86,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,10 @@ module.exports = [
     path: '/model/:model/document/:documentId',
     name: 'document',
     component: 'document'
+  },
+  {
+    path: '/dashboards',
+    name: 'dashboards',
+    component: 'dashboard'
   }
 ];

package/package.json

@@ -1,11 +1,16 @@
 {
   "name": "@mongoosejs/studio",
-  "version": "0.0.20",
+  "version": "0.0.22",
   "dependencies": {
+    "@codemirror/commands": "^6.5.0",
+    "@codemirror/lang-javascript": "^6.2.2",
+    "@codemirror/state": "^6.4.1",
+    "@codemirror/view": "^6.26.3",
     "archetype": "0.13.0",
+    "codemirror": "^6.0.1",
     "csv-stringify": "6.3.0",
     "ejson": "^2.2.3",
-    "extrovert": "0.0.20",
+    "extrovert": "0.0.24",
     "openai": "3.2.1",
     "vanillatoasts": "^1.6.0"
   },
@@ -18,7 +23,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',
+        },
       } 
     }
   }