@mongoosejs/studio 0.0.1

package/frontend/src/modal/modal.css

@@ -0,0 +1,75 @@
+/** Vue modal */
+
+.modal-mask {
+  position: fixed;
+  z-index: 9998;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: table;
+  transition: opacity 0.3s ease;
+}
+
+.modal-wrapper {
+  display: table-cell;
+  vertical-align: middle;
+}
+
+.modal-container {
+  width: 600px;
+  margin: 0px auto;
+  padding: 20px 30px;
+  padding-bottom: 40px;
+  background-color: #fff;
+  border-radius: 2px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
+  transition: all 0.3s ease;
+  font-family: Helvetica, Arial, sans-serif;
+}
+
+.modal-header {
+  margin-top: 0;
+  font-size: 18px;
+  font-weight: bold
+}
+
+.modal-header-success {
+  color: #42b983;
+}
+
+.modal-header-error {
+  color: #ff0000;
+}
+
+.modal-body {
+  margin: 20px 0;
+}
+
+.modal__button--default {
+  float: right;
+}
+
+/*
+ * The following styles are auto-applied to elements with
+ * transition="modal" when their visibility is toggled
+ * by Vue.js.
+ *
+ * You can easily play with the modal transition by editing
+ * these styles.
+ */
+
+.modal-enter {
+  opacity: 0;
+}
+
+.modal-leave-active {
+  opacity: 0;
+}
+
+.modal-enter .modal-container,
+.modal-leave-active .modal-container {
+  -webkit-transform: scale(1.1);
+  transform: scale(1.1);
+}

package/frontend/src/modal/modal.html

@@ -0,0 +1,12 @@
+<transition name="modal">
+  <div class="modal-mask">
+    <div class="modal-wrapper">
+      <div class="modal-container">
+        <div class="modal-body">
+          <slot name="body">
+          </slot>
+        </div>
+      </div>
+    </div>
+  </div>
+</transition>

package/frontend/src/modal/modal.js

@@ -0,0 +1,10 @@
+'use strict';
+
+const appendCSS = require('../appendCSS');
+const template = require('./modal.html');
+
+appendCSS(require('./modal.css'));
+
+module.exports = app => app.component('modal', {
+  template
+});

package/frontend/src/models/models.css

@@ -0,0 +1,108 @@
+.models {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  min-height: calc(100% - 56px);
+}
+
+.models .model-selector {
+  background-color: #eee;
+  flex-grow: 0; 
+  padding: 15px;
+  padding-top: 0px;
+}
+
+.models h1 {
+  margin-top: 0px;
+}
+
+.models .documents {
+  flex-grow: 1;
+  overflow: scroll;
+  max-height: calc(100vh - 56px);
+}
+
+.models .documents .documents-container {
+  margin-top: 40px;
+}
+
+.models .documents table {
+  /* max-width: -moz-fit-content;
+  max-width: fit-content; */
+  width: 100%;
+  table-layout: auto;
+  font-size: small;
+  padding: 0;
+  margin-right: 1em;
+  white-space: nowrap;
+  z-index: -1;
+  border-collapse: collapse;
+  line-height: 1.5em;
+}
+
+.models .documents table th {
+  position: sticky;
+  top: 0px;
+  background-color: white;
+}
+
+.models .documents table th:after {
+  content: '';
+  position: absolute;
+  left: 0;
+  width: 100%;
+  bottom: -1px;
+  border-bottom: thin solid rgba(0,0,0,.12);
+}
+
+.models .documents table tr {
+  color: black;
+  border-spacing: 0px 0px;
+  background-color: white;
+  cursor: pointer;
+}
+
+.models .documents table tr:nth-child(even) {
+  background-color: #f5f5f5;
+}
+
+.models .documents table tr:hover {
+  background-color: #55A3D4;
+}
+
+.models .documents table th, td {
+  border-bottom: thin solid rgba(0,0,0,.12);
+  text-align: left;
+  padding: 0 16px;
+  height: 48px;
+}
+
+.models textarea {
+  width: 100%;
+  height: 600px;
+  font-size: 1.2em;
+}
+
+.models .path-type {
+  color: rgba(0,0,0,.36);
+  font-size: 0.8em;
+}
+
+.models .documents-menu {
+  display: flex;
+  margin: 0.25em;
+  position: fixed;
+  width: calc(100vw - 200px);
+}
+
+.models .documents-menu .search-input {
+  flex-grow: 1;
+}
+
+.models .search-input input {
+  padding: 0.25em 0.5em;
+  font-size: 1.1em;
+  border: 1px solid #ddd;
+  border-radius: 3px;
+  width: calc(100% - 1em);
+}

