@mongoosejs/studio 0.0.2 → 0.0.4

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

@@ -0,0 +1,20 @@
+'use strict';
+
+const template = require('./edit-number.html');
+
+module.exports = app => app.component('edit-number', {
+  template: template,
+  props: ['value'],
+  emits: ['input'],
+  computed: {
+    displayValue() {
+      if (this.value === null) {
+        return 'null';
+      }
+      if (this.value === undefined) {
+        return 'undefined';
+      }
+      return this.value;
+    }
+  }
+});

package/frontend/src/index.js

@@ -9,9 +9,12 @@ require('./detail-array/detail-array')(app);
 require('./detail-default/detail-default')(app);
 require('./document/document')(app);
 require('./edit-default/edit-default')(app);
+require('./edit-number/edit-number')(app);
+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-string/list-string')(app);
 require('./list-subdocument/list-subdocument')(app);
 require('./modal/modal')(app);
 require('./models/models')(app);

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

@@ -1,3 +1,7 @@
-<div>
-  {{value}}
+<div ref="itemData" class="tooltip">
+  {{displayValue}}
+  <div class="tooltiptext" style="display:flex; width: 100%; justify-content: space-around; align-items: center; min-width: 180px;">
+    <div class="tooltiptextchild" v-if="allude" @click.stop="goToDoc(value)">View Document</div>
+    <div class="tooltiptextchild" @click.stop="copyText(value)">copy &#x1F4CB;</div>
+  </div>
 </div>

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

@@ -1,10 +1,36 @@
 'use strict';
 
 const template = require('./list-default.html');
+const appendCSS = require('../appendCSS');
+const vanillatoast = require('vanillatoasts');
+
+appendCSS(require('./list-default.css'));
 
 module.exports = app => app.component('list-default', {
   template: template,
-  props: ['value'],
+  props: ['value', 'allude'],
+  methods: {
+    copyText(value) {
+      const storage = document.createElement('textarea');
+      storage.value = value;
+      const elem = this.$refs.itemData
+      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'
+      });
+    },
+    goToDoc(id) {
+      this.$router.push({ path: `/model/${this.allude}/document/${id}`});
+    }
+  },
   computed: {
     displayValue() {
       if (this.value === null) {
@@ -14,6 +40,9 @@ module.exports = app => app.component('list-default', {
         return 'undefined';
       }
       return this.value;
+    },
+    hasReference() {
+      return this.allude;
     }
   }
 });

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

@@ -0,0 +1,4 @@
+.list-string {
+  display: inline;
+  max-width: 300px;
+}

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

@@ -0,0 +1,4 @@
+<div class="list-string tooltip" ref="itemData">
+  {{displayValue}}
+  <span class="tooltiptext" @click.stop="copyText(value)">copy &#x1F4CB;</span>
+</div>

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

@@ -0,0 +1,43 @@
+'use strict';
+
+const template = require('./list-string.html');
+const appendCSS = require('../appendCSS');
+const vanillatoast = require('vanillatoasts');
+appendCSS(require('./list-string.css'));
+
+module.exports = app => app.component('list-string', {
+  template: template,
+  props: ['value'],
+  methods: {
+    copyText(value) {
+      const storage = document.createElement('textarea');
+      storage.value = value;
+      const elem = this.$refs.itemData;
+      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'
+      });
+    }
+  },
+  computed: {
+    displayValue() {
+      if (!this.value) {
+        return this.value;
+      }
+
+      if (this.value.length < 50) {
+        return this.value;
+      }
+
+      return this.value.slice(0, 47) + '...';
+    }
+  }
+});

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

@@ -1,3 +1,3 @@
 <div>
-  {{JSON.stringify(value, null, '  ')}}
+<pre><code ref="SubDocCode" class="language-javascript">{{value}}</code></pre>
 </div>

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

@@ -5,5 +5,8 @@ const template = require('./list-subdocument.html');
 
 module.exports = app => app.component('list-subdocument', {
   template: template,
-  props: ['value']
+  props: ['value'],
+  mounted: function() {
+    Prism.highlightElement(this.$refs.SubDocCode);
+  }
 });

package/frontend/src/modal/modal.css

@@ -27,6 +27,7 @@
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
   transition: all 0.3s ease;
   font-family: Helvetica, Arial, sans-serif;
