@mongoosejs/studio 0.0.29 → 0.0.31

package/frontend/src/dashboard-result/dashboard-chart/dashboard-chart.js

@@ -0,0 +1,20 @@
+'use strict';
+
+const template = require('./dashboard-chart.html');
+
+module.exports = app => app.component('dashboard-chart', {
+  template: template,
+  props: ['value'],
+  mounted() {
+    const ctx = this.$refs.chart.getContext('2d');
+    const chart = new Chart(ctx, this.value.$chart);
+  },
+  computed: {
+    header() {
+      if (this.value != null && this.value.$chart.header) {
+        return this.value.$chart.header;
+      }
+      return null;
+    }
+  }
+});

package/frontend/src/dashboard-result/dashboard-document/dashboard-document.html

@@ -0,0 +1,8 @@
+<div class="py-2">
+  <div v-if="header" class="border-b border-gray-100 px-2 pb-2 text-xl font-bold">
+    {{header}}
+  </div>
+  <div class="text-xl pb-2">
+    <document-details :document="value.$document.document" :schemaPaths="schemaPaths" />
+  </div>
+</div>

package/frontend/src/dashboard-result/dashboard-document/dashboard-document.js

@@ -0,0 +1,29 @@
+
+
+'use strict';
+
+const template = require('./dashboard-document.html');
+
+module.exports = app => app.component('dashboard-document', {
+  template: template,
+  props: ['value'],
+  computed: {
+    header() {
+      if (this.value != null && this.value.$document.header) {
+        return this.value.$document.header;
+      }
+      return null;
+    },
+    schemaPaths() {
+      return Object.keys(this.value.$document.schemaPaths).sort((k1, k2) => {
+        if (k1 === '_id' && k2 !== '_id') {
+          return -1;
+        }
+        if (k1 !== '_id' && k2 === '_id') {
+          return 1;
+        }
+        return 0;
+      }).map(key => this.value.$document.schemaPaths[key]);
+    }
+  }
+});

package/frontend/src/dashboard-result/dashboard-primitive/dashboard-primitive.html

@@ -0,0 +1,8 @@
+<div class="py-2">
+  <div v-if="header" class="border-b border-gray-100 px-2 pb-2 text-xl font-bold">
+    {{header}}
+  </div>
+  <div class="text-xl p-2">
+    {{displayValue}}
+  </div>
+</div>

package/frontend/src/dashboard-result/dashboard-primitive/dashboard-primitive.js

@@ -0,0 +1,24 @@
+
+
+'use strict';
+
+const template = require('./dashboard-primitive.html');
+
+module.exports = app => app.component('dashboard-primitive', {
+  template: template,
+  props: ['value'],
+  computed: {
+    header() {
+      if (this.value != null && this.value.$primitive.header) {
+        return this.value.$primitive.header;
+      }
+      return null;
+    },
+    displayValue() {
+      if (this.value != null && this.value.$primitive) {
+        return this.value.$primitive.value;
+      }
+      return this.value;
+    }
+  }
+});

package/frontend/src/dashboard-result/dashboard-result.html

@@ -0,0 +1,18 @@
+<div>
+  <div v-if="Array.isArray(result)">
+    <div v-for="el in result">
+      <component
+        class="bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-xl"
+        :is="getComponentForValue(res)"
+        :value="res">
+      </component>
+    </div>
+  </div>
+  <div v-else>
+    <component
+      class="bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-xl"
+      :is="getComponentForValue(result)"
+      :value="result">
+    </component>
+  </div>
+</div>

package/frontend/src/dashboard-result/dashboard-result.js