package/frontend/src/models/models.html

@@ -0,0 +1,53 @@
+<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>
+  <div class="documents">
+    <div>
+      <div class="documents-menu">
+        <div class="search-input">
+          <form @submit.prevent="search">
+            <input class="search-text" type="text" placeholder="Filter or text" v-model="searchText" />
+          </form>
+        </div>
+        <div class="buttons">
+          <button @click="shouldShowExportModal = true">Export</button>
+        </div>
+      </div>
+    </div>
+    <div class="documents-container">
+      <table>
+        <thead>
+          <th v-for="path in schemaPaths">
+            {{path.path}}
+            <span class="path-type">
+              ({{path.instance.toLowerCase()}})
+            </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>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <modal v-if="shouldShowExportModal">
+      <template v-slot:body>
+        <export-query-results
+          :schemaPaths="schemaPaths"
+          :filter="filter"
+          :currentModel="currentModel"
+          @done="shouldShowExportModal = false">
+        </export-query-results>
+      </template>
+    </modal>
+  </div>
+</div>

package/frontend/src/models/models.js

@@ -0,0 +1,107 @@
+'use strict';
+
+const api = require('../api');
+const template = require('./models.html');
+
+const appendCSS = require('../appendCSS');
+
+appendCSS(require('./models.css'));
+
+module.exports = app => app.component('models', {
+  template: template,
+  props: ['model'],
+  data: () => ({
+    models: [],
+    currentModel: null,
+    documents: [],
+    schemaPaths: [],
+    status: 'init',
+    edittingDoc: null,
+    docEdits: null,
+    filter: null,
+    searchText: '',
+    shouldShowExportModal: false,
+    shouldExport: {}
+  }),
+  created() {
+    this.currentModel = this.model;
+  },
+  async mounted() {
+    this.models = await api.Model.listModels().then(res => res.models);
+    if (this.currentModel == null && this.models.length > 0) {
+      this.currentModel = this.models[0];
+    }
+
+    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;
+      }
+    }
+
+    this.status = 'loaded';
+  },
+  methods: {
+    async search() {
+      if (this.searchText) {
+        this.filter = eval(`(${this.searchText})`);
+      } else {
+        this.filter = {};
+      }
+      
+      await this.getDocuments();
+    },
+    async getDocuments() {
+      const { docs, schemaPaths } = await api.Model.getDocuments({
+        model: this.currentModel,
+        filter: this.filter
+      });
+      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;
+      }
+    },
+    getComponentForPath(schemaPath) {
+      if (schemaPath.instance === 'Array') {
+        return 'list-array';
+      }
+      return 'list-default';
+    },
+    async saveDocEdits() {
+      const res = await api.Model.updateDocument({
+        model: this.currentModel,
+        _id: this.edittingDoc._id,
+        update: JSON.parse(this.docEdits)
+      });
+
+      const index = this.documents.findIndex(doc => doc === this.edittingDoc);
+      if (index !== -1) {
+        this.documents[index] = res.doc;
+      }
+      this.edittingDoc = null;
+    }
+  }
+});

package/frontend/src/navbar/navbar.css

