@mongoosejs/studio 0.0.36 → 0.0.38

package/frontend/public/app.js

@@ -2582,7 +2582,7 @@ module.exports = "<div>\n  <div v-if=\"Array.isArray(result)\">\n    <div v-for=
 /***/ ((module) => {
 
 "use strict";
-module.exports = "<div class=\"dashboard px-1\">\n  <div v-if=\"dashboard\" class=\"max-w-5xl mx-auto\">\n    <div class=\"flex items-center w-full\">\n      <h2 class=\"mt-4 mb-4 text-gray-900 font-semibold text-xl grow shrink\">{{title}}</h2>\n      <div>\n        <button\n          v-if=\"!showEditor\"\n          @click=\"showEditor = true\"\n          type=\"button\"\n          class=\"rounded-md bg-teal-600 px-2.5 py-1.5 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\">\n          <img src=\"images/edit.svg\" class=\"inline h-[1em]\" /> Edit\n        </button>\n      </div>\n    </div>\n    <div v-if=\"!showEditor\" class=\"mt-4 mb-4\">\n      <dashboard-result :result=\"result\"></dashboard-result>\n    </div>\n    <div v-if=\"showEditor\">\n      <edit-dashboard\n        :dashboardId=\"dashboard._id\"\n        :code=\"code\"\n        :currentDescription=\"description\"\n        :currentTitle=\"title\"\n        @close=\"showEditor=false;\"\n        @update=\"updateCode\"></edit-dashboard>\n    </div>\n    \n  </div>\n  <div v-if=\"!dashboard && status === 'loaded'\">\n    No dashboard with the given id could be found.\n  </div>\n</div>";
+module.exports = "<div class=\"dashboard px-1\">\n  <div v-if=\"status === 'loading'\" class=\"max-w-5xl mx-auto text-center\">\n    <img src=\"images/loader.gif\" class=\"inline\">\n  </div>\n  <div v-if=\"dashboard && status === 'loaded'\" class=\"max-w-5xl mx-auto\">\n    <div class=\"flex items-center w-full\">\n      <h2 class=\"mt-4 mb-4 text-gray-900 font-semibold text-xl grow shrink\">{{title}}</h2>\n      <div>\n        <button\n          v-if=\"!showEditor\"\n          @click=\"showEditor = true\"\n          type=\"button\"\n          class=\"rounded-md bg-teal-600 px-2.5 py-1.5 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\">\n          <img src=\"images/edit.svg\" class=\"inline h-[1em]\" /> Edit\n        </button>\n      </div>\n    </div>\n    <div v-if=\"!showEditor\" class=\"mt-4 mb-4\">\n      <dashboard-result :result=\"result\"></dashboard-result>\n    </div>\n    <div v-if=\"showEditor\">\n      <edit-dashboard\n        :dashboardId=\"dashboard._id\"\n        :code=\"code\"\n        :currentDescription=\"description\"\n        :currentTitle=\"title\"\n        @close=\"showEditor=false;\"\n        @update=\"updateCode\"></edit-dashboard>\n    </div>\n    \n  </div>\n  <div v-if=\"!dashboard && status === 'loaded'\">\n    No dashboard with the given id could be found.\n  </div>\n</div>\n";
 
 /***/ }),
 

package/frontend/public/tw.css

@@ -1227,11 +1227,6 @@ video {
   color: rgb(153 27 27 / var(--tw-text-opacity));
 }
 