@@ -0,0 +1,30 @@
+
+
+'use strict';
+
+const api = require('../api');
+const template = require('./dashboard-result.html');
+
+module.exports = app => app.component('dashboard-result', {
+  template: template,
+  props: ['result'],
+  mounted: async function() {
+  },
+  methods: {
+    getComponentForValue(value) {
+      console.log('X', value);
+      if (typeof value !== 'object' || value == null) {
+        return 'dashboard-primitive';
+      }
+      if (value.$primitive) {
+        return 'dashboard-primitive';
+      }
+      if (value.$chart) {
+        return 'dashboard-chart';
+      }
+      if (value.$document) {
+        return 'dashboard-document';
+      }
+    }
+  }
+});

package/frontend/src/dashboards/dashboards.html

@@ -1,5 +1,79 @@
-<div class="dashboards">
-  <div v-for="dashboard in dashboards" :key="dashboard._id" @click="$router.push('dashboard?dashboardId=' + dashboard._id)">
-    {{dashboard.name}}, ID: {{ dashboard._id }}
+<div class="dashboards max-w-5xl mx-auto mt-8">
+  <div v-if="status === 'loaded' && dashboards.length === 0">
+    <div class="text-center">
+      <h3 class="mt-2 text-sm font-semibold text-gray-900">No dashboards yet</h3>
+      <p class="mt-1 text-sm text-gray-500">Get started by creating a new dashboard.</p>
+      <div class="mt-6">
+        <button type="button" class="inline-flex items-center rounded-md bg-teal-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-teal-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-600">
+          <svg class="-ml-0.5 mr-1.5 h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+            <path d="M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z" />
+          </svg>
+          New Dashboard
+        </button>
+      </div>
+    </div>
   </div>
+
+
+  <div class="px-4 sm:px-6 lg:px-8">
+    <div class="sm:flex sm:items-center">
+      <div class="sm:flex-auto">
+        <h1 class="text-base font-semibold leading-6 text-gray-900">Dashboards</h1>
+      </div>
+      <div class="mt-4 sm:ml-16 sm:mt-0 sm:flex-none">
+        <button
+          type="button"
+          @click="showCreateDashboardModal = true"
+          class="block rounded-md bg-teal-600 px-3 py-2 text-center text-sm font-semibold text-white shadow-sm hover:bg-teal-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-600">Create New Dashboard</button>
+      </div>
+    </div>
+    <div class="mt-8 flow-root">
+      <div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
+        <div class="inline-block min-w-full py-2 align-middle">
+          <table class="min-w-full divide-y divide-gray-300">
+            <thead>
+              <tr>
+                <th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6 lg:pl-8">Title</th>
+                <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900 w-[50%]">Description</th>
+                <th scope="col" class="relative py-3.5 pl-3 pr-4 sm:pr-6 lg:pr-8">
+                </th>
+                <th scope="col" class="relative py-3.5 pl-3 pr-4 sm:pr-6 lg:pr-8">
+                </th>
+              </tr>
+            </thead>
+            <tbody class="divide-y divide-gray-200 bg-white">
+              <tr v-for="dashboard in dashboards">
+                <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6 lg:pl-8">{{dashboard.title}}</td>
+                <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 truncate w-[50%]">{{dashboard.description}}</td>
+                <td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6 lg:pr-8">
+                  <router-link
+                    :to="'dashboard?edit=true&dashboardId=' + dashboard._id"
+                    class="text-teal-600 hover:text-teal-900">
+                    Edit
+                  </router-link>
+                </td>
+                <td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6 lg:pr-8">
+                  <router-link
+                    :to="'dashboard?edit=true&dashboardId=' + dashboard._id"
+                    class="text-teal-600 hover:text-teal-900">
+                    View
+                  </router-link>
+                </td>
+              </tr>
+  
+              <!-- More people... -->
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <modal v-if="showCreateDashboardModal">
+    <template v-slot:body>
+      <div class="modal-exit" @click="showCreateDashboardModal = false;">&times;</div>
+      
+      <create-dashboard></create-dashboard>
+    </template>
+  </modal>
 </div>

package/frontend/src/dashboards/dashboards.js