+  position: relative;
 }
 
 .modal-header {
@@ -72,4 +73,11 @@
 .modal-leave-active .modal-container {
   -webkit-transform: scale(1.1);
   transform: scale(1.1);
+}
+
+.modal-container .modal-exit {
+  position: absolute;
+  right: 0.25em;
+  top: 0.25em;
+  cursor: pointer;
 }

package/frontend/src/models/models.css

@@ -23,7 +23,7 @@
 }
 
 .models .documents .documents-container {
-  margin-top: 40px;
+  margin-top: 60px;
 }
 
 .models .documents table {
@@ -44,6 +44,7 @@
   position: sticky;
   top: 0px;
   background-color: white;
+  z-index: 1;
 }
 
 .models .documents table th:after {
@@ -105,4 +106,9 @@
   border: 1px solid #ddd;
   border-radius: 3px;
   width: calc(100% - 1em);
+}
+
+.sort-arrow {
+  padding-left: 10px;
+  padding-right: 10px;
 }

package/frontend/src/models/models.html

@@ -13,7 +13,9 @@
         <div class="search-input">
           <form @submit.prevent="search">
             <input class="search-text" type="text" placeholder="Filter or text" v-model="searchText" />
+            <div>Number of Documents: {{numDocuments}}</div>
           </form>
+
         </div>
         <div class="buttons">
           <button @click="shouldShowExportModal = true">Export</button>
@@ -26,14 +28,20 @@
           <th v-for="path in schemaPaths">
             {{path.path}}
             <span class="path-type">
-              ({{path.instance.toLowerCase()}})
+              ({{(path.instance || 'unknown')}})
             </span>
+            <span class="sort-arrow" @click="sortDocs(1, path.path)">{{sortBy[path.path] == 1 ? 'X' : '↑'}}</span>
+            <span class="sort-arrow" @click="sortDocs(-1, path.path)">{{sortBy[path.path] == -1 ? 'X' : '↓'}}</span>
           </th>
         </thead>
         <tbody>
           <tr v-for="document in documents" @click="$router.push('/model/' + currentModel + '/document/' + document._id)" :key="document._id">
             <td v-for="schemaPath in schemaPaths">
-              <component :is="getComponentForPath(schemaPath)" :value="document[schemaPath.path]"></component>
+              <component
+                :is="getComponentForPath(schemaPath)"
+                :value="getValueForPath(document, schemaPath.path)"
+                :allude="getReferenceModel(schemaPath)">
+              </component>
             </td>
           </tr>
         </tbody>
@@ -41,6 +49,7 @@
     </div>
     <modal v-if="shouldShowExportModal">
       <template v-slot:body>
+        <div class="modal-exit" @click="shouldShowExportModal = false">&times;</div>
         <export-query-results
           :schemaPaths="schemaPaths"
           :filter="filter"

package/frontend/src/models/models.js

@@ -2,6 +2,8 @@
 
 const api = require('../api');
 const template = require('./models.html');
+const EJSON = require('ejson');
+const mpath = require('mpath');
 
 const appendCSS = require('../appendCSS');
 
