@mongoosejs/studio 0.0.14 → 0.0.16

package/backend/actions/Model/getDocuments.js

@@ -2,7 +2,7 @@
 
 const Archetype = require('archetype');
 const removeSpecifiedPaths = require('../../helpers/removeSpecifiedPaths');
-const EJSON = require('ejson');
+const { EJSON } = require('bson')
 
 const GetDocumentsParams = new Archetype({
   model: {

package/frontend/src/index.js

@@ -1,5 +1,7 @@
 'use strict';
 
+const vanillatoasts = require('vanillatoasts');
+
 const app = Vue.createApp({
   template: '<app-component />'
 });
@@ -31,7 +33,15 @@ app.component('app-component', {
       <router-view :key="$route.fullPath" />
     </div>
   </div>
-  `
+  `,
+  errorCaptured(err) {
+    vanillatoasts.create({
+      title: `Error: ${err.message}`,
+      icon: 'images/failure.jpg',
+      timeout: 10000,
+      positionClass: 'bottomRight'
+    });
+  }
 });
 
 const routes = require('./routes');

package/frontend/src/modal/modal.css

@@ -46,6 +46,8 @@
 
 .modal-body {
   margin: 20px 0;
+  max-height: calc(100vh - 40px - 60px - 10px);
+  overflow: auto;
 }
 
 .modal__button--default {
@@ -80,4 +82,4 @@
   right: 0.25em;
   top: 0.25em;
   cursor: pointer;
-}
+}

package/frontend/src/models/models.css

@@ -5,6 +5,11 @@
   min-height: calc(100% - 56px);
 }
 
+.models button.gray {
+  color: black;
+  background-color: #eee;
+}
+
 .models .model-selector {
   background-color: #eee;
   flex-grow: 0; 
@@ -120,4 +125,14 @@
 
 .models .loader img {
   height: 4em;
+}
+
+.models .documents .buttons {
+  display: inline-flex;
+  justify-content: space-around;
+  align-items: baseline;
+}
+
+.models .documents .buttons button:not(:last-child) {
+  margin-right: 8px;
 }

package/frontend/src/models/models.html

@@ -19,13 +19,14 @@
         </div>
         <div class="buttons">
           <button @click="shouldShowExportModal = true">Export</button>
+          <button @click="shouldShowFieldModal = true">Fields</button>
         </div>
       </div>
     </div>
     <div class="documents-container">
       <table>
         <thead>
-          <th v-for="path in schemaPaths">
+          <th v-for="path in filteredPaths">
             {{path.path}}
             <span class="path-type">
               ({{(path.instance || 'unknown')}})
@@ -36,7 +37,7 @@
         </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">
+            <td v-for="schemaPath in filteredPaths">
               <component
                 :is="getComponentForPath(schemaPath)"
                 :value="getValueForPath(document, schemaPath.path)"
@@ -61,5 +62,20 @@
         </export-query-results>
       </template>
     </modal>
+    <modal v-if="shouldShowFieldModal">
+      <template v-slot:body>
+        <div class="modal-exit" @click="shouldShowFieldModal = false; selectedPaths = [...filteredPaths];">&times;</div>
+        <div v-for="(path, index) in schemaPaths" :key="index" style="margin-bottom: 0.5em">
+          <input type="checkbox" :id="'path.path'+index" @change="addOrRemove(path)" :value="path.path" :checked="isSelected(path.path)" />
+          <label :for="'path' + index">{{path.path}}</label>
+        </div>
+        <div style="margin-top: 1em">
+          <button type="submit" @click="filterDocuments()" style="color: black;margin-right: 0.5em">Filter Selection</button>
+          <button type="submit" @click="deselectAll()" class="gray" style="margin-right: 0.5em">Deselect All</button>
+          <button type="submit" @click="resetDocuments()" class="gray">Cancel</button>
+          
+        </div>
+      </template>
+    </modal>
   </div>
 </div>

package/frontend/src/models/models.js

@@ -2,8 +2,14 @@
 
 const api = require('../api');
 const template = require('./models.html');
-const EJSON = require('ejson');
 const mpath = require('mpath');
+const { BSON, EJSON } = require('bson');
+
+const ObjectId = new Proxy(BSON.ObjectId, {
+  apply (target, thisArg, argumentsList) {
+    return new target(...argumentsList);
+  }
+});
 
 const appendCSS = require('../appendCSS');
 
@@ -19,6 +25,8 @@ module.exports = app => app.component('models', {
     currentModel: null,
     documents: [],
     schemaPaths: [],
+    filteredPaths: [],
+    selectedPaths: [],
     numDocuments: 0,
     status: 'loading',
     loadedAllDocs: false,
@@ -27,6 +35,7 @@ module.exports = app => app.component('models', {
     filter: null,
     searchText: '',
     shouldShowExportModal: false,
+    shouldShowFieldModal: false,
     shouldExport: {},
     sortBy: {},
     query: {},
@@ -62,6 +71,16 @@ module.exports = app => app.component('models', {
       await this.getDocuments();
     }
 
+    const hashUrl = window.location.hash.replace(/^#/, '');
+    if (hashUrl.indexOf('?') !== -1) {
+      const searchParams = new URLSearchParams(
+        hashUrl.slice(hashUrl.indexOf('?') + 1)
+      );
+      if (searchParams.has('fields')) {
+        this.filteredPaths = searchParams.get('fields').split(',').map(path => ({ path }));
+      }
+    }
+
     this.status = 'loaded';
   },
   methods: {
@@ -79,7 +98,6 @@ module.exports = app => app.component('models', {
           skip: this.documents.length,
           limit
         });
-        console.log('FX', docs.length, limit)
         if (docs.length < limit) {
           this.loadedAllDocs = true;
         }
@@ -143,6 +161,55 @@ module.exports = app => app.component('models', {
       for (const { path } of this.schemaPaths) {
         this.shouldExport[path] = true;
       }
+
+      this.filteredPaths = [...this.schemaPaths];
+      this.selectedPaths = [...this.schemaPaths];
+    },
+    addOrRemove(path) {
+      const exists = this.selectedPaths.findIndex(x => x.path == path.path);
+      if (exists > 0) { // remove
+        this.selectedPaths.splice(exists, 1);
+      } else { // add
+        this.selectedPaths.push(path);
+        this.selectedPaths = Object.keys(this.selectedPaths).sort((k1, k2) => {
+          if (k1 === '_id' && k2 !== '_id') {
+            return -1;
+          }
+          if (k1 !== '_id' && k2 === '_id') {
+            return 1;
+          }
+          return 0;
+        }).map(key => this.selectedPaths[key]);
+      }
+    },
+    filterDocuments() {
+      this.filteredPaths = [...this.selectedPaths];
+      this.shouldShowFieldModal = false;
+      const selectedParams = this.filteredPaths.map(x => x.path).join(',');
+
+      const hashUrl = window.location.hash.replace(/^#/, '');
+      if (hashUrl.indexOf('?') === -1) {
+        window.history.pushState({}, '', window.location.pathname + '#' + hashUrl + '?fields=' + selectedParams);
+      } else {
+        const searchParams = new URLSearchParams(
+          hashUrl.indexOf('?') === -1 ? '' : hashUrl.slice(hashUrl.indexOf('?') + 1)
+        );
+        const hashUrlWithoutSearchParams = hashUrl.slice(0, hashUrl.indexOf('?'));
+        
+        searchParams.set('fields', selectedParams);
+        window.history.pushState({}, '', window.location.pathname + '#' + hashUrlWithoutSearchParams + '?' + searchParams);
+      }
+      
+    },
+    resetDocuments() {
+      this.selectedPaths = [...this.filteredPaths];
+      this.shouldShowFieldModal = false;
+    },
+    deselectAll() {
+      this.selectedPaths = [];
+    },
+    isSelected(path) {
+      return this.selectedPaths.find(x => x.path == path);
     },
     getComponentForPath(schemaPath) {
       if (schemaPath.instance === 'Array') {
@@ -179,4 +246,4 @@ module.exports = app => app.component('models', {
       this.edittingDoc = null;
     }
   }
-});
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mongoosejs/studio",
-  "version": "0.0.14",
+  "version": "0.0.16",
   "dependencies": {
     "archetype": "0.13.0",
     "csv-stringify": "6.3.0",
@@ -10,6 +10,7 @@
     "vanillatoasts": "^1.6.0"
   },
   "peerDependencies": {
+    "bson": "^5.5.1",
     "express": "4.x",
     "mongoose": "7.x || 8.0.0-rc0 || 8.x"
   },