@@ -7,14 +7,13 @@ const template = require('./dashboards.html');
 module.exports = app => app.component('dashboards', {
   template: template,
   data: () => ({
+    status: 'loading',
     dashboards: [],
+    showCreateDashboardModal: false
   }),
   async mounted() {
     const { dashboards } = await api.Dashboard.getDashboards();
     this.dashboards = dashboards;
-    if (!this.$route.query.dashboardId) {
-      return;
-    }
     this.status = 'loaded';
   },
 });

package/frontend/src/document/confirm-changes/confirm-changes.html

@@ -2,7 +2,7 @@
     <h2>
         Are you sure you want to save the following changes?
     </h2>
-    <pre><code ref="code" class="language-javascript" v-text="displayValue"></code></pre>
+    <pre class="max-h-[50vh] overflow-auto"><code ref="code" class="language-javascript" v-text="displayValue"></code></pre>
     <div class="flex gap-2 mt-2">
     <async-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"
@@ -15,4 +15,4 @@
         Cancel
     </button>
     </div>
-</div>
+</div>

package/frontend/src/document/document.css

@@ -5,22 +5,6 @@
   padding-top: 25px;
 }
 
-.document .value {
-  padding-top: 10px;
-  padding-bottom: 10px;
-}
-
-.document .path-key {
-  background-color: #f0f0f0;
-  padding: 0.25em;
-  margin-bottom: 0.5em;
-}
-
-.document .path-type {
-  color: rgba(0,0,0,.36);
-  font-size: 0.8em;
-}
-
 .document .document-menu {
   display: flex;
 }

package/frontend/src/document/document.html

@@ -37,40 +37,11 @@
     </div>
   </div>
   <div v-if="status === 'loaded'">
-    <div v-for="path in schemaPaths" class="value">
-      <div class="path-key">
-        {{path.path}}
-        <span class="path-type">
-          ({{(path.instance || 'unknown').toLowerCase()}})
-        </span>        
-      </div>
-      <div v-if="editting && path.path !== '_id'">
-        <component
-          :is="getEditComponentForPath(path)"
-          :value="getEditValueForPath(path)"
-          @input="changes[path.path] = $event; delete invalid[path.path];"
-          @error="invalid[path.path] = $event;"
-          >
-        </component>
-      </div>
-      <div v-else>
-        <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>
+    <document-details
+      :document="document"
+      :schemaPaths="schemaPaths"
+      :editting="editting"
+      :changes="changes"></document-details>
     <modal v-if="shouldShowConfirmModal">
       <template v-slot:body>
         <div class="modal-exit" @click="shouldShowConfirmModal = false;">&times;</div>

package/frontend/src/document/document.js

@@ -36,43 +36,9 @@ module.exports = app => app.component('document', {
       }
       return 0;
     }).map(key => schemaPaths[key]);