-.text-sky-600 {
-  --tw-text-opacity: 1;
-  color: rgb(2 132 199 / var(--tw-text-opacity));
-}
-
 .text-sky-800 {
   --tw-text-opacity: 1;
   color: rgb(7 89 133 / var(--tw-text-opacity));

package/frontend/src/dashboard/dashboard.html

@@ -1,5 +1,8 @@
 <div class="dashboard px-1">
-  <div v-if="dashboard" class="max-w-5xl mx-auto">
+  <div v-if="status === 'loading'" class="max-w-5xl mx-auto text-center">
+    <img src="images/loader.gif" class="inline mt-10">
+  </div>
+  <div v-if="dashboard && status === 'loaded'" class="max-w-5xl mx-auto">
     <div class="flex items-center w-full">
       <h2 class="mt-4 mb-4 text-gray-900 font-semibold text-xl grow shrink">{{title}}</h2>
       <div>
@@ -29,4 +32,4 @@
   <div v-if="!dashboard && status === 'loaded'">
     No dashboard with the given id could be found.
   </div>
-</div>
+</div>

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

@@ -1,10 +1,13 @@
 <div class="document-details">
-  <document-property
-    :document="document"
-    :schemaPaths="schemaPaths"
-    :editting="editting"
-    :changes="changes"
-    :invalid="invalid"></document-property>
+  <div v-for="path in schemaPaths" class="value">
+    <document-property
+      :path="path"
+      :document="document"
+      :schemaPaths="schemaPaths"
+      :editting="editting"
+      :changes="changes"
+      :invalid="invalid"></document-property>
+  </div>
   <div v-for="path in virtuals" class="mb-2">
     <div class="p-1 mb-1 bg-slate-100">
       {{path.name}}

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

@@ -1,47 +1,45 @@
 <div>
-  <div v-for="path in schemaPaths" class="value">
-    <div class="relative path-key p-1 flex">
-      <div class="grow">
-        {{path.path}}
-        <span class="path-type">
-          ({{(path.instance || 'unknown').toLowerCase()}})
-        </span>
-      </div>
-      <div v-if="editting && path.instance === 'Date'" class="flex gap-1.5">
+  <div class="relative path-key p-1 flex">
+    <div class="grow">
+      {{path.path}}
+      <span class="path-type">
+        ({{(path.instance || 'unknown').toLowerCase()}})
+      </span>
+    </div>
+    <div v-if="editting && path.instance === 'Date'" class="flex gap-1.5">
+      <div
+        @click="dateType = 'picker'"
+        :class="dateType === 'picker' ? 'bg-teal-600' : ''"
+        class="self-stretch px-2 py-1 rounded-sm justify-center items-center gap-1.5 flex cursor-pointer">
         <div
-          @click="dateType = 'picker'"
-          :class="dateType === 'picker' ? 'bg-white' : ''"
-          class="self-stretch px-2 py-1 rounded-sm justify-center items-center gap-1.5 flex cursor-pointer">
-          <div
-            :class="dateType === 'picker' ? 'text-sky-600' : 'text-black'"
-            class="text-xs font-medium font-['Lato'] capitalize leading-tight">
-            Date Picker
-          </div>
+          :class="dateType === 'picker' ? 'text-white' : ''"
+          class="text-xs font-medium font-['Lato'] capitalize leading-tight">
+          Date Picker
         </div>
+      </div>
+      <div
+        @click="dateType = 'iso'"
+        :class="dateType === 'iso' ? 'bg-teal-600' : ''"
+        class="self-stretch px-2 py-1 rounded-sm justify-center items-center gap-1.5 flex cursor-pointer">
         <div
-          @click="dateType = 'iso'"
-          :class="dateType === 'iso' ? 'bg-white' : ''"
-          class="self-stretch px-2 py-1 rounded-sm justify-center items-center gap-1.5 flex cursor-pointer">
-          <div
-            :class="dateType === 'iso' ? 'text-sky-600' : 'text-black'"
-            class="text-xs font-medium font-['Lato'] capitalize leading-tight">
-            ISO String
-          </div>
+          :class="dateType === 'iso' ? 'text-white' : ''"
+          class="text-xs font-medium font-['Lato'] capitalize leading-tight">
+          ISO String
         </div>
       </div>
     </div>
-    <div v-if="editting && path.path !== '_id'" class="pl-1">
-      <component
-        :is="getEditComponentForPath(path)"
-        :value="getEditValueForPath(path)"
-        :format="dateType"
-        @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-if="editting && path.path !== '_id'" class="pl-1">
+    <component
+      :is="getEditComponentForPath(path)"
+      :value="getEditValueForPath(path)"
+      :format="dateType"
+      @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>

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

@@ -14,7 +14,7 @@ module.exports = app => app.component('document-property', {
       dateType: 'picker' // picker, iso
     }
   },
-  props: ['document', 'schemaPaths', 'editting', 'changes', 'invalid'],
+  props: ['path', 'document', 'schemaPaths', 'editting', 'changes', 'invalid'],
   methods: {
     getComponentForPath(schemaPath) {
       if (schemaPath.instance === 'Array') {

package/package.json

@@ -1,13 +1,12 @@
 {
   "name": "@mongoosejs/studio",
-  "version": "0.0.36",
+  "version": "0.0.38",
   "dependencies": {
     "archetype": "0.13.0",
     "csv-stringify": "6.3.0",
     "ejson": "^2.2.3",
     "extrovert": "0.0.24",
     "node-inspect-extracted": "3.x",
-    "openai": "3.2.1",
     "vanillatoasts": "^1.6.0"
   },
   "peerDependencies": {

package/backend/actions/Model/createChart.js

@@ -1,60 +0,0 @@
-'use strict';
-
-const Archetype = require('archetype');
-const { Configuration, OpenAIApi } = require('openai');
-
-const apiKey = process.env.OPEN_AI_KEY;
-
-let openai;
-if (apiKey) {
-  const configuration = new Configuration({
-    apiKey
-  });
-  openai = new OpenAIApi(configuration);
-}
-
-const prePrompt = `
-You are a software developer answering user queries using Mongoose.
-Write Node.js code using Mongoose that answers the user's query.
-Do not write any import statements.
-
-Input:
-How many users where created yesterday?
-Output:
-const yesterday = new Date();
-yesterday.setHours(0, 0, 0);
-yesterday.setDate(yesterday.getDate() - 1);
-await User.countDocuments({ createdAt: { $gte: yesterday } });
-`.trim();
-
-const CreateChartParams = new Archetype({
-  description: {
-    $type: 'string',
-    $required: true
-  }
-}).compile('CreateChartParams');
-
-module.exports = ({ db }) => async function createChart(params) {
-  const { description } = new CreateChartParams(params);
-
-  const response = await openai.createChatCompletion({
-    model: 'gpt-4',
-    messages: [
-      {
-        role: 'system',
-        content: prePrompt
-      },
-      {
-        role: 'user',
-        content: description
-      }
-    ],
-    temperature: 0.1
-  });
-
-  console.log('F', response.data.choices[0].message.content);
-
-  return {
-    content: response.data.choices[0].message.content
-  };
-};

package/frontend/src/charts/charts.css

@@ -1,17 +0,0 @@
-.charts {
-  padding: 10px;
-}
-
-.charts .chart-description textarea {
-  width: 100%;
-  height: 4em;
-  border-radius: 4px;
-  border: 1px solid #ddd;
-  margin-top: 0.5em;
-  padding: 0.5em;
-  line-height: 1.5em;
-}
-
-.charts .chart-description button {
-  margin-top: 0.5em;
-}

package/frontend/src/charts/charts.html

@@ -1,14 +0,0 @@
-<div class="charts">
-  <h1>Charts</h1>
-  <div>
-    Describe your chart
-  </div>
-  <div class="chart-description">
-    <textarea
-      v-model="description"
-      placeholder="Please create a bar chart showing users createdAt per day" />
-    <div>
-      <async-button @click="createChart">Create Chart</async-button>
-    </div>
-  </div>
-</div>

package/frontend/src/charts/charts.js

@@ -1,19 +0,0 @@
-'use strict';
-
-const api = require('../api');
-const template = require('./charts.html');
-
-const appendCSS = require('../appendCSS');
-
-appendCSS(require('./charts.css'));
-
-module.exports = app => app.component('charts', {
-  template: template,
-  data: () => ({ description: '', code: '' }),
-  methods: {
-    async createChart() {
-      const data = await api.Model.createChart({ description: this.description });
-      this.code = data.content;
-    }
-  }
-});