@mongoosejs/studio 0.0.127 → 0.0.129

package/frontend/public/tw.css

@@ -618,6 +618,15 @@ video {
   inset: 0px;
 }
 
+.inset-y-0 {
+  top: 0px;
+  bottom: 0px;
+}
+
+.left-0 {
+  left: 0px;
+}
+
 .right-0 {
   right: 0px;
 }
@@ -662,6 +671,10 @@ video {
   z-index: 50;
 }
 
+.z-\[100\] {
+  z-index: 100;
+}
+
 .z-\[9999\] {
   z-index: 9999;
 }
@@ -727,10 +740,18 @@ video {
   margin-bottom: 0.5rem;
 }
 
+.mb-3 {
+  margin-bottom: 0.75rem;
+}
+
 .mb-4 {
   margin-bottom: 1rem;
 }
 
+.mb-6 {
+  margin-bottom: 1.5rem;
+}
+
 .ml-1 {
   margin-left: 0.25rem;
 }
@@ -962,6 +983,10 @@ video {
   width: 1.25rem;
 }
 
+.w-52 {
+  width: 13rem;
+}
+
 .w-6 {
   width: 1.5rem;
 }
@@ -986,6 +1011,10 @@ video {
   min-width: 0px;
 }
 
+.min-w-\[140px\] {
+  min-width: 140px;
+}
+
 .min-w-full {
   min-width: 100%;
 }