-    this.getVirtuals();
     this.status = 'loaded';
   },
   methods: {
-    getComponentForPath(schemaPath) {
-      if (schemaPath.instance === 'Array') {
-        return 'detail-array';
-      }
-      return 'detail-default';
-    },
-    getEditComponentForPath(path) {
-      if (path.instance == 'Date') {
-        return 'edit-date';
-      }
-      if (path.instance == 'Number') {
-        return 'edit-number';
-      }
-      if (path.instance === 'Array') {
-        return 'edit-array';
-      }
-      return 'edit-default';
-    },
-    getValueForPath(path) {
-      return mpath.get(path, this.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/document-details/document-details.css

@@ -0,0 +1,18 @@
+.document-details {
+  width: 100%;
+}
+
+.document-details .value {
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+
+.document-details .path-key {
+  background-color: #f0f0f0;
+  margin-bottom: 0.5em;
+}
+
+.document-details .path-type {
+  color: rgba(0,0,0,.36);
+  font-size: 0.8em;
+}

package/frontend/src/document-details/document-details.html

@@ -0,0 +1,36 @@
+<div class="document-details">
+  <div v-for="path in schemaPaths" class="value">
+    <div class="path-key p-1">
+      {{path.path}}
+      <span class="path-type">
+        ({{(path.instance || 'unknown').toLowerCase()}})
+      </span>        
+    </div>
+    <div v-if="editting && path.path !== '_id'" class="pl-1">
+      <component
+        :is="getEditComponentForPath(path)"
+        :value="getEditValueForPath(path)"
+        @input="changes[path.path] = $event; delete invalid[path.path];"
+        @error="invalid[path.path] = $event;"
+        >
+      </component>
+    </div>
+    <div v-else class="pl-1">
+      <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>

package/frontend/src/document-details/document-details.js

@@ -0,0 +1,59 @@
+'use strict';
+
+const mpath = require('mpath');
+const template = require('./document-details.html')
+
+const appendCSS = require('../appendCSS');
+
+appendCSS(require('./document-details.css'));
+
+module.exports = app => app.component('document-details', {
+  template,
+  props: ['document', 'schemaPaths', 'editting', 'changes'],
+  methods: {
+    getComponentForPath(schemaPath) {
+      if (schemaPath.instance === 'Array') {
+        return 'detail-array';
+      }
+      return 'detail-default';
+    },
+    getEditComponentForPath(path) {
+      if (path.instance == 'Date') {
+        return 'edit-date';
+      }
+      if (path.instance == 'Number') {
+        return 'edit-number';
+      }
+      if (path.instance === 'Array') {
+        return 'edit-array';
+      }
+      return 'edit-default';
+    },
+    getValueForPath(path) {
+      return mpath.get(path, this.document);
+    },
+    getEditValueForPath({ path }) {
+      if (!this.changes) {
+        return;
+      }
+      return path in this.changes ? this.changes[path] : mpath.get(path, this.document);
+    }
+  },
+  computed: {
+    virtuals() {
+      if (this.schemaPaths == null) {
+        return [];
+      }
+      const exists = this.schemaPaths.map(x => x.path);
+      const docKeys = Object.keys(this.document);
+      const result = [];
+      for (let i = 0; i < docKeys.length; i++) {
+        if (!exists.includes(docKeys[i])) {
+          result.push({ name: docKeys[i], value: this.document[docKeys[i]] });
+        }
+      }
+
+      return result;
+    }
+  }
+})

package/frontend/src/index.js

@@ -12,14 +12,20 @@ const app = Vue.createApp({
 
 require('./async-button/async-button')(app);
 require('./charts/charts')(app);
+require('./create-dashboard/create-dashboard')(app);
 require('./create-document/create-document')(app);
 require('./dashboards/dashboards')(app);
 require('./dashboard/dashboard')(app);
+require('./dashboard-result/dashboard-result')(app);
+require('./dashboard-result/dashboard-chart/dashboard-chart')(app);
+require('./dashboard-result/dashboard-document/dashboard-document')(app);
+require('./dashboard-result/dashboard-primitive/dashboard-primitive')(app);
 require('./dashboard/edit-dashboard/edit-dashboard')(app)
 require('./detail-array/detail-array')(app);
 require('./detail-default/detail-default')(app);
 require('./document/document')(app);
 require('./document/confirm-changes/confirm-changes')(app);
+require('./document-details/document-details')(app);
 require('./edit-array/edit-array')(app);
 require('./edit-default/edit-default')(app);
 require('./edit-number/edit-number')(app);

package/package.json

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

package/tailwind.config.js

@@ -2,7 +2,7 @@
 
 module.exports = {
   mode: 'jit',
-  content: ['./frontend/src/**/*.html', './frontend/src/**/*.js'],
+  content: ['./frontend/src/**/*.html', './frontend/src/**/*.js', './frontend/src/**/**/*.html', './frontend/src/**/**/*.js'],
   corePlugins: {
     container: true
   },