@@ -0,0 +1,162 @@
+.navbar {
+  width: 100%;
+  background-color: #eee;
+}
+
+.navbar .nav-left {
+  float: left;
+  line-height: 54px;
+  font-size: 20px;
+  padding-left: 20px;
+}
+
+.navbar .nav-left a {
+  color: #232323;
+}
+
+.navbar {
+  border-bottom: 1px solid #ddd;
+  height: 55px;
+}
+
+.navbar .nav-left img {
+  height: 24px;
+  vertical-align: middle;
+  margin-right: 0.5em;
+  margin-top: 16px;
+}
+
+.navbar .nav-right {
+  float: right;
+  display: flex;
+  flex-direction: row;
+  font-size: 16px;
+  line-height: 54px;
+  padding-right: 20px;
+}
+
+.navbar .nav-right .nav-item {
+  flex-grow: 1;
+  padding: 0px 12px;
+  position: relative;
+  z-index: 21000;
+}
+
+.navbar .nav-right .nav-item:hover {
+  flex-grow: 1;
+  padding: 0px 12px;
+  border-bottom: 1px solid #E1B9A0;
+}
+
+.navbar .nav-right .nav-item.active {
+  border-bottom: 1px solid #E1B9A0;
+}
+
+.navbar .nav-action {
+  cursor: pointer;
+  color: #E1B9A0;
+}
+
+.navbar .nav-action svg {
+  height: 1em;
+  vertical-align: middle;
+}
+
+.navbar .nav-right .nav-item .flyout {
+  position: absolute;
+  top: 55px;
+  right: 0px;
+  visibility: hidden;
+  opacity: 0;
+  transition: opacity .25s,visibility .25s,transform .25s;
+  width: auto;
+  box-shadow: 0 12px 32px rgba(0, 0, 0, .1), 0 2px 6px rgba(0, 0, 0, .08);
+  background-color: #393944;
+  padding-left: 0.5em;
+  padding-right: 0.5em;
+  z-index: 1000;
+  min-width: 192px;
+  font-size: 0.9em;
+}
+
+.navbar .nav-right .nav-item:hover .flyout a {
+  color: #E1B9A0;
+  margin-top: 0.25em;
+  margin-bottom: 0.25em;
+}
+
+.navbar .nav-right .nav-item:hover .flyout a:hover {
+  color: #E1B9A0;
+}
+
+.navbar .nav-right .nav-item:hover .flyout .nav-action {
+  color: #E1B9A0;
+  margin-top: 0.25em;
+  margin-bottom: 0.25em;
+}
+
+.navbar .nav-right .nav-item:hover .flyout .nav-action:hover {
+  color: #E1B9A0;
+}
+
+.navbar .nav-right .nav-item:hover .flyout {
+  visibility: visible;
+  opacity: 1;
+}
+
+#bar-1 {
+	transform: translateY(-4px);
+}
+#bar-3 {
+	transform: translateY(4px);
+}
+.menu {
+  display: none;
+}
+.menu {
+	width: 35px;
+	height: 30px;
+	margin: 18px 2px 0px 0px;
+	cursor: pointer;
+  float: right;
+}
+.bar {
+	height: 5px;
+	width: 100%;
+	background-color: #fff;
+	display: block;
+	border-radius: 5px;
+	transition: 0.4s ease;
+}
+.change-icon #bar-1 {
+  transform: translateY(4px) rotateZ(-405deg);
+}
+.change-icon #bar-2 {
+  opacity: 0;
+}
+.change-icon #bar-3 {
+  transform: translateY(-6px) rotateZ(405deg);
+}
+
+@media (max-width: 767px) {
+  .menu {
+    display: block;
+  }
+
+  .change-icon ~ div.nav-right {
+    left: 0;
+  }
+
+  .navbar .nav-right {
+		position: fixed;
+		top: 55px;
+		left: -130%;
+		background: #111;
+		height: 100vh;
+		width: 100%;
+		text-align: center;
+		display: block;
+		transition: all 0.3s ease;
+    z-index: 10000;
+	}
+}

package/frontend/src/navbar/navbar.html

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

package/frontend/src/navbar/navbar.js

@@ -0,0 +1,11 @@
+'use strict';
+
+const template = require('./navbar.html');
+
+const appendCSS = require('../appendCSS');
+
+appendCSS(require('./navbar.css'));
+
+module.exports = app => app.component('navbar', {
+  template: template
+});

package/frontend/src/routes.js

@@ -0,0 +1,19 @@
+'use strict';
+
+module.exports = [
+  {
+    path: '/',
+    name: 'root',
+    component: 'models'
+  },
+  {
+    path: '/model/:model',
+    name: 'model',
+    component: 'models'
+  },
+  {
+    path: '/model/:model/document/:documentId',
+    name: 'document',
+    component: 'document'
+  }
+];

package/frontend/webpack.config.js

@@ -0,0 +1,36 @@
+'use strict';
+
+const webpack = require('webpack');
+
+module.exports = {
+  mode: 'development',
+  entry: {
+    app: `${__dirname}/src/index.js`
+  },
+  target: 'web',
+  devtool: false,
+  optimization: {
+    minimize: false
+  },
+  output: {
+    path: `${__dirname}/public`,
+    filename: '[name].js'
+  },
+  plugins: [
+    new webpack.DefinePlugin({
+      config__baseURL: '\'/.netlify/functions/admin\''
+    })
+  ],
+  module: {
+    rules: [
+      {
+        test: /\.html$/i,
+        type: 'asset/source'
+      },
+      {
+        test: /\.css$/i,
+        type: 'asset/source'
+      }
+    ]
+  }
+};

package/package.json

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