@mongoosejs/studio 0.0.16 → 0.0.17

package/frontend/index.js

@@ -1,5 +1,6 @@
 'use strict';
 
+const { execSync, exec } = require('child_process');
 const webpack = require('webpack');
 
 module.exports = function(apiUrl, isLambda, options) {
@@ -27,7 +28,13 @@ module.exports = function(apiUrl, isLambda, options) {
       }
       console.log('Webpack compiled successfully');
     });
+
+    const childProcess = exec('npm run tailwind:watch');
+    childProcess.stdout.on('data', data => console.log('[TAILWIND]', data));
+    childProcess.stderr.on('data', data => console.log('[TAILWIND]', data));
   } else {
+    execSync('npm run tailwind');
+
     return new Promise((resolve, reject) => {
       compiler.run((err) => {
         if (err) {

package/frontend/public/index.html

@@ -8,6 +8,7 @@
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans"/>
     <link rel="stylesheet" type="text/css" href="style.css"/>
     <link rel="stylesheet" href="https://unpkg.com/prismjs@1.29.0/themes/prism.css"/>
+    <link rel="stylesheet" href="tw.css">
     <link rel="stylesheet" href="vanillatoasts/vanillatoasts.css">
     <script src="https://unpkg.com/vue@3.x"></script>
     <script src="https://unpkg.com/vue-router@4.0.10"></script>

package/frontend/public/style.css

@@ -24,6 +24,10 @@ button {
   font-size: 1.1em;
 }
 
+input {
+  outline: #666 solid 1px;
+}
+
 button.green {
   background-color: #58D415;
 }

package/frontend/src/document/document.html

@@ -7,17 +7,32 @@
     </div>
 
     <div class="right">
-      <button v-if="!editting" @click="editting = true">
-        <img src="images/edit.svg" /> Edit
+      <button
+        v-if="!editting"
+        @click="editting = true"
+        type="button"
+        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">
+        <img src="images/edit.svg" class="inline" /> Edit
       </button>
-      <button v-if="editting" class="grey" @click="editting = false">
+      <button
+        v-if="editting"
+        @click="save"
+        type="button"
+        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">
         &times; Cancel
       </button>
-      <button v-if="editting" class="green" @click="save">
-        <img src="images/save.svg" /> Save
+      <button
+        v-if="editting"
+        @click="save"
+        type="button"
+        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">
+        <img src="images/save.svg" class="inline" /> Save
       </button>
-      <button class="red" @click="remove">
-        <img src="images/delete.svg" /> Delete
+      <button
+        @click="remove"
+        type="button"
+        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">
+        <img src="images/delete.svg" class="inline" /> Delete
       </button>
     </div>
   </div>

package/frontend/src/models/models.html

@@ -18,8 +18,18 @@
 
         </div>
         <div class="buttons">
-          <button @click="shouldShowExportModal = true">Export</button>
-          <button @click="shouldShowFieldModal = true">Fields</button>
+          <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">
+            Export
+          </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">
+            Fields
+          </button>
         </div>
       </div>
     </div>

package/frontend/src/models/models.js

@@ -54,6 +54,7 @@ module.exports = app => app.component('models', {
     if (this.currentModel == null && this.models.length > 0) {
       this.currentModel = this.models[0];
     }
+
     this.query = Object.assign({}, this.$route.query); // important that this is here before the if statements
     if (this.$route.query?.search) {
       this.searchText = this.$route.query.search;
@@ -70,20 +71,28 @@ module.exports = app => app.component('models', {
     if (this.currentModel != null) {
       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.applyQueryParams();
 
     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;
@@ -120,20 +129,31 @@ module.exports = app => app.component('models', {
         this.query.sort = `{${path}:${num}}`
         this.$router.push({ query: this.query });
       }
-      await this.getDocuments();
+      await this.loadMoreDocuments();
     },
     async search() {
       if (this.searchText && Object.keys(this.searchText).length) {
         this.filter = eval(`(${this.searchText})`);
         this.filter = EJSON.stringify(this.filter);
         this.query.search = this.searchText;
-        this.$router.push({ path: this.$route.path, query: this.query })
       } else {
         this.filter = {};
         delete this.query.search;
-        this.$router.push({ path: this.$route.path, query: this.query });
       }
-      await this.getDocuments();
+
+      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);
+      }
+      await this.loadMoreDocuments();
     },
     async getDocuments() {
       const { docs, schemaPaths, numDocs } = await api.Model.getDocuments({
@@ -165,6 +185,18 @@ module.exports = app => app.component('models', {
       this.filteredPaths = [...this.schemaPaths];
       this.selectedPaths = [...this.schemaPaths];
     },
+    async loadMoreDocuments() {
+      const { docs } = await api.Model.getDocuments({
+        model: this.currentModel,
+        filter: this.filter,
+        sort: this.sortBy,
+        limit
+      });
+      this.documents = docs;
+      if (docs.length < limit) {
+        this.loadedAllDocs = true;
+      }
+    },
     addOrRemove(path) {
       const exists = this.selectedPaths.findIndex(x => x.path == path.path);
       if (exists > 0) { // remove
@@ -186,7 +218,7 @@ 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);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mongoosejs/studio",
-  "version": "0.0.16",
+  "version": "0.0.17",
   "dependencies": {
     "archetype": "0.13.0",
     "csv-stringify": "6.3.0",
@@ -19,7 +19,12 @@
     "express": "4.x",
     "mocha": "10.2.0",
     "mongoose": "7.x",
+    "tailwindcss": "3.4.0",
     "vue": "3.x",
     "webpack": "5.75.0"
+  },
+  "scripts": {
+    "tailwind": "tailwindcss -o ./frontend/public/tw.css",
+    "tailwind:watch": "tailwindcss -o ./frontend/public/tw.css --watch"
   }
 }

package/tailwind.config.js

@@ -0,0 +1,29 @@
+'use strict';
+
+module.exports = {
+  mode: 'jit',
+  content: ['./frontend/src/**/*.html', './frontend/src/**/*.js'],
+  corePlugins: {
+    container: true
+  },
+  plugins: [],
+  theme: {
+    extend: {
+      colors: {
+        'puerto-rico': {
+          '50': '#eefffb',
+          '100': '#c6fff3',
+          '200': '#8effe8',
+          '300': '#4dfbdb',
+          '400': '#15d4b7',
+          '500': '#00ccb0',
+          '600': '#00a491',
+          '700': '#038276',
+          '800': '#08675f',
+          '900': '#0c554e',
+          '950': '#003432',
+        } 
+      } 
+    }
+  }
+};