@mongoosejs/studio 0.0.13 → 0.0.15

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

@@ -1,4 +1,7 @@
-<div class="list-mixed">
-  <pre><code ref="MixedCode" class="language-javascript">{{shortenValue}}</code></pre>
-  </div>
+<div class="list-mixed tooltip">
+  <pre>
+    <code ref="MixedCode" class="language-javascript">{{shortenValue}}</code>
+    <span class="tooltiptext" @click.stop="copyText(value)">copy &#x1F4CB;</span>
+  </pre>
+</div>
   

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

@@ -3,6 +3,8 @@
 const api = require('../api');
 const template = require('./list-mixed.html');
 
+const vanillatoast = require('vanillatoasts');
+
 require('../appendCSS')(require('./list-mixed.css'));
 
 module.exports = app => app.component('list-mixed', {
@@ -13,7 +15,27 @@ module.exports = app => app.component('list-mixed', {
       return this.value;
     }
   },
+  methods: {
+    copyText(value) {
+      const storage = document.createElement('textarea');
+      storage.value = JSON.stringify(value);
+      const elem = this.$refs.MixedCode;
+      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.MixedCode);
   }
 });
+

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

@@ -1,3 +1,6 @@
-<div class="list-subdocument">
-<pre><code ref="SubDocCode" class="language-javascript">{{shortenValue}}</code></pre>
+<div class="list-subdocument tooltip">
+  <pre>
+    <code ref="SubDocCode" class="language-javascript">{{shortenValue}}</code>
+    <span class="tooltiptext" @click.stop="copyText(value)">copy &#x1F4CB;</span>
+  </pre>
 </div>

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

@@ -2,6 +2,7 @@
 
 const api = require('../api');
 const template = require('./list-subdocument.html');
+const vanillatoast = require('vanillatoasts');
 
 require('../appendCSS')(require('./list-subdocument.css'));
 
@@ -13,7 +14,26 @@ module.exports = app => app.component('list-subdocument', {
       return this.value;
     }
   },
+  methods: {
+    copyText(value) {
+      const storage = document.createElement('textarea');
+      storage.value = JSON.stringify(value);
+      const elem = this.$refs.SubDocCode;
+      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.SubDocCode);
   }
-});
+});

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

@@ -19,6 +19,8 @@ module.exports = app => app.component('models', {
     currentModel: null,
     documents: [],
     schemaPaths: [],
+    filteredPaths: [],
+    selectedPaths: [],
     numDocuments: 0,
     status: 'loading',
     loadedAllDocs: false,
@@ -27,6 +29,7 @@ module.exports = app => app.component('models', {
     filter: null,
     searchText: '',
     shouldShowExportModal: false,
+    shouldShowFieldModal: false,
     shouldExport: {},
     sortBy: {},
     query: {},
@@ -62,6 +65,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 +92,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 +155,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') {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mongoosejs/studio",
-  "version": "0.0.13",
+  "version": "0.0.15",
   "dependencies": {
     "archetype": "0.13.0",
     "csv-stringify": "6.3.0",

package/osogolf.js

@@ -1,20 +0,0 @@
-'use strict';
-
-const db = require('../../voltmobile/core-api/backend/db');
-const express = require('express');
-const studio = require('./express');
-
-run().catch(err => {
-  console.error(err);
-  process.exit(-1);
-});
-
-async function run() {
-  const app = express();
-  const conn = await db();
-
-  app.use('/studio', studio('/studio/api', conn));
-
-  await app.listen(3002);
-  console.log('Listening on port 3002');
-}