@@ -1052,6 +1081,21 @@ video {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.rotate-0 {
+  --tw-rotate: 0deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.rotate-180 {
+  --tw-rotate: 180deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.rotate-90 {
+  --tw-rotate: 90deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .transform {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
@@ -1104,6 +1148,10 @@ video {
   flex-direction: column;
 }
 
+.flex-wrap {
+  flex-wrap: wrap;
+}
+
 .items-start {
   align-items: flex-start;
 }
@@ -1253,10 +1301,18 @@ video {
   white-space: nowrap;
 }
 
+.whitespace-pre {
+  white-space: pre;
+}
+
 .whitespace-pre-wrap {
   white-space: pre-wrap;
 }
 
+.break-words {
+  overflow-wrap: break-word;
+}
+
 .rounded {
   border-radius: 0.25rem;
 }
@@ -1281,16 +1337,36 @@ video {
   border-radius: 0.125rem;
 }
 
+.rounded-l-lg {
+  border-top-left-radius: 0.5rem;
+  border-bottom-left-radius: 0.5rem;
+}
+
 .rounded-l-md {
   border-top-left-radius: 0.375rem;
   border-bottom-left-radius: 0.375rem;
 }
 
+.rounded-l-none {
+  border-top-left-radius: 0px;
+  border-bottom-left-radius: 0px;
+}
+
+.rounded-r-lg {
+  border-top-right-radius: 0.5rem;
+  border-bottom-right-radius: 0.5rem;
+}
+
 .rounded-r-md {
   border-top-right-radius: 0.375rem;
   border-bottom-right-radius: 0.375rem;
 }
 
+.rounded-r-none {
+  border-top-right-radius: 0px;
+  border-bottom-right-radius: 0px;
+}
+
 .border {
   border-width: 1px;
 }
@@ -1311,6 +1387,10 @@ video {
   border-right-width: 1px;
 }
 
+.border-r-0 {
+  border-right-width: 0px;
+}
+
 .border-t {
   border-top-width: 1px;
 }
@@ -1319,6 +1399,11 @@ video {
   border-style: none;
 }
 
+.border-blue-300 {
+  --tw-border-opacity: 1;
+  border-color: rgb(147 197 253 / var(--tw-border-opacity));
+}
+
 .border-gray-100 {
   --tw-border-opacity: 1;
   border-color: rgb(243 244 246 / var(--tw-border-opacity));
@@ -1334,6 +1419,11 @@ video {
   border-color: rgb(209 213 219 / var(--tw-border-opacity));
 }
 
+.border-red-500 {
+  --tw-border-opacity: 1;
+  border-color: rgb(239 68 68 / var(--tw-border-opacity));
+}
+
 .border-transparent {
   border-color: transparent;
 }
@@ -1348,11 +1438,21 @@ video {
   background-color: rgb(0 0 0 / var(--tw-bg-opacity));
 }
 
+.bg-blue-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(219 234 254 / var(--tw-bg-opacity));
+}
+
 .bg-blue-200 {
   --tw-bg-opacity: 1;
   background-color: rgb(191 219 254 / var(--tw-bg-opacity));
 }
 
+.bg-blue-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(239 246 255 / var(--tw-bg-opacity));
+}
+
 .bg-blue-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(59 130 246 / var(--tw-bg-opacity));
@@ -1453,9 +1553,9 @@ video {
   background-color: rgb(220 38 38 / var(--tw-bg-opacity));
 }
 
-.bg-slate-100 {
+.bg-slate-50 {
   --tw-bg-opacity: 1;
-  background-color: rgb(241 245 249 / var(--tw-bg-opacity));
+  background-color: rgb(248 250 252 / var(--tw-bg-opacity));
 }
 
 .bg-slate-500 {
@@ -1560,6 +1660,16 @@ video {
   padding-right: 1rem;
 }
 
+.py-0 {
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+
+.py-0\.5 {
+  padding-top: 0.125rem;
+  padding-bottom: 0.125rem;
+}
+
 .py-1 {
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
@@ -1613,6 +1723,10 @@ video {
   padding-left: 0.25rem;
 }
 
+.pl-10 {
+  padding-left: 2.5rem;
+}
+
 .pl-2 {
   padding-left: 0.5rem;
 }
@@ -1649,6 +1763,10 @@ video {
   padding-top: 0.25rem;
 }
 
+.pt-4 {
+  padding-top: 1rem;
+}
+
 .pt-\[1px\] {
   padding-top: 1px;
 }
@@ -1741,6 +1859,16 @@ video {
   color: rgb(0 0 0 / var(--tw-text-opacity));
 }
 
+.text-blue-600 {
+  --tw-text-opacity: 1;
+  color: rgb(37 99 235 / var(--tw-text-opacity));
+}
+
+.text-blue-800 {
+  --tw-text-opacity: 1;
+  color: rgb(30 64 175 / var(--tw-text-opacity));
+}
+
 .text-forest-green-500 {
   --tw-text-opacity: 1;
   color: rgb(0 242 58 / var(--tw-text-opacity));
@@ -1761,11 +1889,21 @@ video {
   color: rgb(107 114 128 / var(--tw-text-opacity));
 }
 
+.text-gray-600 {
+  --tw-text-opacity: 1;
+  color: rgb(75 85 99 / var(--tw-text-opacity));
+}
+
 .text-gray-700 {
   --tw-text-opacity: 1;
   color: rgb(55 65 81 / var(--tw-text-opacity));
 }
 
+.text-gray-800 {
+  --tw-text-opacity: 1;
+  color: rgb(31 41 55 / var(--tw-text-opacity));
+}
+
 .text-gray-900 {
   --tw-text-opacity: 1;
   color: rgb(17 24 39 / var(--tw-text-opacity));
@@ -1776,11 +1914,21 @@ video {
   color: rgb(21 128 61 / var(--tw-text-opacity));
 }
 
+.text-purple-600 {
+  --tw-text-opacity: 1;
+  color: rgb(147 51 234 / var(--tw-text-opacity));
+}
+
 .text-red-400 {
   --tw-text-opacity: 1;
   color: rgb(248 113 113 / var(--tw-text-opacity));
 }
 
+.text-red-600 {
+  --tw-text-opacity: 1;
+  color: rgb(220 38 38 / var(--tw-text-opacity));
+}
+
 .text-red-700 {
   --tw-text-opacity: 1;
   color: rgb(185 28 28 / var(--tw-text-opacity));
@@ -1896,6 +2044,11 @@ video {
   --tw-ring-inset: inset;
 }
 
+.ring-black {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(0 0 0 / var(--tw-ring-opacity));
+}
+
 .ring-black\/5 {
   --tw-ring-color: rgb(0 0 0 / 0.05);
 }
@@ -1917,6 +2070,10 @@ video {
   --tw-ring-color: rgb(22 163 74 / 0.2);
 }
 
+.ring-opacity-5 {
+  --tw-ring-opacity: 0.05;
+}
+
 .filter {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
@@ -2034,6 +2191,11 @@ video {
   background-color: rgb(75 85 99 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-green-100:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(220 252 231 / var(--tw-bg-opacity));
+}
+
 .hover\:bg-green-300:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(134 239 172 / var(--tw-bg-opacity));
@@ -2049,6 +2211,21 @@ video {
   background-color: rgb(22 163 74 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-green-700:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(21 128 61 / var(--tw-bg-opacity));
+}
+
+.hover\:bg-pink-100:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(252 231 243 / var(--tw-bg-opacity));
+}
+
+.hover\:bg-red-100:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 226 226 / var(--tw-bg-opacity));
+}
+
 .hover\:bg-red-500:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(239 68 68 / var(--tw-bg-opacity));
@@ -2059,6 +2236,11 @@ video {
   background-color: rgb(220 38 38 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-slate-100:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(241 245 249 / var(--tw-bg-opacity));
+}
+
 .hover\:bg-slate-400:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(148 163 184 / var(--tw-bg-opacity));
@@ -2099,6 +2281,11 @@ video {
   background-color: rgb(220 73 73 / var(--tw-bg-opacity));
 }
 
+.hover\:text-blue-800:hover {
+  --tw-text-opacity: 1;
+  color: rgb(30 64 175 / var(--tw-text-opacity));
+}
+
 .hover\:text-gray-700:hover {
   --tw-text-opacity: 1;
   color: rgb(55 65 81 / var(--tw-text-opacity));
@@ -2113,6 +2300,10 @@ video {
   z-index: 10;
 }
 
+.focus\:border-transparent:focus {
+  border-color: transparent;
+}
+
 .focus\:outline-none:focus {
   outline: 2px solid transparent;
   outline-offset: 2px;
@@ -2176,6 +2367,11 @@ video {
   --tw-ring-color: rgb(75 85 99 / var(--tw-ring-opacity));
 }
 
+.focus\:ring-green-500:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(34 197 94 / var(--tw-ring-opacity));
+}
+
 .focus\:ring-red-500:focus {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(239 68 68 / var(--tw-ring-opacity));
@@ -2261,6 +2457,10 @@ video {
   outline-color: #00a8a5;
 }
 
+.focus-visible\:outline-ultramarine-500:focus-visible {
+  outline-color: #3f53ff;
+}
+
 .focus-visible\:outline-ultramarine-600:focus-visible {
   outline-color: #1823ff;
 }
@@ -2289,6 +2489,10 @@ video {
   color: rgb(209 213 219 / var(--tw-text-opacity));
 }
 
+.disabled\:opacity-50:disabled {
+  opacity: 0.5;
+}
+
 @media (min-width: 640px) {
   .sm\:-mx-6 {
     margin-left: -1.5rem;
@@ -2383,9 +2587,22 @@ video {
     display: block;
   }
 
+  .md\:flex {
+    display: flex;
+  }
+
   .md\:hidden {
     display: none;
   }
+
+  .md\:gap-3 {
+    gap: 0.75rem;
+  }
+
+  .md\:px-0 {
+    padding-left: 0px;
+    padding-right: 0px;
+  }
 }
 
 @media (min-width: 1024px) {

package/frontend/src/api.js

@@ -69,6 +69,9 @@ if (window.MONGOOSE_STUDIO_CONFIG.isLambda) {
     }
   };
   exports.Model = {
+    addField(params) {
+      return client.post('', { action: 'Model.addField', ...params }).then(res => res.data);
+    },
     createChart(params) {
       return client.post('', { action: 'Model.createChart', ...params }).then(res => res.data);
     },
@@ -182,6 +185,9 @@ if (window.MONGOOSE_STUDIO_CONFIG.isLambda) {
     }
   };
   exports.Model = {
+    addField(params) {
+      return client.post('/Model/addField', params).then(res => res.data);
+    },
     createChart: function(params) {
       return client.post('/Model/createChart', params).then(res => res.data);
     },

package/frontend/src/document/document.css

@@ -7,6 +7,14 @@
 
 .document .document-menu {
   display: flex;
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  background-color: white;
+  border-radius: 5px;
+  padding: 15px 15px;
+  margin: -15px 0 15px 0;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 
 .document .document-menu .left {

package/frontend/src/document/document.html

@@ -1,19 +1,43 @@
-<div class="document">
-  <div class="document-menu">
-    <div class="left">
+<div class="document px-1 md:px-0">
+  <div class="flex justify-between">
+    <div class="flex">
       <button
         @click="$router.push('/model/' + this.model)"
-        class="rounded-md bg-gray-400 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">
+        class="mr-2 rounded-md bg-gray-400 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">
         &lsaquo; Back
       </button>
+      <button
+        @click="viewMode = 'fields'"
+        :class="viewMode === 'fields'
+          ? 'bg-blue-600 text-white z-10'
+          : 'bg-gray-200 text-gray-700 hover:bg-gray-300'"
+        class="px-4 py-2 text-sm font-medium focus:outline-none focus:ring-2 focus:ring-blue-500 flex items-center gap-2 border border-gray-300 border-r-0 rounded-l-lg rounded-r-none"
+      >
+        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16"></path>
+        </svg>
+        Fields
+      </button>
+      <button
+        @click="viewMode = 'json'"
+        :class="viewMode === 'json'
+          ? 'bg-blue-600 text-white z-10'
+          : 'bg-gray-200 text-gray-700 hover:bg-gray-300'"
+        class="px-4 py-2 text-sm font-medium focus:outline-none focus:ring-2 focus:ring-blue-500 flex items-center gap-2 border border-gray-300 rounded-r-lg rounded-l-none"
+      >
+        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path>
+        </svg>
+        JSON
+      </button>
     </div>
 
-    <div class="right">
+    <div class="gap-2 hidden md:flex">
       <button
         v-if="!editting"
         @click="editting = true"
-        :disabled="!canManipulate"
-        :class="{'cursor-not-allowed opacity-50': !canManipulate}"
+        :disabled="!canEdit"
+        :class="{'cursor-not-allowed opacity-50': !canEdit}"
         type="button"
         class="rounded-md bg-ultramarine-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-600">
         <img src="images/edit.svg" class="inline" /> Edit
@@ -51,14 +75,84 @@
         <img src="images/duplicate.svg" class="inline" /> Clone
       </button>
     </div>
+    <div class="md:hidden flex items-center">
+      <div class="relative">
+        <button
+          @click="mobileMenuOpen = !mobileMenuOpen"
+          type="button"
+          class="inline-flex items-center justify-center rounded-md bg-gray-200 px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+          aria-expanded="mobileMenuOpen"
+          aria-label="Open menu"
+        >
+          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                  d="M4 6h16M4 12h16M4 18h16"></path>
+          </svg>
+        </button>
+        <div
+          v-show="mobileMenuOpen"
+          @click.away="mobileMenuOpen = false"
+          class="origin-top-right absolute right-0 mt-2 w-52 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 z-50"
+        >
+          <div class="py-1 flex flex-col">
+            <button
+              v-if="!editting"
+              @click="editting = true; mobileMenuOpen = false"
+              :disabled="!canEdit"
+              :class="['flex items-center px-4 py-2 text-sm text-gray-700', !canEdit ? 'cursor-not-allowed opacity-50' : 'hover:bg-ultramarine-100']"
+              type="button"
+            >
+              <img src="images/edit.svg" class="inline mr-2" /> Edit
+            </button>
+            <button
+              v-if="editting"
+              @click="editting = false; mobileMenuOpen = false"
+              type="button"
+              class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-slate-100"
+            >
+              &times; Cancel
+            </button>
+            <button
+              v-if="editting"
+              :disabled="!canManipulate"
+              :class="['flex items-center px-4 py-2 text-sm text-gray-700', !canManipulate ? 'cursor-not-allowed opacity-50' : 'hover:bg-green-100']"
+              @click="shouldShowConfirmModal=true; mobileMenuOpen = false"
+              type="button"
+            >
+              <img src="images/save.svg" class="inline mr-2" /> Save
+            </button>
+            <button
+              @click="shouldShowDeleteModal=true; mobileMenuOpen = false"
+              :disabled="!canManipulate"
+              :class="['flex items-center px-4 py-2 text-sm text-gray-700', !canManipulate ? 'cursor-not-allowed opacity-50' : 'hover:bg-red-100']"
+              type="button"
+            >
+              <img src="images/delete.svg" class="inline mr-2" /> Delete
+            </button>
+            <button
+              @click="shouldShowCloneModal=true; mobileMenuOpen = false"
+              :disabled="!canManipulate"
+              :class="['flex items-center px-4 py-2 text-sm text-gray-700', !canManipulate ? 'cursor-not-allowed opacity-50' : 'hover:bg-pink-100']"
+              type="button"
+            >
+              <img src="images/duplicate.svg" class="inline mr-2" /> Clone
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
   <div v-if="status === 'loaded'">
     <document-details
       :document="document"
       :schemaPaths="schemaPaths"
+      :virtualPaths="virtualPaths"
       :editting="editting"
       :changes="changes"
-      :invalid="invalid"></document-details>
+      :invalid="invalid"
+      :viewMode="viewMode"
+      @add-field="addField"
+      @view-mode-change="updateViewMode"></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

@@ -20,13 +20,16 @@ module.exports = app => app.component('document', {
     invalid: {},
     editting: false,
     virtuals: [],
+    virtualPaths: [],
+    mobileMenuOpen: false,
+    viewMode: 'fields',
     shouldShowConfirmModal: false,
     shouldShowDeleteModal: false,
     shouldShowCloneModal: false
   }),
   async mounted() {
     window.pageState = this;
-    const { doc, schemaPaths } = await api.Model.getDocument({ model: this.model, documentId: this.documentId });
+    const { doc, schemaPaths, virtualPaths } = await api.Model.getDocument({ model: this.model, documentId: this.documentId });
     window.doc = doc;
     this.document = doc;
     this.schemaPaths = Object.keys(schemaPaths).sort((k1, k2) => {
@@ -38,6 +41,7 @@ module.exports = app => app.component('document', {
       }
       return 0;
     }).map(key => schemaPaths[key]);
+    this.virtualPaths = virtualPaths || [];
     this.status = 'loaded';
   },
   computed: {
@@ -49,6 +53,9 @@ module.exports = app => app.component('document', {
         return false;
       }
       return !this.roles.includes('readonly');
+    },
+    canEdit() {
+      return this.canManipulate && this.viewMode === 'fields';
     }
   },
   methods: {
@@ -89,6 +96,32 @@ module.exports = app => app.component('document', {
     },
     showClonedDocument(doc) {
       this.$router.push({ path: `/model/${this.model}/document/${doc._id}` });
+    },
+    async addField(fieldData) {
+      const { doc } = await api.Model.addField({
+        model: this.model,
+        _id: this.document._id,
+        fieldName: fieldData.name,
+        fieldValue: fieldData.value
+      });
+      this.document = doc;
+
+      // Show success message
+      vanillatoast.create({
+        title: 'Field Added!',
+        text: `Field "${fieldData.name}" has been added to the document`,
+        type: 'success',
+        timeout: 3000,
+        positionClass: 'bottomRight'
+      });
+    },
+    updateViewMode(mode) {
+      this.viewMode = mode;
+      // Exit edit mode when switching to JSON view
+      if (mode === 'json' && this.editting) {
+        this.editting = false;
+        this.changes = {};
+      }
     }
   }
 });