@@ -15,13 +17,15 @@ module.exports = app => app.component('models', {
     currentModel: null,
     documents: [],
     schemaPaths: [],
+    numDocuments: 0,
     status: 'init',
     edittingDoc: null,
     docEdits: null,
     filter: null,
     searchText: '',
     shouldShowExportModal: false,
-    shouldExport: {}
+    shouldExport: {},
+    sortBy: {}
   }),
   created() {
     this.currentModel = this.model;
@@ -31,42 +35,48 @@ module.exports = app => app.component('models', {
     if (this.currentModel == null && this.models.length > 0) {
       this.currentModel = this.models[0];
     }
+    if (this.$route.query?.search) {
+      this.searchText = this.$route.query.search;
+      this.filter = eval(`(${this.$route.query.search})`);
+      this.filter = EJSON.stringify(this.filter);
+    }
 
     if (this.currentModel != null) {
-      const { docs, schemaPaths } = await api.Model.getDocuments({ model: this.currentModel });
-      this.documents = docs;
-      this.schemaPaths = Object.keys(schemaPaths).sort((k1, k2) => {
-        if (k1 === '_id' && k2 !== '_id') {
-          return -1;
-        }
-        if (k1 !== '_id' && k2 === '_id') {
-          return 1;
-        }
-        return 0;
-      }).map(key => schemaPaths[key]);
-
-      this.shouldExport = {};
-      for (const { path } of this.schemaPaths) {
-        this.shouldExport[path] = true;
-      }
+      await this.getDocuments();
     }
 
     this.status = 'loaded';
   },
   methods: {
+    async sortDocs(num, path) {
+      let sorted = false;
+      if (this.sortBy[path] == num) {
+        sorted = true;
+      }
+      for (const key in this.sortBy) {
+        delete this.sortBy[key];
+      }
+      if (!sorted) {
+        this.sortBy[path] = num;
+      }
+      await this.getDocuments();
+    },
     async search() {
-      if (this.searchText) {
+      if (this.searchText && Object.keys(this.searchText).length) {
         this.filter = eval(`(${this.searchText})`);
+        this.filter = EJSON.stringify(this.filter);
+        this.$router.push({ path: this.$route.path, query: { search: this.searchText }})
       } else {
         this.filter = {};
+        this.$router.push({ path: this.$route.path });
       }
-      
       await this.getDocuments();
     },
     async getDocuments() {
-      const { docs, schemaPaths } = await api.Model.getDocuments({
+      const { docs, schemaPaths, numDocs } = await api.Model.getDocuments({
         model: this.currentModel,
-        filter: this.filter
+        filter: this.filter,
+        sort: this.sortBy
       });
       this.documents = docs;
       this.schemaPaths = Object.keys(schemaPaths).sort((k1, k2) => {
@@ -78,6 +88,7 @@ module.exports = app => app.component('models', {
         }
         return 0;
       }).map(key => schemaPaths[key]);
+      this.numDocuments = numDocs;
 
       this.shouldExport = {};
       for (const { path } of this.schemaPaths) {
@@ -88,8 +99,20 @@ module.exports = app => app.component('models', {
       if (schemaPath.instance === 'Array') {
         return 'list-array';
       }
+      if (schemaPath.instance === 'String') {
+        return 'list-string';
+      }
+      if (schemaPath.instance == 'Embedded') {
+        return 'list-subdocument';
+      }
       return 'list-default';
     },
+    getReferenceModel(schemaPath) {
+      return schemaPath.ref;
+    },
+    getValueForPath(doc, path) {
+      return mpath.get(path, doc);
+    },
     async saveDocEdits() {
       const res = await api.Model.updateDocument({
         model: this.currentModel,

package/frontend/src/navbar/navbar.css

@@ -20,10 +20,10 @@
 }
 
 .navbar .nav-left img {
-  height: 24px;
+  height: 32px;
   vertical-align: middle;
   margin-right: 0.5em;
-  margin-top: 16px;
+  margin-top: 8px;
 }
 
 .navbar .nav-right {
@@ -159,4 +159,4 @@
 		transition: all 0.3s ease;
     z-index: 10000;
 	}
-}
+}

package/frontend/src/navbar/navbar.html

@@ -1,10 +1,10 @@
 <div class="navbar">
   <div class="nav-left">
     <router-link to="/">
-      <img src="images/mongoose.svg" alt="Mongoose Logo" />
+      <img src="images/logo.svg" alt="Mongoose Studio Logo" />
     </router-link>
   </div>
   <div class="nav-right">
   </div>
   <div style="clear: both"></div>
-</div>
+</div>

package/package.json

@@ -1,21 +1,23 @@
 {
   "name": "@mongoosejs/studio",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "dependencies": {
     "archetype": "0.13.0",
     "csv-stringify": "6.3.0",
-    "extrovert": "0.0.20"
+    "ejson": "^2.2.3",
+    "extrovert": "0.0.20",
+    "vanillatoasts": "^1.6.0"
   },
   "peerDependencies": {
     "express": "4.x",
-    "mongoose": "6.x || 7.x || 7.0.0-rc0"
+    "mongoose": "7.x"
   },
   "devDependencies": {
     "axios": "1.2.2",
     "express": "4.x",
     "mocha": "10.2.0",
-    "mongoose": "6.x",
-    "webpack": "5.75.0",
-    "vue": "3.x"
+    "mongoose": "7.x",
+    "vue": "3.x",
+    "webpack": "5.75.0"
   }
-}
+}