@mongoosejs/studio 0.0.18 → 0.0.19

package/frontend/public/app.js

@@ -245,12 +245,13 @@ module.exports = app => app.component('document', {
     status: 'init',
     document: null,
     changes: {},
-    editting: false
+    editting: false,
+    virtuals: []
   }),
   async mounted() {
     const { doc, schemaPaths } = await api.Model.getDocument({ model: this.model, documentId: this.documentId });
     this.document = doc;
-    this.schemaPaths = Object.keys(schemaPaths).sort((k1, k2) => {
+    this.schemaPaths = await Object.keys(schemaPaths).sort((k1, k2) => {
       if (k1 === '_id' && k2 !== '_id') {
         return -1;
       }
@@ -259,7 +260,7 @@ module.exports = app => app.component('document', {
       }
       return 0;
     }).map(key => schemaPaths[key]);
-
+    this.getVirtuals();
     this.status = 'loaded';
   },
   methods: {
@@ -287,6 +288,15 @@ module.exports = app => app.component('document', {
     getEditValueForPath({ path }) {
       return path in this.changes ? this.changes[path] : mpath.get(path, this.document);
     },
+    getVirtuals() {
+      const exists = this.schemaPaths.map(x => x.path);
+      const docKeys = Object.keys(this.document);
+      for (let i = 0; i < docKeys.length; i++) {
+        if (!exists.includes(docKeys[i])) {
+          this.virtuals.push({ name: docKeys[i], value: this.document[docKeys[i]] });
+        }
+      }
+    },
     cancelEdit() {
       this.changes = {};
       this.editting = false;
@@ -847,31 +857,18 @@ module.exports = app => app.component('models', {
       this.sortDocs(num, path);
     }
 
+
     if (this.currentModel != null) {
       await this.getDocuments();
     }
-    this.applyQueryParams();
+    if (this.$route.query?.fields) {
+      const filter = this.$route.query.fields.split(',');
+      this.filteredPaths = this.filteredPaths.filter(x => filter.includes(x.path))
+    }
 
     this.status = 'loaded';
   },
   methods: {
-    applyQueryParams() {
-      const hashUrl = window.location.hash.replace(/^#/, '');
-      if (hashUrl.indexOf('?') !== -1) {
-        const searchParams = new URLSearchParams(
-          hashUrl.slice(hashUrl.indexOf('?') + 1)
-        );
-        if (searchParams.has('fields')) {
-          const filter = searchParams.get('fields').split(',');
-          this.filteredPaths = this.filteredPaths.filter(x => filter.includes(x.path))
-        }
-        if (searchParams.has('search')) {
-          this.searchText = searchParams.get('search');
-          this.filter = eval(`(${this.searchText})`);
-          this.filter = EJSON.stringify(this.filter);
-        }
-      }
-    },
     async onScroll() {
       if (this.status === 'loading' || this.loadedAllDocs) {
         return;
@@ -915,22 +912,11 @@ module.exports = app => app.component('models', {
         this.filter = eval(`(${this.searchText})`);
         this.filter = EJSON.stringify(this.filter);
         this.query.search = this.searchText;
+        this.$router.push({ query: this.query });
       } else {
         this.filter = {};
         delete this.query.search;
-      }
-
-      const hashUrl = window.location.hash.replace(/^#/, '');
-      if (hashUrl.indexOf('?') === -1) {
-        window.history.pushState({}, '', window.location.pathname + '#' + hashUrl + '?search=' + this.query.search);
-      } else {
-        const searchParams = new URLSearchParams(
-          hashUrl.indexOf('?') === -1 ? '' : hashUrl.slice(hashUrl.indexOf('?') + 1)
-        );
-        const hashUrlWithoutSearchParams = hashUrl.slice(0, hashUrl.indexOf('?'));
-        
-        searchParams.set('search', this.query.search);
-        window.history.pushState({}, '', window.location.pathname + '#' + hashUrlWithoutSearchParams + '?' + searchParams);
+        this.$router.push({ query: this.query });
       }
       await this.loadMoreDocuments();
     },
@@ -997,23 +983,13 @@ module.exports = app => app.component('models', {
       this.filteredPaths = [...this.selectedPaths];
       this.shouldShowFieldModal = false;
       const selectedParams = this.filteredPaths.map(x => x.path).join(',');
-      // sets the query params
-      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);
-      }
-      
+      this.query.fields = selectedParams;
+      this.$router.push({ query: this.query });
     },
     resetDocuments() {
       this.selectedPaths = [...this.filteredPaths];
+      this.query.fields = {};
+      this.$router.push({ query: this.query });
       this.shouldShowFieldModal = false;
     },
     deselectAll() {
@@ -1780,7 +1756,7 @@ module.exports = ".document {\n  max-width: 1200px;\n  margin-left: auto;\n  mar
 /***/ ((module) => {
 
 "use strict";
-module.exports = "<div class=\"document\">\n  <div class=\"document-menu\">\n    <div class=\"left\">\n      <button @click=\"$router.push('/model/' + this.model)\">\n        &lsaquo; Back\n      </button>\n    </div>\n\n    <div class=\"right\">\n      <button\n        v-if=\"!editting\"\n        @click=\"editting = true\"\n        type=\"button\"\n        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\">\n        <img src=\"images/edit.svg\" class=\"inline\" /> Edit\n      </button>\n      <button\n        v-if=\"editting\"\n        @click=\"save\"\n        type=\"button\"\n        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\">\n        &times; Cancel\n      </button>\n      <button\n        v-if=\"editting\"\n        @click=\"save\"\n        type=\"button\"\n        class=\"rounded-md bg-green-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-green-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600\">\n        <img src=\"images/save.svg\" class=\"inline\" /> Save\n      </button>\n      <button\n        @click=\"remove\"\n        type=\"button\"\n        class=\"rounded-md bg-red-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-red-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600\">\n        <img src=\"images/delete.svg\" class=\"inline\" /> Delete\n      </button>\n    </div>\n  </div>\n  <div v-if=\"status === 'loaded'\">\n    <div v-for=\"path in schemaPaths\" class=\"value\">\n      <div class=\"path-key\">\n        {{path.path}}\n        <span class=\"path-type\">\n          ({{(path.instance || 'unknown').toLowerCase()}})\n        </span>\n      </div>\n      <div v-if=\"editting && path.path !== '_id'\">\n        <component\n          :is=\"getEditComponentForPath(path)\"\n          :value=\"getEditValueForPath(path)\"\n          @input=\"changes[path.path] = $event;\"\n          >\n        </component>\n      </div>\n      <div v-else>\n        <component :is=\"getComponentForPath(path)\" :value=\"getValueForPath(path.path)\"></component>\n      </div>\n    </div>\n  </div>\n</div>\n";
+module.exports = "<div class=\"document\">\n  <div class=\"document-menu\">\n    <div class=\"left\">\n      <button @click=\"$router.push('/model/' + this.model)\">\n        &lsaquo; Back\n      </button>\n    </div>\n\n    <div class=\"right\">\n      <button\n        v-if=\"!editting\"\n        @click=\"editting = true\"\n        type=\"button\"\n        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\">\n        <img src=\"images/edit.svg\" class=\"inline\" /> Edit\n      </button>\n      <button\n        v-if=\"editting\"\n        @click=\"save\"\n        type=\"button\"\n        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\">\n        &times; Cancel\n      </button>\n      <button\n        v-if=\"editting\"\n        @click=\"save\"\n        type=\"button\"\n        class=\"rounded-md bg-green-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-green-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600\">\n        <img src=\"images/save.svg\" class=\"inline\" /> Save\n      </button>\n      <button\n        @click=\"remove\"\n        type=\"button\"\n        class=\"rounded-md bg-red-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-red-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600\">\n        <img src=\"images/delete.svg\" class=\"inline\" /> Delete\n      </button>\n    </div>\n  </div>\n  <div v-if=\"status === 'loaded'\">\n    <div v-for=\"path in schemaPaths\" class=\"value\">\n      <div class=\"path-key\">\n        {{path.path}}\n        <span class=\"path-type\">\n          ({{(path.instance || 'unknown').toLowerCase()}})\n        </span>\n      </div>\n      <div v-if=\"editting && path.path !== '_id'\">\n        <component\n          :is=\"getEditComponentForPath(path)\"\n          :value=\"getEditValueForPath(path)\"\n          @input=\"changes[path.path] = $event;\"\n          >\n        </component>\n      </div>\n      <div v-else>\n        <component :is=\"getComponentForPath(path)\" :value=\"getValueForPath(path.path)\"></component>\n      </div>\n    </div>\n    <div v-for=\"path in virtuals\" class=\"mb-2\">\n      <div class=\"p-1 mb-1 bg-slate-100\">\n        {{path.name}}\n        <span class=\"path-type\">\n          (virtual)\n        </span>\n      </div>\n      <div v-if=\"path.value == null\" class=\"text-sky-800\">\n        {{'' + path.value}}\n      </div>\n      <div v-else>\n        {{path.value}}\n      </div>\n    </div>\n  </div>\n</div>\n";
 
 /***/ }),
 
@@ -2000,7 +1976,7 @@ module.exports = "<transition name=\"modal\">\n  <div class=\"modal-mask\">\n
 /***/ ((module) => {
 
 "use strict";
-module.exports = ".models {\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  min-height: calc(100% - 56px);\n}\n\n.models button.gray {\n  color: black;\n  background-color: #eee;\n}\n\n.models .model-selector {\n  background-color: #eee;\n  flex-grow: 0; \n  padding: 15px;\n  padding-top: 0px;\n}\n\n.models h1 {\n  margin-top: 0px;\n}\n\n.models .documents {\n  flex-grow: 1;\n  overflow: scroll;\n  max-height: calc(100vh - 56px);\n}\n\n.models .documents .documents-container {\n  margin-top: 60px;\n}\n\n.models .documents table {\n  /* max-width: -moz-fit-content;\n  max-width: fit-content; */\n  width: 100%;\n  table-layout: auto;\n  font-size: small;\n  padding: 0;\n  margin-right: 1em;\n  white-space: nowrap;\n  z-index: -1;\n  border-collapse: collapse;\n  line-height: 1.5em;\n}\n\n.models .documents table th {\n  position: sticky;\n  top: 0px;\n  background-color: white;\n  z-index: 1;\n}\n\n.models .documents table th:after {\n  content: '';\n  position: absolute;\n  left: 0;\n  width: 100%;\n  bottom: -1px;\n  border-bottom: thin solid rgba(0,0,0,.12);\n}\n\n.models .documents table tr {\n  color: black;\n  border-spacing: 0px 0px;\n  background-color: white;\n  cursor: pointer;\n}\n\n.models .documents table tr:nth-child(even) {\n  background-color: #f5f5f5;\n}\n\n.models .documents table tr:hover {\n  background-color: #55A3D4;\n}\n\n.models .documents table th, td {\n  border-bottom: thin solid rgba(0,0,0,.12);\n  text-align: left;\n  padding: 0 16px;\n  height: 48px;\n}\n\n.models textarea {\n  width: 100%;\n  height: 600px;\n  font-size: 1.2em;\n}\n\n.models .path-type {\n  color: rgba(0,0,0,.36);\n  font-size: 0.8em;\n}\n\n.models .documents-menu {\n  display: flex;\n  margin: 0.25em;\n  position: fixed;\n  width: calc(100vw - 220px);\n}\n\n.models .documents-menu .search-input {\n  flex-grow: 1;\n}\n\n.models .search-input input {\n  padding: 0.25em 0.5em;\n  font-size: 1.1em;\n  border: 1px solid #ddd;\n  border-radius: 3px;\n  width: calc(100% - 1em);\n}\n\n.models .sort-arrow {\n  padding-left: 10px;\n  padding-right: 10px;\n}\n\n.models .loader {\n  width: 100%;\n  text-align: center;\n}\n\n.models .loader img {\n  height: 4em;\n}\n\n.models .documents .buttons {\n  display: inline-flex;\n  justify-content: space-around;\n  align-items: baseline;\n}\n\n.models .documents .buttons button:not(:last-child) {\n  margin-right: 8px;\n}";
+module.exports = ".models {\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  min-height: calc(100% - 56px);\n}\n\n.models button.gray {\n  color: black;\n  background-color: #eee;\n}\n\n.models .model-selector {\n  background-color: #eee;\n  flex-grow: 0; \n  padding: 15px;\n  padding-top: 0px;\n}\n\n.models h1 {\n  margin-top: 0px;\n}\n\n.models .documents {\n  flex-grow: 1;\n  overflow: scroll;\n  max-height: calc(100vh - 56px);\n}\n\n.models .documents .documents-container {\n  margin-top: 60px;\n}\n\n.models .documents table {\n  /* max-width: -moz-fit-content;\n  max-width: fit-content; */\n  width: 100%;\n  table-layout: auto;\n  font-size: small;\n  padding: 0;\n  margin-right: 1em;\n  white-space: nowrap;\n  z-index: -1;\n  border-collapse: collapse;\n  line-height: 1.5em;\n}\n\n.models .documents table th {\n  position: sticky;\n  top: 0px;\n  background-color: white;\n  z-index: 1;\n}\n\n.models .documents table th:after {\n  content: '';\n  position: absolute;\n  left: 0;\n  width: 100%;\n  bottom: -1px;\n  border-bottom: thin solid rgba(0,0,0,.12);\n}\n\n.models .documents table tr {\n  color: black;\n  border-spacing: 0px 0px;\n  background-color: white;\n  cursor: pointer;\n}\n\n.models .documents table tr:nth-child(even) {\n  background-color: #f5f5f5;\n}\n\n.models .documents table tr:hover {\n  background-color: #55A3D4;\n}\n\n.models .documents table th, td {\n  border-bottom: thin solid rgba(0,0,0,.12);\n  text-align: left;\n  padding: 0 16px;\n  height: 48px;\n}\n\n.models textarea {\n  width: 100%;\n  height: 600px;\n  font-size: 1.2em;\n}\n\n.models .path-type {\n  color: rgba(0,0,0,.36);\n  font-size: 0.8em;\n}\n\n.models .documents-menu {\n  display: flex;\n  margin: 0.25em;\n  position: fixed;\n  width: calc(100vw - 220px);\n}\n\n.models .documents-menu .search-input {\n  flex-grow: 1;\n}\n\n.models .search-input input {\n  padding: 0.25em 0.5em;\n  font-size: 1.1em;\n  border: 1px solid #ddd;\n  border-radius: 3px;\n  width: calc(100% - 1em);\n}\n\n.models .sort-arrow {\n  padding-left: 10px;\n  padding-right: 10px;\n}\n\n.models .loader {\n  width: 100%;\n  text-align: center;\n}\n\n.models .loader img {\n  height: 4em;\n}\n\n.models .documents .buttons {\n  display: inline-flex;\n  justify-content: space-around;\n  align-items: baseline;\n}";
 
 /***/ }),
 
@@ -2011,7 +1987,7 @@ module.exports = ".models {\n  position: relative;\n  display: flex;\n  flex-dir
 /***/ ((module) => {
 
 "use strict";
-module.exports = "<div class=\"models\">\n  <div class=\"model-selector\">\n    <h1>Models</h1>\n    <div v-for=\"model in models\">\n      <router-link :to=\"'/model/' + model\" :class=\"model === currentModel ? 'bold' : ''\">\n        {{model}}\n      </router-link>\n    </div>\n  </div>\n  <div class=\"documents\" ref=\"documentsList\">\n    <div>\n      <div class=\"documents-menu\">\n        <div class=\"search-input\">\n          <form @submit.prevent=\"search\">\n            <input class=\"search-text\" type=\"text\" placeholder=\"Filter or text\" v-model=\"searchText\" />\n            <div>Number of Documents: {{numDocuments}}</div>\n          </form>\n\n        </div>\n        <div class=\"buttons\">\n          <button\n            @click=\"shouldShowExportModal = true\"\n            type=\"button\"\n            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\">\n            Export\n          </button>\n          <button\n            @click=\"shouldShowFieldModal = true\"\n            type=\"button\"\n            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\">\n            Fields\n          </button>\n        </div>\n      </div>\n    </div>\n    <div class=\"documents-container\">\n      <table>\n        <thead>\n          <th v-for=\"path in filteredPaths\">\n            {{path.path}}\n            <span class=\"path-type\">\n              ({{(path.instance || 'unknown')}})\n            </span>\n            <span class=\"sort-arrow\" @click=\"sortDocs(1, path.path)\">{{sortBy[path.path] == 1 ? 'X' : '↑'}}</span>\n            <span class=\"sort-arrow\" @click=\"sortDocs(-1, path.path)\">{{sortBy[path.path] == -1 ? 'X' : '↓'}}</span>\n          </th>\n        </thead>\n        <tbody>\n          <tr v-for=\"document in documents\" @click=\"$router.push('/model/' + currentModel + '/document/' + document._id)\" :key=\"document._id\">\n            <td v-for=\"schemaPath in filteredPaths\">\n              <component\n                :is=\"getComponentForPath(schemaPath)\"\n                :value=\"getValueForPath(document, schemaPath.path)\"\n                :allude=\"getReferenceModel(schemaPath)\">\n              </component>\n            </td>\n          </tr>\n        </tbody>\n      </table>\n      <div v-if=\"status === 'loading'\" class=\"loader\">\n        <img src=\"images/loader.gif\">\n      </div>\n    </div>\n    <modal v-if=\"shouldShowExportModal\">\n      <template v-slot:body>\n        <div class=\"modal-exit\" @click=\"shouldShowExportModal = false\">&times;</div>\n        <export-query-results\n          :schemaPaths=\"schemaPaths\"\n          :filter=\"filter\"\n          :currentModel=\"currentModel\"\n          @done=\"shouldShowExportModal = false\">\n        </export-query-results>\n      </template>\n    </modal>\n    <modal v-if=\"shouldShowFieldModal\">\n      <template v-slot:body>\n        <div class=\"modal-exit\" @click=\"shouldShowFieldModal = false; selectedPaths = [...filteredPaths];\">&times;</div>\n        <div v-for=\"(path, index) in schemaPaths\" :key=\"index\" style=\"margin-bottom: 0.5em\">\n          <input type=\"checkbox\" :id=\"'path.path'+index\" @change=\"addOrRemove(path)\" :value=\"path.path\" :checked=\"isSelected(path.path)\" />\n          <label :for=\"'path' + index\">{{path.path}}</label>\n        </div>\n        <div style=\"margin-top: 1em\">\n          <button type=\"submit\" @click=\"filterDocuments()\" style=\"color: black;margin-right: 0.5em\">Filter Selection</button>\n          <button type=\"submit\" @click=\"deselectAll()\" class=\"gray\" style=\"margin-right: 0.5em\">Deselect All</button>\n          <button type=\"submit\" @click=\"resetDocuments()\" class=\"gray\">Cancel</button>\n          \n        </div>\n      </template>\n    </modal>\n  </div>\n</div>";
+module.exports = "<div class=\"models\">\n  <div>\n    <div class=\"flex grow flex-col gap-y-5 overflow-y-auto border-r border-gray-200 bg-white px-2 h-[calc(100vh-55px)]\">\n      <div class=\"flex font-bold font-xl mt-4 pl-2\">\n        Models\n      </div>\n      <nav class=\"flex flex-1 flex-col\">\n        <ul role=\"list\" class=\"flex flex-1 flex-col gap-y-7\">\n          <li>\n            <ul role=\"list\">\n              <li v-for=\"model in models\">\n                <router-link\n                  :to=\"'/model/' + model\"\n                  class=\"block rounded-md py-2 pr-2 pl-2 text-sm font-semibold text-gray-700\"\n                  :class=\"model === currentModel ? 'bg-puerto-rico-100 font-bold' : 'hover:bg-puerto-rico-100'\">\n                  {{model}}\n                </router-link>\n              </li>\n            </ul>\n          </li>\n        </ul>\n      </nav>\n    </div>\n    \n  </div>\n  <div class=\"documents\" ref=\"documentsList\">\n    <div>\n      <div class=\"documents-menu\">\n        <div class=\"search-input\">\n          <form @submit.prevent=\"search\">\n            <input class=\"search-text\" type=\"text\" placeholder=\"Filter or text\" v-model=\"searchText\" />\n          </form>\n        </div>\n        <div class=\"buttons\">\n          <div class=\"mr-2\">\n            <span v-if=\"status === 'loading'\">Loading ...</span>\n            <span v-if=\"status === 'loaded'\">{{numDocuments === 1 ? numDocuments+ ' document' : numDocuments + ' documents'}}</span>\n          </div>\n          <button\n            @click=\"shouldShowExportModal = true\"\n            type=\"button\"\n            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\">\n            Export\n          </button>\n          <button\n            @click=\"shouldShowFieldModal = true\"\n            type=\"button\"\n            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\">\n            Fields\n          </button>\n        </div>\n      </div>\n    </div>\n    <div class=\"documents-container\">\n      <table>\n        <thead>\n          <th v-for=\"path in filteredPaths\">\n            {{path.path}}\n            <span class=\"path-type\">\n              ({{(path.instance || 'unknown')}})\n            </span>\n            <span class=\"sort-arrow\" @click=\"sortDocs(1, path.path)\">{{sortBy[path.path] == 1 ? 'X' : '↑'}}</span>\n            <span class=\"sort-arrow\" @click=\"sortDocs(-1, path.path)\">{{sortBy[path.path] == -1 ? 'X' : '↓'}}</span>\n          </th>\n        </thead>\n        <tbody>\n          <tr v-for=\"document in documents\" @click=\"$router.push('/model/' + currentModel + '/document/' + document._id)\" :key=\"document._id\">\n            <td v-for=\"schemaPath in filteredPaths\">\n              <component\n                :is=\"getComponentForPath(schemaPath)\"\n                :value=\"getValueForPath(document, schemaPath.path)\"\n                :allude=\"getReferenceModel(schemaPath)\">\n              </component>\n            </td>\n          </tr>\n        </tbody>\n      </table>\n      <div v-if=\"status === 'loading'\" class=\"loader\">\n        <img src=\"images/loader.gif\">\n      </div>\n    </div>\n    <modal v-if=\"shouldShowExportModal\">\n      <template v-slot:body>\n        <div class=\"modal-exit\" @click=\"shouldShowExportModal = false\">&times;</div>\n        <export-query-results\n          :schemaPaths=\"schemaPaths\"\n          :filter=\"filter\"\n          :currentModel=\"currentModel\"\n          @done=\"shouldShowExportModal = false\">\n        </export-query-results>\n      </template>\n    </modal>\n    <modal v-if=\"shouldShowFieldModal\">\n      <template v-slot:body>\n        <div class=\"modal-exit\" @click=\"shouldShowFieldModal = false; selectedPaths = [...filteredPaths];\">&times;</div>\n        <div v-for=\"(path, index) in schemaPaths\" :key=\"index\" style=\"margin-bottom: 0.5em\">\n          <input type=\"checkbox\" :id=\"'path.path'+index\" @change=\"addOrRemove(path)\" :value=\"path.path\" :checked=\"isSelected(path.path)\" />\n          <label :for=\"'path' + index\">{{path.path}}</label>\n        </div>\n        <div style=\"margin-top: 1em\">\n          <button type=\"submit\" @click=\"filterDocuments()\" style=\"color: black;margin-right: 0.5em\">Filter Selection</button>\n          <button type=\"submit\" @click=\"deselectAll()\" class=\"gray\" style=\"margin-right: 0.5em\">Deselect All</button>\n          <button type=\"submit\" @click=\"resetDocuments()\" class=\"gray\">Cancel</button>\n          \n        </div>\n      </template>\n    </modal>\n  </div>\n</div>";
 
 /***/ }),
 

package/frontend/public/tw.css

@@ -578,14 +578,66 @@ video {
   }
 }
 
+.mb-1 {
+  margin-bottom: 0.25rem;
+}
+
+.mb-2 {
+  margin-bottom: 0.5rem;
+}
+
+.mr-2 {
+  margin-right: 0.5rem;
+}
+
+.mt-4 {
+  margin-top: 1rem;
+}
+
+.block {
+  display: block;
+}
+
 .inline {
   display: inline;
 }
 
+.flex {
+  display: flex;
+}
+
 .table {
   display: table;
 }
 
+.h-\[calc\(100vh-55px\)\] {
+  height: calc(100vh - 55px);
+}
+
+.flex-1 {
+  flex: 1 1 0%;
+}
+
+.grow {
+  flex-grow: 1;
+}
+
+.flex-col {
+  flex-direction: column;
+}
+
+.gap-y-5 {
+  row-gap: 1.25rem;
+}
+
+.gap-y-7 {
+  row-gap: 1.75rem;
+}
+
+.overflow-y-auto {
+  overflow-y: auto;
+}
+
 .rounded {
   border-radius: 0.25rem;
 }
@@ -594,19 +646,28 @@ video {
   border-radius: 0.375rem;
 }
 
+.border-r {
+  border-right-width: 1px;
+}
+
+.border-gray-200 {
+  --tw-border-opacity: 1;
+  border-color: rgb(229 231 235 / var(--tw-border-opacity));
+}
+
 .bg-green-600 {
   --tw-bg-opacity: 1;
   background-color: rgb(22 163 74 / var(--tw-bg-opacity));
 }
 
-.bg-puerto-rico-600 {
+.bg-puerto-rico-100 {
   --tw-bg-opacity: 1;
-  background-color: rgb(0 164 145 / var(--tw-bg-opacity));
+  background-color: rgb(198 255 243 / var(--tw-bg-opacity));
 }
 
-.bg-indigo-600 {
+.bg-puerto-rico-600 {
   --tw-bg-opacity: 1;
-  background-color: rgb(79 70 229 / var(--tw-bg-opacity));
+  background-color: rgb(0 164 145 / var(--tw-bg-opacity));
 }
 
 .bg-red-600 {
@@ -614,40 +675,81 @@ video {
   background-color: rgb(220 38 38 / var(--tw-bg-opacity));
 }
 
+.bg-slate-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(241 245 249 / var(--tw-bg-opacity));
+}
+
 .bg-slate-600 {
   --tw-bg-opacity: 1;
   background-color: rgb(71 85 105 / var(--tw-bg-opacity));
 }
 
+.bg-white {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+}
+
+.p-1 {
+  padding: 0.25rem;
+}
+
 .px-2 {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
 }
 
-.py-1 {
-  padding-top: 0.25rem;
-  padding-bottom: 0.25rem;
-}
-
 .px-2\.5 {
   padding-left: 0.625rem;
   padding-right: 0.625rem;
 }
 
+.py-1 {
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+}
+
 .py-1\.5 {
   padding-top: 0.375rem;
   padding-bottom: 0.375rem;
 }
 
+.py-2 {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+
+.pl-2 {
+  padding-left: 0.5rem;
+}
+
+.pr-2 {
+  padding-right: 0.5rem;
+}
+
 .text-sm {
   font-size: 0.875rem;
   line-height: 1.25rem;
 }
 
+.font-bold {
+  font-weight: 700;
+}
+
 .font-semibold {
   font-weight: 600;
 }
 
+.text-gray-700 {
+  --tw-text-opacity: 1;
+  color: rgb(55 65 81 / var(--tw-text-opacity));
+}
+
+.text-sky-800 {
+  --tw-text-opacity: 1;
+  color: rgb(7 89 133 / var(--tw-text-opacity));
+}
+
 .text-white {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
@@ -676,14 +778,14 @@ video {
   background-color: rgb(34 197 94 / var(--tw-bg-opacity));
 }
 
-.hover\:bg-puerto-rico-500:hover {
+.hover\:bg-puerto-rico-100:hover {
   --tw-bg-opacity: 1;
-  background-color: rgb(0 204 176 / var(--tw-bg-opacity));
+  background-color: rgb(198 255 243 / var(--tw-bg-opacity));
 }
 
-.hover\:bg-indigo-500:hover {
+.hover\:bg-puerto-rico-500:hover {
   --tw-bg-opacity: 1;
-  background-color: rgb(99 102 241 / var(--tw-bg-opacity));
+  background-color: rgb(0 204 176 / var(--tw-bg-opacity));
 }
 
 .hover\:bg-red-500:hover {
@@ -716,10 +818,6 @@ video {
   outline-color: #00a491;
 }
 
-.focus-visible\:outline-indigo-600:focus-visible {
-  outline-color: #4f46e5;
-}
-
 .focus-visible\:outline-red-600:focus-visible {
   outline-color: #dc2626;
 }

package/frontend/src/document/document.html

@@ -56,5 +56,19 @@
         <component :is="getComponentForPath(path)" :value="getValueForPath(path.path)"></component>
       </div>
     </div>
+    <div v-for="path in virtuals" class="mb-2">
+      <div class="p-1 mb-1 bg-slate-100">
+        {{path.name}}
+        <span class="path-type">
+          (virtual)
+        </span>
+      </div>
+      <div v-if="path.value == null" class="text-sky-800">
+        {{'' + path.value}}
+      </div>
+      <div v-else>
+        {{path.value}}
+      </div>
+    </div>
   </div>
 </div>

package/frontend/src/document/document.js

@@ -17,12 +17,13 @@ module.exports = app => app.component('document', {
     status: 'init',
     document: null,
     changes: {},
-    editting: false
+    editting: false,
+    virtuals: []
   }),
   async mounted() {
     const { doc, schemaPaths } = await api.Model.getDocument({ model: this.model, documentId: this.documentId });
     this.document = doc;
-    this.schemaPaths = Object.keys(schemaPaths).sort((k1, k2) => {
+    this.schemaPaths = await Object.keys(schemaPaths).sort((k1, k2) => {
       if (k1 === '_id' && k2 !== '_id') {
         return -1;
       }
@@ -31,7 +32,7 @@ module.exports = app => app.component('document', {
       }
       return 0;
     }).map(key => schemaPaths[key]);
-
+    this.getVirtuals();
     this.status = 'loaded';
   },
   methods: {
@@ -59,6 +60,15 @@ module.exports = app => app.component('document', {
     getEditValueForPath({ path }) {
       return path in this.changes ? this.changes[path] : mpath.get(path, this.document);
     },
+    getVirtuals() {
+      const exists = this.schemaPaths.map(x => x.path);
+      const docKeys = Object.keys(this.document);
+      for (let i = 0; i < docKeys.length; i++) {
+        if (!exists.includes(docKeys[i])) {
+          this.virtuals.push({ name: docKeys[i], value: this.document[docKeys[i]] });
+        }
+      }
+    },
     cancelEdit() {
       this.changes = {};
       this.editting = false;

package/frontend/src/models/models.css

@@ -131,8 +131,4 @@
   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

@@ -1,11 +1,27 @@
 <div class="models">
-  <div class="model-selector">
-    <h1>Models</h1>
-    <div v-for="model in models">
-      <router-link :to="'/model/' + model" :class="model === currentModel ? 'bold' : ''">
-        {{model}}
-      </router-link>
+  <div>
+    <div class="flex grow flex-col gap-y-5 overflow-y-auto border-r border-gray-200 bg-white px-2 h-[calc(100vh-55px)]">
+      <div class="flex font-bold font-xl mt-4 pl-2">
+        Models
+      </div>
+      <nav class="flex flex-1 flex-col">
+        <ul role="list" class="flex flex-1 flex-col gap-y-7">
+          <li>
+            <ul role="list">
+              <li v-for="model in models">
+                <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'">
+                  {{model}}
+                </router-link>
+              </li>
+            </ul>
+          </li>
+        </ul>
+      </nav>
     </div>
+    
   </div>
   <div class="documents" ref="documentsList">
     <div>
@@ -13,15 +29,17 @@
         <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">
+          <div class="mr-2">
+            <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="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="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">
             Export
           </button>
           <button

package/frontend/src/models/models.js

@@ -68,31 +68,18 @@ module.exports = app => app.component('models', {
       this.sortDocs(num, path);
     }
 
+
     if (this.currentModel != null) {
       await this.getDocuments();
     }
-    this.applyQueryParams();
+    if (this.$route.query?.fields) {
+      const filter = this.$route.query.fields.split(',');
+      this.filteredPaths = this.filteredPaths.filter(x => filter.includes(x.path))
+    }
 
     this.status = 'loaded';
   },
   methods: {
-    applyQueryParams() {
-      const hashUrl = window.location.hash.replace(/^#/, '');
-      if (hashUrl.indexOf('?') !== -1) {
-        const searchParams = new URLSearchParams(
-          hashUrl.slice(hashUrl.indexOf('?') + 1)
-        );
-        if (searchParams.has('fields')) {
-          const filter = searchParams.get('fields').split(',');
-          this.filteredPaths = this.filteredPaths.filter(x => filter.includes(x.path))
-        }
-        if (searchParams.has('search')) {
-          this.searchText = searchParams.get('search');
-          this.filter = eval(`(${this.searchText})`);
-          this.filter = EJSON.stringify(this.filter);
-        }
-      }
-    },
     async onScroll() {
       if (this.status === 'loading' || this.loadedAllDocs) {
         return;
@@ -136,22 +123,11 @@ module.exports = app => app.component('models', {
         this.filter = eval(`(${this.searchText})`);
         this.filter = EJSON.stringify(this.filter);
         this.query.search = this.searchText;
+        this.$router.push({ query: this.query });
       } else {
         this.filter = {};
         delete this.query.search;
-      }
-
-      const hashUrl = window.location.hash.replace(/^#/, '');
-      if (hashUrl.indexOf('?') === -1) {
-        window.history.pushState({}, '', window.location.pathname + '#' + hashUrl + '?search=' + this.query.search);
-      } else {
-        const searchParams = new URLSearchParams(
-          hashUrl.indexOf('?') === -1 ? '' : hashUrl.slice(hashUrl.indexOf('?') + 1)
-        );
-        const hashUrlWithoutSearchParams = hashUrl.slice(0, hashUrl.indexOf('?'));
-        
-        searchParams.set('search', this.query.search);
-        window.history.pushState({}, '', window.location.pathname + '#' + hashUrlWithoutSearchParams + '?' + searchParams);
+        this.$router.push({ query: this.query });
       }
       await this.loadMoreDocuments();
     },
@@ -218,23 +194,13 @@ module.exports = app => app.component('models', {
       this.filteredPaths = [...this.selectedPaths];
       this.shouldShowFieldModal = false;
       const selectedParams = this.filteredPaths.map(x => x.path).join(',');
-      // sets the query params
-      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);
-      }
-      
+      this.query.fields = selectedParams;
+      this.$router.push({ query: this.query });
     },
     resetDocuments() {
       this.selectedPaths = [...this.filteredPaths];
+      this.query.fields = {};
+      this.$router.push({ query: this.query });
       this.shouldShowFieldModal = false;
     },
     deselectAll() {

package/package.json

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